Making the LCP element TEXT instead of an image: 2.1s -> 0.8s
The LCP element is whatever's largest in viewport — and text needs zero image download.
— Hero was a 110KB background image with overlaid headline. LCP fired on the image at 2.1s.
— Redesigned: large CSS-styled text headline on a solid color, image moved below fold.
— Now the LCP element is an H1 — paints as soon as the font (or fallback) renders: 0.8s.
— Removed 110KB from the critical path entirely. FCP and LCP converged.
The cheapest LCP element is text you already have in the HTML. Question whether your hero needs to be an image at all.
Takeaway: 0.8s LCP, 110KB off the critical path.
Millisecond Mafia
@MillisecondMafia
Making the LCP element TEXT instead of an image: 2.1s -> 0.8s
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.