Ako môžeme pomôcť prehliadaču pripraviť sa na načítanie zdrojov?

Používajte direktívy na predbežné načítanie: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktíva	Popis	Príklad
preconnect	Nastavuje spojenie (DNS lookup, TCP handshake, TLS negotiation) s iným zdrojom dát vopred.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Vykonáva rozlíšenie doménového mena vopred.	<link rel="dns-prefetch" href="//api.example.com">
preload	Žiada zdroj (JS, CSS, fonty) vopred s vysokou prioritou, neblokujúc renderovanie.	<link rel="preload" href="/styles.css" as="style">
prefetch	Žiada zdroj, ktorý bude pravdepodobne potrebný v budúcnosti (napríklad na ďalšej stránke).	<link rel="prefetch" href="/next_page.html">
prerender	Renderuje nasledujúcu stránku v skrytej karte vopred.	<link rel="prerender" href="/upcoming_page.html">

Používajte atribút async alebo defer pre <script> tagy na asynchrónne načítanie a vykonávanie skriptov, bez blokovania parsovania HTML:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Používajte atribút loading="lazy" pre obrázky a <iframe> na odložené načítanie, keď sa dostanú do oblasti viditeľnosti:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Optimalizujte obrázky (kompresia, použitie moderných formátov ako WebP), fonty (subset, formáty WOFF/WOFF2) a ďalšie zdroje.

Minifikujte a komprimujte CSS, JavaScript a HTML.

Používajte Service Worker na cacheovanie zdrojov a zabezpečenie offline prístupu.

Rozdeľte veľký JavaScript kód na menšie časti (code splitting) a načítavajte ich podľa potreby.

Používajte HTTP/2 a HTTP/3 pre efektívnejšie multiplexovanie a kompresiu hlavičiek.

Nastavte správne hlavičky cacheovania (Cache-Control, Expires) na serveri.

Používajte <link rel="modulepreload"> na predbežné načítanie JavaScriptových modulov ES.

<link rel="modulepreload" href="/dist/module.js">