440 Views Wednesday May 20, 2020 | Filip Kunjadić - Ćulibrk

Optimize web page speed to improve Google Page Insight score

How to optimize web page speed? How hard it is will depend on the system that lays beneath the surface of your website. Therefore, a system that is quite simple is usually easier to optimize.

Before you start, it would be good to test your website and remember the score. The best way to test it using Google Page Insight, GTmetrix, and Pingdom Tools. Everything that lights up as "green" (90 - 100) in your results may be considered a good result. When your score is more "orange" (50 - 89) - you will need some improvements. On the other hand, if your score is "red" (0 - 49) you are in a dire need for some improvements.

So it is time to start now. The most important thing that I pay close attention to is website size. Larger the web page, slower the load time. In general, pages over 1MB tend to perform worse than pages that are around 500KB, But sometimes, we can not avoid large pages - a simple example is a store category page with 30 products. How can we avoid load there?

Working with large data with may queries and complex logic

This is one of the most critical points when it comes to your web page speed. It can also be the one that is hardest to improve. But how can you do it?

You can always try and use Redis (or products similar to it) in order to improve your database speed. Also, try to keep your queries as simple as possible and of course - index your database.

In the worst-case scenario, you can always increase your server memory size and CPU power to improve your score. You can even go as far as implementing multiple servers with load balancers. Of course, you can find out more about the workings of servers here.

Load only things that are most important, and load large assets later

Usually, the largest assets on your web page are images. Why wouldn't you load them afterward? You can find more about how to "lazy load" images on your website in this post. That method can easily improve your score by a lot.

Moving blocking resources to bottom of the page

Your Javascript should live at the bottom of the page. Here you can use JS to load your Google Web fonts after the page load. It can speed up your web page and it is easy to implement!

Avoiding an excessive DOM size and use combine & minify

I've seen this quite a few times. Pages with over 5.000 DOM elements. Please keep in mind that your browser needs some time to render all elements and "paint" them using CSS. It is best to keep your DOM as simple as possible as well as your CSS. Less work for browser, better the score!

Another thing which I've also seen quite a few times, people using none minified CSS files (plural). Combining your CSS files into one large file and minifying it can be an easy job and it can improve your web page score! The same rule applies to Javascript files.

Use compressions and server cache policy

I am going to show you how you can do it using Nginx. Here is a section from a simple config file used in the Nginx configuration.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
    expires 120d;
    add_header Cache-Control "public, no-transform";
}

gzip on;
gzip_disable "msie6";

gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;