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: 96%, against 96% of all Shopify sites. Sites with third-party stylesheets CSS origin have it least often, at 95%.

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: 589 ms median for first-party stylesheets against 612 ms for third-party stylesheets. Overall median field LCP is 1.3s for first-party stylesheets (TTFB 389 ms, load delay 589 ms, load duration 208 ms, render delay 298 ms) versus 1.4s for third-party stylesheets.

Vue sets the stylesheet origin (first-party vs third-party) to first-party stylesheets on 100% of its sites, and 95% of Vue sites have a good LCP, against 96% 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%96%

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

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

First-party stylesheets Third-party stylesheets

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

On jQuery, 94% of sites with first-party stylesheets stylesheet origin (first-party vs third-party) have a good LCP, against 93% 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, 95% of sites with first-party stylesheets stylesheet origin (first-party vs third-party) have a good LCP, against 95% 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 96% (1.3s median), whereas across 6,434 sites (78.1%) with third-party CSS, good LCP drops to 95% (1.4s median).