MISTAKES DEVELOPERS DO THAT AFFECT PAGE LOADING TIME

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.

Image for post

Source

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.

Tip: Share your reusable components between projects using Bit (Github).

Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, collaborate as a team, speed delivery, and build apps that scale.

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Image for post

Example: exploring reusable React components shared on Bit.dev

3. Large file sizes and page size

Retrieving a large file or a page from the web server will consume a lot of time. Fetching a few such large files makes the page size large and makes the page load time more.

Image for post

JS file sizes of medium.com

Reducing file sizes by enabling compression can improve page load time.

Compressing files is the best way to reduce file sizes and improve load time. Gzip is commonly used to enable compression. Gzip locates similar code in your files and temporarily replaces them to make files smaller. Most web servers support Gzip compression.

Another compression scheme is available called Brotli compression, which you can also consider depending on your file types.

Enabling compression for your HTML or CSS files usually saves about 50% or 70% of the file size, resulting in less page load time and less bandwidth used.

You can further reduce the page load time by reducing the size of the images used in your application.

4. Loading all resources at the same time

Loading all your HTML, CSS, and JS files at the same time will increase page load time as rendering will get blocked until all these resources are loaded.

Loading JS files after other elements will improve page load time.

Defer JavaScript loading is a mechanism to load your large JS files after the other elements have been loaded. This method ensures that the rest of your content is loaded without any block by large JS files.

If you have an HTML site, you need to place a call to an external JS file (defer.js) before your </body> tag.

<script type="text/javascript">

 function downloadJSAtOnload() {

  var element = document.createElement("script");

  element.src = "defer.js";

  document.body.appendChild(element);

 }

 if (window.addEventListener)

  window.addEventListener("load", downloadJSAtOnload, false);

 else if (window.attachEvent)

  window.attachEvent("onload", downloadJSAtOnload);

 else window.onload = downloadJSAtOnload;

</script>

The above code says, “Wait for the entire document to load, then load the external defer.js file.”

5. A large number of redirects

Most of the time, we use redirects to handle moved or deleted pages to avoid broken links. However, more redirects mean more HTTP requests. This increases page load time drastically. Google advises site owners to eliminate redirects to improve load time, especially on mobile-first sites.

You can use a tool like Screaming Frog to identify all the redirects in your application. By analyzing this, you can clear up any unnecessary redirects.

When it comes to redirects, there are two types.

Server-side redirects — Fast and cachable

Client-side redirects — Slow and not cachable

It is best to avoid client-side redirects and keep server-side redirects at a minimum to optimize your web page load time.

Conclusion

Who doesn’t love a website that loads faster? I hope the article convince you enough regarding the importance of page load time.

If you are thinking of evaluating your website performance, there are many tools that you can use, such as Google Pagespeed Insights, Pingdom, YSlow, etc. These will give some insight into where your website falls behind.

The critical point here is to address the top concerns instead of looking to fix all the issues that are proposed by the evaluation tools.

After identifying the high-impact areas, you should take the relevant measures to improve your page load times for a better user experience.