Rýchlosť Nízky dopad Stredné 15–30 min

Prednačítanie kľúčových zdrojov (preload)

Dôležité zdroje možno načítať skôr cez rel="preload".

Čo to je

rel="preload" hovorí prehliadaču, nech s vysokou prioritou vopred stiahne zdroj, ktorý bude čoskoro potrebný (hlavný obrázok nad ohybom, kľúčový font, kritické CSS).

Prečo to riešiť

Bez preloadu prehliadač objaví niektoré dôležité zdroje neskoro (napr. font odkazovaný až z CSS), čo odloží ich prejavenie. Preload to urýchli a zlepší LCP.

Ako na to

1Prednačítaj LCP obrázok (hlavný vizuál nad ohybom).
2Prednačítaj kľúčové fonty a pridaj font-display: swap.
3Nepreháňaj to, preload všetkého prioritu rozmeľní a uškodí.

Príklad

Správne

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

Záver

Preload je cielený nástroj pre pár naozaj kľúčových zdrojov (LCP obrázok, hlavný font). Použitý s rozmyslom zlepší LCP; použitý plošne naopak uškodí. Menej je viac.

Súvisiace témy