Compare the median TTFB-LCP for these test cases:
| Test Case | Broadband | Fast 4G |
|---|---|---|
| Plain LCP image | 323.4 ms | 742.3 ms |
| Lazy-loaded LCP image | 317.6 ms | 741.3 ms |
| Lazy-loaded LCP image with fetchpriority=high attribute | 318.7 ms | 742.1 ms |
| LCP image with fetchpriority=high attribute | 288.3 ms | 542.7 ms |
| LCP image with fetchpriority=high preload link | 289.0 ms | 545.1 ms |
| Lazy-loaded LCP image with fetchpriority=high preload link | 288.1 ms | 542.7 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 100 requests with broadband network emulation using the following command:
npm run research -- benchmark-web-vitals --number=100 --network-conditions=broadband --file=urls.txt --output=csv --metrics=LCP-TTFBnpm run research -- benchmark-web-vitals --number=100 --network-conditions="Fast 4G" --file=urls.txt --output=csv --metrics=LCP-TTFB