The State of Web Vitals

Shopify CSS rendering hints and the Core Web Vitals

will-change (65.3%), aspect-ratio (63.6%), scroll-driven animations (97.3%), CSS containment (30.4%), and content-visibility (22.5%) across 8,163 sites.

Field data PhoneDesktopAll Scope All sites October 2026 edition · All devices field outcomes · Shopify sites only
Shopify Scoped to 8,248 sites out of 203,892 analyzed (cms) Compare with all sites →

97.3% of Shopify sites use scroll-driven animation CSS rendering hints, and 96% of those sites have a good INP, against 96% of all Shopify sites.

The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 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: 96%, against 96% of all Shopify sites. Sites with content-visibility CSS hints have it least often, at 93%.

SitesGood, needs improvement, poor INPMedian
All Shopify sites8,06296%97ms
Scroll-driven animations 97.3%7,75796%97ms
will-change 65.3%5,22195%104ms
aspect-ratio 63.6%5,07395%105ms
CSS contain 30.4%2,42694%111ms
content-visibility 22.5%1,78693%112ms
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
2

CSS rendering hints usage

Scroll-driven animation is the most used: 97.3% of Shopify sites.

Sites using each option (sites can use more than one) 8,163 sites
Scroll-driven animations 97.3% will-change 65.3% aspect-ratio 63.6% CSS contain 30.4%
Scroll-driven animations 97.3% will-change 65.3% aspect-ratio 63.6% CSS contain 30.4% content-visibility 22.5%
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
3

CSS rendering hints per framework

Vue sets the CSS rendering hints to scroll-driven animation on 98% of its sites, and 94% of Vue sites have a good INP, against 96% of all sites.

FrameworkCSS rendering hints on its sitesGood INP
Shopify sites with CSS rendering hints 8,163 sitesScroll-driven animations 97%will-change 65%aspect-ratio 64%CSS contain 30%content-visibility 22%96%
jQuery 3,093 sitesScroll-driven animations 97%will-change 68%aspect-ratio 58%CSS contain 23%content-visibility 18%95%
Vue 930 sitesScroll-driven animations 98%will-change 76%aspect-ratio 75%CSS contain 33%content-visibility 24%94%
Scroll-driven animations will-change aspect-ratio CSS contain content-visibility
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 sites with CSS rendering hintsBy Arjen Karel · corewebvitals.io/state-of-cwv
4

CSS rendering hints or the framework

Does the framework explain the CSS rendering hints difference?

On jQuery, 95% of sites with scroll-driven animation CSS rendering hints have a good INP, against 95% of jQuery sites with will-change. Within jQuery, sites with scroll-driven animation and will-change have a good INP about equally often. On Vue, 95% of sites with scroll-driven animation CSS rendering hints have a good INP, against 94% of Vue sites with will-change. Within Vue, 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, 65.3% use will-change (95% good INP), 63.6% use aspect-ratio (95% good INP), 97.3% use scroll-driven animations (96% good INP), 30.4% use contain (94% good INP), and 22.5% use content-visibility (93% good INP).

The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 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 · Shopify: 8,246 crawled sites · 8,062 with all devices field data · 8,163 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 · 8,246 crawled Shopify sites (8,062 with all devices Chrome field data, 8,163 sites with CSS rendering hints, October 2026) · How we measured