Is your web site too slow? Find out where it could have gone wrong and to avoid the common pitfalls

Is your website too slow? Then, it is time to take some action to resolve this matter. Even it’s not the case; you might be curious to find out the common pitfalls developers make that affects page load time.

Why is page load time important?

The load time of a page is directly related to the website’s perceived performance.

When it comes to websites, If it takes more than 3 seconds to load, you will lose half of your visitors before they even arrive on your website.

• Visibility — Google considers the page load time when ranking your website in search results. Therefore, your web page's load time influences how easily users can find it on the web.
• Conversion — The faster your page loads, the more engagement you will have from the user. Slow sites, kill conversions. Users will be reluctant to use your site and perform Call-To-Actions (CTAs) if your web page so much time to load. It leads to user frustration, and as a result, they will leave your site without buying your product or consuming your service.
• Usability — The better your website load time is, the more satisfied the user will be. As a result, customer retention would be higher.

Let’s look at a few examples based on research done by HubSpot.

• If Yahoo reduces page load time by 0.4 seconds, traffic may increase by 9%.
• A page slowdown of 1 second could cost Amazon $1.6 billion in sales each year.
• 2-second delay of the Bing search would lead to, 4.3% loss in revenue per visitor, 3.75% reduction in clicks, and a 1.8% drop off in queries.

According to the above facts, you can see how important page load time is for your website.

Factors that affect page load time and tips and tricks to optimize

Many factors affect page load time. Out of those, I’ve listed the top five mistakes I’ve come across while building websites.

1. A large number of HTTP requests

HTTP requests are made whenever the browser needs to fetch a file, page, or image from a web server. You can monitor how your applications make many network requests through the Network tab in Developer Tools.

The browser usually limits the number of simultaneous requests between 4–8. Therefore, you cannot make a large number of requests in parallel either.

Research done by Yahoo states that 80% of your application load time depends on HTTP requests. Reducing the number of HTTP requests will increase your page load time.

You can do the following to reduce the number of HTTP requests.

• Combining CSS/JS files — Your CSS files, as well as JS files, can be combined into one file rather than retrieving several files from the server. Since all CSS files are render-blocking, reducing the CSS files will improve page load time drastically.
• Load only what is needed — Instead of loading all the images of the application at once, load them only when they are needed. This method is called Lazy Loading or On-demand loading. Instead of loading an image at the bottom of the page, when the user arrives at the site, you can load it when the user scrolls to that particular location.
• Enable browser caching — You can allow caching static images or content of your site, which will not change often. When a user visits the site for the second time, the cache can load this content without having to send a new HTTP request to the server. This makes the loading of content faster.
• Support HTTP/2 in your server — With HTTP/2, only one connection is made from the browser to the server to load a website, and multiple requests are allowed at the same time. It is way efficient than creating a new connection for each resource.

2. Absence of CDN

If there is no CDN for your website, load time increases when the user’s physical location is far from the server. These latencies get visible since it affects all the HTTP requests to the server.

Using a CDN will improve page load time.

Using a CDN will enable users to fetch the resources required for the webpage from a server nearest to their location. Servers in a CDN are distributed across various geographical locations. This method may be a bit expensive, but it is an effective way to improve your application load time.

For example, if your original server is in California, your Content Delivery Network may look like this.

However, it’s also important to properly configure CDN to cache content with the right Time To Live (TTL) values for efficient usage.

But what happens for the very first request or once the CDN cache gets expired, since it might travel to the origin to fetch the data?

This is where things get interesting. If you are operating on a scale where the impact of loading data from the origin is high, you could consider warming-up your CDN once in a while to repopulate the cache.

Also, keep in mind, most of the CDN services owns their network backbone, where they can provide higher Quality of Service compared to the internet. This will reduce packet loss resulting in faster loading times.