A partire da Chrome 73, è possibile combinare link rel="preload" e immagini adattabili per caricare le immagini più rapidamente.
Supporto dei browser
- 73
- 79
- 78
- 17.2
Questo articolo mi offre l'opportunità di parlare di due dei miei aspetti preferiti: le immagini adattabili e il precaricamento. In qualità di persona molto coinvolta nello sviluppo di entrambe queste funzionalità, sono entusiasta di vederle lavorare insieme.
Panoramica delle immagini adattabili
Supponiamo che tu stia navigando sul web su uno schermo largo 300 pixel e che la pagina abbia appena richiesto un'immagine di 1500 pixel. Quella pagina ha sprecato un sacco di dati della rete dati perché lo schermo non è in grado di fare nulla con tutta quella risoluzione extra. Idealmente, il browser dovrebbe recuperare una versione dell'immagine poco più larga delle dimensioni dello schermo, ad esempio 325 pixel. Ciò garantisce un'immagine ad alta risoluzione senza sprecare dati. Inoltre, l'immagine verrà caricata più velocemente. Le immagini adattabili consentono ai browser di recuperare risorse immagine diverse su dispositivi diversi. Se non utilizzi una CDN di immagine, devi salvare più dimensioni per ogni immagine e specificarle nell'attributo srcset. Il valore w indica al browser la larghezza di ogni versione. In base al dispositivo, il browser può scegliere quello appropriato:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Panoramica precarica
Precarica ti consente di indicare al browser le risorse fondamentali che vuoi caricare il prima possibile, prima che vengano rilevate nel codice HTML. Questo è particolarmente utile per le risorse non facilmente rilevabili, ad esempio i caratteri inclusi nei fogli di stile, nelle immagini di sfondo o nelle risorse caricate da uno script.
<link rel="preload" as="image" href="important.png">
Immagini adattabili + precaricamento = caricamenti delle immagini più rapidi
Le immagini adattabili e il precaricamento erano disponibili da alcuni anni, ma allo stesso tempo mancava qualcosa: non c'era modo di precaricare le immagini adattabili. A partire da Chrome 73, il browser può precaricare la variante corretta delle immagini adattabili specificate in srcset prima di rilevare il tag img.
A seconda della struttura del sito, ciò potrebbe ridurre notevolmente la velocità della visualizzazione delle immagini. Abbiamo eseguito dei test su un sito che utilizza JavaScript per eseguire il caricamento lento delle immagini adattabili. Il precaricamento ha permesso di caricare le immagini 1,2 secondi più velocemente.
imagesrcset e imagesizes
Per precaricare le immagini adattabili, sono stati aggiunti di recente nuovi attributi all'elemento <link>: imagesrcset e imagesizes. Vengono utilizzati con <link rel="preload"> e corrispondono alle sintassi srcset e sizes utilizzate nell'elemento <img>.
Ad esempio, se vuoi precaricare un'immagine adattabile specificata con:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Puoi farlo aggiungendo quanto segue al codice HTML <head>:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Questo avvia una richiesta utilizzando la stessa logica di selezione delle risorse che verrà applicata da srcset e sizes.
casi d'uso
Precaricamento delle immagini adattabili inserite dinamicamente
Supponiamo che tu stia caricando dinamicamente immagini hero come parte di una presentazione e sai quale immagine verrà visualizzata per prima. In questo caso, è consigliabile evitare di attendere lo script prima di caricare l'immagine in questione, perché questo potrebbe ritardare la visualizzazione da parte degli utenti.
Puoi esaminare questo problema su un sito web con una galleria immagini caricata dinamicamente:
Apri questo sito web di esempio in una nuova scheda.
Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
Fai clic sulla scheda Rete.
Nell'elenco a discesa Riduzione, seleziona 3G veloce.
Disattiva la casella di controllo Disabilita cache.
Ricarica la pagina.
L'utilizzo di preload è utile in questo caso perché l'immagine inizia a caricarsi in anticipo ed è probabile che sia già presente quando il browser deve visualizzarla.
Per capire la differenza dovuta al precaricamento, puoi esaminare la stessa galleria immagini caricata dinamicamente ma con la prima immagine precaricata seguendo i passaggi nel primo esempio.
Precaricamento delle immagini di sfondo utilizzando il set di immagini
Se disponi di immagini di sfondo diverse per densità di schermo diverse, puoi specificarle nel tuo CSS con la sintassi image-set. Il browser può quindi scegliere quale visualizzare in base al DPR dello schermo.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Il problema delle immagini di sfondo CSS è che vengono rilevate dal browser solo dopo che questo ha scaricato ed elaborato tutti i CSS nell'<head> della pagina, che può essere molto CSS...
Puoi esaminare il problema su un sito web di esempio con immagine di sfondo adattabile.
Il precaricamento delle immagini adattabile offre un modo semplice e senza attacchi per caricare le immagini più velocemente.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Tieni presente che, escludendo l'attributo href, puoi assicurarti che i browser che non supportano imagesrcset nell'elemento <link>, ma supportano image-set in CSS, non scaricheranno un'origine errata. Tuttavia, anche in questo caso non beneficeranno del precaricamento.
Puoi esaminare il comportamento dell'esempio precedente con l'immagine di sfondo adattabile precaricata.
Precaricamento delle immagini adattabili in azione
In teoria, il precaricamento delle tue immagini adattabili può velocizzare il loro caricamento, ma in concreto come funziona?
Per rispondere al fatto che ho creato due copie di un negozio PWA dimostrativo: una che non precarica immagini e una che ne precarica alcune. Poiché il sito esegue il caricamento lento delle immagini utilizzando JavaScript, è probabile che trarrà vantaggio dal precaricamento di quelle che si troveranno nell'area visibile iniziale.
Di conseguenza, sono stati restituiti i seguenti risultati per nessun precaricamento e precaricamento dell'immagine. Osservando i dati non elaborati, vediamo che la metrica Start Render è rimasta invariata, l'Indice di velocità è leggermente migliorato (273 ms, poiché le immagini arrivano più velocemente, ma non occupano una porzione eccessiva dell'area di pixel), ma la metrica reale che rileva la differenza è la metrica Last Painted Hero, migliorata di 1,2 secondi. 🎉🎉
Naturalmente, niente può cogliere la differenza visiva come un confronto tra pellicola:
Precaricare e <picture>?
Se hai familiarità con le immagini adattabili, potresti chiederti "E <picture>?".
Il gruppo di lavoro Web Performance Working Group parla dell'aggiunta di un equivalente di precaricamento per srcset e sizes, ma non dell'elemento <picture>, che affronta il caso d'uso "art director".
Perché questo caso d'uso viene "trascurato"?
Sebbene ci sia interesse a risolvere anche questo caso d'uso, ci sono ancora una serie di problemi tecnici da risolvere, il che significa che una soluzione in questo caso sarebbe complessa. Inoltre, sembra che per la maggior parte il caso d'uso possa essere affrontato oggi, anche se in modo ingannevole (vedi sotto).
Detto ciò, il gruppo di gestione delle prestazioni web ha deciso di spedire srcset prima di vedere se aumenta la richiesta di assistenza equivalente per picture.
Se riesci a precaricare <picture>, potresti essere in grado di utilizzare la tecnica riportata di seguito come soluzione alternativa.
Dato il seguente scenario:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
La logica dell'elemento <picture> (o, per essere precisi, la logica di selezione dell'origine dell'immagine) supererebbe gli attributi media degli elementi <source> in ordine, trovare il primo che corrisponde e utilizzare la risorsa collegata.
Poiché il precaricamento adattabile non ha alcuna nozione di "ordine" o "prima corrispondenza", i punti di interruzione devono essere tradotti in uno dei seguenti modi:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Precarica e type
L'elemento <picture> supporta anche la corrispondenza nel primo type, per consentire di fornire diversi formati dell'immagine e consentire al browser di scegliere il primo formato di immagine supportato. Questo caso d'uso non è attualmente supportato con il precaricamento.
Per i siti che utilizzano questa opzione, evitare il precaricamento è l'opzione migliore, in quanto lo scanner di precaricamento li seleziona dagli elementi <picture> e <source>. Si tratta comunque di una best practice, in particolare se prevedono il supporto dei Priority Hints, che consentono di dare priorità all'immagine appropriata rispetto al solo precaricamento.
Effetti su Largest Contentful Paint (LCP)
Poiché le immagini possono essere candidate per la metrica Largest Contentful Paint (LCP), il loro precaricamento potrebbe migliorare la metrica LCP del tuo sito web. Utilizzando le tecniche illustrate sopra, puoi anche fare in modo che le tue immagini adattabili vengano caricate più rapidamente.
Indipendentemente dal fatto che l'immagine che stai precaricando sia reattiva, tieni presente che i precaricamenti funzionano particolarmente bene quando la risorsa immagine non è rilevabile nel payload del markup iniziale. Per i siti web che inviano un markup completo dal server, potresti non ottenere un enorme vantaggio. Tuttavia, se il tuo sito web esegue il rendering del markup sul client, evitando così lo scanner di precaricamento del browser, c'è l'opportunità di precaricare le potenziali immagini LCP per migliorare le prestazioni.
Riepilogo
Il precaricamento delle immagini adattabili ci offre nuove ed entusiasmanti possibilità di precaricare le immagini adattabili in modi precedentemente possibili solo tramite attacchi di pirateria informatica. Si tratta di un'importante novità per gli strumenti di sviluppo attenti alla velocità che ci consente di assicurarci che le immagini importanti che vogliamo mostrare ai nostri utenti il prima possibile siano lì quando ne abbiamo bisogno.