Čo je Preloading?
Preloading je technika, ktorá prehliadaču nariaďuje čo najskôr stiahnuť dôležitý zdroj (font, obrázok, skript), ešte pred tým, než ho parsér HTML prirodzene objaví. Používa sa element <link rel="preload"> v hlavičke stránky. Zrýchľuje vykreslenie kritických zdrojov.
Definícia Preloading
Čo je preloading
Preloading (po slovensky predčasné načítanie) je mechanizmus, ktorý umožňuje vývojárovi explicitne povedať prehliadaču: „Tento zdroj budeš čoskoro potrebovať, začni ho sťahovať hneď." Definovaný je v špecifikácii Resource Hints W3C a implementuje sa cez element <link rel="preload">.
Kedy použiť preloading
Preloading je užitočný pre zdroje, ktoré prehliadač objaví neskoro v procese parsovania:
- Webové fonty — sú referencované z CSS súboru, ktorý musí byť najprv stiahnutý a rozparsovaný
- Hero obrázky — veľký obrázok v hornej časti stránky, ktorý je definovaný v CSS ako background-image
- Kritické skripty — JavaScript súbory potrebné na inicializáciu stránky
- CSS z externých zdrojov — štýly načítavané z CDN
Syntax a atribúty
Element preload vyžaduje atribúty href (URL zdroja) a as (typ zdroja):
as="font"— pre webové fonty (vyžaduje ajcrossorigin)as="image"— pre obrázkyas="script"— pre JavaScript súboryas="style"— pre CSS súbory
Správne nastavenie atribútu as je dôležité — prehliadač na jeho základe určí prioritu sťahovania a správne nastaví cache hlavičky.
Praktický príklad
Príklad: Webstránka používa vlastný font Inter, ktorý sa bez preloadu stiahne až po tom, čo prehliadač spracuje CSS — typicky 500-800 ms po začiatku načítania stránky. Medzitým je viditeľný systémový font a potom preblikne na Inter (FOUT).
Po pridaní <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> do hlavičky sa font začne sťahovať okamžite, paralelne s CSS. Font je pripravený o 300 ms skôr a prebliknutie fontov sa eliminuje.
Často kladené otázky
Čo je preloading a na čo slúži?
Preloading je technika, ktorá prehliadaču hovorí, aby začal čo najskôr sťahovať dôležitý zdroj. Používa sa element <link rel="preload"> a je užitočný pre fonty, obrázky a skripty, ktoré by prehliadač inak objavil neskoro.
Aký je rozdiel medzi preload a prefetch?
Preload hovorí prehliadaču: „Tento zdroj potrebujem TERAZ na aktuálnej stránke." Prefetch hovorí: „Tento zdroj budem pravdepodobne potrebovať na ĎALŠEJ stránke." Preload má vysokú prioritu, prefetch nízku.
Môže preloading spomaliť stránku?
Áno, ak preloadujete príliš veľa zdrojov, zaťažíte sieť a spomalíte sťahovanie naozaj kritických zdrojov. Preloadujte len 2-4 najdôležitejšie zdroje — typicky webový font a hero obrázok.
Prečo font preload vyžaduje atribút crossorigin?
Webové fonty sa vždy sťahujú v anonymous CORS režime, aj keď sú na rovnakej doméne. Bez atribútu crossorigin prehliadač stiahne font dvakrát — raz pre preload a raz pre skutočné použitie.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.