Top Core Web Vitals recommendations for 2023

Barry Pollard

​

Web Performance Developer Advocate

Google Chrome

@tunetheweb

@tunetheweb@webperf.social

QR Code for slides on the last slide!

There is a LOT of webperf

advice out there

Credit: Tammy Everts - https://youtu.be/cnr3CJwpaps?t=804

What to measure?

https://web.dev/vitals/

Core Web Vitals

We now know what to measure

How to improve web performance?

How to improve web performance?

• Lighthouse has 53 Performance audits

​

How to improve web performance?

• Lighthouse has 53 Performance audits
• Yellow Lab Tools has 38 checks

​

How to improve web performance?

• Lighthouse has 53 Performance audits
• Yellow Lab Tools has 38 checks
• WebPageTest has 16 PAGES of stats

How to improve web performance?

• Lighthouse has 53 Performance audits
• Yellow Lab Tools has 38 checks
• WebPageTest has 16 PAGES of stats
• Chrome Dev Tools Performance Panel has 543,543,654,635,465 pieces of info (approximately)

It’s kinda overwhelming!!

What’s the most important things for me to look at for my site to really move the needle on my Core Web Vitals?

Focus on:

• Recommendations we believe will have the largest real-world impact
• Recommendations that are relevant and applicable to most sites
• Recommendations that are realistic for most developers to implement

Top recommendations for each:

LCP recommendations

• Ensure the LCP resource is discoverable from the HTML source

​

“HTML is parsed line-by-line”

​

Harry Roberts

Get your head straight

https://www.youtube.com/watch?v=MHyAOZ45vnU

HTML parser

​

AKA

“the big dog”

Photo by Vlad Rudkov on Unsplash

@tunetheweb

HTML is parsed line-by-line

(and it can often be paused)

​

The preload scanner

​

AKA

“the excitable little puppy”

Photo by Joe Caione on Unsplash

https://www.webpagetest.org

https://web.dev/preload-scanner/

How would I fight

the preload scanner?

The preload scanner

​

AKA

“the excitable little puppy”

Photo by Joe Caione on Unsplash

What if I need to execute JavaScript

to know what to display?

Don’t fight the preload scanner

​

Don’t fight the preload scanner

​

Make your resources discoverable

LCP recommendations

• Ensure the LCP resource is discoverable from the HTML source
• Ensure the LCP resource is prioritized

Browsers don’t prioritise images

​

Browsers don’t prioritise images

​

(initially)

• Render-blocking resources
• On-screen content
• Off-screen content

​

Images are not render-blocking

Browsers fetch resources in several steps:

OK, but some of you might suggest…

A preload? Does that solve this?

https://web.dev/fetch-priority/

​

“...when we explicitly increase the priority of one resource we implicitly decrease the priority of others…”

​

Andy Davies

https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/

Use fetchpriority to tell the

browser about important images

Use fetchpriority to tell the

browser about important images

(do not overuse)

LCP recommendations

• Ensure the LCP resource is discoverable from the HTML source
• Ensure the LCP resource is prioritized
• Use a CDN to optimize document and resource TTFB

https://www.webpagetest.org/

https://almanac.httparchive.org/en/2022/cdn

CDNs are common - but less so for HTML

CLS recommendations

• Set explicit sizes on any content loaded from the page

<img> with no width and height

<img> with width and height

It’s not just images!

CLS recommendations

• Set explicit sizes on any content loaded from the page
• Be eligible for bfcache

Better than loading fast…

…is loading instantly!

​

https://web.dev/bfcache/

https://web.dev/bfcache/

Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward.

https://twitter.com/rnebhwani/status/1491388690601758720

https://web.dev/bfcache/#test-to-ensure-your-pages-are-cacheable

Test bfcache eligibility in DevTools

https://web.dev/bfcache/#test-to-ensure-your-pages-are-cacheable

Get the reasons why not eligible

https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/

CLS recommendations

• Set explicit sizes on any content loaded from the page
• Be eligible for bfcache
• Avoid animations/transitions that use layout-inducing CSS properties

Layout-inducing CSS properties

https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/

Animations that change top / bottom / left / right cause CLS

This is even the case if they do not shift other content (for example with position: fixed)!

​

.box {

position: absolute;

top: 10px;

left: 10px;

animation: move 3s ease;

}

​

@keyframes move {

0% {

top: calc(90vh - 160px);

}

}

​

​

.box {

position: absolute;

top: 10px;

left: 10px;

animation: move 3s ease;

}

​

@keyframes move {

0% {

transform: translateY(calc(90vh - 160px));

}

}

​

​

✅

🚫

Never animate using top / bottom / left / right

FID recommendations

Let’s talk about FID

https://httparchive.org/reports/chrome-ux-report#cruxFastFid

INP is a better responsive metric than FID

https://web.dev/inp/

INP measures all interactions and more of the interaction

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-fid

INP measures all interactions and more of the interaction

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-fid

This is what FID measures

INP measures all interactions and more of the interaction

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-fid

This is what FID measures

(and only for the first interaction)

INP measures all interactions and more of the interaction

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-fid

This is what INP measures

INP measures all interactions and more of the interaction

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-fid

This is what INP measures

(and across all interactions)

INP can be thought of in three phases

Input delay

Processing time

Presentation delay

FID (and INP!) recommendations

• Avoid or break up long tasks

https://web.dev/optimize-long-tasks/

https://web.dev/optimize-long-tasks/

JavaScript is greedy by nature

https://web.dev/optimize-long-tasks/

Manually defer code execution

JavaScript APIs

• setTimeout
• navigator.scheduling.isInputPending() - Chromium only
• schedular.postTask() - Chromium only
• scheduler.yield() - not available yet

FID (and INP!) recommendations

• Avoid or break up long tasks
• Avoid unnecessary JavaScript

Growth of JavaScript in last decade

https://httparchive.org/reports/state-of-javascript#bytesJs

Look at your Tag Managers

https://www.tunetheweb.com/blog/adding-controls-to-google-tag-manager/

​

• Use defer (or modules)
• Delay off screen social widgets
• Lazy load iframes
• Consider facades for 3p embeds

Late (or lazy) load third-party content

https://web.dev/embed-best-practices/

FID (and INP!) recommendations

• Avoid or break up long tasks
• Avoid unnecessary JavaScript
• Avoid large rendering updates

Avoid large rendering updates

• Keep DOM sizes small
• Use CSS Containment
• Avoid abusing requestAnimationFrame()

• Ensure the LCP resource is discoverable from the HTML source
• Ensure the LCP resource is prioritized
• Use a CDN to optimize document and resource TTFB
• Set explicit sizes on any content loaded from the page
• Be eligible for bfcache
• Avoid animations/transitions that use
• Avoid or break up long tasks
• Avoid unnecessary JavaScript
• Avoid large rendering updates

Core Web Vitals: Top Developer Recommendations

https://web.dev/top-cwv-2023/

Thank you

Barry Pollard

​

​

@tunetheweb

@tunetheweb@webperf.social