Carryover evaluation for Core Web Vitals

[nairnandu]

Original proposal(s): #892

Tests

• All tests
• Failing tests

We should also consider whether we add CLS (#1057) for Core Web Vitals focus area in Interop 2026.

[LeaVerou]

Reporting from the preliminary State of HTML 2025 results here! 🙋🏽‍♀️

When we ranked all 147 submitted Interop 2026 proposals by number of freeform pain points across the survey mentioning the feature, Core Web Vitals came in 6th across the entire survey. The absolute number of pain points was not huge though: 40 freeform pain points (out of 10k) mentioned Core Web Vitals (5 about Core Web Vitals in general and 35 about specific metrics).
One caveat is that given the survey focus, this underrepresents certain feature areas (e.g. CSS).

We should also consider whether we add CLS (#1057) for Core Web Vitals focus area in Interop 2026.

CLS was by far the most frequently mentioned metric (80% of all Core Web Vitals pain points):

Sample quotes (General Core Web Vitals)

More of a rant, but: tuning a page to get very high ratings in multiple third party services, yet still falling short in Google's Core Web Vitals.

Disagreements on how performance metrics impact SEO (weight of it)

Web Vitals in Safari (some metrics are not implemented)

Some metrics can be gamed

Core Web Vitals

Sample quotes (CLS)

Lazy loaded images cause layout recalculation when loaded, but I usually don’t know the exact size (can only set either width or height, but not both; usually only width)

it's hard to specify image element size before it loads in layouts that use flexbox with dynamic widths (e.g. 100% width works when the image is loaded, but it's 0px when it's not)

Pages loading content at different times resulting in missed clicks is really annoying for the user. Big issue on most of the modern internet since about 2010.

Lighthouse tends to make me do some super aggressive hacks and make 10 images just to stop CLS shift. super tedious. And font CLS jump is hell to manage

Content layout shift on page load. Especially for recipe sites or news sites with tons of ads to shove in amidst the actual content users care about

mostly animations causing CLS, especially when you want to take an element off the DOM and switch it for another, without CLS

need a way to specify intrinsic size (or intrinsic aspect-ratio) of an image to avoid layout change on image load

scrollbar appearing on different page with same layout moving content (need to manual fix on every website)

It can be hard to avoid loading jank when using web components to enhance existing HTML content within them

Trying to avoid layout shifts during late load, usually due to JavaScript changing the DOM

Creating an initial appearance, before JS / animation happens that leads to layout shift

sizes of images where I need to set specific height to avoid layout shifts on load

Layout shift when doing JS progressive enhancement

page jumping on rendering or lazy loading elements

layout shifts until some resources are loading

Images if there size isn't known in advance.

CLS, Layout shift, more control methods

Images causing layout shift

Layout shifts from images

CLS with too large fonts

Sample quotes (FCP)

First Content Paint times are my pain point, and debugging this is hard

first contentful paint is always tricky

Sample quotes (LCP)

Lighthouse and LCP are a nightmare which is being taken to serious

LCP issues with rendering from a server we don’t have control over

web-vitals LCP - Safari

LCP in css

Sample quotes (INP)

Debugging INP (finding LoAF)