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 · All devices 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 97% of those sites have a good INP, against 95% of all React sites.

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 9,110 with all devices 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: 97%, against 95% of all React sites. Sites with aspect-ratio CSS hints have it least often, at 95%.

SitesGood, needs improvement, poor INPMedian
All React sites9,11095%80ms
Scroll-driven animations 77.2%6,65397%78ms
will-change 71.3%6,18296%81ms
CSS contain 27.6%2,40295%88ms
content-visibility 21.8%1,90295%89ms
aspect-ratio 53.5%4,65795%87ms
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 9,110 with all devices 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 · 9,110 with all devices 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 97% of Wix sites have a good INP, against 95% of all sites. WordPress sets the CSS rendering hints to will-change on 85% of its sites, and 98% 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%95%
WordPress 2,178 siteswill-change 85%aspect-ratio 84%CSS contain 56%content-visibility 48%Scroll-driven animations 45%98%
Wix 5,823 sitesScroll-driven animations 100%will-change 69%aspect-ratio 36%CSS contain 14%content-visibility 13%97%
Scroll-driven animations will-change aspect-ratio CSS contain content-visibility
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 9,110 with all devices 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, 97% of sites with scroll-driven animation CSS rendering hints have a good INP, against 97% 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, 98% of sites with scroll-driven animation CSS rendering hints have a good INP, against 98% 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 (96% good INP), 53.5% use aspect-ratio (95% good INP), 77.2% use scroll-driven animations (97% good INP), 27.6% use contain (95% good INP), and 21.8% use content-visibility (95% good INP).

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 9,110 with all devices 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 · 9,110 with all devices 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 (9,110 with all devices Chrome field data, 9,068 sites with CSS rendering hints, October 2026) · How we measured