Jak můžeme pomoci prohlížeči připravit se na načítání zdrojů?

Použijte direktivy pro předběžné načítání: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktiva	Popis	Příklad
preconnect	Naváže spojení (DNS lookup, TCP handshake, TLS negotiation) s jiným zdrojem dat předem.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Předem provádí řešení názvu domény.	<link rel="dns-prefetch" href="//api.example.com">
preload	Předběžně načítá zdroje (JS, CSS, fonty) s vysokou prioritou, aniž by blokoval vykreslování.	<link rel="preload" href="/styles.css" as="style">
prefetch	Předběžně načítá zdroje, které pravděpodobně budou v budoucnu potřeba (například na další stránce).	<link rel="prefetch" href="/next_page.html">
prerender	Předběžně vykreslí další stránku v skryté záložce.	<link rel="prerender" href="/upcoming_page.html">

Použijte atribut async nebo defer u <script> pro asynchronní načítání a spouštění skriptů, aniž by blokovaly analýzu HTML:

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

Použijte atribut loading="lazy" u obrázků a <iframe> pro odložení načítání, když vstoupí do oblasti viditelnosti:

<img src="image.jpg" loading="lazy" alt="Lazy načtený obrázek">

Optimalizujte obrázky (komprese, moderní formáty jako WebP), fonty (podmnožiny, formáty WOFF/WOFF2) a další zdroje.

Minifikujte a komprimujte CSS, JavaScript a HTML.

Použijte Service Worker pro cachování zdrojů a offline přístup.

Rozdělte velký JavaScriptový kód na menší části (code splitting) a načtěte je na požádání.

Použijte HTTP/2 a HTTP/3 pro efektivnější multiplexování a kompresi hlaviček.

Nastavte správné hlavičky cache (Cache-Control, Expires) na serveru.

Použijte <link rel="modulepreload"> pro předběžné načítání ES modulů JavaScriptu.

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