Web Vitals

12/2020

Agenda

  • Introduction
  • Tools to measure Web Vitals
  • Why Web Vitals matter?
  • Tips to improve Core Web Vitals

Introduction

How is your web browsing on mobile recently?

Slow mobile web page? See a lot of blank screen?

Lagged user's interaction?

Source: First Input Delay - The State of the Web

How the web became unreadable, the irony:

Accidentally tap on banners / ads?

Source: Giphy

Introducing Web Vitals:
Web Vitals is an initiative by Google to help business owners, marketers and developers alike identify opportunities to improve user experiences.

Source: The Science Behind Web Vitals

What users expect from a good web site UX:

LCP FID CLS

Source: UX patterns optimized for Core Web Vitals

Core Web Vitals

LCP FID CLS

Source: UX patterns optimized for Core Web Vitals

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

From: web.dev/vitals

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.

From: web.dev/vitals

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

From: web.dev/vitals

Tools to measure
Core Web Vitals

Chrome DevTools & Lighthouse are "lab tools", therefore cannot measure FID.
So Total Blocking Time (TBT) will be the alternative.

From: web.dev/vitals-tools

Previous version of PageSpeed Insights focus on "Loading" only.

Latest version of PageSpeed Insights now includes both
Field Data & Lab Data for Web Vitals

Previous Lighthouse

  • First Contentful Paint (FCP)
  • Speed Index
  • First Meaningful Paint (FMP)
  • Time to Interactive (TTI)
  • First CPU Idle

Lighthouse 6.0

  • First Contentful Paint (FCP)
  • Speed Index
  • Largest Contentful Paint (LCP)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

Total Blocking Time is the lab tool's alternative for First Input Delay

Why Web Vitals
Matter?

Web Vitals are signals that guarantee good (web) page experience

LCP FID CLS
When a site meets [Core Web Vitals] thresholds, users are 24% less likely to abandon page loads.

Source: The Science Behind Web Vitals

Page experience signals* will be included in Google Search ranking from May 2021

* Web Vitals
Source: Timing for bringing page experience to Google Search

Tips to improve
Core Web Vitals

LCP

  • Make sure performance metrics are fast (TTFB, FCP, DCL)
  • Optimize images and/or serve in new formats (WebP, AVIF)
  • Prefetch above-the-fold images and resources
  • Use server side rendering
  • Avoid overlay banners

FID

  • Reduce JavaScript bundles size (TTI)
  • Omit polyfills and serve modern JavaScript for modern browsers
  • Defer 3rd-party scripts (GTM, AppBoy...)
  • Avoid long script execution in main thread (adopt web worker, move processing to server...)

CLS

  • Avoid changing layout during page load

Source: UX patterns optimized for Core Web Vitals

CLS

  • Avoid changing layout during page load
  • Use placeholders for deferred blocks (ads, banners, content images...)

Source: UX patterns optimized for Core Web Vitals

CLS

  • Avoid changing layout during page load
  • Use fixed placeholders for deferred blocks (ads, banners, content images...)
  • Set image width and height attributes
  • Set dimensions for ads banners, banner, iframe
  • Layout change as a result of user's interaction must be within 500ms

The End

Thank You