Checking site loading speed in Google Page Speed ​​and optimization

You, as the owner or administrator of a website, are probably already familiar with the service PageSpeed Insights with which you can easily find out an estimate of the speed of your website for computers and mobile devices, as well as receive recommendations for improving the performance of your Internet resource. A high rating of the service shows that the site is technically optimized and adapted for mobile devices, which has a positive effect on promotion in search engines. An optimized site works quickly, and the faster your site works, the faster the user receives the information he needs, as a result, higher indicators of behavioral factors, greater popularity of the site, more traffic, and more sales.

Let's figure out what tips from Google are really important to implement to make the user interaction with your resource more comfortable.

Case: optimization for Google Page Speed

We will talk about our experience working with PageSpeed ​​Insights and show a clear case study of how we tested and optimized our client’s website. We will provide instructions for professionals.

As a “test subject” we took our client’s website - an online store on the CMS Bitrix management system. During the initial check of the loading speed of the site (the address of which we are forced to hide) before work began, PageSpeed ​​gave a score of 71 points for computers and 50 points for mobile devices.

ДThese indicators are average, but there is no limit to perfection, in addition, the Google service has issued several recommendations for improving the code. Now we will look at them in detail.

Optimizing Images in Google Page Speed

To pass the audit “Set up efficient image encoding” We have installed a free solution for image optimization “Image optimization - automatically and without third-party services” from Dev2Fun.

Note: this module is relevant to use if the hosting has a server module for optimizing images

Some hosting providers do not have modules for optimizing images using the server, so in such cases it is worth using another module from the marketplace “Universal Image Optimizer” from IP Platonov N.V. This module can compress images using a third-party server, but it is important not to enable webp in the settings, since there may be problems in the Safari browser with entering text in input fields.

Module settings:

In the image quality settings, you can safely set the compression level for jpeg to 95%, progressive, and compression level 2 for png. (80% and level 3 are also acceptable, but it’s not worth less). It is advisable to set recoding only when resizing, so that the original photos always remain in their original quality.

These solutions do not compress static files in the layout folder, so you need to compress them using commands in the console. To do this we do the following:

1. copy the folder with images with a different name (for example image_original);
2. go to the console in the folder with images;
3. find . -type f -iname "*.png" -exec optipng -strip all -o3 {} \; -exec chmod 644 {} \;
4. find . -type f -iname "*.jpg" -exec jpegoptim --strip-all --all-progressive -pm80 {} \; -exec chmod 644 {}

Caching Static Objects

To pass the “Set rules for effective cache use for static objects” audityou need to set modification times on the server for different file types nginx.

Example for bitrix vm:

Note: this method is not suitable for shared hosting.

Also add a block just in case .htaccess:

Note: In most cases, overriding will not work, since on Shared hosting these values ​​generally cannot be overridden.

The cache time for third-party resources cannot be changed unless you use a proxy server for this purpose, but in most cases this is not necessary since these are usually counters whose code can change.

Text compression

To pass this “Enable text compression” audit you need to add svg compression to nginx

1. /etc/nginx/mime.types add if not:image/svg+xml svg svgz;
2. /etc/nginx/nginx.conf add to the end of the line:gzip_types image/svg+xml
3. Re-read the configs: service nginx reload

Important: do not forget to remove the compression module from the Bitrix modules (it is usually always installed by default on the server)

Reducing css and javascript code size

At this step we will go through four audits at once:

• Reduce CSS Code Size,
• Reduce JavaScript code size,
• Use pre-connection to the required domains,
• Set up preloading of key queries

1. Minify css using yuicompressor (pay attention to calc with “+”, it must be replaced with “- -”);
2. At least for the main page, it is advisable to connect inline critical css (for the first screen), and also if you need to separate the css of the main page and internal ones;
3. Compress js using yuicompressor or uglify;
4. It is advisable to use prefetch, preload, dns-prefetch etc. for site resources, for example, for fonts.

Setting to show all text while loading fonts

To pass this audit “Configure the display of all text when loading web fonts”in the css for this block we specify:

Removing unnecessary CSS code

To pass this audit “Remove unused CSS code”you need to, at least for the main page, select only the css that is used there, and separate the css connection for the main and internal pages (ideally, connect for each individual page template your css).

Optimization results Google Page Speed