Ottimizzazione delle prestazioni con suggerimenti sulle risorse

Pubblicato: 2022-03-10

Riepilogo rapido ↬ Molte ottimizzazioni delle prestazioni possono essere apportate quando possiamo prevedere cosa potrebbero fare gli utenti prima che lo facciano effettivamente. I suggerimenti per le risorse sono un modo semplice ma efficace con cui gli sviluppatori Web possono aiutare il browser a rimanere un passo avanti rispetto all'utente e mantenere le pagine veloci.

I browser Web moderni utilizzano tutti i tipi di tecniche per migliorare le prestazioni di caricamento della pagina indovinando cosa potrebbe fare l'utente dopo. Il browser non sa molto del nostro sito o dell'applicazione nel suo insieme, tuttavia, e spesso le migliori informazioni su ciò che un utente potrebbe fare probabilmente provengono da noi, lo sviluppatore.

Prendi l'esempio del contenuto impaginato, come un album fotografico. Sappiamo che se l'utente sta guardando una foto in un album, la possibilità che faccia clic sul collegamento "successivo" per visualizzare la seguente immagine nell'album è piuttosto alta. Il browser, tuttavia, non sa bene che di tutti i collegamenti nella pagina, quello è quello che è più probabile che l'utente clicchi. Per un browser, tutti quei collegamenti hanno lo stesso peso.

E se il browser potesse in qualche modo sapere dove stava andando l'utente e recuperare la pagina successiva in anticipo in modo che quando l'utente fa clic sul collegamento il caricamento della pagina sia molto, molto più veloce? Questo è in sostanza ciò che sono i suggerimenti per le risorse. Sono un modo per lo sviluppatore di dire al browser cosa potrebbe accadere in futuro in modo che il browser possa tenerne conto nelle sue scelte su come caricare le risorse.

Tutti questi suggerimenti sulle risorse utilizzano l'attributo rel dell'elemento <link> che avrai familiarità con il trovare nella <head> dei tuoi documenti HTML. In questo articolo daremo un'occhiata ai principali tipi di suggerimenti per le risorse e quando e dove possiamo usarli nelle nostre pagine. Passeremo dai piccoli e sottili accenni fino ai grandi cannoni alla fine.

Altro dopo il salto! Continua a leggere sotto ↓

Prelettura DNS

Una ricerca DNS è il processo di trasformazione di un nome di dominio di facile utilizzo come example.com nell'indirizzo IP adatto alle macchine come 123.54.92.4 effettivamente necessario per recuperare una risorsa.

Ogni volta che digiti un URL nella barra degli indirizzi del browser, segui un collegamento in una pagina o addirittura carichi una risorsa come un'immagine da un dominio diverso, il browser deve eseguire una ricerca DNS per trovare il server che contiene la risorsa che abbiamo richiesto. Per una pagina occupata con molte risorse esterne (come forse un sito Web di notizie con un sacco di annunci e tracker), potrebbero essere necessarie dozzine di ricerche DNS per pagina.

Il browser memorizza nella cache i risultati di queste ricerche, ma possono essere lenti. Una tecnica di ottimizzazione delle prestazioni consiste nel ridurre il numero di ricerche DNS richieste organizzando le risorse su un numero inferiore di domini. Quando ciò non è possibile, puoi avvisare il browser dei domini che dovrà cercare con il suggerimento per la risorsa dns-prefetch .

 <link rel="dns-prefetch" href="https://images.example.com">

Quando il browser incontra questo suggerimento, può iniziare a risolvere il nome di dominio images.example.com il prima possibile, anche se non sa ancora come verrà utilizzato. Ciò consente al browser di anticipare il gioco e svolgere più lavoro in parallelo, diminuendo il tempo di caricamento complessivo.

Quando dovrei usare `dns-prefetch` ?

Usa dns-prefetch quando la tua pagina utilizza risorse di un dominio diverso, per dare al browser un vantaggio. Il supporto del browser è davvero eccezionale, ma se un browser non lo supporta, non viene fatto alcun danno: il prefetch semplicemente non avviene.

Non eseguire il precaricamento dei domini che non stai utilizzando e, se ti accorgi di voler eseguire il precaricamento di un numero elevato di domini, potrebbe essere meglio esaminare il motivo per cui tutti quei domini sono necessari e se è possibile fare qualcosa per ridurne il numero.

Preconnessione

Un passo avanti dalla prelettura DNS è la preconnessione a un server. Stabilire una connessione a un server che ospita una risorsa richiede diversi passaggi:

