Optimize web page speed to improve Google Page Insight score

Web page speed is one of the most important things when you are developing a website, it can be quite easy to oversee some things! Never miss them again!

02 Feb 2020 9 minutes read

Playing with Magento, getting started and some of its features!

Getting started with Magento can be daunting . That is why many people get easily discouraged, but they shouldn't be. At the end of the day, it is just a system like any other! Here is one part of my experience. Here we will talk about a couple of pros and cons when it comes to this system.

25 Mar 2020 13 minutes read

DNS Explained, from beginner to master in 7 minutes or less

If you are a web developer or just starting out your carrier as a one you probably did hear the term DNS. When you type "facebook.com" in your URL and get Facebook to show up bar that is when the power of DNS. Here is how it works!

20 Jan 2020 6 minutes read

My first hosting experience and a couple of tricks that can help you a lot!

Like everybody else, I too have tried different hosting companies. Not because one wasn’t good enough but instead I wanted to experiment a bit and see what is “out there” and try to find the best match possible (at least for my taste).

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;