Assisti il browser con suggerimenti sulle risorse

Nel modulo precedente sull'ottimizzazione del caricamento delle risorse, hai imparato in che modo vari risorse della pagina, come CSS e JavaScript, possono influire sulla velocità di caricamento della pagina e puoi ottimizzarli e la loro pubblicazione per velocizzare il rendering di una pagina. Questo è il momento ideale per passare a un aspetto più avanzato delle risorse viene caricato e ciò comporta l'agevolazione del caricamento da parte del browser mediante l'utilizzo gli hint delle risorse.

I suggerimenti relativi alle risorse possono aiutare gli sviluppatori a ottimizzare ulteriormente il tempo di caricamento della pagina informando al browser come caricare le risorse e assegnare loro la priorità. Un insieme iniziale di risorse Suggerimenti come preconnect e dns-prefetch sono stati i primi a essere introdotti. Tuttavia nel tempo, tuttavia, preload e l'API Fetch Priority hanno seguito offrono funzionalità aggiuntive.

I suggerimenti delle risorse indicano al browser di eseguire determinate azioni in anticipo che potrebbero migliorare le prestazioni di caricamento. Gli hint possono eseguire azioni quali eseguire ricerche DNS iniziali, connettersi in anticipo ai server e persino prima che il browser le rilevi.

I hint possono essere specificati in codice HTML, molto spesso nelle prime fasi del <head> oppure impostata come intestazione HTTP. Nell'ambito di questo modulo, preconnect, dns-prefetch e preload sono trattati, nonché i i comportamenti di recupero speculativo forniti da prefetch.

preconnect

Il suggerimento preconnect viene utilizzato per stabilire una connessione a un'altra origine da in cui recuperi le risorse critiche. Ad esempio, potresti ospitare i tuoi immagini o asset su una rete CDN o altro multiorigine:

<link rel="preconnect" href="https://example.com">

Se utilizzi preconnect, prevedi che il browser progetta di collegarsi a un server multiorigine specifico in un futuro molto vicino e che il browser aprire la connessione il prima possibile, idealmente prima di attendere Parser HTML o precarica lo scanner per farlo.

Se su una pagina sono presenti molte risorse multiorigine, usa preconnect per le risorse più importanti per la pagina corrente.

Uno screenshot dei tempi di connessione per una risorsa nel riquadro Rete di Chrome DevTools. La configurazione della connessione include tempo di stallo, negoziazione proxy, ricerca DNS, configurazione della connessione e negoziazione TLS.
. Una visualizzazione dei tempi di connessione come mostrato nel riquadro Rete di Chrome DevTools. I tempi nella casella rossa sono quelli coinvolti nella configurazione con un server multiorigine, che preconnect può mitigare stabilendo connessioni prima, piuttosto che nel momento in cui 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 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 recuperati utilizzando 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 di connessioni ai server multiorigine possa significativamente migliorare il tempo di caricamento iniziale della pagina, potrebbe non essere ragionevole o possibile stabilire connessioni a più server multiorigine contemporaneamente. Se hai dubbi potresti usare preconnect in modo eccessivo, un suggerimento sulle risorse molto meno costoso è Suggerimento dns-prefetch.

In base al nome, dns-prefetch non stabilisce una connessione a un multiorigine server, ma esegue solo la ricerca DNS in anticipo. Un DNS lookup si verifica quando un nome di dominio viene risolto nell'indirizzo IP sottostante. Mentre i livelli di cache DNS a livello di dispositivo e rete contribuiscono a rendere questo processo in genere è veloce, ma 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, a causa del loro costo relativamente ridotto, in alcuni casi potrebbe essere uno strumento più appropriato rispetto a un preconnect. Nella in particolare, potrebbe essere un auspicabile suggerimento da usare in caso di link navigare verso altri siti web che si ritiene che l'utente possa seguire. dnstradamus è uno di questi strumenti che esegue automaticamente questa operazione, utilizzando JavaScript, e utilizza l'API Intersection Observer per inserire dns-prefetch suggerimenti nella HTML della pagina corrente quando i link ad altri siti web fanno scorrere verso il codice HTML area visibile.

