Cum putem ajuta browserul să se pregătească pentru încărcarea resurselor?

Utilizați directivele de preîncărcare: preconnect, dns-prefetch, preload, prefetch, prerender.

Directivă	Descriere	Exemplu
preconnect	Stabilește o conexiune (căutare DNS, handshake TCP, negociere TLS) cu o altă sursă de date în avans.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Efectuează rezolvarea numelui de domeniu în avans.	<link rel="dns-prefetch" href="//api.example.com">
preload	Solicită resurse (JS, CSS, fonturi) cu prioritate înaltă în avans, fără a bloca randarea.	<link rel="preload" href="/styles.css" as="style">
prefetch	Solicită resurse care probabil vor fi necesare în viitor (de exemplu, pe pagina următoare).	<link rel="prefetch" href="/next_page.html">
prerender	Randează următoarea pagină în mod anticipat într-un tab ascuns.	<link rel="prerender" href="/upcoming_page.html">

Utilizați atributul async sau defer pe <script> pentru a încărca și executa scripturile asincron, fără a bloca analiza HTML:

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

Utilizați atributul loading="lazy" pentru imagini și <iframe> pentru încărcare întârziată, atunci când intră în zona vizibilă:

<img src="image.jpg" loading="lazy" alt="Imagine încărcată leneș">

Optimizarea imaginilor (compresie, utilizarea formatelor moderne precum WebP), fonturilor (subseturi, formate WOFF/WOFF2) și alte resurse.

Minificarea și comprimarea CSS, JavaScript și HTML.

Utilizarea Service Worker pentru cache-ul resurselor și asigurarea accesului offline.

Împărțirea codului JavaScript mare în părți mai mici (code splitting) și încărcarea lor la cerere.

Utilizarea HTTP/2 și HTTP/3 pentru multiplexare mai eficientă și compresia antetelor.

Setarea antetelor de cache corecte (Cache-Control, Expires) pe server.

Utilizarea <link rel="modulepreload"> pentru preîncărcarea modulelor JavaScript ES.

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