Allo stato attuale, le immagini sono le principali risorse del web in termini di dimensioni totali dei trasferimenti e numero di richieste per pagina. A partire da giugno 2022, la dimensione mediana del trasferimento di una pagina web è di circa 2 MB e quasi la metà di questa percentuale è rappresentata da sole immagini. Non esagerare dire che l'ottimizzazione delle richieste di immagini può essere la migliore ottimizzazione delle prestazioni che puoi fare.
Più avanti scoprirai come le immagini adattabili si sono evolute per aiutare a risolvere i problemi creati cercando di pubblicare un'unica immagine per tutte le situazioni. In questa sezione scoprirai le principali metriche sul rendimento relative alle immagini e come migliorarle.
Rimandare le richieste di immagini
Mentre apprenderai vari modi per garantire che le richieste di immagine siano il più piccole ed efficienti possibile, la richiesta di immagine più veloce sarà sempre quella che non viene mai effettuata. Pertanto, vorrei illustrarti subito quale potrebbe essere il cambiamento più efficace che puoi apportare al modo in cui pubblichi asset immagine agli utenti: l'attributo loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Questo attributo assicura che le richieste di immagini non vengano effettuate finché non sono vicine all'area visibile dell'utente, differendole dal caricamento iniziale della pagina (il momento in cui il browser è più attivo) e rimuovendo queste richieste dal percorso di rendering critico.
Per quanto sia semplice in pratica, l'utilizzo di questo attributo può avere un enorme impatto positivo sulle prestazioni: un'immagine che non rientra mai nell'area visibile dell'utente non verrà mai richiesta e non verrà sprecata alcuna larghezza di banda per immagini che l'utente non vedrà mai.
C'è un problema, tuttavia: rimandare queste richieste significa non sfruttare i processi iper-ottimizzati dei browser per richiedere immagini il prima possibile. Se loading="lazy" viene utilizzato su elementi img verso la parte superiore del layout, con una maggiore probabilità di trovarsi nell'area visibile dell'utente al primo caricamento della pagina, queste immagini possono risultare molto più lente per l'utente finale.
Priorità recupero
L'attributo loading è un esempio di uno sforzo di standard web più ampio volto a offrire agli sviluppatori maggiore controllo sul modo in cui i browser web assegnano la priorità alle richieste.
Probabilmente conosci gli approcci di base dei browser per recuperare la priorità:
ad esempio, una richiesta di un file CSS esterno in <head> di un documento è considerata sufficientemente essenziale da bloccare il rendering, mentre una richiesta di un
file JavaScript esterno appena superiore a </body> verrà differita fino al completamento del rendering. Se il valore di un attributo loading su un <img> è "pigro", la richiesta di immagine associata viene differita finché il browser non determina che verrà mostrata a un utente. In caso contrario, l'immagine avrà la stessa
priorità di qualsiasi altra immagine della pagina.
L'attributo fetchpriority ha lo scopo di fornire agli sviluppatori un controllo più granulare sulla priorità degli asset, in modo da poter contrassegnare le risorse con priorità "alta" e "bassa" rispetto alle risorse dello stesso tipo. I casi d'uso di fetchpriority sono simili all'attributo loading, ma sono molto più generici. Ad esempio, puoi utilizzare fetchpriority="low" su un'immagine mostrata solo a seguito dell'interazione dell'utente (indipendentemente dal fatto che l'immagine rientri o meno nell'area visibile dell'utente) per dare priorità alle immagini visibili altrove nella pagina, oppure fetchpriority="high" per dare la priorità a un'immagine che sarà immediatamente visibile nell'area visibile non appena viene eseguito il rendering della pagina.
Tieni presente che fetchpriority si differenzia da loading perché non modifica sostanzialmente il comportamento del browser. Non indica al browser di caricare determinati asset prima di altri, ma fornisce un contesto fondamentale per le decisioni che prende in merito alla richiesta di asset.
Misurazione dell'impatto delle immagini
Durante l'ottimizzazione degli asset immagine, il rendimento percepito è spesso più importante e più difficile da misurare rispetto alla sola dimensione totale di trasferimento.
Web Vitals fornisce metriche misurabili e strategiche, nonché indicazioni per migliorare l'esperienza utente sul web, evidenziando problemi come tempi di risposta lenti da un server web, problemi di rendering e ritardi di interattività. I Segnali web essenziali sono un sottoinsieme di questi obiettivi, incentrati sull'esperienza diretta dell'utente su una singola pagina. Si tratta di un insieme di misurazioni tecniche che, nel loro insieme, determinano la velocità percepita da un utente.
variazione layout cumulativa
La metrica Cumulative Layout Shift (CLS) rappresenta una misura della stabilità visiva. È una metrica per rilevare in che misura il layout dei contenuti in una pagina cambia quando gli asset vengono caricati e la pagina viene visualizzata. Chiunque abbia trascorso molto tempo sul Web ha perso il posto in una lunga sequenza di testo a causa di un "salto" della pagina mentre un carattere web o un'immagine ritardati vengono visualizzati improvvisamente oppure un elemento interattivo si è allontanato improvvisamente dal puntatore. Una CLS elevata è, nella migliore delle ipotesi, un fastidio e, nella peggiore delle ipotesi, un errore: un pulsante "Annulla" viene spostato in uno spazio precedentemente occupato da un pulsante "Conferma", proprio mentre l'utente fa clic, ad esempio.
A causa dei tempi di caricamento elevati e della quantità di spazio che possono occupare in un layout, è ovvio che le immagini siano una causa comune di punteggi CLS elevati.
Grazie ai cambiamenti relativamente recenti nei browser moderni, è più facile di quanto pensi evitare punteggi CLS elevati dovuti alle immagini.
Se lavori sul frontend da qualche anno, avrai familiarità con gli attributi width e height per <img>:
prima dell'adozione diffusa di CSS, questi erano l'unico modo per controllare le dimensioni di un'immagine.
<img src="image.jpg" height="200" width="400" alt="…">
Questi attributi non sono stati utilizzati nel tentativo di mantenere le nostre preoccupazioni legate allo stile separate dal nostro markup, in particolare perché il Responsive Web Design ha reso necessario specificare dimensioni basate sulla percentuale tramite CSS. Agli albori del Responsive Web Design, il consiglio più comune consisteva nel rimuovere
gli attributi width e height inutilizzati, in quanto i valori specificati nel nostro CSS (max-width: 100% e
height: auto) li avrebbero sostituiti.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Dopo aver rimosso gli attributi height e width come nell'esempio precedente, l'unico metodo che il browser ha per determinare l'altezza dell'immagine in questa situazione è richiedere l'origine, analizzarla e visualizzarla con le sue proporzioni intrinseche, in base alla larghezza dello spazio che occupa nel layout dopo l'applicazione dei fogli di stile. Gran parte di questo processo avviene dopo che la pagina è stata visualizzata, e l'altezza appena calcolata causa ulteriori variazioni del layout.
A partire dal 2019, il comportamento del browser è stato aggiornato per gestire in modo diverso gli attributi width e height. Anziché utilizzare i valori di questi
attributi per determinare le dimensioni fisse basate sui pixel di un elemento img nel layout, questi attributi possono rappresentare le
proporzioni dell'immagine, anche se la sintassi è la stessa. I browser moderni divideranno questi valori tra loro per determinare il rapporto di aspetto intrinseco di un elemento img prima del rendering della pagina, in modo da riservare lo spazio che l'immagine occuperà durante il rendering del layout.
Come regola, devi sempre utilizzare gli attributi height e width per <img>, con valori corrispondenti alla dimensione intrinseca della sorgente dell'immagine, purché tu assicurati di aver specificato height: auto insieme a max-width: 100% per sostituire l'altezza dell'attributo HTML.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Se utilizzi gli attributi width e height negli elementi <img>, eviterai un punteggio CLS elevato dovuto alle immagini.
È importante notare che non ci sono svantaggi a questo approccio, poiché si basa sul comportamento consolidato del browser: qualsiasi browser con supporto per il codice CSS di base funzionerà come sempre, con gli attributi height e width nel tuo markup sostituiti dai tuoi stili.
Mentre gli attributi width e height evitano sapientemente i problemi CLS riservando lo spazio di layout necessario per le tue immagini, neanche l'ideale non è presentare agli utenti uno spazio vuoto o un segnaposto di bassa qualità mentre attendono che un'immagine venga trasferita e visualizzata. Sebbene ci siano cose che puoi fare per mitigare l'impatto misurabile e percepibile delle immagini con tempi di caricamento lenti, l'unico modo per presentare più rapidamente un'immagine di cui è stato eseguito il rendering completo a un utente è ridurre le dimensioni di trasferimento.
visualizzazione elemento più grande
La metrica Largest Contentful Paint (LCP) misura il tempo necessario per visualizzare il più grande elemento "contenuto" visibile nell'area visibile dell'utente, ovvero l'elemento di contenuti che occupa la percentuale più alta della pagina visibile. A prima vista può sembrare una metrica eccessivamente specifica, ma quell'elemento funge da valido sostituto del punto in cui è stata visualizzata la maggior parte della pagina, dal punto di vista dell'utente. La metrica LCP è una misura fondamentale delle prestazioni (percepite).
Le metriche come DOMContentLoaded o l'evento window.onload possono essere utili per determinare quando il processo di caricamento della pagina corrente
è stato completato tecnicamente, ma non corrispondono necessariamente all'esperienza dell'utente sulla pagina. Un leggero ritardo nel rendering di un elemento al di fuori dell'area visibile dell'utente verrebbe considerato in una di queste metriche, ma probabilmente non verrebbe rilevato da un utente reale.
Un LCP lungo indica che la prima impressione di una pagina da parte dell'utente (i contenuti più importanti all'interno dell'area visibile corrente) è che la pagina è lenta o completamente interrotta.
La percezione degli utenti rilevata dalla metrica LCP ha un impatto diretto sull'esperienza utente. Un esperimento condotto da Vodafone lo scorso anno ha rilevato che un miglioramento del 31% della metrica LCP non solo ha generato l'8% in più di vendite (un risultato positivo da solo), ma del numero totale di utenti ha riscontrato un miglioramento del 15% del numero di visitatori che sono diventati potenziali clienti ("tasso visitatori/lead") e un miglioramento dell'11% nel numero di utenti che hanno visitato il carrello ("carrello").
Su oltre il 70% delle pagine web, l'elemento più grande nell'area visibile iniziale riguarda un'immagine, che può essere un elemento <img> autonomo o un elemento con un'immagine di sfondo. In altre parole, il 70% dei punteggi LCP delle pagine si basa sulle prestazioni delle immagini. Non ci vuole molta immaginazione per capire il motivo: è molto probabile che si trovino immagini e loghi di grandi dimensioni
che attirano l'attenzione.
Esistono alcuni passaggi da seguire per evitare ritardi LCP: per prima cosa, non specificare mai il valore loading="lazy" in un'immagine "above the fold", poiché ritardare la richiesta fino al rendering della pagina avrà probabilmente un enorme impatto negativo sul tuo punteggio LCP.
In secondo luogo, l'utilizzo di fetchpriority="high" può informare il browser che il trasferimento di questa immagine deve avere la priorità sulle immagini altrove nella pagina.
Tenendo presenti queste regole, la cosa più importante che puoi fare per migliorare il punteggio LCP di una pagina è ridurre il tempo necessario per trasferire e visualizzare queste immagini. Per farlo, dovrai fare in modo che le origini delle immagini siano il più possibile piccole ed efficienti (senza sacrificare la loro qualità, ovviamente) e assicurarti che gli utenti ricevano solo gli asset immagine più pertinenti per i loro contesti di navigazione.
Conclusione
Gli asset immagine consumano più larghezza di banda degli utenti, in quanto non devono trasferire tutti gli altri asset necessari per il rendering di una pagina. Le immagini introducono problemi significativi in termini di prestazioni percepite, sia durante che dopo il rendering del layout della pagina circostante. In breve: gli asset immagine danneggiano.
Per quanto possa essere scoraggiante, anche se "il web sarebbe meglio con meno immagini" sarebbe sicuramente vero in termini di rendimento da solo, ma sarebbe anche un enorme disservizio per i suoi utenti. Le immagini sono una parte fondamentale del web e non dovresti scendere a compromessi sulla qualità dei contenuti significativi solo per il rendimento.
Nel resto di questo corso, scoprirai le tecnologie alla base dei nostri asset immagine e le tecniche per mitigare il loro impatto sulle prestazioni, senza compromettere la qualità.