Total CSS payload on React sites

Sites with under 40 KB of CSS total CSS payload have a good LCP most often: 91%, against 84% of all React sites. Sites with over 160 KB of CSS CSS payload have it least often, at 57%.

Under 40 KB of CSS is the most used: 54.8% of React sites.

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 time to first byte (TTFB): 436 ms median for under 40 KB of CSS against 1209 ms for over 160 KB of CSS. Overall median field LCP is 1.2s for under 40 KB of CSS (TTFB 436 ms, load delay 443 ms, load duration 123 ms, render delay 160 ms) versus 2.3s for over 160 KB of CSS.

Wix sets the total CSS payload to under 40 KB of CSS on 95% of its sites, and 94% of Wix sites have a good LCP, against 84% of all sites.

PlatformTotal CSS payload on its sitesGood LCP

React sites with total CSS payload 6,212 sitesUnder 40 KB 55%Over 160 KB 22%80 to 160 KB 14%84%

Wix 2,727 sitesUnder 40 KB 95%94%

WordPress 2,319 sitesOver 160 KB 50%80 to 160 KB 31%40 to 80 KB 12%63%

Under 40 KB Over 160 KB 80 to 160 KB 40 to 80 KB

Does the platform explain the total CSS payload difference?

On Wix, 93% of sites with under 40 KB of CSS total CSS payload have a good LCP, against 92% of Wix sites with 40 to 80 KB of CSS. Within Wix, sites with under 40 KB of CSS and 40 to 80 KB of CSS have a good LCP about equally often. On WordPress, 76% of sites with under 40 KB of CSS total CSS payload have a good LCP, against 55% of WordPress sites with over 160 KB of CSS. Within WordPress, sites with under 40 KB of CSS have a good LCP more 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 3,404 sites (54.8%) under 40 KB of CSS, 91% pass field LCP at a 1.3s median, while the 22.5% (1,397) exceeding 160 KB fall to 57% good LCP (2.3s median).