Updated on Dec 13, 2020
Websites must be optimized to load quickly and provide a good experience for users. Core Web Vitals quantify user experience with easy to understand data that aligns developers, SEOs and marketers with one set of optimisation metrics to aim for. From May 2021, page experience signals will become a ranking factor in Googles algorithm. As Web Vitals are a large part of these signals, good scores are necessary to maintain your search position.
This post discusses Web Vitals, techniques to improve your scores and how to continually monitor Web Vitals scores over time with PageSpeedPlus.
Many tools exist to measure the number seconds a web page takes to load but loading time alone is not an accurate assessment of user experience - it’s only one factor. Equally important is how the page loads, which informs user perception of overall quality:
These are negative experiences that users can suffer even if the raw loading time is very fast.
Core Web Vitals are three simple metrics that Google use to quantify user experience on a website.
| Metric | Measurement | Detail | Target | Weight |
|---|---|---|---|---|
| Largest Contentful Paint (LCP) | Performance | Time for the biggest image to load | less than 2.5s | 25% |
| First Input Delay (FID) | Interactivity | Time from user interaction to browser processing the event | less than 100 ms | 25% |
| Cumulative Layout Shift (CLS) | Stability | How much the page moves around as various sections finish loading | less than 0.1 | 5% |
Data is available in all of Googles tools such as Search Console, Chrome User Experience Report (if you have a popular site with sufficient traffic), Lighthouse and PageSpeed Insights. Each of these have their limitations so if you want detailed URL level data every day, considering using PageSpeedPlus.
You may recall other tools launched by Google to assess web pages in recent years such as Think With Google, PageSpeed Insights, Lighthouse and Chrome UX Report and are wondering how Web Vitals differ. Results from each of these tools vary because they measure different things and were released at various points in the past to tackle web page measurement based on the web at that moment.
Today, it can be overwhelming trying to decide which one to focus on. For that reason, Google released Core Web Vitals to unify user experience measurement across all of their tools into one set of digestible metrics that everyone can understand.
Largest Contentful Paint is a performance measurement. It determines the precise moment when the largest element is rendered on the screen such as a hero image. This metric is important because it is typically when the page is ready to be interacted with.
How is the Largest element identified?
Only certain elements can be considered for LCP:
svg will probably be added in the future
Chrome renders pages in stages. When the first frame loads, Chrome dispatches a PerformanceEntry event identifying the largest element at that moment. Text will usually render first so the largest element in the first frame will be something small like a h1.
When subsequent frames render, the browser again calculates the largest element. If it is still the h1, nothing happens. However, if something bigger appears like an img, a second PerformanceEntry is dispatched and the img then becomes the Largest element.
When the entire page is finished loading the browser can calculate LCP by looking at the loading time of the most recent PerformanceEntry event.
The following graphic shows the H1 initially appearing as the largest element but that is then replaced as the largest elements by the article image:
Improving your score
First Input Delay is a responsiveness measurement. It determines the length of time in milliseconds between a user interacting with the page(clicking or tapping) and the browser beginning to process the event.
After LCP completes, FID is the next key moment in the user journey because the user has started their interaction and the page must handle that event to move on to the next phase, which is giving feedback. FID puts a metric on this behavior with 100ms or less the target you should aim for.
There are some misconceptions about FID that are worth clarifying:
Improving
Focusing on JavaScript is the best way to improve FID
Cumulative Layout Shift measures visual stability - a new metric that determines if a page shifts or moves after loading starts, also known as jank. CLS can be described by trying to click on something but seeing the page move just before your finger pressed the button. At best you have to find the desired element again. At worst you could have clicked a purchase button instead of the cancel button.
This animation from Google demonstrates it perfectly:
CLS is the sum of all positional movement of all elements that occur in the process of rendering a page. We previously mentioned browsers render pages in frames. This allows changes in position to be calculated between each frame. Every element has a start position such as its top and left coordinates. If that changes from one frame to the next, Chrome will trigger a layout-shift event from the Layout Instability API. Each event has a score calculated by the distance the element moved and how much space it takes up. When the page is finished loading, all events are added up to provide the overall CLS score.
It’s worth noting new elements don’t impact CLS unless they shift the position of an existing element.
Improving
Optimizing for CLS is straightforward:
Astute readers will be aware of other metrics that appear in discussions around Web Vitals such as:
The image below shows the full list of all metrics that are included in Web Vitals and their weighting in the overall score:
The goal of the whole initiate was to provide a small number of the most critical and easy to understand metrics. The additional data points are only supplementary and contribute to the 3 main metrics rather than being critical in their own right. Not all of them are field measurable and for those reasons, they are not part of the Core Web Vitals.
Google previously announced Page Experience Signals will become a ranking factor in May 2021.
Web Vitals are a large part of the proposed Page Experience Signal. The exact weighting they have is unknown but it would be prudent to assume it will be significant.
The other metrics such as HTTPS and ensuring the site is mobile friendly are things that website owners have already been following for years. The Page Experience Signal will group these together into one metric that encapsulates user experience scoring for a particular website.
Google’s blog post on the Page Experience signal mentions they are experimenting with ways to display visual indicators on user experience.
On results, the snippet or image preview helps provide topical context for users to know what information a page can provide. Visual indicators on the results are another way to do the same, and we are working on one that identifies pages that have met all of the page experience criteria
Reading between the lines, we think this could mean something similar to the AMP logo where each SERPs has an icon that indicates if the experience is positive or negative and is powered by the new overall Page Experience score discussed above.
Now that we have explained what they are and how to improve your scores, the next step is monitoring your Web Vitals over time to catch decreases before they impact user experience and rankings.
Option 1) Pagespeed Insights
The most common way to check Web Vitals scores is using PageSpeed Insights
Positives
Negatives
Option 2) - Search console
Web Vitals data is also available in Search Console
Positives
Negatives
Option 3) - PageSpeedPlus (Recommended)
The best way to monitor and analyze Web Vitals scores is using PageSpeedPlus
Positives
Negatives
Our dashboard always shows the latest scan with PageSpeed Insights score, change, Web Vitals and trend information:
If you want to dig deeper and analyze a specific URL, just open the URL details page. The following screenshot shows the Web Vitals scores for nytimes.com measured every hour over the last 7 days:
Data is also exported to Google sheets so you can integrate with other tools and build alternative charts and reports:
Web Vitals are a refreshing change as they provide a single source of user experience data. This helps website owners, developers, SEOs and marketers get on the same page and ensure that everyone is discussing the same things and aiming for the same targets. The overall impact is sure to be positive.
Improving scores will be important for the upcoming Page Experience Signal being added to the Google ranking algorithm. Websites change so after you’ve optimized your site, set up daily monitoring of Web Vitals scores with PageSpeedPlus and future proof your site.