Top 10 techniques to improve your website load time

Website load time still remains to be one of the top differentiating factors in the highly competitive e-commerce industry.

A recent research study by Akamai reports that:

• 47% of people expect a web page to load in 2 seconds or less.
• 40% will abandon a web page if it takes more than 3 seconds to load.
• Conversion rate increases by 74% when page load time improves from 8 to 2 seconds.

Website speed is a ranking factor and companies are trying to improve their page load time. Find your website’s speed using tools such as Pingdom, GTmetrix or Webpage test.

Upon noting down the key metrics related to your website speed results, start implementing the following best practices and improve your website’s loads time.

1. Reduce the number of HTTP Requests

80% of a webpage’s load time is spent on downloading the components of each page – images, videos, style sheets, etc. Each of these files will make a separate requests to the server to get information.

To find out how many HTTP requests your website makes, you can visit Pingdom and place your URL in the box and you will be able to find out the number of HTTP request your page calls for.

Following are some of the ways by which you can reduce the number of HTTP requests:

a. Use Expire Headers: A web server uses Expire headers to inform the web client to make use of the cached copy of images, style sheets, scripts, etc. until the time elapses. This will reduce the page load time as the webserver doesn’t have to load these files again.

b. Use CSS Sprites: If you use a lot of images on your webpage, then CSS sprites is the best way to reduce multiple server requests. By creating a CSS sprite, you can combine multiple images into one reducing the number of requests.

2. Use a Content Delivery Network (CDN)

The user’s proximity to the webserver determines the response time. When you have your content dispersed across geographies and is brought closer to the users, it improves the response time drastically even up to 50% by reducing latency.

Most CDNs are third-party paid services. Amazon CloudFront, Akamai Technologies, Azure, etc . are some of the commercial CDNs available. There are also free CDNs such as Bootstrap, CDN Incapsula, UPYUN, etc.

3. Enable browser caching

Ensure that cacheable resources like js, CSS files, media files, images, etc. expire frequently that can considerably bring down your page load time. To leverage browser caching, you need to edit your HTTP headers to set an expiry time for certain files. But you need to be careful while enabling browser caching because when you set the parameters too long on certain files, your users will not be able to get the fresh version of it after an update.

4. Use static files from your local path

It is better to have files hosted from a local path folder instead of calling it from cross-domain URL. To do that, go to URL and save the script with an appropriate name to your workplace and start hosting it from there.

For ex:

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js can be made

“../public/javascripts/angular_1.3.15.js”

5. Minify Files

It is better to eliminate extra spaces, indentation, line breaks, etc. in your code that in turn reduces the size of your file. Minified files take less time to load. You can minify your code using CSS minifying tools like YUI Compressor and JS minifying tools like JSMIN.

For ex:

If “angular_1.3.15.js” weighs 200 KB, the minified version of the same file “angular_1.3.15.min.js” will be somewhere around 14KB

6. Concatenate files

When you combine two or more files of similar functionality into one, you can bring down the average response time.

For ex:

When you have a list of files like add.js, sub.js, div.js, mul.js, it is better that you concatenate all of them together into a single file called “math.js or math.min.js”

7. Restrict your variables

Do not use unnecessary variables in your scripts. In node.js, “use strict” command is used at the beginning of each node.js file to restrict the use of unused variables or objects.

If there are similar commands available in your scripting language, it’s better to use them.

For example, the following scenarios can be avoided:

• You tend to initialize a variable but may fail to use it in your script.
• You tend to create new variables every time within the script. Instead, you can reuse existing variables instead of creating new ones every time.

8. Reduce the bandwidth through Compression

The average expected size of a page is 2MBs. Reduce the bandwidth of your pages using compression. Reducing bandwidth with tools like “Gzip” can reduce your load time by 70%.

For ex:

Instead of having a file called “geometry.min.js”, compress it into “geometry.min.js.gz”.

9. Reduce Cookie size

Data sent from the server is stored in the user’s browser called a cookie or HTTP cookie. HTTP cookies are used for a variety of reasons such as authentication, personalization, etc. Keeping cookie size as low as possible can encounter minimal load time. Most websites allow users to choose whether to accept cookies or not. Following are some of the ways to reduce your cookie size:

• Save only necessary information on cookies
• Use a session to store information
• Limit the cookie by domain name and protocol
• Put a short expiration time

10. Reduce the number of DOM Elements

The Document Object Model is an Application Programming Interface (API) for HTML and XML documents. A high number of DOM elements can be a reason for high load time. 500-700 DOM elements are acceptable.

Upon implementing the above-said recommendations, now measure your website speed using the same tool. I am sure, it has improved significantly. I am keen to learn from your techniques to improve the website’s loading speed.