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
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!
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.