Ultimate Web Vitals Guide: Understand, Improve and Monitor

Posted on Dec 13, 2020

Share

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

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.

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%

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.

web-vitals-tools.jpg

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)

Target: less than 2.5s on mobile and desktop

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: lcp.jpg

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


Quick Tip
Cloudflare is a service that can help with many of these suggested improvements. Just point your name servers to Cloudflare and from that moment they can apply many of their optimizations automatically. Further performance tweaks can be made in the Cloudflare backend.

First Input Delay (FID)

Target: less than 100ms on mobile and desktop

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)


Quick Tip
Think long and hard before including 3rd party JavaScript on your site. JavaScript is the biggest obstacle to a good FID score and in particular, 3rd party tracking and A/B testing libraries. They may be simple to add with a script tag but they can have a detrimental effect on overall performance and user experience. This is because a browser cannot respond to events if it’s busy processing code on the main thread. Something like an A/B testing library that waits for the page to render and then adjusts is a killer because it blocks the main thread until finished and you have no control over the speed of execution.

Cumulative Layout Shift (CLS)

Target: less than 0.1 on mobile and desktop

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


Quick Tip
Reserving space for something that changes during or after load will really improve CLS score and deliver a smooth load rather than one that is stuttering and choppy.

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:

other-vitals.png

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.

page-experience.jpg

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

Positives
  • Easy and fast
  • Real time
  • Per URL breakdown
Negatives
  • Manual task
  • Meaures more than performance data
  • Only latest scan. No historical data for analysis

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

Positives
  • Automatic
Negatives
  • 2 day lag in data
  • Not always enough data to show a report
  • Site wide rather than URL specific


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

Positives
  • Automatic
  • Bulk testing
  • Data updates every hour
  • Exported to Google sheets
  • URL breakdown
  • Data logged over time for analysis
  • Easy to use dashboard. No need to write code
Negatives
  • None

Our dashboard always shows the latest scan with PageSpeed Insights score, change, Web Vitals and trend information:

latest-scan.jpg

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:

history.jpg

Data is also exported to Google sheets so you can integrate with other tools and build alternative charts and reports:

excel.jpg

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