Boost your website’s performance with the Web Vitals Report

Contents

• Background
• How does the Web Vitals Report work
• Tips on how to use the report
• FAQs
• Conclusion

Background

All digital marketing practitioners and web developers should be aiming to provide their users with a fantastic experience on their sites - this leads to better conversion rates and ultimately a higher digital ROI. According to Google research, 53% of mobile site visitors leave if a page takes longer than 3 seconds to load, and 70% of people who switch to a different website do so because a page takes too long to load. Now there’s even more reason to get ahead of the curve and optimize your websites for your users. Google introduced Web Vitals to provide guidance for website quality signals that are essential for user experience. They are user-centered metrics regarding loading time, interactivity and visual stability of websites and are essential for a healthy website. Currently, the Core Web Vitals are:

• Largest contentful paint (LCP) - marking the point where the page’s main content is most likely loaded.
• First input delay (FID) - measuring responsiveness of the page when users first try to interact.
• Cumulative layout shift (CLS) - measuring visual stability of the page.

Google recently announced that the Core Web Vitals will be included in search signals for page experience. From May 2021, these signals will be the new criteria for good rankings in Search. Other signals for page experience include mobile friendliness, safe browsing, HTTPs, and intrusive interstitials.

Figure 1: Search Signals for Page experience (Source)

How does the Web Vitals report work

Our Web Vitals report provides you with the data and information you need to optimize your website’s performance, so your users get a better experience on your site, leading to better rankings, more traffic, and a higher conversion rate. With the report, you can: Save time: Analyze the performance of your entire domain in one go - meaning you no longer need to enter every URL individually into tools such as Google’s PageSpeed Insights, so you can immediately identify your website's lowest performance pages. Be more efficient: Easily identify high-priority pages that need to be dealt with most urgently as you can sort according to your slowest pages, and filter according to any criteria, for example to view the performance of a specific sub-directory. Rely on the best data: Analyze your website’s performance with standardised and globally accepted metrics which will soon become a ranking factor, meaning your optimizations will surely have a positive impact on rankings - leading to more traffic and users.

Report metrics and score

The new Ryte Web Vitals report uses the following 6 essential web vitals metrics (including the Core Web Vitals LCP and CLS), helping you to analyze and optimize vital loading, interactivity, and visual stability issues:

• First Contentful Paint: FCP marks the time at which the first content element (e.g. text, image or other media objects) is painted
• Largest Contentful Paint*: LCP marks the time at which the largest content element is painted
• Speed Index: Speed index shows how quickly the contents of a page are visibly populated
• Time to interactive: TTI is the amount of time it takes for the page to become fully interactive
• Total blocking time: TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.
• Cumulative Layout Shift*: CLS measures the movement of visible elements within the viewport

* = Core Web Vital The report extracts the metrics and performance score from Lighthouse, the open-source, automated Google tool for improving the quality of web pages. Any future updates or changes Google might implement to Lighthouse will be reflected in the Web Vitals Report - so you can be sure the report is always using the most current metrics. The performance score is based on all metrics included in the report, and the page is classified as “poor”, “needs improvement” or “good” depending on the score.

Figure 2: Web Vitals Report

Tips on how to use the report

Often, pages are slow due to a high number of assets e.g. large image files. To identify the assets on any page, click on the arrow on the right hand side of the row. All assets are then listed, sorted according to file size.

Figure 3: See a list of the assets on the page

To get more detail about an individual URL, hover your mouse over the row, and click on “Open PageSpeed Insights”. You will be directed to PageSpeed Insights, the Google tool based on Lighthouse, where you will see a more detailed breakdown of your performance metrics - including Core Web Vitals field data, and tips on how you can optimize these individual pages.

Figure 4: Go to PageSpeed Insights for more detail about a URL

Using advanced filters

To dig deeper into your performance data, and to make it easier to prioritize and find optimization potential, you can use the advanced filters. You can filter according to multiple criteria, meaning you can isolate your slow pages easily and find out what you want to work on first. You can apply multiple filters with both "and" and “or” logic. For example, if you want to quickly find pages that are exceptionally slow for a particular subdomain, you could add filters for:

• "URL" contains (name of subdomain)
• Lighthouse score is lower than 50

Check out this video to get some more insights into the Core Web Vitals and how to use the report:

Frequently asked questions

Why don’t I see data in the new report? If you don’t see any data yet, this is probably because you need to start a crawl. If the problem persists, contact your key account manager or our support team. You also need to be using the JavaScript crawler to use Web Vitals data. Why do I see different numbers in PageSpeed Insights and Ryte? There are a number of reasons why numbers may differ. Firstly, the exact time when a page is crawled can make a difference. If a page is crawled when the load on the web server is higher (i.e. when there are more users on your page), the page will load more slowly. Secondly, we use the latest version of Lighthouse when extracting the data for the report, but we can’t guarantee that PageSpeed Insights is using the same version. Similarly for throttling - when using the Web Vitals report with the Mobile Crawl, we use the Lighthouse default throttling settings to simulate a user’s browser, but we can’t be sure that PageSpeed Insights uses the same settings. If you have excluded assets from your website crawl in the URL-exclusion feature in the project settings, this will affect your score. If the assets aren't crawled, the page will load more quickly, therefore showing a score that isn't representative. For most accurate results, we recommend one of the following options:

1. Set up a new project without the exclusion rules
2. Adapt the exclusion rules so that assets are included in your crawl
3. Contact our support team for help

Who can use the Web Vitals report? All Business Suite customers using the JavaScript crawler can use the Web Vitals report. If you would like to use the JavaScript crawler, please contact our sales team. Why isn’t the Web Vital “First Input Delay” included? Instead of integrating First Input Delay, our Web Vitals report integrates Total Blocking Time. This is because we are firstly integrating lab data, and will integrate field data in the future. First Input Delay can only be measured by field data, but total blocking time can be measured with lab data. Optimizations that improve the Total Blocking Time will also improve the First Input Delay, so you can be sure it’s an optimal alternative. Read more in Google’s article.

Conclusion

The Web Vitals are the new standards for website quality. Optimizing your website with these metrics will help you gain more traffic, happier users, and higher conversion rates. With our new Web Vitals report, you can easily and quickly identify high-impact pages that you need to work on and derive actionable insights so you can optimize your website’s performance with minimal effort.