Web Vitals Metrics – What you should know

What are Web Vitals?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. These consists of some Core Web Vitals (LCP, FID and CLS) and a few others (TTFB and FCP).

What are Core Web Vitals?

For the first iteration Google has decided to use the three metrics called “Core Web Vitals”. These metrics (for 2020) are the Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) for the standard measurements.

Largest Contentful Paint (LCP)

LCP is a metric that tries to measure when a website is basically visible to the user and shows the largest content element visible within the user’s viewport.

  • LCP measures Loading Performance
  • It looks at when the largest element in the viewport was rendered
  • images and video elements are considered for LCP. Currently svg files are excluded, but images inside svg files are still considered
  • An element with a background image loaded via the url() function (as opposed to a CSS gradient) affects LCP
  • LCP is also affected by block-level elements containing text nodes or other inline-level text elements children

More info: https://web.dev/lcp/

Examples

How to improve LCP?

LCP is primarily affected by following factors:

  • Slow server response times – improve TTFB to improve this
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering

More info: https://web.dev/optimize-lcp/


First Input Delay (FID)

The First Input Delay (FID) metric helps measure your user’s first impression of your site’s interactivity and responsiveness. FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

  • Measures interactivity
  • Main reason of poor FID is JavaScript
  • Requires user to interact, and thus very subjective
  • It only focuses on input events from discrete actions like clicks, taps, and key presses.
  • Other interactions, like scrolling and zooming, are continuous actions and not part of FID
  • Other reports may use total blocking time (TBT) to measure instead of FID

More info: https://web.dev/fid/

Example

How to improve FID?

FID can be improved by the following:

  • Reduce JavaScript execution time
  • Break up Long Tasks
  • Optimize your page for interaction readiness
  • Use a web worker

More info: https://web.dev/optimize-fid/


Cumulative Layout Shift (CLS)

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one frame to the next.

  • Measures visual stability of the page
  • Unexpected movement of page content when user is not expecting
  • Layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.

More info: https://web.dev/cls/

Examples

Bad User experience:

Bad vs Good experience:

How to improve CLS?

  • Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes
  • Never insert content above existing content, except in response to a user interaction.
  • Prefer transform animations to animations of properties that trigger layout changes.

More info: https://web.dev/optimize-cls/


Other Web Vitals

First Contentful Paint (FCP)

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

  • For FCP content includes text, images (including background images), <svg> elements, or non-white <canvas> elements.

More info: https://web.dev/fcp/

Example

How to improve FCP?

There are many things that can be done to improve FCP. It will vary site by site so for that you can run a Lighthouse performance audit and pay attention to any specific opportunities or diagnostics the audit suggests.

In general we should following the following to improve FCP:

  • Eliminate render-blocking resources
  • Minify CSS
  • Remove unused CSS
  • Preconnect to required origins
  • Reduce server response times (TTFB)
  • Avoid multiple page redirects
  • Preload key requests
  • Avoid enormous network payloads
  • Serve static assets with an efficient cache policy
  • Avoid an excessive DOM size
  • Minimize critical request depth
  • Ensure text remains visible during webfont load
  • Keep request counts low and transfer sizes small

Time to First Byte (TTFB)

Time to First Byte (TTFB) is the time that it takes for a user’s browser to receive the first byte of page content:

More info: https://web.dev/time-to-first-byte/

How to improve TTFB?

You can improve your TTFB in a number of different ways:

  • Optimize your server
  • Route users to a nearby CDN
  • Cache assets
  • Serve HTML pages cache-first
  • Establish third-party connections early
  • Optimize the server’s application logic to prepare pages faster. If you use a server framework, the framework may have recommendations on how to do this.
  • Optimize how your server queries databases, or migrate to faster database systems.
  • Upgrade your server hardware to have more memory or CPU.

Target values for Web Vitals metrics

Target values for Web Vitals metrics
Source:


How to Track Web Vitals

There are a few different methods to check and track Web Vitals. The easiest way to measure and track all the Web Vitals is using the web-vitals JavaScript library. In my post Tracking Web Vitals in Google Analytics there are a few different ways to track all the Core Web Vitals (LCP, FID, CLS) and other Web Vitals (FCP, TTFB) metrics in Google Analytics.


More Resources

Related posts:

  1. Tracking Web Vitals in Google Analytics
  2. Optimizing / Speeding up websites
  3. 404 Error Page Best Practices
  4. How to remove render blocking JavaScript with defer and async

Leave a Reply