Blog / Articles11 December 2018

How to check website loading speed in new PageSpeed Insights and make right conclusions

Technologies are developing rapidly: the Internet today is rather different from the one that was just a few years ago. However, the value of the site loading speed for its effectiveness remains the same. Google are also not standing still: they have recently changed PageSpeed ​​Insights tool. Many webmasters and business owners are puzzled about what to do now. How much has the approach to acceleration changed?

We have previously published two articles on this web page speed checking tool.

  • The first one focuses on working with the old version of PageSpeed ​​Insights and competent analysis of the results. Since then, the tool has changed a lot, but the principles for interpreting the results largely remain the same.
  • In the second article, released shortly after the update, we reviewed the changes that affected the interface and mechanisms of the tool.

Now when enough time has passed, and the overall picture has cleared up, it is time to figure out how to analyze the site in the current version of the tool. What recommendations do you need to listen to, and what can you ignore? How not to make it worse in an effort to improve your web resource?

Features of the new PageSpeed ​​Insights interface

We have already done a very detailed analysis of the new version's report and its differences from the old one in the previous publication. Therefore, here we only give a brief list of what it offers to us. If you are already familiar with the interface, you can skip this text and go to the next section.

  1. Loading speed score from 0 to 100. At first glance, it is the same as before, but in fact, almost everything has changed.
    • Scale ranges that correspond to "good" and "bad" scores are different now (for example, a "good" score now starts from 90, not from 80).
    • A mechanism for calculating the total score is now based on Lighthouse metrics.
    • Actual numbers for almost all sites have changed too.
  2. Field Data, or the information from Chrome user experience report (CrUX).
    • As before, it is available only for sites that are in the CrUX database.
    • As before, you can see the average speed data for all pages of the resource (origin data).
  3. Lab Data. It consists of 6 speed metrics that were not present in the previous PageSpeed ​​Insights version.
    • The values are shown in seconds.
    • They are displayed absolutely for all sites.
    • The values are derived from Lighthouse emulation.
    • Only these metrics are the basis for calculating the final page score on a 100-point scale (item 1).
  4. Lighthouse performance audits (22 in total). They replaced the 10 rules of the old interface. These audits are divided into 3 sections.
    • Opportunities are recommendatory audits ("fix this, and the site is expected to load n seconds faster").
    • Diagnostics are just facts ("... was discovered on the site; perhaps this slows it down").
    • Passed audits are the items that have no issues found on the site.

Some notes

  • Once again, we recall that the 100-point scale speed score, displayed at the top of the report, refers only to the page whose address you entered in the line. It does not give an idea of overall performance of the site. To evaluate your site more generally, you should check out some typical pages, for example, in the online store they are: the main page, category page, product card, contact page, delivery information, etc.
  • Scores in the new version are not as stable as in the old one, at least for now. Several checks of the same page often give different results. According to our observations, the dispersionreaches 5-7 points, and possibly more. Therefore, in order to avoid errors and get a more accurate data, it is better to check each page at least 2-3 times. Note that the data is cached for 30 seconds, so it should take at least half a minute between checks.

What can we learn from the Field Data section?

If enough of Google Chrome users visit your site, then you will see colored graphs in this section. Green, yellow and red colors show percentages of the total number of users for whom the specified metric is rated as fast, medium or slow, respectively. The number above the graph shows the average value of the metric for all visitors. It also has the corresponding color.

  • FCP (First Contentful Paint) displays the moment when the user sees at least one significant element of the page. This metric is important because at this moment the visitor notes that the site is really loading and working. The user is less likely to leave the resource if tis number is within the normal range.
  • First Input Delay (FID) shows the time between the user's first interaction with the page (for example, pressing a button) and the site's response to it. This metric describes the interactivity of the page. If it is too large, visitors can feel that the site is laggy and works with a delay.

The data that you see in this section is very valuable because it reflects the speed of the site for your real audience. For example, with a 3G connection, your pages may work a little slowly, but if most of users access your site from a computer or use Wi-Fi on mobile devices, they may not notice any problems.

Thus, if you see excellent values in Field Data, but you get into the yellow zone on a 100-point scale, then, most likely, it does not make sense to try to push the score to green zone.

How to analyze metrics from the Lab Data section?

We already discussed here what each of the metrics listed in this section means. Now let's try to figure out how to apply them in practice.

Sample Lab Data section

First, you should understand: in the new version of PageSpeed ​​Insights, the accents have changed. Previously, the page rendering time mainly influenced the score. Hence, there were situations when it was possible to achieve high and even maximum ratings by moving most of the scripts to the very bottom of the page. In such a scenario, the content is displayed quickly, the old PageSpeed ​​Insights does not see any problems, and for the user everything is fine as well at first glance, but until he starts pressing the buttons or other interactive elements. The scripts that are responsible for their performance are loaded in this scenario after all the rest of the content. This fact is noted in the official PageSpeed ​​Insights help.

 

Some sites optimize content visibility at the expense of interactivity. This can create a frustrating user experience. The site appears to be ready, but when the user tries to interact with it, nothing happens.

 

