Nel modulo precedente sull'ottimizzazione del caricamento delle risorse, hai imparato in che modo varie risorse delle pagine, come CSS e JavaScript, possono influire sulla velocità di caricamento e come ottimizzarle e la relativa pubblicazione per velocizzare il rendering di una pagina. Questo è il momento ideale per passare a un aspetto più avanzato del caricamento delle risorse, ovvero aiutare il browser a caricarle più velocemente utilizzando i suggerimenti delle risorse.
I suggerimenti delle risorse possono aiutare gli sviluppatori a ottimizzare ulteriormente i tempi di caricamento delle pagine indicando al browser come caricare le risorse e come determinarne la priorità. Un insieme iniziale di suggerimenti di risorse, come preconnect e dns-prefetch, è stato il primo a essere introdotto.
Nel corso del tempo, tuttavia, preload e l'API Fetch Priority hanno seguito per fornire ulteriori funzionalità.
I suggerimenti delle risorse indicano al browser di eseguire in anticipo determinate azioni che potrebbero migliorare le prestazioni di caricamento. I suggerimenti delle risorse possono eseguire azioni come l'esecuzione di ricerche DNS iniziali, la connessione anticipata ai server e persino il recupero di risorse prima che il browser le rilevi.
I suggerimenti delle risorse possono essere specificati in HTML, il più delle volte all'inizio dell'elemento <head>, o impostati come intestazione HTTP. Nell'ambito di questo modulo vengono trattati gli argomenti preconnect, dns-prefetch e preload, nonché i comportamenti di recupero speculativi forniti da prefetch.
preconnect
Il suggerimento preconnect viene utilizzato per stabilire una connessione a un'altra origine da cui stai recuperando le risorse critiche. Ad esempio, potresti ospitare immagini o asset su una rete CDN o altro multiorigine:
<link rel="preconnect" href="https://example.com">
Utilizzando preconnect, prevedi che il browser prevede di connettersi a uno
specifico server multiorigine nel prossimo futuro e che il browser
dovrebbe aprire questa connessione il prima possibile, idealmente prima di attendere
l'analizzatore sintattico HTML o lo scanner di precaricamento.
Se su una pagina hai un numero elevato di risorse multiorigine, usa preconnect per le risorse più fondamentali per la pagina corrente.
preconnect può alleviare stabilendo le connessioni prima, anziché nel momento del rilevamento della risorsa multiorigine.
Un caso d'uso comune di preconnect è Google Fonts. Google Fonts consiglia di preconnect al dominio https://fonts.googleapis.com che pubblica le dichiarazioni @font-face e al dominio https://fonts.gstatic.com che pubblica i file dei caratteri.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L'attributo crossorigin viene utilizzato per indicare se una risorsa deve essere
recuperata mediante la condivisione delle risorse tra origini (CORS). Quando utilizzi il suggerimento preconnect, se la risorsa scaricata dall'origine utilizza CORS, ad esempio i file dei caratteri, devi aggiungere l'attributo crossorigin al suggerimento preconnect.
dns-prefetch
Sebbene l'apertura anticipata delle connessioni ai server multiorigine possa migliorare notevolmente il tempo di caricamento iniziale della pagina, potrebbe non essere ragionevole o possibile stabilire le connessioni a più server multiorigine contemporaneamente. Se temi di utilizzare preconnect in modo eccessivo, un suggerimento relativo a una risorsa molto meno costoso è quello di dns-prefetch.
In base al suo nome, dns-prefetch non stabilisce una connessione a un server multiorigine, ma esegue semplicemente la ricerca DNS per il server in anticipo. Una ricerca DNS si verifica quando un nome di dominio viene risolto nell'indirizzo IP sottostante.
Sebbene livelli di cache DNS a livello di dispositivo e di rete contribuiscano a rendere questo processo
generalmente veloce, richiede comunque un po' di tempo.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Le ricerche DNS sono piuttosto economiche e, poiché hanno costi relativamente ridotti, in alcuni casi potrebbero essere uno strumento più appropriato rispetto a un preconnect. In particolare, può essere un suggerimento di risorsa auspicabile da utilizzare nei casi di link che indirizzano ad altri siti web che ritieni che l'utente potrebbe seguire. dnstradamus è uno di questi strumenti che esegue automaticamente questa operazione utilizzando JavaScript e utilizza l'API Intersection Observationr per inserire i dns-prefetch hint nel codice HTML della pagina corrente quando i link ad altri siti web vengono fatti scorrere nella visualizzazione dell'utente.
preload
L'istruzione preload viene utilizzata per avviare una richiesta anticipata per una risorsa necessaria per il rendering della pagina:
<link rel="preload" href="/lcp-image.jpg" as="image">
Le istruzioni preload devono essere limitate alle risorse critiche scoperte in ritardo.
I casi d'uso più comuni sono i file dei caratteri, i file CSS recuperati tramite le dichiarazioni @import o le risorse background-image CSS che potrebbero essere candidati LCP (Largest Contentful Paint). In questi casi, questi file non verranno rilevati dallo scanner di precaricamento poiché viene fatto riferimento alla risorsa nelle risorse esterne.
Analogamente a preconnect, l'istruzione preload richiede l'attributo crossorigin se stai precaricando una risorsa CORS, ad esempio i caratteri. Se non aggiungi l'attributo crossorigin (o non lo aggiungi per le richieste non CORS), la risorsa viene scaricata due volte dal browser, sprecando la larghezza di banda che avrebbe potuto essere utilizzata meglio per altre risorse.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Nello snippet HTML precedente, al browser viene indicato di precaricare /font.woff2 utilizzando una richiesta CORS, anche se /font.woff2 si trova nello stesso dominio.
prefetch
L'istruzione prefetch viene utilizzata per avviare una richiesta a bassa priorità per una risorsa che potrebbe essere utilizzata per le navigazioni future:
<link rel="prefetch" href="/next-page.css" as="style">
Questa istruzione segue in gran parte lo stesso formato dell'istruzione preload; soltanto
l'attributo rel dell'elemento <link> utilizza invece il valore "prefetch".
Tuttavia, a differenza dell'istruzione preload, prefetch è in gran parte speculativo perché avvii un recupero di una risorsa per una navigazione futura che potrebbe o meno avvenire.
In alcuni casi prefetch può essere utile. Ad esempio, se hai identificato un flusso utente sul tuo sito web che la maggior parte degli utenti segue fino al completamento, un prefetch per una risorsa fondamentale per il rendering per le pagine future può contribuire a ridurre i tempi di caricamento.
API Fetch Priority
Puoi utilizzare Fetch Priority API tramite il relativo attributo fetchpriority per aumentare la priorità di una risorsa. Puoi utilizzare l'attributo con gli elementi <link>,
<img> e <script>.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Per impostazione predefinita, le immagini vengono recuperate con una priorità più bassa. Dopo il layout, se l'immagine si trova all'interno dell'area visibile iniziale, la priorità viene aumentata in base alla priorità Alta. Nello snippet HTML precedente, fetchpriority indica immediatamente al browser di scaricare l'immagine LCP più grande con una priorità Alta, mentre le miniature meno importanti vengono scaricate con una priorità inferiore.
I browser moderni caricano le risorse in due fasi. La prima fase è riservata alle risorse critiche e termina una volta che tutti gli script di blocco sono stati scaricati ed eseguiti. Durante questa fase, il download delle risorse con priorità bassa potrebbe subire ritardi. Utilizzando fetchpriority="high" puoi aumentare la priorità di una risorsa, consentendo al browser di scaricarla durante la prima fase.
Demo sui suggerimenti delle risorse
verifica le tue conoscenze
A cosa serve il suggerimento per la risorsa preconnect?
Che cosa ti consente di fare l'API Fetch Priority?
<link>,
<img> e <script>.
Quando dovresti utilizzare il suggerimento prefetch?
A seguire: Rendimento delle immagini
A questo punto, probabilmente inizierai a sentirti abbastanza a tuo agio
sulla tua conoscenza delle considerazioni generali sul rendimento in relazione al codice HTML della pagina, all'elemento <head> e ai suggerimenti sulle risorse. Tuttavia, esistono ulteriori ottimizzazioni specifiche per
i diversi tipi di risorse che le pagine vengono comunemente caricate. Nel prossimo modulo vengono illustrate le
prestazioni delle immagini, che possono aiutarti a caricare
le immagini del tuo sito web il più velocemente possibile, indipendentemente dal
dispositivo dell'utente.