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.
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
?
Che cosa ti consente di fare l'API Fetch Priority?
<link>
,
<img>
e <script>
.
Quando conviene utilizzare il suggerimento prefetch
?
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.