8 tips on website load speed optimization. Part 1.
Performance optimization is a hot button topic for any website owner.
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.
1. Compress the files
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.
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 here.
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.
There are several plugins which you can use for minifying your files:
- WP Rocket
- BWP minify (for WordPress only)
You will need to install the preferred plugin and set it up according to the guidelines.
Here are several methods of dealing with the issue.
- Use specialized plugins
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.
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
Remember though that asynchronous scripts would not execute in a specific order. As well, they should not use document.write.
4. Enable browser caching
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:
- WordPress: W3 Total Cache
- Static HTML sites: enable cache in .htaccess file
- Drupal: Varnish
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.