Precarica, preconnessione, prelettura: migliora le prestazioni del tuo sito con suggerimenti per le risorse

I browser Web moderni utilizzano ogni sorta di tecniche diverse per migliorare le prestazioni complessive del tuo sito Web, dall'assegnare priorità alle risorse più importanti e recuperarle per prime fino a indovinare quale pagina l'utente visiterà dopo.

Tuttavia, non dovresti fare affidamento sui browser, per quanto avanzati potrebbero essere, per prendere tutte le decisioni con le prestazioni del tuo sito.

Come proprietario di un sito web, sei tu quello che sa quali risorse sono più cruciali e qual è l'effettivo percorso dell'utente sul tuo sito. E per migliorare le prestazioni complessive, la velocità percepita e l'esperienza utente del tuo sito Web, potresti utilizzare questa conoscenza per aiutare i browser a caricare le tue pagine più velocemente.

È qui che entrano in gioco i suggerimenti sulle risorse.

Nelle righe seguenti li esamineremo e come sfruttarne i vantaggi nel miglior modo possibile.

Immergiamoci.

Come funzionano i browser (in poche parole)

Per comprendere meglio i suggerimenti sulle risorse e dove sono applicabili, diamo una rapida occhiata a come i browser caricano effettivamente il contenuto.

Potremmo dividere l'intero processo di caricamento di una pagina da parte di un browser in tre passaggi:

• Stabilendo una connessione;
• Download, analisi e rendering del codice;
• Rendere la pagina interattiva;

Durante la prima fase, il browser deve stabilire una connessione con il server per scaricare le risorse. Ciò include la ricerca del nome di dominio e la sua risoluzione su un indirizzo IP, l'impostazione di una connessione al server e la crittografia della connessione per motivi di sicurezza.

Una volta che tutto è fatto, il browser può procedere con il download e l'analisi delle informazioni, costruendo il Document Object Model (DOM) e CSS Object Model (CSSOM) e quindi renderizzando il contenuto.

L'ultima parte è rendere la pagina interattiva. Tutti i processi sopra menzionati si svolgono nel thread principale. Quindi, dopo che il thread principale del browser è terminato con l'analisi, il rendering e il disegno della pagina, è il momento di occuparsi dei file JavaScript posticipati per rendere la pagina disponibile per lo scorrimento, il tocco e altre interazioni.

In poche parole, questo è il processo dietro le quinte ogni volta che viene caricata una pagina.

Vediamo come puoi avere un impatto positivo su ciascuna di queste fasi integrando i suggerimenti per le risorse.

Suggerimenti per le risorse: precaricamento, preconnessione, precaricamento

Come suggerisce il nome, i suggerimenti per le risorse sono suggerimenti o istruzioni che indicano al browser come deve gestire risorse o pagine Web specifiche. In altre parole, questo insieme di istruzioni consente di assistere il browser nell'assegnare priorità alle origini o alle risorse che devono essere recuperate e visualizzate.

Tutti i suggerimenti sulle risorse utilizzano l'attributo rel dell'elemento link che troverai nell'intestazione dei tuoi documenti HTML.

L'integrazione di quegli snippet di codice HTML sul tuo sito Web consentirà al browser di iniziare a caricare i file selezionati prima che se il browser li trovasse durante il normale corso del caricamento della pagina.

E ora che le basi sono alle spalle, passiamo alla parte per cui sei qui: panoramica dei suggerimenti sulle risorse, i loro vantaggi e quando usarli.

Precarica

link rel=prefetch è un suggerimento per le risorse a bassa priorità che consente al browser di recuperare le risorse che potrebbero essere necessarie in seguito e di archiviarle nella cache del browser.

Poiché il prefetch imposta una priorità molto bassa, non utilizzare questo suggerimento per i file di alta importanza .

Uno dei grandi casi d'uso è l'utilizzo del prefetch per migliorare il tempo di caricamento delle pagine successive. Ad esempio, puoi applicare la direttiva prefetch durante l'autenticazione di un utente. In questo modo, puoi sfruttare il tempo che impiegano per inserire le proprie credenziali per precaricare le risorse necessarie per la pagina che vedranno in seguito.

Anticipando i passaggi dei tuoi visitatori sul tuo sito e precaricando le risorse, puoi migliorare metriche come First Contentful Paint e Time to Interactive. Qualcosa che Netflix ha fatto e ha ridotto del 30% il suo Time to Interactive.

Tutto ciò che abbiamo menzionato fino a questo punto si riferisce al prelettura, noto anche come prelettura dei collegamenti. Ma ci sono altri due tipi di prelettura che sono ugualmente importanti e dobbiamo menzionare:

