3. web.dev LIVE Extended @GDG Taichung
15 mins
15 mins
15 mins
15 mins
Web Vitals
● What’s Web Vitals
● Page experience
What’s next?
● Tooling
● Vital Loop
What else?
● Tooling.Report
● What’s new in Chrome DevTools
● Web Stories
Q&A
7. web.dev LIVE Extended @GDG Taichung
Web Vitals
An initiative by Google to provide unified guidance for quality signals that,
we believe, are essential to delivering a great user experience on the web.
8. web.dev LIVE Extended @GDG Taichung
Web Vitals
Essential metrics for a healthy site
● Help site owners improve user experiences
● Simplify performance measurement
● Focus on metrics that matter most
● Review metrics on an annual basis
9. web.dev LIVE Extended @GDG Taichung
contentbazaar.co/20160314/pi-way
Visual Stability
Is it delightful?
contentbazaar.co/20160314/pi-way
Loading
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
Interactivity
Is it responsive?
Essential metrics for a healthy site
10. web.dev LIVE Extended @GDG Taichung
Essential metrics for a healthy site
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.
LCP
Largest Contentful Paint
GOOD
NEEDS
IMPROVEMENT
POOR
4.0 sec2.5 sec
Measures Loading Performance
FID
First Input Delay
GOOD
NEEDS
IMPROVEMENT
POOR
100 ms 300 ms
Measures Interactivity
CLS
Cumulative Layout Shift
GOOD
NEEDS
IMPROVEMENT
POOR
0.1 0.25
Measures Visual Stability
11. web.dev LIVE Extended @GDG Taichung
Measures the render time of
the largest content element
(image or block of text) visible
within the viewport.
LCP
GOOD
NEEDS
IMPROVEMENT
POOR
4 sec2.5 sec
12. web.dev LIVE Extended @GDG Taichung
Measures the time from when a
user first interacts with the page
until the time when the browser
is actually able to respond to
that interaction.
FID
GOOD
NEEDS
IMPROVEMENT
POOR
300 ms100 ms
13. web.dev LIVE Extended @GDG Taichung
Measures the sum of all
unexpected layout shifts that
occur throughout the
lifespan of the page
CLS
GOOD
NEEDS
IMPROVEMENT
POOR
0.250.1
0.5
0.25
0.75
14. web.dev LIVE Extended @GDG Taichung
Metrics and APIs
LCP
Measures Loading Performance
web.dev/lcp
FID
Measures Interactivity
web.dev/fid
CLS
Measures Visual Stability
web.dev/cls
Largest Contentful Paint API
wicg.github.io/largest-contentful-paint/
Event Timing API
wicg.github.io/event-timing/
Layout Instability API
wicg.github.io/layout-instability/
15. web.dev LIVE Extended @GDG Taichung
The Science Behind Web Vitals → bit.ly/web-vitals-science
Why these metrics? → bit.ly/web-vitals-science
Why X threshold and P75? → bit.ly/web-vitals-methodology
when a site meets the above
(Core Web Vitals) thresholds, users are 24% less
likely to abandon page loads
16. web.dev LIVE Extended @GDG Taichung
● Upcoming Search ranking change
that incorporates Web Vitals
● User’s experience on the page
matters, more than ever
● Unifies previous search efforts and
makes it easier for publishers and
site owners to understand and
optimize for
🔗 bit.ly/page-experience
19. web.dev LIVE Extended @GDG Taichung
Data is from simulated users
● Lighthouse
● WebPageTest
● PageSpeed Insights
Field Data
Data is from actual users
● Chrome User Experience Report
(CrUX)
● Analytics data (e.g. Google
Analytics)
● PageSpeed Insights
Lab Data
How to measure web performance?
20. web.dev LIVE Extended @GDG Taichung
Development Post-LaunchIdea
Easier to isolate variables
Measures performance
experienced by users
Different tools for different stages
Lab Data Field Data
21. web.dev LIVE Extended @GDG Taichung
Core Web Vitals now in your favorite tools
use TBT instead
use TBT instead
22. web.dev LIVE Extended @GDG Taichung
Provides an origin-level report for all Core Web Vitals across country, device,
and connection type dimensions over the last 28 days.
Overview of Google Performance Tools
Use in DevTools to optimize your user experience and ensure
you are setting yourself up for success with Core Web Vitals in the field.
Use to compare your page-level lab and field Core Web
Vitals performance.
Exposes LCP in the performance timeline as well as CLS and TBT when
running a performance trace.
Use Core Web Vitals report for a summary of how your
origins are performing in the field.
Use the to track a page's performance against Core
Web Vitals in real-time.
23. web.dev LIVE Extended @GDG Taichung
or measure on web.dev/measure/
● V6 release
Read more at
web.dev/lighthouse-whats-new-6.0/
● Additional audits,
metrics and scoring
● TBT correlates to FID
26. web.dev LIVE Extended @GDG Taichung
● Chrome Extension for
local testing
● Now available in
Chrome Web Store:
github.com/GoogleChrome/
web-vitals-extension
27. web.dev LIVE Extended @GDG Taichung
github.com/GoogleChrome/web-vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log)
JS Library to track Core Web Vitals with your Analytics provider.
28. web.dev LIVE Extended @GDG Taichung
github.com/GoogleChrome/web-vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
29. web.dev LIVE Extended @GDG Taichung
● A new API, refreshed CrUX
Dashboard, and field
measurement of your CWV
● CrUX Dashboard:
g.co/chromeuxdash
● CrUX API:
developers.google.com/web/too
ls/chrome-user-experience-repo
rt/api/guides/getting-started
30. web.dev LIVE Extended @GDG Taichung
● Core Web Vitals
CrUX Field data
● Device split level
● URL performance grouped
by URL group
● Read more at
support.google.com/webma
sters/answer/9205520
31. web.dev LIVE Extended @GDG Taichung
developers.google.com/speed/pagespeed/insights/
● PageSpeed Insights and PSI API
● Lab and Field data
● Core Web Vitals with blue ribbon
32. web.dev LIVE Extended @GDG Taichung
Monitor with a dashboard
Try out the new CrUX API and updated CrUX
Dashboard to easily access how well your
origin and URL have performed against Core
Web Vitals in the field over the last 28 days.
Prevent regressions
Use Lighthouse CI to ensure there are no
regressions in Core Web Vitals before you
deploy a change to production.
CI
Get tailored guidance
web.dev/measure can audit your page and
show you a prioritized set of guides and
codelabs for optimization.
Get a site-wide view
Use Search Console's new Core Web
Vitals report to identify groups of pages
that need improvement.
Diagnose issues
Once you've identified pages that need work,
use PageSpeed Insights web app or API to
diagnose lab and field issues on a page.
Optimize locally
Use Lighthouse and Chrome DevTools to
measure Core Web Vitals and get
actionable guidance on exactly what to fix.
Vital Loop
35. web.dev LIVE Extended @GDG Taichung
● What's New in Speed Tooling
@egsweeny
● How to Optimize for Web Vitals
@addyosmani
● Mastering the Chrome UX Report on BigQuery
@rick_viscomi
● Core Web Vitals in the DevTools Timeline
@aerotwist and @philwalton
web.dev/live
37. web.dev LIVE Extended @GDG Taichung
Experimental projects from the Chrome team
proxx.appsquoosh.app
38. ● Choose the right build tool for
your next project
● Determine whether migrating
to a new build tool is worth it
● Optimize your current build
tool configuration
● Learn more at
github.com/GoogleChromeLabs/tooling.report
bundlers.tooling.report/