Optimizing For Core Web Vitals

Optimizing for Core Web Vitals
@addyosmani

Engineering Manager, Chrome
Tips & Tricks

View Slide

Case Study

View Slide

Page experience

View Slide

View Slide

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

View Slide

Images Without
Dimensions

Ads, Embeds,
iFrames Without
Dimensions

Dynamically Injected
Content
Web Fonts Causing
FOIT/FOUT

W
H
What causes poor CLS?

View Slide

View Slide

Homepage

Product Listing Page

Product Details Page

View Slide

View Slide

Always include width and
height size attributes on
your images and video
elements.

View Slide

Mini-Demo: Images without dimensions

View Slide

View Slide

img { width: 100%; /* or max-width: 100%; */ height: auto; } 

View Slide

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

View Slide

img { aspect-ratio: attr(width) / attr(height); } 

View Slide

View Slide

src="shoe-1000.jpg"

srcset="shoe-1000.jpg 1000w,

shoe-2000.jpg 2000w,

shoe-3000.jpg 3000w"

alt="Shoe"/>

View Slide

Mini-Demo: Images with dimensions

View Slide

Mini-Demo: Lighthouse 6.0 impact

View Slide

What elements contribute to CLS?

View Slide

Chloe’s approach to image loading

View Slide

Chloe’s approach to image loading

Fixed size parent container

Color similar to final image

Responsive image

Also has dimensions specified

View Slide

Reserve enough space
for dynamic content,
like ads or promos.

View Slide

Avoid inserting new
content above existing
content, unless in response
to a user interaction.

View Slide

Mini-demo: Ads/Promos without dimensions

View Slide

.container { display: block; width: 720px; height: 90px; background: #ccc; overflow:hidden; } 

Container
Content in Container
Content in Container - different size

View Slide

Mini-demo: Ads/Promos with dimensions

View Slide

Mini-Demo: Lighthouse 6.0 impact

View Slide

Product Listing Page

View Slide

View Slide

Product Listing Page: unexpected promo banner layout shifts
CLS

View Slide

CLS
Before

View Slide

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.

View Slide

CLS
After

View Slide

CLS
Filters UI: Poor CLS due to re-hydration
Before

View Slide

CLS
Filters UI: Improved CLS after re-hydration fix
After
Before/After

View Slide

View Slide

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

View Slide

LOL MORE
METRICS

View Slide

View Slide

Slow Server
Response Times

Render-blocking
JavaScript and CSS

Slow Resource Load
Times
Client-side
Rendering

What causes poor LCP?

View Slide

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

View Slide

Elements that affect LCP
1. elements

2. elements inside an element

3. elements (if specified, the poster image is used to measure LCP)

4. An element with a background image loaded via the url() function (as
opposed to a CSS gradient)

5. Block-level elements containing text nodes or other inline-level text elements

View Slide

For many sites, images are
the largest element in view
when the page has finished
loading. Optimize them.

View Slide

LCP
What element was identified as LCP?

View Slide

Homepage: Overly high Retina images (e.g 1920w)
LCP

View Slide

Homepage: Removed overly large srcset sizes
LCP
-51% less KB downloaded

View Slide

Image Optimizations (PLP)
Total ATF Image downloaded size 248KB.

Each image at JPEG quality 85%, size 400px

View Slide

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

View Slide

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

View Slide

Defer any non-critical
JavaScript and CSS to speed
up loading of the main
content of your web page.

View Slide

LCP
Product Listings Page

View Slide

Render-blocking CSS
LCP

View Slide

Critical CSS
LCP
Product Listings Page

View Slide

.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

View Slide

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

View Slide

Impact of Critical CSS Optimizations
Inlined critical CSS Deferred load of non-critical CSS
LCP

View Slide

A faster server response
time directly improves
every single page-load
metric, including LCP.

View Slide

How can I tell if I have slow server response times?

View Slide

Server Push

LCP

View Slide

Link: ; rel=preload; as=style, scripts.js>; rel=preload; as=script, ;
rel=preload; as=image

LCP

View Slide

Server Push Impact

LCP

View Slide

View Slide

Long Tasks

Long JavaScript
Execution Time

Large JavaScript
Bundles
Render-blocking
JavaScript

What causes poor FID?

View Slide

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

View Slide

Largest Contentful Paint

CrUX

First Input Delay

CrUX
Cumulative Layout Shift

CrUX
Overall Core Web Vitals Improvements - Field

View Slide

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;

View Slide

web.dev/vitals
Optimize your Web Vitals

View Slide

Template slides

The following slide is to be used for
marketing and promotional purposes only.

View Slide

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

halloumi.
Heading here

halloumi.

View Slide

Heading here
Three columns — callout
halloumi.
Heading here

halloumi.
Heading here

halloumi.

View Slide

Heading here
Four columns
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

Heading here

Heading here


View Slide

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);
}

View Slide

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

View Slide

Mobile Close Up 2

View Slide

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

View Slide

Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper
jack babybel. Stilton melted cheese cut
the cheese stilton cheesy feet cheese
Laptop Large

View Slide

Cheeseburger cheesy grin babybel
caerphilly blue castello mozzarella pepper
jack babybel. Stilton melted cheese cut
Laptop Small

View Slide

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

View Slide

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);
}

View Slide

Photo & Text

 
everybody's happy st. agur blue
cheese dolcelatte. Cheeseburger
cheesy grin babybel caerphilly blue
castello mozzarella pepper jack
babybel. Stilton melted cheese cut

View Slide

Heading here Heading here Heading here

Timeline

Heading here

Inactive [replace where needed]

View Slide

Bar Chart
A
B
C
D
E
0 10 20 30 40

View Slide

Table Large
Text Text Text Text Text
Text Here Text Here Text Here Text Here Text Here

View Slide

Table Small
Text Text Text
Text Here Text Here Text Here
halloumi.

View Slide

Firstname Lastname

Title / Position
 
 
@socialhandle

Firstname Lastname

Title / Position
 
 
@socialhandle
Firstname Lastname

Title / Position
 
 
@socialhandle

View Slide

Firstname Lastname

Title / Position
 
 
@socialhandle
Firstname Lastname

Title / Position
 
 
@socialhandle
Firstname Lastname

Title / Position
 
 
@socialhandle
Firstname Lastname

Title / Position
 
 
@socialhandle

View Slide

View Slide

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

View Slide

Heading here Heading here
Two columns
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.
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.

View Slide

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

View Slide

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.”

View Slide

Mobile Close Up 2

View Slide

Optimizing For Core Web Vitals

Optimizing For Core Web Vitals

Addy Osmani

More Decks by Addy Osmani

Other Decks in Technology

Featured

Transcript