Ricerca DNS (come abbiamo appena discusso);
Stretta di mano TCP
Una breve “conversazione” tra browser e server per creare la connessione.
Negoziazione TLS su siti HTTPS
Ciò verifica che le informazioni sul certificato siano valide e corrette per la connessione.

Ciò si verifica in genere una volta per server e richiede tempo prezioso, soprattutto se il server è molto distante dal browser e la latenza di rete è elevata. (È qui che le CDN distribuite a livello globale aiutano davvero!) Allo stesso modo in cui il precaricamento del DNS può aiutare il browser ad anticipare il gioco prima che veda cosa sta arrivando, la preconnessione a un server può garantire che quando il browser arriva alla parte della pagina in cui è necessaria una risorsa, il lento lavoro per stabilire la connessione è già avvenuto e la linea è aperta e pronta per partire.

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

Quando dovrei usare `preconnect` ?

Ancora una volta, il supporto del browser è forte e non c'è nulla di male se un browser non supporta la preconnessione: il risultato sarà esattamente come prima. Prendi in considerazione l'utilizzo della preconnessione quando sai per certo che accederai a una risorsa e vuoi andare avanti.

Fai attenzione a non preconnetterti e quindi a non utilizzare la connessione, poiché ciò rallenterà la tua pagina e occuperà anche una piccola quantità di risorse sul server a cui ti connetti.

Prelettura della pagina successiva

I due suggerimenti che abbiamo esaminato finora si concentrano principalmente sulle risorse all'interno della pagina caricata. Potrebbero essere utili per aiutare il browser ad andare avanti su immagini, script o caratteri, ad esempio. I prossimi due suggerimenti riguardano maggiormente la navigazione e la previsione di dove l'utente potrebbe andare dopo la pagina attualmente caricata.

Il primo di questi è il precaricamento e il relativo tag di collegamento potrebbe assomigliare a questo:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Questo dice al browser che può andare avanti e recuperare una pagina in background in modo che sia pronta per l'uso quando richiesto. C'è un po' di gioco d'azzardo qui perché devi anticipare dove pensi che l'utente navigherà successivamente. Fallo bene e la pagina successiva potrebbe sembrare caricarsi molto rapidamente. Se sbagli, hai perso tempo e risorse per scaricare qualcosa che non verrà utilizzato. Se l'utente ha una connessione a consumo come un piano di telefonia mobile limitato, potresti effettivamente costargli denaro reale.

Quando si verifica un prefetch, il browser esegue la ricerca DNS ed effettua la connessione al server che abbiamo visto nei due tipi di suggerimento precedenti, ma poi fa un ulteriore passo avanti e richiede e scarica effettivamente i file. Si ferma a quel punto, tuttavia, ei file non vengono analizzati o eseguiti e non vengono in alcun modo applicati alla pagina corrente. Sono solo richiesti e tenuti pronti.

Potresti pensare a un prefetch come un po' come aggiungere un file alla cache del browser. Invece di dover andare sul server e scaricarlo quando l'utente fa clic sul collegamento, il file può essere estratto dalla memoria e utilizzato molto più rapidamente.

L'attributo `as`

Nell'esempio sopra, puoi vedere che stiamo impostando l'attributo as su as="document" . Questo è un attributo opzionale che dice al browser che ciò che stiamo recuperando deve essere gestito come un documento (cioè una pagina web). Ciò consente al browser di impostare lo stesso tipo di intestazioni di richiesta e criteri di sicurezza come se avessimo appena seguito un collegamento a una nuova pagina.

Esistono molti valori possibili per l'attributo as consentendo al browser di gestire diversi tipi di prelettura nel modo appropriato.

Valore di `as`	Tipo di risorsa
`audio`	File audio e musicali
`video`	video
`Track`	Tracce WebVTT video o audio
`script`	File JavaScript
`style`	Fogli di stile CSS
`font`	Font web
`image`	immagini
`fetch`	Richieste XHR e Fetch API
`worker`	Lavoratori del web
`embed`	Richieste multimediali `<embed>`
`object`	Richieste `<object>` multimediali
`document`	pagine web

I diversi valori che possono essere utilizzati per specificare i tipi di risorsa con l'attributo as .

Quando dovrei usare `prefetch` ?

Anche in questo caso il prefetch ha un ottimo supporto per il browser. Dovresti usarlo quando hai una ragionevole certezza che l'utente possa seguire attraverso il tuo sito se ritieni che accelerare la navigazione avrà un impatto positivo sull'esperienza dell'utente. Questo dovrebbe essere valutato rispetto al rischio di sprecare risorse eventualmente recuperando una risorsa che non viene quindi utilizzata.

