Shopify HTML compression and the Core Web Vitals

Sites with Brotli HTML compression have a good LCP most often: 95%, against 95% of all Shopify sites.

96.2% of Shopify sites use HTML compression, and 98% of those use Brotli.

Across the four LCP sub-parts in Chrome's field data, the largest gap between Brotli and no sits in element render delay: 309 ms median for Brotli against 381 ms for no. Overall median field LCP is 1.4s for Brotli (TTFB 401 ms, load delay 590 ms, load duration 206 ms, render delay 309 ms) versus 1.4s for no.

Vue sets the HTML compression to Brotli on 95% of its sites, and 94% of Vue sites have a good LCP, against 95% of all sites.

FrameworkHTML compression on its sitesGood LCP

All Shopify sites 8,246 sitesBrotli (br) 95%95%

Vue 933 sitesBrotli (br) 95%94%

jQuery 3,153 sitesBrotli (br) 95%93%

Brotli (br) Uncompressed (none) Gzip Zstandard (zstd)

Does the framework explain the HTML compression difference?

On jQuery, 93% of sites with Brotli HTML compression have a good LCP, against 92% of jQuery sites with no. Within jQuery, sites with Brotli and no have a good LCP about equally often.

Why Brotli HTML compression speeds up resource discovery

Brotli uses a built-in dictionary of common HTML, CSS, and JavaScript tokens, shrinking HTML documents 15 to 20 percent more than Gzip at comparable CPU cost. Because the browser's preload scanner parses the HTML stream chunk by chunk as it arrives, a smaller compressed document delivers the <head> and hero <img> markup in fewer TCP or QUIC packets. Sites serving Brotli HTML record a 401 ms median TTFB and 1.3s median LCP, compared with 447 ms TTFB and 2.0s LCP on Gzip.