How To Speed Up Your Page Loading Time 2022

In this article, we will share with you some tips to improve the speed of your web pages in order to optimize your SEO.

Which performance testing tools to use?

There are a lot of great tools out there, but we do have two preferences:

Both do virtually the same thing, but can work well together to obtain the best possible speed.

Optimize your images

Some time ago, we only had to make sure to compress our images, but now there are other things to think about when we want to optimize our images.

Efficiently encode images

The first step is still to use lossy compression techniques to reduce the file size of your images. This will reduce the size of your pages and speed up the loading time on mobile devices.

A free online tool that you can use for this is TinyPNG: https://tinypng.com/

Defer offscreen images

The second step is to load and show images only when we need them. This technique is called lazy-loading.

Let’s say you have 30 images on one of your web pages and we only see 8 when it is rendered. Without lazy-loading, all 30 images load.

With modern browsers, you can use the loading attribute on <img> elements:

<img src="image.jpg" alt="..." loading="lazy">

As we scroll, the images will load.

To see browsers compatibilities, you can use the website Can I Use.

Properly size images

This aspect is very important. If you need to display an 800×800 image, do not use a 2000×2000 image and change the width and height attributes to force the 800×800 dimension.

If you want to have a different format according to the dimensions of the screen (computer or tablet or cell phone), use responsive images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Serve images in next-gen formats

The last tip we can give you for images is to use the new formats.

There are 2 popular formats: WebP and AVIF. These offer better compression without decreasing the quality of your images.

If you have the right tools to get these formats, we definitely recommend using them.

For technical users, you can use the Google cwebp tool.

Minify CSS and JavaScript

Page speed is always about page size: the heavier your page is, the slower it is. Minifying files improve you page load performance.

Here is an example of a JavaScript file unminified:

(function($){

function addAttributeToBody() {
$('body').attr('data-body', 'hello');
}
addAttributeToBody();

})(jQuery);

Here is the minified version:

jQuery("body").attr("data-body","hello");

As you can see, we had 8 lines and now only 1 (66.12% compression, saving 0.08 kb). What if we had 5000 lines? We can decrease a lot the size of a file.

The process and the result is the same for CSS. We want to remove useless whitespaces and use smaller variable and function names.

There are free tools online you can use: Toptal CSS Minifier and Toptal JavaScript Minifier

Enable text compression

This is pretty simple to achieve and can boost a lot your score.

Compressing text will minimize total network bytes exchanged between your Web server and the visitor of your site.

There are two popular algorithms for text compression:

Both works great but GZIP is less efficient than Brotli. It is however easier to enable GZIP on popular Web server like NGINX and Apache.

How to know if your resources are compressed? You can use the network tab on the Google Chrome developer console:

The column to look for is Content-Encoding and if the content is empty, your text is not compressed.

Serve static assets with an efficient cache policy

HTTP caching policies reduce the frequency with which your visitors must re-download your site’s resources. This means that subsequent requests are faster because a copy of the files is stored on their device (cache).

It is very important to reduce the size of your pages before even thinking about caching. Each new visit still requires a download of the static assets.

To cache static resources, you must use the HTTP header Cache-Control. Multiple caching directives are available and you must follow these validation rules:

Caching directives are case-insensitive;
Directives are comma-separated;
There are some directives with an optional argument.

Eliminate render-blocking resources

A render-blocking resources is something that needs to be downloaded first before the content of the page can start rendering. That means that the user must wait without any feedback. Sometimes, people just leave your site because it takes too much time downloading the render-blocking resources (white page).

There are two main types of render-blocking resources:

script tag (JavaScript)
link tag (CSS)

JavaScript

For JavaScript, we recommend moving all your <scripts> at the bottom of your page, just before the closing </body> tag. Leave as less <scripts> as possible in the <head> of the document.

If your script is standalone, use the async attribute so your browser can fetch it in parallel. It will be evaluated as soon as it’s available. The execution order of multiple async scripts is not guaranteed.

If your script depends on the DOM fully loaded and must be executed in the order in which it appears in the document, use the defer attribute. The execution order is guaranteed.

CSS

Render-blocking stylesheets is more difficult to fix. If we blindly follow Google’s advice, our site will display in a strange way when loading, which is not a good user experience.

Most of the time, by optimizing all the recommendations except this one, you can get an excellent score. However, we do have 2 suggestions for you to improve this:

If you have a tiny stylesheet and you can inline all your CSS, go for it! This will remove your render-blocking resource.
For larger sites, make sure to use the right media attribute that match the user’s device specifically. all is considered render-blocking.