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 98% (1.2s median), whereas the 7.7% shipping over 160 KB drop to 90% (1.6s median).

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 →

13.8% of Shopify sites use under 40 KB of CSS total CSS payload, and 98% of those sites have a good LCP, 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,244 sites with total CSS payloadBy Arjen Karel · corewebvitals.io/state-of-cwv
1

LCP pass rate

Sites with under 40 KB of CSS total CSS payload have a good LCP most often: 98%, against 96% of all Shopify sites. Sites with over 160 KB of CSS CSS payload have it least often, at 90%.

SitesGood, needs improvement, poor LCPMedian
All Shopify sites8,06296%1.3s
Under 40 KB 13.8%1,11198%1.2s
40 to 80 KB 46.6%3,75597%1.2s
80 to 160 KB 31.8%2,56895%1.4s
Over 160 KB 7.7%62690%1.6s
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,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. Under 40 KB of CSS is 13.8% 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 · 8,062 with all devices 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 under 40 KB of CSS and over 160 KB of CSS sits in element render delay: 250 ms median for under 40 KB of CSS against 400 ms for over 160 KB of CSS. Overall median field LCP is 1.2s for under 40 KB of CSS (TTFB 362 ms, load delay 551 ms, load duration 193 ms, render delay 250 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 6,990389 ms589 ms208 ms298 ms589 mslab 589 ms1.3s
40 to 80 KB 3,245378 ms547 ms219 ms260 ms547 mslab 547 ms1.2s
Under 40 KB 919362 ms551 ms193 ms250 ms551 mslab 551 ms1.2s
80 to 160 KB 2,267408 ms649 ms201 ms351 ms649 mslab 649 ms1.5s
Over 160 KB 559421 ms698 ms200 ms400 ms698 mslab 698 ms1.6s
TTFB Resource load delay Resource load time Element render delay
The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices 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 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 50% of sites use 80 to 160 KB of CSS, and 95% 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%96%
Vue 933 sites80 to 160 KB 50%40 to 80 KB 30%Over 160 KB 15%95%
jQuery 3,153 sites80 to 160 KB 37%40 to 80 KB 36%Under 40 KB 16%Over 160 KB 11%94%
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 · 8,062 with all devices 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, 98% of sites with under 40 KB of CSS total CSS payload have a good LCP, against 95% of jQuery sites with 40 to 80 KB of CSS. Within jQuery, sites with under 40 KB of CSS have a good LCP more often. On Vue, 98% 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, 98% pass field LCP at a 1.2s median, while the 7.7% (636) exceeding 160 KB fall to 90% good LCP (1.6s median).

The State of Web Vitals · October 2026 · Shopify: 8,246 crawled sites · 8,062 with all devices 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 (98% good LCP, 1.2s median) versus 7.7% above 160 KB (90% 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 · 8,062 with all devices 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 (8,062 with all devices Chrome field data, 8,244 sites with total CSS payload, October 2026) · How we measured