WordPress responsive LCP images (srcset, picture) and the Core Web Vitals

Sites with <picture> responsive LCP image markup have a good LCP most often: 75%, against 70% of all WordPress sites. Sites with srcset responsive markup have it least often, at 74%.

One in five WordPress sites uses responsive LCP image markup, and 87% of those use srcset. <picture> is 13% of the sites with responsive markup, 2.7% of all WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> and no sits in time to first byte (TTFB): 1086 ms median for <picture> against 1135 ms for no. Overall median field LCP is 1.9s for <picture> (TTFB 1086 ms, load delay 367 ms, load duration 159 ms, render delay 252 ms) versus 2.0s for no.

On jQuery, 80% of sites use no responsive LCP image markup, and 69% of jQuery sites have a good LCP, against 70% of all sites. On Vue, 82% of sites use no, and 67% of Vue sites have a good LCP.

FrameworkResponsive LCP image markup on its sitesGood LCP

WordPress sites with responsive LCP image markup 60,125 sitesNo responsive markup 79%srcset attribute 18%70%

Alpine 349 sitesNo responsive markup 70%srcset attribute 16%<picture> element 14%78%

jQuery 57,286 sitesNo responsive markup 80%srcset attribute 18%69%

Vue 4,721 sitesNo responsive markup 82%srcset attribute 15%67%

React 2,117 sitesNo responsive markup 76%srcset attribute 21%63%

No responsive markup srcset attribute <picture> element

Does the framework explain the responsive LCP image markup difference?

On jQuery, 73% of sites with <picture> responsive LCP image markup have a good LCP, against 67% of jQuery sites with no. Within jQuery, sites with <picture> have a good LCP more often. On Vue, 77% of sites with <picture> responsive LCP image markup have a good LCP, against 67% of Vue sites with no. Within Vue, sites with <picture> and no have a good LCP about equally often.

Why srcset and <picture> matter most on mobile viewports

Without srcset or <picture>, a mobile phone on a cellular connection downloads the same 1600px or 2000px hero banner prepared for a desktop monitor. Providing width descriptors in srcset with a matching sizes attribute lets Chrome's preload scanner pick the candidate that fits the device's screen width and pixel ratio before layout runs.