Szybkość Niski wpływ Średnie 15–30 min

Wstępne wczytanie kluczowych zasobów (preload)

Ważne zasoby można wczytać wcześniej przez rel="preload".

Co to jest

rel="preload" mówi przeglądarce, aby z wysokim priorytetem wcześniej pobrała zasób, który będzie wkrótce potrzebny (główny obraz nad linią załamania, kluczowa czcionka, krytyczny CSS).

Dlaczego warto to rozwiązać

Bez preloadu przeglądarka odkrywa niektóre ważne zasoby późno (np. czcionkę linkowaną dopiero z CSS), co opóźnia ich pojawienie się. Preload to przyspiesza i poprawia LCP.

Jak to zrobić

1Wstępnie wczytaj obraz LCP (główny wizual nad linią załamania).
2Wstępnie wczytaj kluczowe czcionki i dodaj font-display: swap.
3Nie przesadzaj, preload wszystkiego rozmywa priorytet i szkodzi.

Przykład

Dobrze

<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Podsumowanie

Preload to celowe narzędzie dla kilku naprawdę kluczowych zasobów (obraz LCP, główna czcionka). Użyty z rozwagą poprawi LCP; użyty masowo przeciwnie, zaszkodzi. Mniej znaczy więcej.

Powiązane tematy