Ultimate Web Vitals Guide: Understand, Improve and Monitor

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.

Try PageSpeedPlus Now

Contents

• What are Web Vitals
• Viewing the data
• Difference between vitals and other Google tools
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Other Web Vitals Metrics
• Page Experience Signal Update
• Monitoring The Scores
• Conclusion

What are Web Vitals

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:

• Does text appear quickly but images take longer to render?
• Is there a delay for the page to respond when you click or scroll?
• Does the page move slightly when images snap into place after you started reading? 

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.

Where can the data be viewed?

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.

How are Web Vitals different to other Google tools?

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 (LCP)

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:

• img
• image
• video
• An element with a background image loaded via the url() function
• Block-level elements containing text nodes or other inline-level text elements children: h1, h2, p

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

1. Ensure fast server response times and locate them geographically close to users
2. Compress images
3. Use appropriately sized images
4. Lazy load images
5. Use a CDN to serve static content from edge servers
6. Cache content that doesn’t change often
7. Optimize CSS by minifying, inlining critical CSS and deferring the rest
8. Limit client-side JavaScript rendering
9. If JavaScript is required, optimize delivery by minifying, inlining critical JS and deferring the rest

First Input Delay (FID)

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:

• FID is not the time between first interaction and the UI updating. It is only the delay between first interaction and the browser processing that first event.
• Scroll and zoom not regarded as input events

Improving
Focusing on JavaScript is the best way to improve FID

1. Audit and remove 3rd party JavaScript unless absolutely necessary
2. Refactor your own JavaScript to be more streamlined
3. Minify and compress your JavaScript files
4. Defer non-critical JavaScript with async or defer attributes
5. Use code-splitting (serve JavaScript only when it is needed instead of one app.js file for the entire site)

Cumulative Layout Shift (CLS)

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:

1. Limit page manipulation with JavaScript after page load
2. Limit dynamic content injection after page load if it impacts existing elements
3. If dynamic content injection is needed, set dimensions on the outer div
4. Set width and height on images so the browser will reserve the space while the image loads
5. Set dimensions on ads and embeds
6. Avoid the use of Web fonts that replace the default font after loading

Other Web Vitals Metrics

Astute readers will be aware of other metrics that appear in discussions around Web Vitals such as:

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Total Blocking Time (TBT) - lab equivalent of FID
• Time to Interactive (TTI)

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.

Web Vitals and the Page Experience Signal update

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.

Monitoring the Scores

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

Option 2) - Search console
Web Vitals data is also available in Search Console

Option 3) - PageSpeedPlus (Recommended)
The best way to monitor and analyze Web Vitals scores is using PageSpeedPlus

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:

Conclusion

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.

Try PageSpeedPlus Now

You might also like

• Ultimate Web Vitals Guide: Understand, Improve And Monitor
• PageSpeed Insights Bulk Testing
• PageSpeed Insights vs Lighthouse
• How To Reduce the impact of third-party code