How to successfully pass Google PageSpeed in pursuit of eCommerce site optimization?

About the author: Vyacheslav Androschuk, backend developer with 10+ years of experience. To his credit are many eCommerce sites and thousands of hours of technical support for complex solutions, after which the sites work clearly like Swiss watches.

Developers often face the task of making the page load time as short as possible. Owners of web resources, Internet marketers, as a reference metric, usually use as an example the assessment from Google's PageSpeed Insights tool, namely, the so-called "green zone" with a score of 90+. Let's take a closer look at what this tool is, what indicators it pays attention to, and how they can be improved.

About download speed

Let me remind you that the site page loading speed is the time required to fully load the content of the page in the user's browser. This indicator is determined by a number of factors and can have a significant impact on the user experience. The speed of loading a web page is measured in milliseconds and it is clear: the lower this indicator, the better. Popular tools for measuring download speed are Google PageSpeed Insights, GTmetrix, Pingdom, and others.

Page loading speed can be affected by a variety of factors, including file size, code optimization, server speed, and more. Poor loading speed can lead to a poor user experience, higher bounce rates (visitors leaving without exploring other pages of the site) and lower conversions. Google and other search engines consider page load speed as one of the ranking factors. Loading speed can affect your site's position in search results, especially on mobile devices. Improving your loading speed can positively impact your site's SEO and drive better traffic. For many years, the Avivi company has been engaged in the development of effective solutions for online stores, where speed plays a key role. The use of the Magento 2 platform partially facilitates the optimization work. However, leaving the issue of speed to one's own devices is unacceptable for any internet sat, so there are always tasks related to this in technical support.

About PageSpeed Insights

PageSpeed Insights is a tool that provides an assessment of the user's interaction with a web page on desktop and mobile devices, and also provides a recommendation for improving the page.

Metrics that PageSpeed Insights takes into account

Largest Contentful Paint (LCP) is a metric that shows the rendering time of the largest image or text block visible in the page view area.

Cumulative Layout Shift (CLS) is an indicator of the largest number of layout changes during the period of page formation. The smaller the indicator, the better.

Time To First Byte (TTFB) — the time the browser received the first byte of data from the server. The smaller the indicator, the better.

First Contentful Paint (FCP) — the time from the user's transition to the page to the first displayed data (text, image).

Interaction to Next Paint (INP) — browser response time to interactive user actions (clicks on links, buttons, etc.).

Actions to optimize site speed

Optimization itself, like all web development, can be divided into 2 parts:

• back-end — work on the server side);

• front-end — (work on the client side).

First of all, we need to configure the server side, for PageSpeed Insights it is the TTFB indicator.

Before doing the optimization itself, we need to choose a hosting. There is no single recommendation here: the main thing is to compare the traffic of our resource and the capabilities of the server itself. It is clear that the greater the traffic and the larger the resource, the more powerful the server we need.

Now let's move on to optimization. In back-end work, we need to give data to the user as quickly as possible. This requires using cached data as much as possible, wherever possible. In this case, we will significantly reduce the load on our database. Where we do not use the cache, we need to optimize requests to the database, namely, reduce their number and, if possible, avoid receiving a large volume of data. In such cases, it is always better to use data loading via ajax).

As for the front-end, the situation here is much more extensive. The Google search robot often changes the algorithms of its own services, and situations often arise when a site has good indicators, but after a year it falls into the "red zone". Therefore, here we will analyze the key points that will apply to absolutely all resources, and which are worth following.

HTML

• if possible, reduce the size of the html code, and avoid deep nesting of objects, so that the browser spends less time rendering the page. Special attention should be paid to the depth of embedding of the HTML code. A very important indicator for evaluating the mob version.

Javascript.

• you need to connect js in a minified form;

• if possible, move all JS to the footer or use delayed loading;

• on the pages connect only the js that is used.

Image

• use lazyload for all images that are in popups and in the invisible area of the page;

• images must be optimized and compressed;

• the img tag must have width and height attributes so that the browser does not calculate them additionally.

CSS

• connect minified css files;

• clean CSS of unnecessary code, namely code for old versions of browsers and remove prefixes -webkit-, -moz-, -o-, -ms-;

• on the pages, connect only the css that is used directly on the page.

Summarizing all of the above, I would like to pay attention to the fact that the Google PageSpeed evaluation is done with a cool head, and not to chase 100% at any cost. For the promotion of the site, the assessment itself is far from the key factor in the promotion of the resource. Therefore, it is not worth sacrificing functionality for the sake of evaluation. And those optimization recommendations, which I wrote about above, will allow, if not 100%, to get a decent rating — here everything depends on the resource itself and its functionality.