Web Vitals, is a Google-led initiative intended to help provide help and guidance when it comes to improving user experience when browsing your website.
Within this initiative, there are a number of tools and metrics that website owners can use to measure their website's current performance and experience levels, across multiple device platforms, ranging from desktop to mobile.
By comparing a website's metrics against other websites, with data provided by the HTTP Archive, owners can get a true perception of how their website should perform in real-world scenarios.
Within the Web Vitals initiative, there is currently a set of 6 metrics, known as the Core Web Vitals that all website owners should be measuring on a regular basis to ensure that their websites are running as optimally as possible.
Why are Core Web Vitals important?
The Core Web Vitals are a crucial set of metrics that relate to how a user perceives the performance, and experience of your website when they visit it. By comparing metrics against other websites, and running a series "in the field" tests on your website's performance, you can get a true picture of just how your website compares with others on the internet and when viewed on different devices.
These metrics are now considered so vital, that Google use them as a factor when ranking pages for their search results page.
How can I measure the Core Web Vitals of my website?
Thanks to tools such as Metritool, and those that are built into most modern web browsers' developer tools, it's easier than ever to regularly check.
With the Lighthouse tool, either via your developer tools or with a service like Metritool, you can not only measure each of the 6 metrics but retrieve a series of recommendations on how they, if necessary, can be improved.
Where can I learn more about these metrics?
First Contentful Paint
First Contentful Paint, or FCP measures the amount of time it takes for the browser to fully load the first content object, whether that's a piece of text or an image when a user navigates to the page. Therefore, it measures how users actually perceive the performance, rather than what you'd get from a more general speed test tool.
Learn more about First Contentful Paint
Largest Contentful Paint
Similar to FCP, Largest Contentful Paint, or LCP measures the time it takes for the largest part of the page to be rendered, from when the page initial starts loading. LCP focuses therefore on elements that are likely to take longer to be rendered on the user's screen, such as images, videos and background images loaded from an external source.
Learn more about Largest Contentful Paint
Speed Index
The Speed Index metric measures how quickly the page content is displayed when a user navigates to the page. A video of the page load is captured, then the visual progression between each frame can be calculated.
Total Blocking Time
Total Blocking Time measures the total time it takes for the page to become responsive to user input such as mouse clicks or keyboard presses. By splitting the work required for the browser to fully render the website into separate tasks (such as parsing HTML and executing CSS and JavaScript), each task can be checked separately and highlighted if they need improvements to their processing times.
Learn more about Total Blocking Time
Cumulative Layout Shift
Cumulative Layout Shift or CLS measures the sum of all individual scores for every unexpected "layout shift" during the lifespan of the page. A layout shift occurs any time an element visibly changes its position between rendered frames.
Learn more about Cumulative Layout Shift
Time to Interactive
Total Blocking Time measures the total time it takes for the page to become responsive to user input such as mouse clicks or keyboard presses.