Puoi precaricare le immagini adattabili, che possono caricarle in modo molto più rapido aiutando il browser a identificare l'immagine corretta da un elemento srcset prima che esegua il rendering del tag img.
Panoramica delle immagini adattabili
Supporto dei browser
- 73
- 79
- 78
- 17,2
Supponiamo che tu stia navigando sul web su uno schermo largo 300 pixel e che la pagina richieda un'immagine di 1500 pixel. Quella pagina ha sprecato molti dati mobili perché lo schermo non può fare nulla con questa risoluzione extra. Idealmente, il browser recupererebbe una versione dell'immagine poco più larga delle dimensioni dello schermo, ad esempio 325 pixel. Ciò garantisce un'immagine ad alta risoluzione senza sprechi dati e un caricamento più rapido.
Le immagini adattabili consentono ai browser di recuperare risorse immagine diverse per dispositivi diversi. Se non utilizzi una CDN di immagine, salva più dimensioni per ogni immagine e specificale nell'attributo srcset. Il valore w indica al browser la larghezza di ogni versione, in modo che possa scegliere la versione appropriata per qualsiasi dispositivo:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Panoramica precarica
Il precaricamento consente di indicare al browser le risorse critiche che vuoi caricare il prima possibile, prima che vengano rilevate nel codice HTML. Ciò è particolarmente utile per le risorse che non sono subito rilevabili, ad esempio i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script.
<link rel="preload" as="image" href="important.png">
imagesrcset e imagesizes
L'elemento <link> utilizza gli attributi imagesrcset e imagesizes per
precaricare le immagini adattabili. Usale insieme a <link rel="preload">, con le 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">
Questa operazione avvia una richiesta utilizzando la stessa logica di selezione delle risorse utilizzata da srcset e sizes.
casi d'uso
Di seguito sono riportati alcuni casi d'uso per il precaricamento delle immagini adattabili.
Precarica le immagini adattabili inserite dinamicamente
Immagina di caricare dinamicamente immagini hero all'interno di una presentazione e sai quale immagine viene visualizzata per prima. In questo caso, probabilmente vorrai mostrare l'immagine il prima possibile senza attendere che lo script della presentazione la carichi.
Puoi esaminare questo problema su un sito web con una galleria immagini caricata dinamicamente:
- Apri questa demo della presentazione in una nuova scheda.
- Premi
Control+Shift+J(oCommand+Option+Jsu 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 qui consente di iniziare il caricamento dell'immagine in anticipo, in modo che possa essere visualizzata quando il browser deve mostrarla.
Per capire la differenza dovuta al precaricamento, ispeziona la stessa galleria immagini caricata dinamicamente, ma con la prima immagine precaricata, seguendo i passaggi del primo esempio.
Precarica le immagini di sfondo utilizzando il set di immagini
Se disponi di immagini di sfondo diverse per densità di schermo diverse, puoi
specificarle nel CSS con la sintassi image-set. Il browser può quindi scegliere quale visualizzare in base al RPD dello schermo.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Il problema con le immagini di sfondo CSS è che il browser le rileva
solo dopo aver scaricato ed elaborato tutti i CSS nell'elemento <head> della pagina.
Puoi esaminare questo problema su un sito web di esempio con un'immagine di sfondo adattabile.
Il precaricamento delle immagini adattabili ti consente di caricare più rapidamente le immagini.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Se tralascia l'attributo href, puoi assicurarti che i browser che non supportano imagesrcset nell'elemento <link>, ma supportano image-set in CSS, scarichino l'origine corretta. Tuttavia, in questo caso
non beneficeranno del precaricamento.
Puoi controllare il comportamento dell'esempio precedente con un'immagine di sfondo adattabile precaricata nella demo di precaricamento dello sfondo adattabile.
Effetti pratici del precaricamento delle immagini adattabili
In teoria il precaricamento delle tue immagini adattabili può velocizzare le operazioni, ma in pratica?
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 carica le immagini tramite JavaScript, è probabile che trarrà vantaggio dal precaricamento di quelle che compaiono nell'area visibile iniziale.
Ciò ha prodotto i seguenti risultati per nessun precaricamento e per precaricamento immagine:
- Lo strumento Start Render è rimasto invariato.
- Indice di velocità è leggermente migliorato (273 ms, poiché le immagini arrivano più velocemente non occupano una porzione enorme dell'area pixel).
- Last Painted Hero è migliorato in modo significativo (1, 2 secondi).
Precarica e <picture>
Il gruppo di lavoro sulle prestazioni web sta discutendo dell'aggiunta di un equivalente di precaricamento per srcset e sizes, ma non per l'elemento <picture>, che gestisce il caso d'uso "art director".
Esistono ancora diversi problemi tecnici da risolvere per il precaricamento di <picture>,
ma nel frattempo esistono soluzioni alternative:
<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 di selezione dell'origine dell'immagine dell'elemento <picture> supera in ordine gli attributi media degli elementi <source>, trova il primo che corrisponde e utilizza la risorsa associata.
Poiché il precaricamento adattabile non ha alcuna nozione di "ordine" o "prima corrispondenza", dovrai tradurre i punti di interruzione in un testo simile al seguente:
<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, così puoi fornire diversi formati delle immagini in modo che il browser possa scegliere il primo formato di immagine supportato. Questo caso d'uso non è supportato con il precaricamento.
Per i siti che utilizzano la corrispondenza dei tipi, consigliamo di evitare il precaricamento e di lasciare invece che lo scanner di precaricamento acquisisca le immagini dagli elementi <picture> e <source>. Si tratta comunque di una best practice, soprattutto quando si utilizzano i suggerimenti sulla priorità per stabilire la priorità dell'immagine appropriata.
Effetti su Largest Contentful Paint (LCP)
Poiché le immagini possono essere candidate per la metrica Largest Contentful Paint (LCP), il loro precaricamento può migliorare la metrica LCP del tuo sito web.
A prescindere dal fatto che l'immagine precaricata sia reattiva, i precaricamenti funzionano meglio quando la risorsa immagine non è rilevabile nel payload di markup iniziale. Inoltre, otterrai un miglioramento dell'LCP maggiore sui siti che mostrano il markup sul lato client rispetto a quelli che inviano il markup completo dal server.