Come Aumentare ancor di più le Performance del sito web attraverso Prefetch, Subresource, DNS Prefetch, Prerender e Preload?
L’Articolo di oggi parla della modalità per cui possiamo migliorare le prestazioni di caricamento del sito attraverso il prefetching delle risorse da caricare tramite il browser.
L’Obiettivo dell’articolo è quello di ridurre al minimo alcuni tempi di latenza di rete e come priorizzare il download di risorse che generano criticità quando la pagina viene scansionata dal browser.
Tutte le tecniche che ti segnalo si applicano attraverso l’utilizzo di tag html <link> che vanno posizionati tra i tag <head> della pagina web esempio:
<!DOCTYPE html>
<html>
<head>
<link rel = "preconnect" href = "https://www.carchesio.it">
<link rel = "prefetch" href = "https://www.carchesio.it/image.png">
<link rel = "dns-prefetch" href = "https://www.carchesio.it">
<link rel="subresource" href="https://www.carchesio.it/styles.css">
<link rel="preload" href="https://www.carchesio.it/image.png">
</head>
<body>
</body>
</html>
Preconnect
Proprio come il metodo di Prefetch DNS, preconnect risolverà il DNS ma renderà anche l’handshake TCP e la negoziazione TLS opzionale.
Può essere usato in questo modo:
<link rel = "preconnect" href = "https://www.carchesio.it">
Prefetching
Se siamo sicuri che una certa risorsa (un’immagine, uno script o qualsiasi altra tipologia di contenuto) ci servirà possiamo chiedere al browser di memorizzarla nella cache in modo da richiederla successivamente.
<link rel = "prefetch" href = "image.png">
DNS prefetching
Questo notifica al client che ci sono risorse che ci serviranno in seguito da un URL specifico in modo che il browser possa risolvere il DNS il più rapidamente possibile.
Supponiamo di aver bisogno di una risorsa, come un’immagine o un file audio, dall’URL bibibi.it.
Nel <head> del documento scriveremo:
<link rel = "dns-prefetch" href = "https://bibibi.it">
Quindi, quando richiediamo un file da esso, non dovremo più attendere la ricerca DNS.
Ciò è particolarmente utile se utilizziamo il codice di terze parti o risorse dai social network.
Subresources
Un’altra tecnica di prefetching aiuta a identificare le risorse che hanno la massima priorità e deve essere richiesta prima degli elementi prefissati. Ad esempio, in Chrome e Opera potremmo aggiungere quanto segue alla testa del nostro documento:
<link rel="subresource" href="styles.css">
Prerendering
Questa è un’opzione particolare, perchè ci dà la possibilità di caricare preventivamente tutte le risorse di un determinato documento con questa sintassi:
<link rel="prerender" href="https://www.carchesio.it">
Però devi essere sicuro che l’utente farà clic su quel link, altrimenti il client scaricherà tutte le risorse necessarie per renderizzare la pagina senza motivo.
Uno sguardo al Futuro: Preloading
Una nuova specifica chiamata Preload suggerisce che a volte è meglio scaricare sempre una risorsa, indipendentemente dal fatto che il browser pensi che sia una buona idea o meno. A differenza del prefetching delle risorse, che può essere ignorato, le attività di precaricamento devono essere richieste dal browser.
<link rel="preload" href="image.png">
Anche se al momento il Preload non è supportato da nessun browser, l’idea alla base è sicuramente interessante e sicuramente porterebbe ulteriori vantaggi in termini di prestazioni. Io ho implementato da tempo nei miei siti web questa funzione in attesa di qualche buona notizia…
Ti è piaciuto l’articolo?
A Presto!
