Rychlost Nízký dopad Střední 15–30 min

Přednačtení klíčových zdrojů (preload)

Důležité zdroje lze načíst dřív přes rel="preload".

Co to je

rel="preload" říká prohlížeči, ať s vysokou prioritou předem stáhne zdroj, který bude brzy potřeba (hlavní obrázek nad ohybem, klíčový font, kritické CSS).

Proč to řešit

Bez preloadu prohlížeč objeví některé důležité zdroje pozdě (např. font odkazovaný až z CSS), což oddálí jejich projevení. Preload to urychlí a zlepší LCP.

Jak na to

1Přednačti LCP obrázek (hlavní vizuál nad ohybem).
2Přednačti klíčové fonty a přidej font-display: swap.
3Nepřeháněj to: preload všeho prioritu rozmělní a uškodí.

Příklad

Správně

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

Závěr

Preload je cílený nástroj pro pár opravdu klíčových zdrojů (LCP obrázek, hlavní font). Použitý s rozmyslem zlepší LCP; použitý plošně naopak uškodí. Méně je víc.

Související témata