We Optimized our Website to Load in under 3 Seconds & You can Do it too!
We Optimized our Website to Load in under 3 Seconds & You can Do it too!
Well, first of all, why would you like your website to load faster?
Simply because of two reasons – To enhance user experience and to make the website rank well on the search engine result pages.
Our attention spans are now shorter than ever and you can’t expect users to wait for more than 3 or 4 seconds (or even more) to look at your web page. They simply won’t be there for so long.
As per studies, 40% of people abandon a website that takes more than 3 seconds to load.
Obviously, you can’t give that ‘patience’ pill to everyone. So, the next best alternative is to make your website load incredibly fast.
Major search engines like Google, now recognize page loading speed as one of the uppermost ranking factors regarding SEO.
So, how do you boost your site speed to load in < 3 seconds?
To help you out, here are some of the tips and tricks we used to boost the speed of our own website.
Check your Website’s Speed
Before you begin, you must know how much time currently your website takes to load, is it running slow on desktop devices only or mobile or both.
There are some really good free tools like Google’s PageSpeed Insights, GTmetrix, and Pingdom which give you detailed information on how well your site loads, what are the culprit elements and suggest actions to speed up your site speed on different devices, etc.
Check your Web Hosting Plan
This point is important if you are not already using a good hosting plan.
A lot of people start off with a cheap hosting plan because their website is new and there is no big reason to put in a lot of money in getting a dedicated hosting plan.
However, as their website content grows it directly affects the website slowing it down proportionally.
So, if you are one of them, then go ahead and get a dedicated or a Virtual Private Server (VPS) web hosting plan.
Enable Browser Caching
Browser caching is a technique of storing some static files in the local browser for loading. In this way, the static files like images and HTML documents are not needed to be retrieved every time there is a new request.
However, it only works for repeat visitors as the first time visitors will not have a cached version of your site.
It is worth noting down that caching can sometimes avert displaying the latest updated contents on the website. So, the cache expiry duration must be set according to the frequency of updates on the site.
Use a Content Delivery Network (CDN)
A CDN is a group of optimized servers strategically placed across the globe to help deliver static content to end users much faster.
Here, what happens is when different users visit your site from different locations on the planet, they download files from the closest server as the bandwidth is spread across many servers all over the globe. This reduces the load on a single server and makes your website load faster even in cases of a steep rise in web traffic.
It works best when your website is accessed by users in various countries and the site has a lot of static elements such as audio files, images, videos, CSS files, etc.
Enable Gzip Compression
Ever used ZIP to compress files on your computer? Well, Gzip does exactly the same.
Gzip compression method compresses or deflates your website’s files into zip files which are easier to be sent to the browser and then the browser then unzips the content and present to the user.
This method substantially boosts page speed by minimizing the number of HTTP requests and the response time.
Enable HTTP Keep Alive
Whenever a user opens a file on your website, the browser requests the server for permission to download the file and it does so for each and every file individually.
So, every time a user opens a file (HTTP request), the browser creates a new connection with the server for downloading the resource and once the resource is downloaded the browser and the server will close that connection and open a new one for the next request.
This process unnecessarily eats up a lot of processing power, memory and bandwidth.
Now when you enable Keep-alive, the previously opened connections will remain open even after the request is completed. It simply asks the server to let the browser download multiple files at the same time.
Fix the Broken Links
If your content has broken links it does not affect your site speed, however, if there are broken links in your image URLs, CSS or JavaScript then there is a problem.
So, a ‘Best-Practice’ would be to regularly scan your website for broken links and fix them as soon as you find them.
Tools like Online Broken Link Checker and WordPress Broken Link Checker can make your work really easy.
Avoid Too Many Redirects
Redirects trigger an additional HTTP request-response cycle and it takes a lot of time for the browser to reach the correct version of a page and it delays the page rendering significantly.
And if you have too many, your website will be disastrously slow.
So try to make the links as precise as possible to reduce or eliminate redirects.
Minify CSS and JavaScript
If your website has a lot of JavaScript and CSS files, then there will be a lot of HTTP requests as well. This will put brakes to your site speed.
In addition to enabling the Keep-Alive, if you consider minifying your JavaScript and CSS files, it will give a powerful boost to the site speed.
What you need to do here is to put all your JavaScript files into one single JavaScript file and all CSS files into one CSS file.
This reduces the total number of JavaScript and CSS files and cuts down the number of HTTP requests giving your site a speed boost.
Critical Path for CSS and JavaScript
For optimizing your page better you can use the critical portion of CSS and JS in the header section, i.e., the section of CSS and JS that is relevant to UI rendering.
This makes the pages load faster as they don’t wait for the all the JavaScript and CSS codes. These can be loaded later after the page loading is complete.
Also, move all CSS and JavaScript codes that are irrelevant in loading the first fold of the site from the top and place them into the footer.
Minimize External Scripts
If your website has external scripts in the form of JavaScript codes, they make HTTP requests every time your web pages load.
External scripts can be external pop-up boxes, website analytics codes, social media boxes, external fonts, etc. The more you have these pieces of stuff, the slower your site will be.
While you should not eliminate all the external scripts (you definitely need some of them) you should reduce the number.
Keep only the important ones and say goodbye to the rest.
Use Image Sprites
Many Images/Icons loaded individually will make many requests to the server to load. These multiple requests increase load time.
Using image sprites (combining multiple images in one file) we can reduce extra render-blocking round trips.
Usually, icons and buttons are combined into sprites. However, you can also combine all the frames of an animated image or graphics into a single sprite (like the image above).
Well, that’s the list.
So, go ahead and try these out and let us know.
If you are looking to create your own website or application, we have got the best people to help you!