Google Speed Metrics

Let’s start with Google speed test

While you read this article I will not remind you how important they are, you already know it as you have spent time on reading this. Instead of this, I want to stop on what each of them and how can you achieve a good result overall and in a specific state.

So let’s start from the beginning and go to the google speed test. There are two types of stats for mobile and for PC

In the current article, I will speak only about mobile as when you do all correctly on mobile you will have great results on PC too.

Need to mention that this test is based on inbuilt tool from Chrome browser called Lighthouse. This test consists of two parts, apper one stats based on real users experience which collect by Google. It is the most important part which impacts your ranking and visibility. But not always these stats are available, in case if you have not much traffic it will not show. Main your goal is this:

In Google Search Console you will be able to find how many pages passed it. Yes, every page on the website has its own test results so not only the homepage matter, even more, most of them matter much more, especially blogs.

Little bit more Metrics

Now let’s go to the second part of the Metrics. You will see 5 stats, half year before I wrote this article there were 6, it another one thing that you need to know about google metrics, it is not something which is one time defined and not changeable, it varies and often drastically.

On the right part of the screen above you will see the Expand view button, clicking on it you will be able to read a short or long version that explains each of these tasks. I will not repeat it, just will share my understanding and experience while I work to “green” them for the last 5 years. But first, let me give a general overview.

First of all, need to say that these stats mostly have a value for developers and if you are not one of them you can pass it. While building a page it allows them to check code performance. From my experience, this is not what you take care of after developing.

It is one of the first things which you have to take care when building your project architecture or picking tools for development.

For example, if you build your websites using page builders such as Elementor it is near impossible to reach a green score without black methods. Or if you use tons of plugins for every small thing on the website.

First Contentful Paint. It is what your user first to see, or even may to see as if your page is really fast he/she will even not mention this moment of first content paint. To make it green need allow browsers to concentrate on drawing this first screen without loading unnecessary resources. In most cases, your first screen consists of a header component with logo and website navigation and the next one with text, image CTA. Your code which browsers already receive and start rendering consists of HTML, CSS and JS. In case if you use one big CSS file for all the website browsers need to download it whole and main read and render each line of it to show you the result. The same is right for the js too. The right decision is only one inline CSS and js for these components, the wrong way is to put all of them above but this will cause drastically reduction for another stat – Cumulative Layout Shift(about this I will speak later). Let’s say that we pick styles and js which we need and inline them in the components. Let’s go further and check another page of your website and what we see? slider component on the top of the page. Let’s do another one css inlining? And next, next, next? Check every page and do it separately? In my mind, it hasn’t any reason best to have each component have its own CSS/JS included. Indeed is there a reason to include slider library if a page does not use it?

Largest Contentful Paint. In most cases it is your hero image, sometimes logo and even your title H1. Some advice to meet the best score – is not to use hero image on mobile view. In case if not possible, lazy load it. Don’t forget to make a background of your component in a color that leaves your text visible even when the image is not loaded. Sometimes design heavy use images here need to define what is more important for the project, visual or performing. Sometimes it is impossible to have both.

Total Blocking Time. Right answer here lay in connection of the 2 things:

•  correct code;
• 3rd party resources;

Write specific js code and newer make AJAX calls to show the first view, it always has to be pure HTML/CSS/JS. Remember most scripts you can lazy load. Even when Google says that you need to add GTM on the top you can hide it till the user does any interaction with the website. Some GTM data you will lose – people that close websites not doing any interactions, but does it really matter?

Cumulative Layout Shift. This is why we cannot load all CSS/JS after HTML will render. Do you sometimes see page jumping? When the image fully loads it changes the size of the component? It is not just visually bad but has a huge impact on your score. Same be careful with exotic fonts, after they load it can cause jumping too. Sometimes you haven’t another choice as just hardcode some values. And the last one, CSS styles can cause problems. One of the most painful days in my life was looking for the CLS issue. Nothing jumps, nothing rerenders on any browser with hundreds of tests but issues still present in the stats. I cut layouts and found a place where it was a logo image but nothing suspicious. I was near giving up till not doing what I never checked before – CSS styles and saw that for some reason for the image, we have inline-flex and not display block. The day was lost but green score was achieved.
Speed Index. From my experience and opinion, it is some sort of integration of all metrics above.

And finally

Let’s back from the development World to the real life when the website is built and has a green score in the performance test. You push your website live and obviously expect that will have a green score for your website, right? Live will be not so funny if will be all things such easy 🙂 So let’s check the case if not because if yes – nothing to check, you are the happy owner of the optimized website.

But it will be the story for the next article…