Now, PageSpeed Instights scoring include not only the actual loading speed, but also the indicators of the page's interactivity and its readiness to respond to user requests. Such metrics as First CPU Idle and Time to Interactive are responsible for interactivity. According to the table from authors of the tool, the first metric weights 2 when counting, while the second one weighs 5, which is the maximum. Therefore, Time to Interactive makes the largest contribution to the final score.

To understand how the certain metric affects the overall performance of your site, you can use the calculator. Add a copy of this table to your Google Drive. You will be able to replace the values ​​in it with the ones ​​you received when checking your own site, and edit them. Note that numbers must be in milliseconds. In this way, it is easy to understand how, for example, reducing First Meaningful Paint by 0.5 seconds will affect your final score.

Sample calculator. The frame highlights the values ​​that can be edited. To the right of them you can see the final calculated score on a 100-point scale

When you understand which of the metrics do slow down your page the most, you can study them in more detail. We will go through each metric in order to understand what their large value may indicate and how we can reduced them.

  1. First Contentful Paint. The red numbers in this column often indicate that there are resources on the page that slow down rendering. This metric can be improved by optimizing the delivery of JavaScript and CSS files. In addition, turning on resource caching and GZip compression can help here.
  2. First Meaningful Paint. Problems with this indicator usually indicate insufficient optimization of the content loading on the first screen (above-the-fold content). By setting up the Critical Rendering Path, that is, by setting the correct sequence for loading the necessary resources, you will most likely improve this metric.
  3. Speed ​​Index. This number is mainly affected by the same Critical Rendering Path as in the previous point, as well as by optimizing the size of resources: image compression, minifying HTML, JS and CSS.
  4. First CPU Idle. Factors affecting this indicator are similar to the previous point. It is optimizing the file download sequence and their size. However, here the readiness of the page to respond to the user's actions is important.
  5. Time to Interactive. This value depends on a complex of factors, but the optimization of JavaScript has the most important role. The performance of scripts is very important for the page to be ready for user interaction.
  6. Estimated Input Latency. Although this metric is not taken into account when calculating the overall site score, it is also important to optimize it. It is influenced by page rendering optimization with properly organized CSS files and freeing up the main thread. Read more about this in the guide from Google.

This way, you can roughly understand which aspects of your site need to be improved. For more information, such as which files slow down your page and how much traffic is supposed to save, go to the next section.

Should you follow the tips from Opportunities and Diagnostics sections?

The principle of organizing these sections remained similar to the old section with recommendations: you can expand each tip and view more detailed information. The main difference with the previous interface is that the rules from the Opportunities section now show potential savings in seconds. Red numbers and red scale mark values worth paying attention first, whereas yellow color marks the less essential.

It is important to note that the data presented in these sections do not have a direct impact on the overall 100-point score calculation. Following these optimization tips will improve your site only hypothetically, and estimated savings in seconds or kilobytes are calculated approximately. Therefore, you should not blindly follow these recommendations. You should not focus only on them, ignoring the data from the higher sections.

Let's see the example report above. The screenshot shows that the site has an excellent overall speed rating. All the metrics from the Lab Data have good or average values. However, the first piece of advice that we see in the Opportunities section – use up-to-date image formats – gives us an estimated saving of 10.8 seconds. Now let's look at the loading speed metrics again. After 4.7 seconds, the page is already fully interactive, so it cannot be "accelerated" by 10.8 seconds. This number is obviously exaggerated. It is most likely due to the large number of images on the page; however, they are loaded quickly.

Thus, it is worthwhile to follow audit recommendations, but with a certain degree of skepticism. They definitely help to understand what needs to be done with your website to speed up. However, when analyzing this advice, you should always check Field Data (if it is available) and Lab Data in order not to make unnecessary work that will end up practically worthless.

Summarizing. How to analyze your site?

  • Check typical site's pages, each one several times, and see global performance scores. If everything is in the green zone, then most likely you should not worry.
  • Review the Field Data, if available; compare the information with the overall score. If the vast majority of users load your site quickly, then everything is fine.
  • Analyze the Lab Data metrics. If they are not all green, try to figure out which one is the most problematic.
  • Check out the Opportunities and Diagnostics, but do not panic if something is displayed in red. Perhaps the data is not entirely correct. Check the rest of the metrics again.
  • Try to figure out how much work you need to do. For example, you need only to compress images, or to optimize the placement of scripts and styles on the page, and code formatting. In the second case, most likely, you will need to involve developers.

If you understood that your website needs to be accelerated, and you cannot do it without the help of specialists, then ARTO web agency is ready to offer you its services. Contact us, we are always glad to help!

Nikolay Ashpin
SEO, blog editor
I have been engaged in copywriting since 2014, in SEO - since 2017. I am interested in Internet marketing modern trends and search engine optimization, as well as in the capabilities of the Google My Business tool, and I share the experience of using it at seminars and conferences. If you have a question about this article, please write to nikolay@arto.agency.

Be first to know about important!

How-to articles, news and reviews. We write to you when we really have something to say
COMMENTS
LEAVE A COMMENT
LOGIN
  • Facebook
  • Twitter
THIS SITE USES COOKIES
We use cookies to analyze traffic, provide social networks features, and for functions of the commenting system on the site. The list of cookies to be set is located on this page. Do you agree to accept cookies?