Shopify LCP sub-part breakdown and the Core Web Vitals

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

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

Across the four LCP sub-parts in Chrome's field data, the largest gap between resource load delay as the largest LCP sub-part and element render delay as the largest LCP sub-part sits in element render delay: 271 ms median for resource load delay as the largest LCP sub-part against 857 ms for element render delay as the largest LCP sub-part. Overall median field LCP is 1.3s for resource load delay as the largest LCP sub-part (TTFB 377 ms, load delay 662 ms, load duration 200 ms, render delay 271 ms) versus 1.6s for element render delay as the largest LCP sub-part.

jQuery sets the LCP sub-part breakdown to resource load delay as the largest LCP sub-part on 76% of its sites, and 93% of jQuery sites have a good LCP, against 95% of all sites.

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%95%

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

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

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, 94% of sites with resource load delay as the largest LCP sub-part LCP sub-part breakdown have a good LCP, against 84% of jQuery sites with element render delay as the largest LCP sub-part. Within jQuery, sites with resource load delay as the largest LCP sub-part have a good LCP more 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 87% 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, 94% good LCP, 1.4s median), waiting to discover the hero image (69.7% load-delay-dominated, 96% good LCP), or waiting on blocking head scripts and stylesheets (15.2% render-delay-dominated, 88% good LCP).