Lazy loading

Lazy loading (ładowanie z opóźnieniem) polega na ładowaniu zasobu — obrazu, wideo, iframe'a, komponentu JavaScript — dopiero w momencie, gdy staje się potrzebny, zwykle gdy zbliża się do viewportu. Zamiast pobierać wszystko przy wejściu na stronę (i obciążać LCP 50 obrazami, z których 45 nigdy nie zostanie zobaczonych), ładujesz tylko to, co widoczne natychmiast, a resztę dociągasz na bieżąco, gdy użytkownik scrolluje.

Po stronie obrazów stało się to trywialne od 2020: natywny atrybut HTML `loading="lazy"` jest wspierany przez wszystkie nowoczesne przeglądarki — wystarczy dodać go do `<img>` i `<iframe>`. Komponent Image w Next.js robi to domyślnie, chyba że ustawisz `priority` (zarezerwowany dla obrazu hero pod LCP). Po stronie JavaScriptu mówimy o code splittingu: `dynamic import()` ładuje moduł na żądanie, React.lazy + Suspense robi to samo dla komponentów. W Next.js `next/dynamic` pozwala ładować komponent po stronie klienta wyłącznie wtedy, gdy jest renderowany.

Pułapki: (1) lazy-loadowanie obrazu hero — zabijasz swój LCP, trzeba go wręcz prefetchować, (2) lazy-loadowanie za późno, użytkownik widzi białą plamę podczas scrollu — użyć natywnego `loading="lazy"` lub Intersection Observera z hojnym marginesem (200–500 px), (3) zapomnienie o `width`/`height` lub `aspect-ratio`, co tworzy zły CLS. Dobrze zrobiony lazy loading dzieli początkową wagę strony 2–5 razy bez pogorszenia UX. To jeden z podstawowych mechanizmów, który stosujemy we wszystkich naszych stronach na zamówienie i który dostrajamy podczas bezpłatnego audytu.