dns-prefetch preload preconnect prerender differenze

Riprendendo il tema della webperformance, oggi parliamo di dns-prefetch preload preconnect prerender. Perchè? Come sappiamo, uno dei parametri che influenza la SEO, e di conseguenza il posizionamento del sito sulle SERP di Google è la velocità. Giustamente, aggiungerei. A nessuno piace aspettare troppo affinché una pagina si carichi. La visualizzazione di una pagina web richiede il recupero di un certo numero di risorse affinché questa possa essere caricata e renderizzata sul browser del cliente. Per aumentare la velocità di caricamento della pagina, potrebbe essere necessario influenzare l’ordine in cui queste risorse vengono recuperate ed eseguite o visualizzate. Ed è qui che entrano in gioco alcuni Tips come dns-prefetch preload preconnect prerender che influenza l’ordine id caricamento degli oggetti facenti parte della pagina.

Quindi, DNS prefetch, preload, preconnect e prerender sono diverse tecniche utilizzate per migliorare le prestazioni del caricamento delle pagine web.

A cosa servono dns-prefetch preload preconnect prerendera? FAQ e risposta rapida

In questo articolo spiegherò nel dettaglio cosa sono questi parametri, dove vanno inseriti e quando, e infine come utilizzarli.

Indice dei contenuti:

• Premessa
• Sintassi
• Differenze e specifiche
  • dns-prefetch
  • preconnect
  • prefetch
  • preload
  • prerender
• Casi d’uso – Use cases
• Punti d’attenzione
  • Tabella di riepilogo
• Contributo video
• Conclusioni

Let’s go. Iniziamo.

Modificare le priorità di caricamento degli header dettate dal browser

Una pagina Web è costituita da un documento HTML principale e da N risorse aggiuntive utili a formattare la pagina, come per esempio fogli di stile CSS, javascript, fonts e immagini. Perchè no, anche video. Secondo studi recenti, più della metà delle pagine contiene oltre 50 risorse aggiuntive (i css, js, fonts e immagini di cui parlavamo poc’anzi).

Queste risorse possono essere erogate direttamente dal nostro server, oppure da server esterni, come per esempio una CDN, Pensate anche all’incorporazione di un video su YouTube.

Il download di una risorsa può essere suddivisa in diversi passaggi:

• Risolvere il DNS dell’FQDN della risorsa
• Connessione al server che eroga la risorsa
• Recupero della risorsa
• Valutazione e utilizzo

Affinché il browser scarichi le risorse in modo più efficiente, possiamo influenzare comportamento del browser per ottimizzare questi passaggi. Si può anche forzare il browser a scaricare alcune risorse in anticipo rispetto al previsto. Pensiamo per esempio a questo articolo, che alla fine conterrà un video di YouTube. Io SO GIA’ DA ORA che il visitatore che aprirà questa pagina, arrivando alla fine dovrà contattare YT.

Per ottimizzare il caricamento delle risorse possiamo utilizzare il preload. Nello specifico:

• dns-prefetch
• preconnect
• preload
• prerender

dns-prefetch preload preconnect prerender differenze e sintassi

Per sfruttare il caricamento delle risorse secondo le nostre preferenze, possiamo utilizzare preload, dns-prefetch, preconnect e prefetch o prerender. Chiameremo tutte queste direttive “Suggerimenti per le risorse”. Per i dettagli potete fare riferimento a https://www.w3.org/TR/resource-hints/.

dns-preload non è solo un suggerimento per il browser, ma piuttosto un comando. Mentre i restanti sono suggerimenti veri e propri.

Vediamo subito un esempio pratico.

<link
href="resource-url"
rel="directive"
as="resource-type"
crossorigin="value"
/>

Attraverso un header HTTP:

Link: <resource-url>; rel="prefetch"; as="resource-type"; crossorigin="value"

Sintassi

Qualunque sia la sintassi scelta, i parametri sono sempre gli stessi:

