The State of Web Vitals

Shopify total CSS payload and the Core Web Vitals

13.8% of audited sites (1,139) ship under 40 KB of CSS and pass LCP at 97% (1.2s median), whereas the 7.7% shipping over 160 KB drop to 88% (1.6s median).

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

46.6% of Shopify sites use 40 to 80 KB of CSS total CSS payload, and 97% of those sites have a good LCP, against 95% of all Shopify sites.

The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
1

LCP pass rate

Sites with 40 to 80 KB of CSS total CSS payload have a good LCP most often: 97%, against 95% of all Shopify sites. Sites with over 160 KB of CSS CSS payload have it least often, at 88%.

SitesGood, needs improvement, poor LCPMedian
All Shopify sites5,82595%1.4s
40 to 80 KB 46.6%2,60897%1.3s
Under 40 KB 13.8%72897%1.2s
80 to 160 KB 31.8%1,97694%1.5s
Over 160 KB 7.7%51288%1.6s
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
2

Total CSS payload usage

40 to 80 KB of CSS is the most used: 46.6% of Shopify sites.

40 to 80 KB 46.6% 80 to 160 KB 31.8% Under 40 KB 13.8%
40 to 80 KB 46.6% 80 to 160 KB 31.8% Under 40 KB 13.8% Over 160 KB 7.7%
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
3

The four LCP phases

Across the four LCP sub-parts in Chrome's field data, the largest gap between 40 to 80 KB of CSS and over 160 KB of CSS sits in resource load delay: 544 ms median for 40 to 80 KB of CSS against 704 ms for over 160 KB of CSS. Overall median field LCP is 1.3s for 40 to 80 KB of CSS (TTFB 388 ms, load delay 544 ms, load duration 212 ms, render delay 271 ms) versus 1.6s for over 160 KB of CSS.

Median LCP phase breakdown (Chrome field p75) Load delay Median LCP
Shopify sites with total CSS payload 5,047402 ms590 ms206 ms312 ms590 mslab 596 ms1.4s
40 to 80 KB 2,251388 ms544 ms212 ms271 ms544 mslab 548 ms1.3s
Under 40 KB 595370 ms554 ms197 ms254 ms554 mslab 563 ms1.2s
80 to 160 KB 1,739420 ms652 ms200 ms362 ms652 mslab 650 ms1.5s
Over 160 KB 462438 ms704 ms204 ms408 ms704 mslab 708 ms1.6s
TTFB Resource load delay Resource load time Element render delay
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
4

Total CSS payload per framework

On jQuery, 37% of sites use 80 to 160 KB of CSS total CSS payload, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 50% of sites use 80 to 160 KB of CSS, and 94% of Vue sites have a good LCP.

FrameworkTotal CSS payload on its sitesGood LCP
Shopify sites with total CSS payload 8,244 sites40 to 80 KB 47%80 to 160 KB 32%Under 40 KB 14%95%
Vue 933 sites80 to 160 KB 50%40 to 80 KB 30%Over 160 KB 15%94%
jQuery 3,153 sites80 to 160 KB 37%40 to 80 KB 36%Under 40 KB 16%Over 160 KB 11%93%
40 to 80 KB 80 to 160 KB Under 40 KB Over 160 KB
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
5

Total CSS payload or the framework

Does the framework explain the total CSS payload difference?

On jQuery, 94% of sites with 40 to 80 KB of CSS total CSS payload have a good LCP, against 92% of jQuery sites with 80 to 160 KB of CSS. Within jQuery, sites with 40 to 80 KB of CSS and 80 to 160 KB of CSS have a good LCP about equally often. On Vue, 96% of sites with 40 to 80 KB of CSS total CSS payload have a good LCP, against 96% of Vue sites with 80 to 160 KB of CSS. Within Vue, sites with 40 to 80 KB of CSS and 80 to 160 KB of CSS have a good LCP about equally often.

Why stylesheet weight is a direct render blocker

External stylesheets block first paint until every CSS file in the document head is downloaded and parsed into the CSSOM. Across 1,139 sites (13.8%) under 40 KB of CSS, 97% pass field LCP at a 1.2s median, while the 7.7% (636) exceeding 160 KB fall to 88% good LCP (1.6s median).

The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
6

Understanding total CSS payload

Keep total stylesheet transfer under 80 KB by purging unused utility classes, splitting template CSS per route, and removing legacy icon-font stylesheets. Across all audited sites, 13.8% stay under 40 KB (97% good LCP, 1.2s median) versus 7.7% above 160 KB (88% good LCP, 1.6s median).

Go fix it Eliminate render-blocking resources → Remove unused CSS →
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 5,825 with phone field data · 8,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
Related signals Script loading mix → Font source → Image format mix → Iframe loading → By Arjen Karel · 8,246 crawled Shopify sites (5,825 with phone Chrome field data, 8,244 sites with total CSS payload, October 2026) · How we measured