Leniwe ładowanie (lazy-loading) odracza pobieranie czegoś, dopóki nie jest to faktycznie potrzebne — zwykle gdy element ma się pojawić w polu widzenia po przewinięciu. To zmniejsza początkowy ładunek, aby widoczna część strony ładowała się szybciej.
Przeglądarka robi to natywnie za pomocą jednego atrybutu:
Zawsze zachowuj width/height, aby przeglądarka zarezerwowała miejsce (unika przesunięć układu). Nigdy nie ładuj leniwie obrazu LCP — opóźnia to właśnie tę rzecz, która jest mierzona.
Podziel ciężki lub rzadko używany interfejs (modale, wykresy) na osobny chunk ładowany na żądanie:
// Zamiast statycznego importu, który trafia do głównego bundle'a:
const Chart = React.lazy(() => import("./Chart")); // osobny chunk, pobierany przy renderowaniu
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Dynamiczny import() mówi bundlerowi, aby utworzył osobny plik, który pobiera się dopiero, gdy <Chart> renderuje się po raz pierwszy.
Leniwe ładowanie to najprostszy, najbardziej dźwigniowy zysk dla ciężkiej strony: mniej do pobrania na starcie oznacza szybsze LCP i mniej JS do sparsowania. Rekruterzy chcą zobaczyć, że nie ładujesz leniwie obrazu bohatera — klasyczny błąd, który szkodzi metryce, której próbujesz pomóc.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj