Obrazy to zwykle najcięższe bajty na stronie, więc ich optymalizacja to największy zysk LCP. Trzy dźwignie: nowoczesne formaty, responsywne rozmiary i priorytet ładowania.
AVIF i WebP kompresują znacznie mniejsze niż JPEG/PNG przy tej samej jakości (AVIF często 50% mniejszy niż JPEG). Serwuj je z fallbackiem, aby stare przeglądarki wciąż działały:
Nie wysyłaj obrazu 2000px na telefon 400px. srcset pozwala przeglądarce wybrać właściwy rozmiar dla urządzenia:
<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 mówi przeglądarce, jak szeroko renderuje się obraz, aby mogła wybrać najmniejsze wystarczające źródło.
fetchpriority="high", loading="eager" i rozważ preload.loading="lazy", aby nie był pobierany, dopóki nie jest potrzebny.Zawsze zachowuj width/height, aby zapobiec CLS.
Wolne LCP to najczęściej po prostu przewymiarowany obraz bohatera. Znajomość formatów (AVIF/WebP), srcset dla właściwej rozdzielczości i poprawnego priorytetu — plus nie ładowanie leniwe obrazu LCP — to praktyczny zestaw narzędzi, którego oczekują rekruterzy, i zwykle jest to pojedyncza zmiana o największym wpływie na prawdziwej stronie.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj