Preload the LCP image correctly
A late-discovered hero image is the most common LCP killer. Preloading helps only if you do all 4 parts.
— Step 1: Confirm the image is the LCP element (DevTools, not assumption).
— Step 2: Add in .
— Step 3: For responsive heroes, add imagesrcset + imagesizes to the preload so the right candidate loads.
— Step 4: Remove loading=lazy from the LCP image — lazy on the hero adds 200-600ms.
— Step 5: Verify load delay in the LCP breakdown dropped.
Before | After: LCP load delay 740ms -> 90ms, LCP 3.1s -> 2.0s.
Takeaway: the LCP image's discovery should cost under 100ms of load delay.
Millisecond Mafia
@MillisecondMafia
Preload the LCP image correctly
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.