• URL della risorsa, richiamata
• La direttiva da utilizzare –
• Il tipo da considerare per la risorsa, che consente di adattare la Content-Security-Policy alla natura della risorsa. Se sei interessato all’argomento, ho scritto un articolo dedicato ai Content Security Policy (CSP).
• attributo crossorigin, di cui parleremo più avanti in questo stesso articolo

Queste impostazioni possono essere utilizzate per definire le 4 direttive, elencate finora, e supportate dalla maggior parte dei browser moderni.

dns-prefetch preload preconnect prerender differenze e specifiche

dns-prefetch

indica al browser che deve eseguire la risoluzione di un dato nome di dominio (determinando l’IP da contattare) prima che quel dominio venga utilizzato per scaricare le risorse.

preconnect

Indica al browser che deve connettersi a una determinata origine, prima che quel dominio venga utilizzato per scaricare le risorse. La pre-connessione include:

• dns-prefetch
• la risoluzione DNS
• L’handshake TCP
• La negoziazione TLS (se la pagina è in HTTPS)

prefetch

Indica al browser che può scaricare una determinata risorsa, anche se non viene rilevata nella pagina. La risorsa viene scaricata con priorità bassa

preload

Indica al browser che deve scaricare una determinata risorsa il prima possibile, con priorità elevata.

prerender

Il prerender si utilizza per identificare una risorsa che potrebbe essere richiesta nella navigazione successiva e che il browser utente DOVREBBE recuperare ed eseguire, in modo tale che il browser stesso possa fornire una risposta più rapida una volta che la risorsa viene richiesta in futuro.

dns-prefetch preload preconnect prerender Casi d’uso / Use cases

Nella maggior parte dei casi, risulta utile utilizzare “preconnect” piuttosto che “dns-prefetch“, in modo da anticipare l’intera connessione.

Ci sono però alcuni casi particolari che vanno presi in considerazione. Alcun vecchi browser per esempio non supportano preconnect. Pertanto potrebbe essere utile utilizzare:

<link rel="preconnect dns-prefetch" href="https://www.yotube.com/">

prefetch è una direttiva che imposta una priorità molto bassa. Non andrebbe utilizzata per risorse essenziali. In realtà, può essere molto rilevante per migliorare la navigazione nelle pagine successive.

Uno dei migliori casi d’uso consiste nell’includere alcune direttive di precaricamento durante l’autenticazione di un utente, per sfruttare il tempo necessario per inserire login e password per precaricare le risorse statiche necessarie per il rendering della pagina che vedranno una volta autenticati.

L’utilizzo di dns-prefetch può essere interessante nel caso la pagina contenga terze parti critiche, come per esempi i cookie banner oppure i fonts di Google. Risolvendo il dominio a monte, è possibile risparmiare qualche millisecondo, utile comunque a velocizzare il caricamento della pagina.

prerender può essere utilizzato dall’applicazione per indicare il prossimo probabile obiettivo di navigazione HTML: il browser recupererà ed elaborerà la risorsa specificata fin da subito. Se invece non desiderate pre-elaborare la risposta HTML di quella determinata risorsa, allora, in alternava potete utilizzare prefetch.

Un esempio pratico per il prerender potrebbe essere un video incorporato di YouTube, che appare alla fine della pagina. Sappiamo che potrebbe essere caricato, ma non necessariamente il visitatore vorrà visualizzarlo.

In tal caso possiamo usare il codice:

<link rel="prerender" as="video" href="https://www.youtube.com/watch?v=R_D0rL094F4">

Preload esempio pratico

Utilizziamo invece il preload per le risorse che sappiamo saranno utili a breve nel caricamento della pagina, ma che naturalmente non avrebbero una naturale priorità da parte browser.

Il preload risulta invece inutile per gli script sincroni presenti nell’ <head> della pagina, in quanto sono già considerati a elevata priorità. Si può usare per aumentare la priorità di esecuzione di uno script asincrono dichiarato nell’ <head>.

Facciamo un esempio pratico e sopratutto realistico di utilizzo del tag preload.

Pensiamo al banner di questa pagina, ovvero l’immagine che vedete per prima in alto nella pagina. Quell’immagine ovviamente dovrà essere uno dei primi oggetti a essere caricati nella pagina. Possiamo forzare il suo caricamento proprio con il preload, con il seguente codice:

