8 Tips on Website Load Speed Optimization. Part 1

On one hand, there are users that are not willing to wait longer than 3 seconds, according to Google. On the other hand, there is Google itself that considers the site speed as one of the primary ranking factors. So if you want your website to generate conversions and have a good SEO ranking, you need to optimize its performance to deliver a superior user experience and delight Google.

Because every website is unique, there will be a unique set of bottlenecks that slow the performance down. However, all websites are built with a standard set of tools so there are several ways of optimizing the performance that will be applicable for any website. We have collected the top-8 recommendations and broke them down in two articles for easier read.

There may be thousands of files on your website and every file takes some time to load. The bigger the files are, the longer the loading time will be, thus, dragging the site performance down.

One of the best ways to deal with the issue is file compression. By minifying the files, you will speed up the site load and improve the performance significantly.

 

Before the actual compression, first, run the compression audit to see the uncompressed size of your page and compare it to the compressed result. To run an audit, go to GIDNetwork and enter the URL of your site. In the results, you will see the current size of your page and suggestions on possible compression.

 

After the audit, use Gzip to compress the files. According to Yahoo, Gzip is the most effective compression method which is capable of reducing the response size by 70%. This application locates similar strings of code on your site (mostly CSS, JavaScript and HTML) and replaces them, thus, making the file smaller.

 

There are a few ways to enable Gzip for your site:

• For W3 Total Cache: check the “Enable HTTP (gzip) compression.” box
• Enable Gzip in .htaccess file 
• Add this code <?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?> at the top of HTML/PHP file
• Use plugins to enable Gzip

And if your site already uses Gzip, you can check out the saved size. 

Every time your site downloads a certain element (i.e. image or script), an HTTP request is made for every element. So if your website is complex and has many components, you can imagine how many HTTP requests are made upon every site load.

 

In order to cut down the number of HTTP requests and boost the load speed, you can minify and combine your JavaScript and CSS files. In this way, you will reduce the file size and the actual number of files, thus, minimizing the number of HTTP requests.

 

The process of file minifying implies the removal of any whitespaces, extra line breaks or unnecessary pieces of code. And in case you have several JavaScript or CSS files, you can combine them into one. 

 

There are several plugins which you can use for minifying your files:

You will need to install the preferred plugin and set it up according to the guidelines.

 

 

Your browser may encounter a render-blocking external JavaScript file in the above-the-fold area of your page. This file will slow down the page load and thus will hurt the overall performance.

 

Here are several methods of dealing with the issue.

There are two most popular plugins that can help you get rid of blocking JS (and CSS): Autoptimize and W3 Total Cache. 

Autoptimize is simpler and W3 Total Cache demands a bit more work. The W3 Total Cache is mostly recommended for those users who already have experience with this plugin.

• Inline blocking JavaScript

As recommended by Google, you can inline the external blocking scripts content directly in the HTML document (upon the condition these scripts are small enough). This will eliminate the request latency and will fix the issue.

It is important to remember that inlining will increase the size of the HTML document, though, and the same script content may need to be inlined multiple times. To prevent the risk of hurting the performance, it’s recommended to stick with the small script inlining only.

• Use the async attribute

To make the JavaScript asynchronous and prevent it from blocking the parsing, use the async attribute on the external blocking scripts. Example: <script async src=”my.js”>

Remember though that asynchronous scripts would not execute in a specific order. As well, they should not use document.write.

Every time a user comes to your site, the browser will load its full content, including all images, stylesheets and more. Now, imagine how many times the users hit your site on a daily basis and how many times a browser has to load the same content again and again.

 

To speed up the content loading process for the returning users, enable caching for your site. In this way, the elements will be stored in a temporary database, waiting for their turn to be loaded. By using caching, you can reduce the load speed from 2.5 to 0.9 seconds, which sounds pretty impressive.

 

Note that caching will save load time for returning users only as first-time users will have an empty cache and will be loading your content for the first time ever. However, it is still recommended to enable a full browser cache to speed up the performance and provide a better user experience.

 

Tools to use for different websites:

As well, configure the settings on how long you want the content to be cached - for that, you can use this module.

 

In the next article, we will have a look at the remaining tips on optimizing your website - make sure to check it out.