Shopify LCP sub-part breakdown and the Core Web Vitals

Sites with resource load duration as the largest LCP sub-part LCP sub-part breakdown have a good LCP most often: 98%, against 96% of all Shopify sites. Sites with element render delay as the largest LCP sub-part dominant LCP phase have it least often, at 90%.

Resource load delay as the largest LCP sub-part is the most used: 69.7% of Shopify sites. Resource load duration as the largest LCP sub-part is 3.6% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between resource load duration as the largest LCP sub-part and element render delay as the largest LCP sub-part sits in element render delay: 188 ms median for resource load duration as the largest LCP sub-part against 838 ms for element render delay as the largest LCP sub-part. Overall median field LCP is 1.2s for resource load duration as the largest LCP sub-part (TTFB 414 ms, load delay 451 ms, load duration 578 ms, render delay 188 ms) versus 1.6s for element render delay as the largest LCP sub-part.

On jQuery, 76% of sites use resource load delay as the largest LCP sub-part LCP sub-part breakdown, and 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 73% of sites use resource load delay as the largest LCP sub-part, and 95% of Vue sites have a good LCP.

FrameworkLCP sub-part breakdown on its sitesGood LCP

Shopify sites with LCP sub-part breakdown 6,992 sitesLoad delay is biggest sub-part 70%Render delay is biggest sub-part 15%TTFB is biggest sub-part 12%96%

Vue 823 sitesLoad delay is biggest sub-part 73%Render delay is biggest sub-part 14%TTFB is biggest sub-part 11%95%

jQuery 2,697 sitesLoad delay is biggest sub-part 76%Render delay is biggest sub-part 14%94%

Load delay is biggest sub-part Render delay is biggest sub-part TTFB is biggest sub-part Load duration is biggest sub-part

Does the framework explain the LCP sub-part breakdown difference?

On jQuery, 92% of sites with resource load duration as the largest LCP sub-part LCP sub-part breakdown have a good LCP, against 95% of jQuery sites with resource load delay as the largest LCP sub-part. Within jQuery, sites with resource load duration as the largest LCP sub-part and resource load delay as the largest LCP sub-part have a good LCP about equally often. On Vue, 96% of sites with resource load delay as the largest LCP sub-part LCP sub-part breakdown have a good LCP, against 89% of Vue sites with element render delay as the largest LCP sub-part. Within Vue, sites with resource load delay as the largest LCP sub-part have a good LCP more often.

Why network transfer duration is rarely the real LCP bottleneck

Resource load duration is the largest sub-part on just 3.6% (253) of audited sites. Most LCP failures happen while waiting for the first HTML byte (11.5% TTFB-dominated, 95% good LCP, 1.4s median), waiting to discover the hero image (69.7% load-delay-dominated, 97% good LCP), or waiting on blocking head scripts and stylesheets (15.2% render-delay-dominated, 90% good LCP).