Kako možemo pomoći pregledaču da se pripremi za učitavanje resursa?

Koristite direktive za predpreuzimanje: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktiva	Opis	Primer
preconnect	Uspostavlja konekciju (DNS lookup, TCP handshake, TLS pregovaranje) sa drugim izvorom podataka unapred.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Određuje DNS pretraživanje unapred.	<link rel="dns-prefetch" href="//api.example.com">
preload	Zahteva resurs (JS, CSS, fontove) unapred sa visokim prioritetom, ne blokirajući renderovanje.	<link rel="preload" href="/styles.css" as="style">
prefetch	Zahteva resurs koji će verovatno biti potreban u budućnosti (npr. na sledećoj stranici).	<link rel="prefetch" href="/next_page.html">
prerender	Renderuje sledeću stranicu u skrivenoj kartici unapred.	<link rel="prerender" href="/upcoming_page.html">

Koristite atribut async ili defer za <script> tagove za asinhrono učitavanje i izvršavanje skripti, bez blokiranja parsiranja HTML-a:

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

Koristite atribut loading="lazy" za slike i <iframe> za odlagano učitavanje kada uđu u vidokrug:

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

Optimizujte slike (kompresujte, koristite moderne formate poput WebP), fontove (subset, WOFF/WOFF2 formate) i ostale resurse.

Minifikujte i kompresujte CSS, JavaScript i HTML.

Koristite Service Worker za keširanje resursa i omogućavanje rada offline.

Razbijajte veliki JavaScript kod na manje delove (code splitting) i učitavajte ih po potrebi.

Koristite HTTP/2 i HTTP/3 za efikasnije multipleksiranje i kompresiju zaglavlja.

Postavite ispravne zaglavlja keširanja (Cache-Control, Expires) na serveru.

Koristite <link rel="modulepreload"> za predpreuzimanje JavaScript ES modula.

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