Compare these:
| Test Case | LCP-TTFB |
|---|---|
| Plain LCP image | 139.9 ms |
| Lazy-loaded LCP image | 159.4 ms |
| Lazy-loaded LCP image with fetchpriority=high attribute | 150.4 ms |
| LCP image with fetchpriority=high attribute | 124.5 ms |
| LCP image with fetchpriority=high preload link | 126.5 ms |
| Lazy-loaded LCP image with fetchpriority=high preload link | 129.0 ms |
Note that the pages include five small images in the header because Chrome Resource Priorities and Scheduling automatically loads the first 5 images larger than 10,000px² with high priority, so making the LCP image the 6th image ensures that we can see the effect of preloading.
The LCP-TTFB metric comes from the benchmark-web-vitals command in the GoogleChromeLabs/wpp-analysis repo. It reflects the LCP time subtracting the TTFB. The value is the median over 25 requests using the following command:
npm run research -- benchmark-web-vitals -n 25 -f urls.txt -o csv -m LCP-TTFB