Shopify first-party vs third-party stylesheets and the Core Web Vitals

Sites with first-party stylesheets stylesheet origin (first-party vs third-party) have a good LCP most often: 97%, against 97% of all Shopify sites. Sites with third-party stylesheets CSS origin have it least often, at 96%.

First-party stylesheets is the most used: 99.9% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between first-party stylesheets and third-party stylesheets sits in resource load delay: 630 ms median for first-party stylesheets against 649 ms for third-party stylesheets. Overall median field LCP is 1.3s for first-party stylesheets (TTFB 305 ms, load delay 630 ms, load duration 152 ms, render delay 304 ms) versus 1.3s for third-party stylesheets.

Vue sets the stylesheet origin (first-party vs third-party) to first-party stylesheets on 100% of its sites, and 97% of Vue sites have a good LCP, against 97% of all sites.

FrameworkStylesheet origin (first-party vs third-party) on its sitesGood LCP

Shopify sites with stylesheet origin (first-party vs third-party) 8,243 sitesFirst-party stylesheets 100%Third-party stylesheets 78%97%

Vue 933 sitesFirst-party stylesheets 100%Third-party stylesheets 94%97%

jQuery 3,150 sitesFirst-party stylesheets 100%Third-party stylesheets 87%95%

First-party stylesheets Third-party stylesheets

Does the framework explain the stylesheet origin (first-party vs third-party) difference?

On jQuery, 95% of sites with first-party stylesheets stylesheet origin (first-party vs third-party) have a good LCP, against 95% of jQuery sites with third-party stylesheets. Within jQuery, sites with first-party stylesheets and third-party stylesheets have a good LCP about equally often. On Vue, 97% of sites with first-party stylesheets stylesheet origin (first-party vs third-party) have a good LCP, against 96% of Vue sites with third-party stylesheets. Within Vue, sites with first-party stylesheets and third-party stylesheets have a good LCP about equally often.

How cross-origin CSS files add DNS and TLS round-trips to the critical rendering path

Because external stylesheets block rendering by default, fetching a CSS file from a third-party domain (such as fonts.googleapis.com, cdnjs, or a widget CDN) stalls first paint behind a fresh DNS lookup, TCP handshake, and TLS negotiation. Across 8,237 sites (99.9%) with first-party CSS, good LCP is 97% (1.3s median), whereas across 6,434 sites (78.1%) with third-party CSS, good LCP drops to 96% (1.3s median).