Web Vitals are 3 metrics that Google uses to measure the speed and usability of\u00a0 websites.<\/span><\/p>\n Today, there is a relatively large number of speed measuring tools. In this section, we’ll introduce the most used ones. In addition to speed, some tools also measure other metrics, such as site usability or SEO.<\/span><\/p>\n Think with Google<\/b><\/p>\n (<\/span>https:\/\/www.thinkwithgoogle.com\/intl\/en-gb\/feature\/testmysite\/<\/span><\/a>)<\/span><\/p>\n A tool that, in addition to speed optimizations, also proposes recommendations for improving UI, UX and overall simplification of the purchasing process. The tool primarily offers recommendations for e-shops, for classic sites it’s enough to use another tool.<\/span><\/p>\n <\/p>\n Webpagetest<\/b><\/p>\n (<\/span>https:\/\/www.webpagetest.org\/<\/span><\/a>)<\/span><\/p>\n In addition to speed, it also checks the security of the site. The data that is returned is described in detail, but some links with improvements point to older documentation. The pie charts showing the work of the main thread are clear. Webpagetest also provides videos that show how fast a page is filled with content. Also a great feature is the <\/span>TBT <\/b>(<\/span>T<\/b>otal <\/span>B<\/b>locking <\/span>T<\/b>ime) visualization, which reveals problem areas in page loading.<\/span><\/p>\n <\/p>\n Lighthouse<\/b><\/p>\n (<\/span>https:\/\/developers.google.com\/web\/tools\/lighthouse<\/span><\/a>)<\/span><\/p>\n Lighthouse is a general tool from Google which, in addition to speed, also checks the accessibility of the site, SEO and performs a general audit, so it’s suitable for general check of the site, not only from the point of view of page performance. The check can be started in the Google Chrome browser in the Lighthouse tab, in the command line by installing via <\/span>npm<\/span><\/i>, or in the code as a node module.<\/span><\/p>\n <\/p>\n PageSpeed Insights<\/strong><\/p>\n (<\/span>https:\/\/developers.google.com\/speed\/pagespeed\/insights\/<\/span><\/a>)<\/span><\/p>\n A tool that primarily serves to analyze web speed and suggests recommendations for speed optimization.<\/span><\/p>\n <\/p>\n The data analyzed by Pagespeed are divided into two parts. The first part, <\/span>Field Data<\/span><\/i>, shows the results of each metric from the data of the real users who loaded the page. In addition to the three Web Vitals metrics, the <\/span>FCP (F<\/b>irst <\/span>C<\/b>ontentful <\/span>P<\/b>aint) metric is added, which measures the speed of loading the first content on the page. The second part of <\/span>Lab Data<\/span><\/i> shows the results analyzed by Lighthouse. In addition to the three metrics <\/span>FCP<\/b>, <\/span>LCP<\/b> and <\/span>CLS<\/b>, three other metrics were added to the analysis:<\/span><\/p>\n <\/p>\n Below the metrics are recommendations on how to optimize each metric – in this particular case, these are recommendations for removing unused JavaScript and CSS and moving CSS processing that blocks the rendering of the page. In addition to these recommendations, PageSpeed provides additional information about a site (diagnostics) that can help us identify some issues, such as finding an LCP element, moving page content, etc.<\/span><\/p>\n <\/p>\n The score value in Pagespeed Insights can be relatively variable. 3 tests in 10 minutes can yield results that differ by as much as 30 points. Therefore, it’s advisable to run several tests after making modifications and take into account the average of the results.<\/span><\/i><\/p><\/blockquote>\n <\/p>\n The results are further divided into two part<\/span>s <\/span>\u2013 <\/span>Mo<\/span>bile and Desktop. In the vast majority of cases, it is not such a problem to move the score on Desktop to high values, but the problem is made by tests on a mobile phone, where the tests are carried on a medium-strength Android phone and due to its weaker processor, the resulting score is usually worse. Pagespeed’s inconspicuous features include a score calculator and a <\/span>Treemap<\/span><\/i>. On the calculator we can test how our score will change if we improve (or even worsen) some metrics. Treemap shows<\/span> us the JS bundle <\/span>\u2013<\/span> what it consists of and how much unused code it contains.<\/span><\/p>\n <\/p>\n (https:\/\/www.speedlify.dev\/<\/a>)<\/p>\n Speedlify is an open-source tool that allows you to continuously track performance and other site metrics using Lighthouse. The results can be deployed, the site can be re-analyzed at night, and this way we can always have up-to-date data on the performance of our websites.<\/span><\/p>\n We’ve introduced a number of tools that can help us control our site. <\/span>Lighthouse<\/span><\/i> will help us with the overall control of the website in terms of usability and <\/span>SEO<\/span><\/i>, Webpagetest contains several useful features that can help us with optimization. PageSpeed Insights returns a useful score that shows how our site compares to other sites. The <\/span>Speedlify <\/span><\/i>tool can be used for continuous monitoring of speed, SEO or usability.<\/span><\/p>\n In the next part, we’ll look at specific speed optimizations.<\/span><\/p>\n![\"\"](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/conversion.png\")
<\/a><\/p>\nWeb Vitals<\/h2>\n
\n
![\"Ako](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/speed.png\")
<\/a>Speed measuring tools<\/b><\/h2>\n
![\"Odpor\u00fa\u010dania](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/thinkwithgoogle.png\")
<\/a>![\"Popis](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/speed2.png\")
<\/a>![\"Lighthouse](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/lighthouse-2000x1767.png\")
<\/a>![\"Anal\u00fdza](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/pagespeed.png\")
<\/a>\n
![\"Odpor\u00fa\u010dania](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/pagespeed2.png\")
<\/a>![\"Anal\u00fdza](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/pagespeedtree.png\")
<\/a>Speedlify<\/h3>\n
![\"\"](\"https:\/\/blog.bart.sk\/wp-content\/uploads\/2021\/10\/speedlify.png\")
<\/a>Summary<\/b><\/h2>\n