This document discusses optimizing website performance for core web vitals including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). It provides definitions and metrics for each vital, examples of issues that can cause poor performance, and tips for measurement and improvement. Key recommendations include prioritizing pages for optimization, A/B testing changes, and continuous monitoring to prevent regressions. Real-world examples show how optimizing for LCP led to improved metrics like lead generation and sales for one company.

1. Core Web Vitals
Optimising for Joy and Busting Myths
14 July 2021  Virtual Conference
Andrey Lipattsev
EMEA CMS Partnerships Lead @Google
/andreylipattsev
@AndreyLipattsev

2. Photo by Angelo Moleele on Unsplash 2

3. Our topics
Performance & Core Web Vitals
1
2
3 Performance Tooling
Why we care
3
4 Performance Tips

4. Performance
4

5. Is it happening?
contentbazaar.co/20160314/pi-way
5

6. Is it responsive?
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
6

7. Is it stable?
Does it spark joy?
contentbazaar.co/20160314/pi-way
7

8. Does it spark joy?
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
8

9. Core Web Vitals
9

10. LCP
Largest Contentful Paint
CLS
Cumulative Layout Shift
FID
First Input Delay
(loading) (interactivity) (stability)
10

11. LCP
Largest Contentful Paint
web.dev/lcp
😃 😐 😢
2.5 s 4.0 s
The page becomes useful or the main content has loaded
11

12. FID
First Input Delay
web.dev/fid
😃 😐 😢
100 ms 300 ms
12
First impression of your site’s interactivity and responsiveness

13. CLS
Cumulative Layout Shift
web.dev/cls
😃 😐 😢
0.1 0.25
13
Layout stability to ensure smooth and natural interactions
layout shift score = impact fraction * distance fraction

14. CLS
Cumulative Layout Shift
web.dev/cls
14

15. LCP
Largest Contentful Paint
😃 😐 😢
2.5 s 4.0 s
CLS
Cumulative Layout Shift
😃 😐 😢
0.1 0.25
FID
First Input Delay
😃 😐 😢
100 ms 300 ms
(loading) (interactivity) (stability)
15

16. 16
bit.ly/web-vitals-science
bit.ly/web-vitals-methodology

17. Why we care
17

18. 18
Leading telecommunications
company in Europe and Africa
(Italy)

19. 19
Advertising
Channels
Version A -
Optimized for
LCP
(31% better)
Version B -
Original Page
50% traffic
50% traffic

20. 20
15% Better Lead to Visit Rate
11% Better Cart to Visit Rate
8%More Sales
$$$

21. 21
goo.gle/cwv-cms-report

22. 22
goo.gle/px-timeline

23. 23
bit.ly/mobile-page-speed-data
bit.ly/Milliseconds-Make-Millions

24. Performance
tooling
24

25. Lighthouse
● Lab testing
● Some metrics are replaced (e.g. FID by TBT)
● Available @ CLI, PSI, CDT*
* CLI = Command Line Interface
* PSI = PageSpeed Insights
* CDT = Chrome Dev Tools

26. 26
Chrome User
Experience
Report
● Reports by country, device and connection
CrUX
g.co/chromeuxdash

27. 27
● Data from
○ Lighthouse (by URL)
○ CrUX, if available (by URL & Origin)
PageSpeed Insights

28. 28
● CWV data for each page
Search Console

29. 29
● LCP, CLS & TBT in the perf trace
Chrome Dev Tools

30. 30
● Real-time CWV measurement on-page
Web Vitals Chrome
Extension

31. 31
● Same metrics as CrUX
web-vitals.js
github.com/GoogleChrome/web-vitals

32. Performance
guide
32

33. 33
web.dev/lcp
Measures the render time of the largest
content element (image or block of text)
visible within the viewport.
LCP
GOOD
NEEDS
IMPROVEMENT
POOR
4 sec
2.5 sec

34. 34
What causes poor LCP?
Slow Server
Response Times
Render-blocking
JavaScript and
CSS
Slow Resource
Load Times
Client-side
Rendering

35. 35
Elements impacting LCP
HTML
Image Network Request
FCP LCP
Render Blocking
CSS and JS

36. 36
CLS
GOOD
NEEDS
IMPROVEMENT
POOR
0.25
0.1
● Session windows (max 5s lenght, 1s gap)
● Each window has a score
● Biggest session window score -> CLS
web.dev/evolving-cls

37. 37
What causes poor CLS?
Images Without
Dimensions
Ads, Embeds,
iFrames Without
Dimensions
Dynamically
Injected Content
Web Fonts Causing
FOIT/FOUT
W
H

38. 38
Layout Shifts caused by Image and Ads
Header
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
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non
proident, sunt in culpa qui officia
deserunt mollit anim id est
laborum.
Layout
shift
Image
Header
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
laboris nisi ut aliquip ex ea
commodo consequat. Duis aute
irure dolor in reprehenderit in
voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non
proident, sunt in culpa qui officia
Image
Header
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 laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute
Ad
Layout
shift

39. 39
How to minimize Layout Shift
Image
Header
Ad placeholder
min-height
Aspect Ratio
(width/height IMG
attributes)
Header
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 laboris nisi ut
aliquip ex ea commodo consequat.
Ad
Image
Image
Header
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 laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu.
Ad placeholder
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 laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu.
Layout
shift

40. 40
web.dev/lcp
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 ms
100 ms

41. 41
What causes poor FID?
Long Tasks Long JavaScript
Execution Time
Large JavaScript
Bundles
Render-blocking
JavaScript

42. What can you do
right now?
42

43. 43
Measure field metrics to understand how
users experience your site
Start Measuring!

44. 44
There are a lot of field tools available...
web.dev/vitals-tools
web.dev/vitals-measurement-getting-started
web.dev/vitals-field-measurement-best-practices
Search
Console
Chrome User
Experience Report
web-vitals
JS
PageSpeed
insights

45. Let’s recap
45

46. 46
It’s ok to start small
Lab tools are your friend
Pick a high traffic page
“Core Web Vitals in the DevTools timeline”, web.dev LIVE 2020 (web.dev/live)
Tip #1: Prioritize!

47. 47
Tip #2: A/B test to
measure impact

48. 48
Tip #3: Continuous
monitoring
📉🙅 Prevent regressions by setting up a monitoring
workflow

49. Let’s keep
talking!
49
Andrey Lipattsev
Web Partnerships, Google
/andreylipattsev
@AndreyLipattsev
alipattsev+mm21uk@google.com