Prerendering della pagina successiva

Con prefetch , abbiamo visto come il browser può scaricare i file in background pronti per l'uso, ma abbiamo anche notato che a quel punto non è stato fatto altro. Il prerendering fa un ulteriore passo avanti ed esegue i file, facendo praticamente tutto il lavoro necessario per visualizzare la pagina tranne che per visualizzarla effettivamente.

Ciò potrebbe includere l'analisi della risorsa per eventuali sottorisorse come file e immagini JavaScript e anche il precaricamento di quelle.

 <link rel="prerender" href="https://example.com/news/?page=2">

Questo può davvero rendere istantaneo il caricamento della pagina seguente, con il tipo di prestazioni di caricamento scattanti che potresti vedere quando premi il pulsante Indietro del browser. La scommessa è ancora più grande qui, tuttavia, poiché non stai solo spendendo tempo per richiedere e scaricare i file, ma eseguirli insieme a qualsiasi JavaScript e simili. Ciò potrebbe consumare memoria e CPU (e quindi batteria) di cui l'utente non vedrà il vantaggio se finisce per non richiedere la pagina.

Quando dovrei usare `prerender` ?

Il supporto del browser per il prerender è attualmente molto limitato, con solo Chrome e il vecchio IE (non Edge) che offrono supporto per l'opzione. Ciò potrebbe limitarne l'utilità a meno che tu non stia prendendo di mira specificamente Chrome. Ancora una volta è un caso di "nessun danno, nessun fallo" poiché l'utente non vedrà il vantaggio ma non causerà alcun problema in caso contrario.

Mettere i suggerimenti per le risorse da utilizzare

Abbiamo già visto come i suggerimenti per le risorse possono essere usati nella <head> di un documento HTML usando il tag <link> . Questo è probabilmente il modo più conveniente per farlo, ma puoi anche ottenere lo stesso con l'intestazione Link: HTTP.

Ad esempio, per precaricare con un'intestazione HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

Puoi anche utilizzare JavaScript per applicare dinamicamente suggerimenti sulle risorse, magari in risposta all'utilizzo dell'interazione. Per utilizzare un esempio dal documento delle specifiche del W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Ciò apre alcune possibilità interessanti, poiché è potenzialmente più facile prevedere dove l'utente potrebbe navigare successivamente in base a come interagiscono con la pagina.

Cose da notare

Abbiamo esaminato quattro modi progressivamente più aggressivi di precaricare le risorse, dal tocco più leggero della semplice risoluzione del DNS fino al rendering di una pagina completa pronta per essere utilizzata in background. È importante ricordare che questi suggerimenti sono proprio questo; sono suggerimenti su come il browser potrebbe ottimizzare le prestazioni . Non sono direttive. Il browser può accettare i nostri suggerimenti e utilizzare il suo miglior giudizio nel decidere come rispondere.

Ciò potrebbe significare che su un dispositivo occupato o sovraccaricato, il browser non tenta affatto di rispondere ai suggerimenti. Se il browser sa che è su una connessione a consumo, potrebbe precaricare DNS ma non intere risorse, ad esempio. Se la memoria è insufficiente, il browser potrebbe nuovamente decidere che non vale la pena recuperare la pagina successiva fino a quando quella corrente non è stata scaricata.

La realtà è che su un browser desktop, i suggerimenti verranno probabilmente tutti seguiti come suggerisce lo sviluppatore, ma tieni presente che dipende in ogni caso dal browser.

L'importanza della manutenzione

Se hai lavorato con il web per più di un paio d'anni, avrai familiarità con il fatto che se qualcosa su una pagina non viene visto, spesso può essere trascurato. I metadati nascosti (come le descrizioni delle pagine) ne sono un buon esempio. Se le persone che si occupano del sito non riescono a vedere facilmente i dati, possono facilmente essere trascurati e diventare obsoleti.

Questo è un rischio reale con i suggerimenti sulle risorse. Poiché il codice è nascosto e non viene rilevato durante l'uso, sarebbe molto facile che la pagina cambi e qualsiasi suggerimento sulle risorse non venga aggiornato. La conseguenza, ad esempio, di precaricare una pagina che non utilizzi, significa che gli strumenti che hai messo in atto per migliorare le prestazioni del tuo sito lo stanno danneggiando attivamente. Quindi disporre di buone procedure in atto per aggiornare i suggerimenti sulle risorse diventa davvero, davvero importante.

Risorse

"Specifica dei suggerimenti per le risorse", W3C
"Accelera la navigazione della pagina successiva con il prelettura", Addy Osmani