The State of Web Vitals

CSS rendering hints on React sites

will-change (71.3%), aspect-ratio (53.5%), scroll-driven animations (77.2%), CSS containment (27.6%), and content-visibility (21.8%) across 9,068 sites.

Field data PhoneDesktopAll Scope All sites October 2026 edition · Phone field outcomes · React sites only
React Scoped to 9,570 sites out of 210,902 analyzed (frameworks) Compare with all sites →

77.2% of React sites use scroll-driven animation CSS rendering hints, and 95% of those sites have a good INP, against 92% of all React sites.

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
1

INP pass rate

Sites with scroll-driven animation CSS rendering hints have a good INP most often: 95%, against 92% of all React sites. Sites with aspect-ratio CSS hints have it least often, at 92%.

SitesGood, needs improvement, poor INPMedian
All React sites5,48892%90ms
Scroll-driven animations 77.2%3,89695%84ms
will-change 71.3%3,70894%92ms
CSS contain 27.6%1,43493%99ms
content-visibility 21.8%1,14892%102ms
aspect-ratio 53.5%2,81492%97ms
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
2

CSS rendering hints usage

Scroll-driven animation is the most used: 77.2% of React sites.

Sites using each option (sites can use more than one) 9,068 sites
Scroll-driven animations 77.2% will-change 71.3% aspect-ratio 53.5% CSS contain 27.6%
Scroll-driven animations 77.2% will-change 71.3% aspect-ratio 53.5% CSS contain 27.6% content-visibility 21.8%
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
3

CSS rendering hints per platform

Wix sets the CSS rendering hints to scroll-driven animation on 100% of its sites, and 96% of Wix sites have a good INP, against 92% of all sites. WordPress sets the CSS rendering hints to will-change on 85% of its sites, and 96% of WordPress sites have a good INP.

PlatformCSS rendering hints on its sitesGood INP
React sites with CSS rendering hints 9,068 sitesScroll-driven animations 77%will-change 71%aspect-ratio 54%CSS contain 28%content-visibility 22%92%
Wix 5,823 sitesScroll-driven animations 100%will-change 69%aspect-ratio 36%CSS contain 14%content-visibility 13%96%
WordPress 2,178 siteswill-change 85%aspect-ratio 84%CSS contain 56%content-visibility 48%Scroll-driven animations 45%96%
Scroll-driven animations will-change aspect-ratio CSS contain content-visibility
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
4

CSS rendering hints or the platform

Does the platform explain the CSS rendering hints difference?

On Wix, 96% of sites with scroll-driven animation CSS rendering hints have a good INP, against 96% of Wix sites with will-change. Within Wix, sites with scroll-driven animation and will-change have a good INP about equally often. On WordPress, 96% of sites with scroll-driven animation CSS rendering hints have a good INP, against 96% of WordPress sites with will-change. Within WordPress, sites with scroll-driven animation and will-change have a good INP about equally often.

How CSS rendering hints isolate layout and compositor work

CSS hints instruct the rendering engine how to allocate compositor layers and skip offscreen layout work. Among hint-using sites, 71.3% use will-change (94% good INP), 53.5% use aspect-ratio (92% good INP), 77.2% use scroll-driven animations (95% good INP), 27.6% use contain (93% good INP), and 21.8% use content-visibility (92% good INP).

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
5

Understanding CSS rendering hints

Use aspect-ratio to reserve responsive media boxes, scroll-driven animations to move scroll effects off the main thread, and content-visibility: auto with contain-intrinsic-size on long below-the-fold sections. Avoid applying will-change across large numbers of elements, which exhausts GPU memory.

Go fix it Fix excessive DOM size → HTML reflow and Core Web Vitals → INP: presentation delay →
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,068 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
Related signals Scheduling API use → Interaction invoker types → Yielding strategy → INP phase breakdown → By Arjen Karel · 9,570 crawled React sites (5,488 with phone Chrome field data, 9,068 sites with CSS rendering hints, October 2026) · How we measured