Slide 1
Slide 1 text
Optimizing for Core Web Vitals
@addyosmani
Engineering Manager, Chrome
Tips & Tricks
Slide 2
Slide 2 text
Case Study
Slide 3
Slide 3 text
Page experience
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
News Home | News | Sport | Travel | Culture | More
News
Today’s the day for you. May 14
is National Dance Like a Chicken
Day!
While we could make this up
right now, we’re not. So break
out your best Chicken Dance.
This day entertains from start to
finish with people flapping their
arms and strutting chicken-like.
Everyone has probably danced
the Chicken Dance at least once
in their lifetime — especially if
you’ve attended a wedding
Slide 8
Slide 8 text
News Home | News | Sport | Travel | Culture | More
News
Today’s the day for you. May 14
is National Dance Like a Chicken
Day!
While we could make this up
right now, we’re not. So break
out your best Chicken Dance.
This day entertains from start to
finish with people flapping their
arms and strutting chicken-like.
Everyone has probably danced
the Chicken Dance at least once
in their lifetime — especially if
you’ve attended a wedding
Slide 9
Slide 9 text
Images Without
Dimensions
Ads, Embeds,
iFrames Without
Dimensions
Dynamically Injected
Content
Web Fonts Causing
FOIT/FOUT
W
H
What causes poor CLS?
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Homepage
Product Listing Page
Product Details Page
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Always include width and
height size attributes on
your images and video
elements.
Slide 14
Slide 14 text
Mini-Demo: Images without dimensions
Slide 15
Slide 15 text
Slide 16
Slide 16 text
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Slide 17
Slide 17 text
Image Aspect Ratio = ratio of width to height
Want a 16:9 ratio?
If dress.jpg has 360px height…
width = 360 * (16 / 9)
= 640px
360px
? px
Slide 18
Slide 18 text
img {
aspect-ratio: attr(width) / attr(height);
}
Slide 19
Slide 19 text
Slide 20
Slide 20 text
Slide 21
Slide 21 text
Mini-Demo: Images with dimensions
Slide 22
Slide 22 text
Mini-Demo: Lighthouse 6.0 impact
Slide 23
Slide 23 text
What elements contribute to CLS?
Slide 24
Slide 24 text
What elements contribute to CLS?
Slide 25
Slide 25 text
Chloe’s approach to image loading
Slide 26
Slide 26 text
Chloe’s approach to image loading
Fixed size parent container
Color similar to final image
Responsive image
Also has dimensions specified
Slide 27
Slide 27 text
Reserve enough space
for dynamic content,
like ads or promos.
Slide 28
Slide 28 text
Avoid inserting new
content above existing
content, unless in response
to a user interaction.
Slide 29
Slide 29 text
Mini-demo: Ads/Promos without dimensions
Slide 30
Slide 30 text
.container {
display: block;
width: 720px;
height: 90px;
background: #ccc;
overflow:hidden;
}
</div>
Container
Content in Container
Content in Container - different size
Slide 31
Slide 31 text
Mini-demo: Ads/Promos with dimensions
Slide 32
Slide 32 text
Mini-Demo: Lighthouse 6.0 impact
Slide 33
Slide 33 text
Product Listing Page
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Product Listing Page: unexpected promo banner layout shifts
CLS
Slide 36
Slide 36 text
CLS
Product Listing Page: unexpected promo banner layout shifts
Before
Slide 37
Slide 37 text
Reserve space of promotional banner
CLS
Banner was inline and API call originally came from a
client-side service using JavaScript
Moved this API call to the server and reserved space
With a simple height setting.
Slide 38
Slide 38 text
CLS
Product Listing Page: unexpected promo banner layout shifts
After
Slide 39
Slide 39 text
CLS
Filters UI: Poor CLS due to re-hydration
Before
Slide 40
Slide 40 text
CLS
Filters UI: Poor CLS due to re-hydration
Before
Slide 41
Slide 41 text
CLS
Filters UI: Improved CLS after re-hydration fix
After
Before/After
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
To improve CLS, Chloe acted on many elements:
1. Reserving the space of the Promo Content in terms of ratio.
2. Adopt Skeleton Pattern to render some colored rectangles prior
to Product images loading.
3. Reserve the space for the Promo Banner async request before
receiving the message.
4. Reserved the space for the Filters dynamic component.
CLS
Slide 45
Slide 45 text
LOL MORE
METRICS
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Slow Server
Response Times
Render-blocking
JavaScript and CSS
Slow Resource Load
Times
Client-side
Rendering
What causes poor LCP?
Slide 48
Slide 48 text
Homepage LCP Before
1. LCP: 10s
2. LCP Related Node Start Request time: 5.3s
3. LCP Related Node Size: 591KB.
4. LCP Related Node Content Download time: 4437ms.
LCP
Slide 49
Slide 49 text
Elements that affect LCP
1. ![]()
elements
2. ![]()
elements inside an
Slide 50
Slide 50 text
For many sites, images are
the largest element in view
when the page has finished
loading. Optimize them.
Slide 51
Slide 51 text
LCP
What element was identified as LCP?
Slide 52
Slide 52 text
LCP
What element was identified as LCP?
Slide 53
Slide 53 text
Homepage: Overly high Retina images (e.g 1920w)
LCP
Slide 54
Slide 54 text
Homepage: Removed overly large srcset sizes
LCP
-51% less KB downloaded
Slide 55
Slide 55 text
Image Optimizations (PLP)
Total ATF Image downloaded size 248KB.
Each image at JPEG quality 85%, size 400px
Slide 56
Slide 56 text
Image Optimizations
1. Adopt an image CDN.
2. Adopted WebP by default.
3. Resized images to 282px
intrinsic size - while in the
viewport images have size
of 152px max (right
balance on Retina devices).
4. They tuned in the Lazy
loader to better avoid
requesting offscreen
images.
Total ATF Image downloaded size 14.5KB
Each product page now weighs 57% less
Slide 57
Slide 57 text
Homepage LCP After (Redesign)
1. LCP: 4s
2. LCP Related Node Start Request Time: 1360s
3. LCP Related Node Size: 238KB
4. LCP Related Node Content Download time: 1679 ms
LCP
Slide 58
Slide 58 text
Defer any non-critical
JavaScript and CSS to speed
up loading of the main
content of your web page.
Slide 59
Slide 59 text
LCP
Product Listings Page
Slide 60
Slide 60 text
Render-blocking CSS
LCP
Slide 61
Slide 61 text
Critical CSS
LCP
Product Listings Page
Slide 62
Slide 62 text
.topBannerWrapper & {
height: topbanner(minHeight);
z-index: 1;
opacity: 1;
@include backgroundLoading();
critical: this;
&.laif-topbanner {
.imgWrapper, .overlay {
opacity: 0;
transition: opacity 300ms ease-in;
critical: this;
}
&.laif-loaded {
.imgWrapper, .overlay {
opacity: 1;
}
&::before {
content: unset;
LCP
Slide 63
Slide 63 text
for (var i = 0; i < CssFiles.media.length; i++) {
var link = document.createElement("link");
link.href = CssFiles.media[i];
link.type = "text/css";
link.rel = "stylesheet";
link.media = "print";
link.onload = link.media = "all";
document.getElementsByTagName("head")
[0].appendChild(link);
}
LCP
Slide 64
Slide 64 text
Impact of Critical CSS Optimizations
Inlined critical CSS Deferred load of non-critical CSS
LCP
Slide 65
Slide 65 text
A faster server response
time directly improves
every single page-load
metric, including LCP.
Slide 66
Slide 66 text
How can I tell if I have slow server response times?
Slide 67
Slide 67 text
Server Push
LCP
Slide 68
Slide 68 text
Link: ; rel=preload; as=style, ; rel=preload; as=script, ;
rel=preload; as=image
LCP
Slide 69
Slide 69 text
Server Push Impact
LCP
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Long Tasks
Long JavaScript
Execution Time
Large JavaScript
Bundles
Render-blocking
JavaScript
What causes poor FID?
Slide 72
Slide 72 text
Overall Core Web Vitals Improvements - Lab
Before CLS + LCP
Improvements
After CLS fix on
Promo Banner and
Filters widgets
CLS 0.4 -> 0
Critical CSS,
Image resizing etc.
LCP 2.9s -> 1.5s
Slide 73
Slide 73 text
Largest Contentful Paint
CrUX
First Input Delay
CrUX
Cumulative Layout Shift
CrUX
Overall Core Web Vitals Improvements - Field
Slide 74
Slide 74 text
CrUX Dashboard & CrUX API
LCP
const KEY = apiKey;
async function (requestBody) {
const endpointUrl = 'https://chromeuxreport.googleapis.com/v1/
records:queryRecord';
const resp = await fetch(`${endpointUrl}?key=${KEY}`, {
method: 'POST',
body: JSON.stringify(requestBody),
});
const json = await resp.json();
if (!resp.ok) {
throw new Error(json.error.message);
}
return json;
Slide 75
Slide 75 text
web.dev/vitals
Optimize your Web Vitals
Slide 76
Slide 76 text
Template slides
The following slide is to be used for
marketing and promotional purposes only.
Slide 77
Slide 77 text
Heading here
Three columns
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Slide 78
Slide 78 text
Heading here
Three columns — callout
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Slide 79
Slide 79 text
Heading here
Four columns
When the cheese comes out
everybody's happy st. agur
blue cheese dolcelatte.
Cheeseburger cheesy grin
babybel caerphilly blue
castello mozzarella pepper
jack babybel. Stilton melted
cheese cut the cheese stilton
cheesy feet cheese strings
say cheese halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur
blue cheese dolcelatte.
Cheeseburger cheesy grin
babybel caerphilly blue
castello mozzarella pepper
jack babybel. Stilton melted
cheese cut the cheese stilton
cheesy feet cheese strings
say cheese halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur
blue cheese dolcelatte.
Cheeseburger cheesy grin
babybel caerphilly blue
castello mozzarella pepper
jack babybel. Stilton melted
cheese cut the cheese stilton
cheesy feet cheese strings
say cheese halloumi.
Heading here
When the cheese comes out
everybody's happy st. agur
blue cheese dolcelatte.
Cheeseburger cheesy grin
babybel caerphilly blue
castello mozzarella pepper
jack babybel. Stilton melted
cheese cut the cheese stilton
cheesy feet cheese strings
say cheese halloumi.
Slide 80
Slide 80 text
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse(“http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Slide 81
Slide 81 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi.
Mobile Close Up
Slide 82
Slide 82 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi.
Mobile Close Up 2
Slide 83
Slide 83 text
When the cheese comes out everybody's
happy st. agur blue cheese dolcelatte.
A. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella
pepper jack babybel.
B. Stilton melted cheese cut the
cheese stilton cheesy feet cheese
strings say cheese halloumi.
Mobile Close Up Callouts
A
B
Slide 84
Slide 84 text
When the cheese comes out everybody's
happy st. agur blue cheese dolcelatte.
Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper
jack babybel. Stilton melted cheese cut
the cheese stilton cheesy feet cheese
strings say cheese halloumi.
Laptop Large
Slide 85
Slide 85 text
When the cheese comes out everybody's
happy st. agur blue cheese dolcelatte.
Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper
jack babybel. Stilton melted cheese cut
the cheese stilton cheesy feet cheese
strings say cheese halloumi.
Laptop Small
Slide 86
Slide 86 text
When the cheese comes out everybody's happy st. agur
blue cheese dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello mozzarella pepper jack
babybel. Stilton melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese halloumi.
Monitor
Slide 87
Slide 87 text
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse(“http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Slide 88
Slide 88 text
Photo & Text
When the cheese comes out
everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger
cheesy grin babybel caerphilly blue
castello mozzarella pepper jack
babybel. Stilton melted cheese cut
the cheese stilton cheesy feet cheese
strings say cheese halloumi.
Slide 89
Slide 89 text
Heading here Heading here Heading here
Timeline
Heading here
Inactive [replace where needed]
Slide 90
Slide 90 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi.
Bar Chart
A
B
C
D
E
0 10 20 30 40
Slide 91
Slide 91 text
Table Large
Text Text Text Text Text
Text Here Text Here Text Here Text Here Text Here
Text Here Text Here Text Here Text Here Text Here
Text Here Text Here Text Here Text Here Text Here
Text Here Text Here Text Here Text Here Text Here
Slide 92
Slide 92 text
Table Small
Text Text Text
Text Here Text Here Text Here
Text Here Text Here Text Here
Text Here Text Here Text Here
Text Here Text Here Text Here
When the cheese comes out
everybody's happy st. agur blue cheese
dolcelatte. Cheeseburger cheesy grin
babybel caerphilly blue castello
mozzarella pepper jack babybel. Stilton
melted cheese cut the cheese stilton
cheesy feet cheese strings say cheese
halloumi.
Slide 93
Slide 93 text
Firstname Lastname
Title / Position
@socialhandle
Firstname Lastname
Title / Position
@socialhandle
Firstname Lastname
Title / Position
@socialhandle
Slide 94
Slide 94 text
Firstname Lastname
Title / Position
@socialhandle
Firstname Lastname
Title / Position
@socialhandle
Firstname Lastname
Title / Position
@socialhandle
Firstname Lastname
Title / Position
@socialhandle
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Slide Title
1. Here’s the thing
2. And because of that, this
3. At the same time, there’s this thing
4. That pretty much sums it up
Slide 97
Slide 97 text
Heading here Heading here
Two columns
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi. When the cheese comes
out everybody's happy cut the cheese babybel taleggio
bavarian bergkase st. agur blue cheese cheese on toast
caerphilly. Cheddar.
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi. When the cheese comes
out everybody's happy cut the cheese babybel taleggio
bavarian bergkase st. agur blue cheese cheese on toast
caerphilly. Cheddar.
Slide 98
Slide 98 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi. When the cheese
comes out everybody's happy cut the cheese babybel
taleggio bavarian bergkase st. agur blue cheese cheese on
toast caerphilly. Cheddar.
● When the cheese comes out everybody's happy
● Who moved my cheese stinking bishop queso st.
agur blue cheese cheesy grin caerphilly brie edam.
● Cauliflower cheese pepper jack emmental the big
cheese the big cheese the big cheese mozzarella
babybel. Bavarian bergkase cheesy grin caerphilly
pecorino edam monterey jack cottage cheese
halloumi. Bocconcini croque monsieur pecorino.
Half paragraph / half bullets
Slide 99
Slide 99 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi. When the cheese
comes out everybody's happy cut the cheese babybel
taleggio bavarian bergkase st. agur blue cheese cheese on
toast caerphilly. Cheddar.
Half paragraph / half quote
“Mascarpone halloumi brie taleggio
edam halloumi cheese and biscuits
gooey cheese.”
Slide 100
Slide 100 text
When the cheese comes out everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper jack babybel.
Stilton melted cheese cut the cheese stilton cheesy feet
cheese strings say cheese halloumi.
Mobile Close Up 2