Obrázky jsou obvykle nejtěžší bajty na stránce, takže jejich optimalizace je největší výhra pro LCP. Tři páky: moderní formáty, responzivní dimenzování a priorita načítání.
AVIF a WebP komprimují mnohem menší než JPEG/PNG při stejné kvalitě (AVIF často o 50 % menší než JPEG). Servírujte je s fallbackem, aby staré prohlížeče stále fungovaly:
Neposílejte obrázek o šířce 2000 px na telefon o šířce 400 px. srcset nechá prohlížeč vybrat správnou velikost pro dané zařízení:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes řekne prohlížeči, jak široce se obrázek vykresluje, aby mohl zvolit nejmenší dostačující zdroj.
fetchpriority="high", loading="eager" a zvažte preload.loading="lazy", aby se nenačetl, dokud není potřeba.Vždy ponechte width/height, abyste zabránili CLS.
Pomalé LCP je nejčastěji jen předimenzovaný hero obrázek. Znalost formátů (AVIF/WebP), srcset pro správné rozlišení a správné priority — plus nelazy-loadovat LCP obrázek — je praktická výbava, kterou tazatelé očekávají, a obvykle jde o jedinou změnu s největším dopadem na reálném webu.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět