Total CSS payload on React sites

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

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): 430 ms median for under 40 KB of CSS against 1193 ms for over 160 KB of CSS. Overall median field LCP is 1.3s for under 40 KB of CSS (TTFB 430 ms, load delay 476 ms, load duration 204 ms, render delay 146 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 92% of Wix sites have a good LCP, against 79% 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%79%

Wix 2,727 sitesUnder 40 KB 95%92%

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

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

Does the platform explain the total CSS payload difference?

On WordPress, 87% of sites with under 40 KB of CSS total CSS payload have a good LCP, against 54% 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, 88% pass field LCP at a 1.3s median, while the 22.5% (1,397) exceeding 160 KB fall to 59% good LCP (2.2s median).