This document discusses Core Web Vitals, which are user-centric web performance metrics defined by Google. It introduces the three Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Thresholds for what is considered good, adequate, or needs improvement are provided for each metric. The document also outlines tools that can be used to measure Core Web Vitals and explains how real user monitoring is important for field testing Core Web Vitals performance.
2. Prioritizing quality of experience
Is it stable?
Is it responsive?
Is it happening?
contentbazaar.co/20160314/pi-way
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
contentbazaar.co/20160314/pi-way
contentbazaar.co/20160314/pi-way
3. LCP
Largest Contentful Paint
Core Web Vitals*
User-centric performance metrics
GOOD ADEQUATE
NEEDS
IMPROVEMENT
2.5 sec 4.0 sec
CLS
Cumulative Layout Shift
GOOD ADEQUATE
NEEDS
IMPROVEMENT
0.1 0.25
FID
First Input Delay
GOOD ADEQUATE
NEEDS
IMPROVEMENT
100 ms 300 ms
To ensure you're hitting this target for most of your users, a good
threshold to measure is the 75th percentile of page loads,
segmented across mobile and desktop devices.
4. LCP
Largest Contentful Paint
web.dev/lcp
GOOD ADEQUATE
NEEDS
IMPROVEMENT
2.5 sec 4.0 sec
Why: Measures when the page becomes useful to the user or
when the main content on the screen has likely loaded
Major Factors:
● Server response time
● CSS blocking time
● Asset/subresource load time
6. FID
First Input Delay
web.dev/fid
GOOD ADEQUATE
NEEDS
IMPROVEMENT
100 ms 300 ms
Why: Measures your user’s first impression of your site’s
interactivity and responsiveness
9. 4B
Internet
Users
Core Web Vitals - tl;dr
Chrome announced "Core Web Vitals,” a set of
essential metrics that measure quality of user
experience, which correlate to loading,
interactivity, and visual stability
CHROME (blog post here)
Search announced an evolution of the page
experience factors considered for ranking
content. It combines existing signals (such as
mobile-friendly, HTTPS) with new signals - the
Core Web Vitals.
GOOGLE SEARCH (blog post here)
10. Tools That Measure Core Web Vitals
Overview of Google Performance Tools
Lighthouse
PageSpeed Insights
Chrome Dev Tools
CrUX
Google Search Console
Web Vitals Chrome Extension
Measures CWV by simulating page load in a lab environment and using
proxy metrics when necessary (e.g. TBT instead of FID).
Reports page-level CWV measurements made by running Lighthouse
(lab) as well pulling data from CrUX (field).
Exposes LCP in the performance timeline as well as CLS and TBT when
running a performance trace.
Provides an origin-level report for all CWV across country, device, and
connection type dimensions
Reports page-level CWV measurements pulling data from CrUX (field).
This extension measures the CWV, providing instant feedback on
loading, interactivity and layout shift metrics.
11. Real User Monitoring (RUM) & Core Web Vitals
PERFORMANCE IS RELATIVE FIELD vs LAB METRICS
Quickly respond to ever
changing user needs
ACCELERATE
(RUM) allows for Field Testing, and
is critical for improving your Core
Web Vitals.
RUM = FIELD TESTING
Good start to see how your site
performs, but only Field Metrics
give you the full picture of how
users experience your site.
Performance is Relative -
unique users experience your
site differently.