preload

L'istruzione preload viene utilizzata per avviare una richiesta in anteprima per una risorsa richiesti 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 e i file CSS recuperati tramite @import dichiarazioni o risorse background-image CSS probabilmente più grandi I candidati per la visualizzazione con contenuti (LCP). In questi casi, questi file non vengono rilevato dallo scanner di precaricamento perché viene fatto riferimento alla risorsa nell'elenco Google Cloud.

Analogamente a preconnect, l'istruzione preload richiede l'elemento crossorigin se stai precaricando una risorsa CORS, ad esempio i caratteri. Se non aggiungi l'attributo crossorigin, oppure aggiungilo per le richieste non CORS, viene scaricato dal browser due volte, sprecando la larghezza di banda che avrebbe potuto può essere speso meglio per altre risorse.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

Nello snippet HTML precedente, al browser viene chiesto di precaricare /font.woff2 utilizza 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 un risorsa che probabilmente verrà utilizzata per navigazioni future:

<link rel="prefetch" href="/next-page.css" as="style">

Questa istruzione segue ampiamente lo stesso formato dell'istruzione preload, ma soltanto l'attributo rel dell'elemento <link> utilizza il valore "prefetch". Tuttavia, a differenza dell'istruzione preload, il valore prefetch è ampiamente speculativo in che stai avviando un recupero di una risorsa per una navigazione futura che potrebbe o potrebbe non accadere.

Ci sono casi in cui prefetch può essere vantaggioso, ad esempio se hai identificato un flusso di utenti sul tuo sito web che la maggior parte degli utenti segue fino alla fine, un prefetch per una risorsa critica per il rendering per le pagine future che possono essere utili per ridurre i tempi di caricamento.

API Fetch Priority

Puoi utilizzare Fetch Priority API tramite il relativo attributo fetchpriority per aumenta la priorità di una risorsa. Puoi utilizzare l'attributo con <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 Priorità alta. Nello snippet HTML precedente, fetchpriority immediatamente indica al browser di scaricare l'immagine LCP più grande con priorità Alta, mentre le miniature meno importanti vengono scaricate con una priorità più bassa.

I browser moderni caricano le risorse in due fasi. La prima fase è riservata le risorse critiche e termina una volta scaricati tutti gli script di blocco eseguito. Durante questa fase, le risorse con priorità Bassa potrebbero subire ritardi download. Utilizzando fetchpriority="high" puoi aumentare la priorità di un e la risorsa, abilitando il browser per scaricarla durante la prima fase.

Demo di suggerimenti delle risorse

Verifica le tue conoscenze

Che cosa fa il suggerimento della risorsa preconnect?

Esegue solo una ricerca DNS per il server multiorigine.
Apre una connessione a un server multiorigine, inclusa la ricerca DNS, nonché la connessione e la negoziazione TLS prima che il browser altrimenti la scoprono.

Che cosa ti consente di fare l'API Fetch Priority?

Specifica la priorità relativa per <link>, <img> e <script>.
Specifica la priorità con cui viene scaricato l'HTML della pagina corrente.

Quando conviene utilizzare il suggerimento prefetch?

Quando hai un'alta probabilità che le risorse o le pagine che intendi eseguire il precaricamento, sono necessarie all'utente.
Se l'utente non ha dichiarato una preferenza esplicita per la riduzione dei dati all'utilizzo delle risorse.
Per tutte le risorse o le pagine di cui l'utente può avere bisogno, indipendentemente dal fatto che ne avranno davvero bisogno in futuro.

A seguire: rendimento delle immagini

A questo punto, probabilmente stai iniziando ad avere una certa sicurezza riguardo alle tue conoscenze delle considerazioni generali sul rendimento per il codice HTML della pagina, il <head> e i suggerimenti delle risorse. Tuttavia, ci sono altre ottimizzazioni che sono specifici dei diversi tipi di risorse caricate comunemente nelle pagine. Poi, Le prestazioni delle immagini saranno trattate nel prossimo modulo, e ti possono aiutare a comprendere le immagini del tuo sito web vengono caricate il più velocemente possibile, indipendentemente dal dispositivo dell'utente.