<link rel="preload" as="image" href="/wp-content/uploads/2023/01/Velocizzare-sito-con-dns-prefetch-preloade-preconnect.webp">

Questo farà in modo che l’immagine selezionata sia un oggetto con priorità e verrà caricata prima degli altri.

Punti d’attenzione

Usate il preload con parsimonia, poiché con il suo utilizzo ignorate le priorità impostate dal browser, sia in termini di download che di esecuzione. Se queste indicazioni vengono utilizzate con attenzione portano effettivamente dei miglioramenti. Ma in caso di abuso, rischiamo di avere un rallentamento anziché un beneficio in termini di velocità.

Ad esempio, immaginate di avere uno script asincrono nell’ <head>. Grazie all’attributo async , la sua priorità di download è bassa. Tuttavia, una volta recuperato, come qualsiasi script non-deffered, la sua analisi ed esecuzione interrompono il thread principale. Se aggiungi una direttiva di preload a questa risorsa, il browser la recupererà più velocemente, quindi la analizzerà più velocemente, annullando però l’effetto dell’attributo async e interrompendo il thread principale. Sebbene il costo della preconnessione sia basso, non è nullo. Rischieremmo così di perdere i millisecondi guadagnati in precedenza.

Se vuoi mettere le mani sulle priorità generate nativamente dal browser, allora devi procedere in modo moderato e responsabile, onde evitare di riprodurre congestioni di rete e consumi di CPU che andrebbero ad impattare sui tempi di risposta e conseguentemente, cosa più grave, tuoi utenti.

Riepilogo

dns-prefetch e preconnect sono per domini di terze parti ad alta priorità ma chiamati indirettamente come CDN o plug-in esterni.

preload è per file ad alta priorità ma chiamati indirettamente come immagini di sfondo e CSS above the fold.

prefetch è per i file a bassa priorità molto probabilmente necessari a breve, come HTML, CSS o immagini utilizzate nelle pagine successive.

prerender è per un’intera pagina che è molto probabilmente una navigazione successiva.

dns-prefetch e preconnect fanno riferimento solo al nome di dominio, come https://example.com.

preload e prefetch fanno invece riferimento a un file specifico, come header-logo.svg.

prerender fa riferimento a un’intera pagina, come blog.html.

	Locale	Terze parti Remote	Da usare nella stessa pagina	Alta Priorità	Dominio	File
dns-prefetch		X		X	X
preconnect		X		X	X
prefetch		X				X
prerender	X		X			X
preload	X			X		X

dns-prefetch e preconnect dovrebbero essere usati con parsimonia poiché alcuni browser Web potrebbero limitare il numero di connessioni preventive. Sia il preload che il prerendering dovrebbero essere usati con attenzione per evitare di scaricare file che non vengono utilizzati, che possono essere costosi sulle reti mobili. Evita di utilizzare il prefetch e il prerendering a meno che i file non siano sicuramente utilizzati in un secondo momento o il download di dati aggiuntivi non sia un problema.

Tutti gli hint per i file di caratteri (anche se self-hosted) e le risorse abilitate per CORS avranno bisogno dell’attributo crossorigin. Vediamo un esempio:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Se siete interessati al tema CORS, potete approfondire nell’articolo dedicato ai CORS; appunto.

Contributo video per dns-prefetch preload preconnect prerender

Come al solito, vi aggiungo un contributo video relativo a dns-prefetch preload preconnect prerender, utile a fossilizzare in mente le differenze tra le varie direttive.

Conclusioni su dns-prefetch preload preconnect prerender

Il tema è molto ampio. Solo sono il tempo e con l’esperienza impareremo a saper gestire ciascuna direttiva nel modo più adeguato. Come già detto poco fa, andateci piano. Usate le direttive poco allavolta, magari eseguendo dei test in un ambiente dedicato e sfruttando l’aiuto di Google Pagespeed. Vederete che poco alla volta capirete in quali occasioni utilizzare la direttiva giusta.

Buon lavoro