Come possiamo aiutare il browser a prepararsi al caricamento delle risorse?
sobes.tech AI
Risposta dell'AI
Utilizzare direttive di pre-caricamento: preconnect, dns-prefetch, preload, prefetch, prerender.
| Direttiva | Descrizione | Esempio |
|---|---|---|
preconnect |
Stabilisce una connessione (ricerca DNS, handshake TCP, negoziazione TLS) con un'altra fonte di dati in anticipo. | <link rel="preconnect" href="https://cdn.example.com"> |
dns-prefetch |
Esegue la risoluzione del nome di dominio in anticipo. | <link rel="dns-prefetch" href="//api.example.com"> |
preload |
Richiede risorse (JS, CSS, font) con alta priorità in anticipo, senza bloccare il rendering. | <link rel="preload" href="/styles.css" as="style"> |
prefetch |
Richiede risorse che probabilmente saranno necessarie in futuro (ad esempio, sulla pagina successiva). | <link rel="prefetch" href="/next_page.html"> |
prerender |
Renderizza la pagina successiva in una scheda nascosta in anticipo. | <link rel="prerender" href="/upcoming_page.html"> |
Usare l'attributo async o defer nel tag <script> per caricare ed eseguire gli script in modo asincrono, senza bloccare l'analisi HTML:
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
Usare l'attributo loading="lazy" per le immagini e <iframe> per il caricamento differito quando entrano nell'area visibile:
<img src="image.jpg" loading="lazy" alt="Immagine caricata in modo lazy">
Ottimizzare le immagini (compressione, utilizzo di formati moderni come WebP), i font (sottogruppi, formati WOFF/WOFF2) e altre risorse.
Minificare e comprimere CSS, JavaScript e HTML.
Utilizzare Service Worker per la cache delle risorse e garantire l'accesso offline.
Dividere il grande codice JavaScript in parti più piccole (code splitting) e caricarle su richiesta.
Utilizzare HTTP/2 e HTTP/3 per una multiplexing più efficiente e compressione degli header.
Impostare intestazioni di cache appropriate (Cache-Control, Expires) sul server.
Utilizzare <link rel="modulepreload"> per il pre-caricamento dei moduli JavaScript ES.
<link rel="modulepreload" href="/dist/module.js">