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 · Desktop 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 99% of those sites have a good INP, against 99% of all React sites.

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 1,979 with desktop 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: 99%, against 99% of all React sites. Sites with CSS containment CSS hints have it least often, at 99%.

SitesGood, needs improvement, poor INPMedian
All React sites1,97999%48ms
Scroll-driven animations 77.2%1,17999%45ms
content-visibility 21.8%57199%54ms
aspect-ratio 53.5%1,16499%51ms
will-change 71.3%1,43199%49ms
CSS contain 27.6%63999%53ms
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 1,979 with desktop 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 · 1,979 with desktop 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 100% of Wix sites have a good INP, against 99% of all sites. WordPress sets the CSS rendering hints to will-change on 85% of its sites, and 100% 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%99%
Wix 5,823 sitesScroll-driven animations 100%will-change 69%aspect-ratio 36%CSS contain 14%content-visibility 13%100%
WordPress 2,178 siteswill-change 85%aspect-ratio 84%CSS contain 56%content-visibility 48%Scroll-driven animations 45%100%
Scroll-driven animations will-change aspect-ratio CSS contain content-visibility
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 1,979 with desktop 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, 100% of sites with scroll-driven animation CSS rendering hints have a good INP, against 100% 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, 100% of sites with scroll-driven animation CSS rendering hints have a good INP, against 99% 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 (99% good INP), 53.5% use aspect-ratio (99% good INP), 77.2% use scroll-driven animations (99% good INP), 27.6% use contain (99% good INP), and 21.8% use content-visibility (99% good INP).

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