1. Prelettura DNS
Il browser deve eseguire una ricerca DNS per convertire un nome host (l'URL) in un indirizzo IP prima di connettersi all'host (server di origine).

Sebbene ciò richieda in genere solo pochi millisecondi, se un sito Web carica file da un nome di dominio di terze parti, cosa che fa la maggior parte dei siti Web, il browser deve eseguire una ricerca DNS per ciascun dominio. Alcuni siti (ad esempio, siti Web di notizie) utilizzano molte risorse esterne, il che significa che potrebbero essere necessarie dozzine di ricerche DNS per pagina.

In questi casi, l'utilizzo dell'hint dns-prefetch potrebbe far risparmiare alcuni millisecondi poiché l'istruzione dice al browser di avviare immediatamente il processo, piuttosto che quando la necessità viene scoperta più avanti nel processo di caricamento.

Come suggerito nel Web Almanac 2021, una buona pratica è combinare dns-prefetch con l'hint di preconnessione per ottenere risultati ottimali. Puoi capire perché nella sezione in cui si parla di preconnessione .

2. Prerendering
Il prerendering è molto simile al prelettura in quanto ottimizza le risorse che l'utente può passare in seguito. La differenza è che il prerendering esegue effettivamente il rendering dell'intera pagina anziché di risorse specifiche.

Preconnessione

Come dns-prefetch , la direttiva preconnect aiuta il browser a stabilire le prime connessioni prima di inviare una richiesta iniziale al server.

Tuttavia, il suggerimento di preconnessione fa un ulteriore passo avanti. Sebbene esegua ricerche DNS, include anche negoziazioni TLS e handshake TCP. Questo, a sua volta, elimina la latenza di andata e ritorno e fa risparmiare ancora più tempo.

Ma ecco che arriva la domanda:

Se preconnect fa tutto ciò che fa dns-prefetch e soprattutto, perché dovrei usare dns-prefetch in primo luogo?

Nella maggior parte dei casi, la preconnessione è l'opzione preferibile a dns-prefetch , ma il problema è che la preconnessione non è supportata da alcuni browser:

Fonte: caniuse.com

La cosa buona è che puoi usarli insieme per ottenere il massimo da loro. Puoi trarre vantaggio dalla preconnessione nei browser che lo supportano con un fallback a dns-prefetch :

Secondo Google:

Nel 2019, Chrome è riuscito a migliorare il proprio Time To Interactive di quasi 1 secondo collegandosi a origini importanti.

Precarico

Prima di spiegare come funziona la direttiva sul precarico , dobbiamo chiarire qualcosa.

Sebbene il precarico sia regolarmente menzionato come "Suggerimento sulla risorsa", non lo è. Il precaricamento è un recupero dichiarativo ed è obbligatorio per i browser , rendendolo più un comando piuttosto che un suggerimento.

Detto questo, il precaricamento viene utilizzato per forzare il browser a scaricare una risorsa prima di quanto il browser la scopra perché è fondamentale per la pagina.

La direttiva preload funziona meglio sulle risorse che fanno parte del percorso di rendering critico ma non sono facilmente rilevabili dal browser. Ad esempio, font, CSS o JavaScript critico.

Un'altra differenza rispetto ai suggerimenti dns-prefetch e preconnect è che mentre richiedono solo gli attributi rel e href , il precaricamento è più complicato. Devi aggiungere l'attributo as , che indica il tipo di contenuto della risorsa che desideri precaricare.

Secondo Addy Osmani, un responsabile tecnico di Google, è obbligatorio fornire un attributo durante il precaricamento:

Ecco un elenco completo di come valori che puoi specificare:

L'inclusione dell'attributo as aiuta il browser a impostare la priorità della risorsa precaricata in base al suo tipo e a determinare se la risorsa esiste già nella cache.

Consulta il documento sulle priorità e sulla pianificazione delle risorse di Chrome per ulteriori informazioni sulla priorità dei diversi tipi di risorse.

Per alcune risorse, come i caratteri, devi includere anche l'attributo crossorigin .

L'attributo crossorigin imposta la modalità della richiesta su una richiesta HTTP CORS. CORS (Cross-Origin Resource Sharing) è un meccanismo che consente a un server di indicare qualsiasi origine diversa dalla propria da cui un browser dovrebbe consentire il caricamento delle risorse. Non approfondiremo questo aspetto in quanto non è l'obiettivo di questo articolo, ma puoi trovare maggiori informazioni qui.

E simile all'attributo as , il precaricamento dei caratteri senza origine incrociata raddoppierà il recupero. Ecco un altro estratto dall'articolo di Addy Osmani sull'argomento:

Più suggerimenti sulle risorse, più problemi

Leggendo tutto fino ad ora, potresti iniziare a pensare che l'utilizzo del maggior numero possibile di suggerimenti sulle risorse porterebbe solo i browser a caricare le tue pagine alla velocità della luce.

Sfortunatamente, questo non è il caso.

Ecco alcune delle battute d'arresto da tenere in considerazione quando si integrano i suggerimenti sulle risorse:

1. Il precaricamento potrebbe aumentare il consumo di dati

Sebbene il prefetch stabilisca una bassa priorità di download, ciò non significa che sia innocuo. Il suo utilizzo potrebbe aumentare il consumo di dati sul tuo sito, che può presentare problemi sia per te (aumento del traffico sul tuo server) che per i tuoi utenti (consumo eccessivo di risorse non necessario). Inoltre, puoi finire per caricare byte extra che potrebbero non essere utilizzati alla fine. Quindi pensaci due volte prima di integrarlo.

2. Il prerendering può causare uno spreco di larghezza di banda

La scommessa con il prerender è persino maggiore del prefetch , poiché scarichi intere pagine in anticipo. Ciò rende il suggerimento pesante in termini di risorse e può causare uno spreco di larghezza di banda, specialmente sui dispositivi mobili. E la parte peggiore è che gli utenti potrebbero non vedere nemmeno l'effetto del suggerimento se non richiedono la pagina.

3. La preconnessione potrebbe comportare un utilizzo aggiuntivo della CPU

Sebbene la preconnessione sia un suggerimento con bassa priorità, potrebbe comunque danneggiare le prestazioni del tuo sito web. Se una connessione stabilita non viene utilizzata rapidamente (entro 10 secondi su Chrome), la direttiva di preconnessione aggiunge solo un ulteriore utilizzo della CPU e verrà automaticamente chiusa dal browser. Inoltre, dovresti usare la preconnessione con moderazione poiché la dimensione dei certificati di crittografia è di circa 3 KB, il che sarebbe in competizione con la larghezza di banda per altre risorse importanti.

4. Il precaricamento sovrascrive le priorità impostate dall'analizzatore del browser

preload è un'istruzione potente poiché consente di fare in modo che il browser scarichi immediatamente una risorsa. Tuttavia, i browser Web moderni sono abbastanza bravi a dare la priorità alle risorse, quindi l'uso eccessivo del precarico potrebbe portare a risultati negativi. Ad esempio, se aggiungi una direttiva di precaricamento che corrisponde a un URL di risorsa asincrona, il browser la recupererà più velocemente, quindi lo analizzerà più velocemente, annullando l'effetto del tuo attributo asincrono interrompendo il thread principale molto presto nel caricamento della pagina.

Ricapitolare

Abbiamo coperto molto terreno in questo articolo, quindi facciamo un breve riepilogo dei punti più essenziali:

• dns-prefetch e preconnect vengono utilizzati per assegnare la priorità ai nomi di dominio (ad es. https://example.com).
• prefetch e preload vengono utilizzati per dare priorità al caricamento delle risorse. Sebbene il precaricamento venga utilizzato per migliorare il tempo di caricamento delle pagine successive, il precaricamento funziona meglio sulle risorse critiche per la pagina corrente.
• il prerender fa riferimento a un'intera pagina (es. blog.html).
• prefetch , prerender e preconnect sono suggerimenti per le risorse e vengono eseguiti come meglio crede il browser. La direttiva preload è un comando obbligatorio per i browser.
• Quando si utilizza preload , non dimenticare di fornire gli attributi as e crossorigin per evitare il doppio recupero.
• Sebbene i suggerimenti sulle risorse siano istruzioni a bassa priorità, rappresentano comunque una minaccia per le prestazioni del tuo sito. Usali con moderazione e solo quando necessario.
• preload è una potente direttiva che può sovrascrivere le priorità dell'analizzatore del browser. Non dimenticare che i browser moderni sono abbastanza bravi a dare la priorità alle risorse, quindi usa il "suggerimento" di precaricamento con parsimonia.

Utilizza le nuove conoscenze acquisite sui suggerimenti per le risorse per accelerare la distribuzione di contenuti e risorse e migliorare le prestazioni complessive del tuo sito. E non dimenticare di testare il tuo sito web nel mondo reale (concentrati sui dati sul campo) ogni volta che apporti una modifica.