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: 97%, against 97% of all Shopify sites. Sites with element render delay as the largest LCP sub-part dominant LCP phase have it least often, at 94%.

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: 268 ms median for resource load delay as the largest LCP sub-part against 758 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 293 ms, load delay 692 ms, load duration 149 ms, render delay 268 ms) versus 1.5s 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 95% of jQuery sites have a good LCP, against 97% 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%97%

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

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

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, 96% of sites with resource load delay as the largest LCP sub-part LCP sub-part breakdown have a good LCP, against 92% 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, 97% of sites with resource load delay as the largest LCP sub-part LCP sub-part breakdown have a good LCP, against 94% 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 and element render delay as the largest LCP sub-part have a good LCP about equally 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, 97% good LCP, 1.2s 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, 94% good LCP).