Allo stato attuale, le immagini sono la risorsa più grande del web in termini di dimensioni totali del trasferimento e il numero di richieste per pagina. La dimensione totale del trasferimento della pagina web media è all'incirca 2 MB, dati aggiornati a giugno 2022, di cui quasi la metà è composta da sole immagini. Non è un'esagerazione dire che l'ottimizzazione delle richieste di immagini potrebbe essere la principale ottimizzazione del rendimento che tu possa fare.
In seguito, scoprirai come le immagini adattabili si sono evolute per aiutare a risolvere i problemi creati, cercando di pubblicare un'immagine per tutte le eventualità. In questa sezione scoprirai le principali metriche di rendimento relative alle immagini e come migliorarle.
Rimandare le richieste di immagini
Mentre stai per apprendere diversi modi per garantire che le tue richieste di immagini siano il più piccole ed efficienti possibile, la richiesta di immagine più veloce
sarà sempre quella che non viene mai realizzata. Quindi, fin da subito, vorrei condividere con te quale potrebbe essere la modifica di maggiore impatto che puoi apportare
fornisci gli asset immagine agli utenti: l'attributo loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Questo attributo garantisce che le richieste di immagini non vengano effettuate finché non si avvicinano all'area visibile dell'utente, rinviandole dall'iniziale caricamento pagina (il tempo in cui il browser è di maggiore occupazione) e la rimozione di queste richieste dal percorso di rendering critico.
Per quanto semplice possa essere in pratica, l'utilizzo di questo attributo può avere un enorme impatto positivo sulle prestazioni: un'immagine che non rientra mai l'area visibile dell'utente non verrà mai richiesta e non verrà sprecata larghezza di banda per immagini che l'utente non vedrà mai.
C'è un problema, però: rimandare queste richieste significa non sfruttare i vantaggi processi altamente ottimizzati per richiedere
il prima possibile. Se loading="lazy" viene utilizzato negli elementi img nella parte superiore del layout, e quindi è più probabile
nell'area visibile dell'utente al primo caricamento della pagina, ossia immagini che risultano molto più lente per l'utente finale.
Priorità di recupero
L'attributo loading è un esempio di uno sforzo maggiore rispetto a uno standard web volto a offrire agli sviluppatori più potere sul modo in cui i browser web
dare la priorità alle richieste.
Probabilmente sai già che alcuni browser approcci di base alla priorità di recupero:
ad esempio, una richiesta per un file CSS esterno nel campo <head> di un documento è considerata sufficientemente essenziale da bloccare il rendering, mentre una richiesta di
il file JavaScript esterno appena sopra </body> verrà differito fino al completamento del rendering. Se il valore di un attributo loading su un <img> è "lazy",
la richiesta dell'immagine associata verrà differita finché il browser non determina che verrà mostrata a un utente. In caso contrario, l'immagine avrà lo stesso
priorità a qualsiasi altra immagine della pagina.
L'attributo fetchpriority ha lo scopo di fornire
gli sviluppatori hanno un controllo più granulare sulla priorità degli asset, che consente di segnalare le risorse
come "alto" e "bassa" della priorità rispetto alle risorse dello stesso tipo. I casi d'uso di fetchpriority sono simili a loading
questo attributo, anche se molto più generico. Ad esempio, potresti utilizzare fetchpriority="low" su un'immagine che viene mostrata solo in seguito all'interazione dell'utente
(indipendentemente dal fatto che l'immagine rientri o meno nell'area visibile dell'utente) per dare la priorità alle immagini visibili altrove nella pagina oppure fetchpriority="high"
per dare la priorità a un'immagine che sai che sarà immediatamente visibile nell'area visibile non appena la pagina viene visualizzata.
Tieni presente che fetchpriority è diverso da loading in quanto non modifica sostanzialmente il comportamento del browser. Non comunica al browser
per caricare determinati asset prima di altri, fornendo un contesto vitale per le decisioni prese in merito alla richiesta di asset.
Misurazione dell'impatto delle immagini
Quando si ottimizzano gli asset immagine, il rendimento percepito è spesso più importante e più difficile da misurare rispetto al trasferimento totale. da sole.
Le metriche Web Vitals forniscono metriche misurabili e fruibili e indicazioni per migliorare le esperienza web, evidenziando problemi quali come tempo di risposta lento da un server web, problemi di rendering e ritardi nell'interattività. Le metriche Core Web Vitals sono un sottoinsieme di questi obiettivi, focalizzate su sull'esperienza diretta dell'utente di una singola pagina: un insieme di misurazioni tecniche che, insieme, determinano la velocità dell'esperienza percepita dall'utente.
variazione layout cumulativa
Cumulative Layout Shift (CLS) è una misura della stabilità visiva. È una metrica che consente di acquisire il layout dei contenuti su una pagina cambia man mano che vengono caricati gli asset e la pagina viene visualizzata. Chiunque abbia speso una spesa significativa del tempo l'utilizzo del web ha perso la posizione in una lunga serie di testi a causa del "salto" di una pagina perché un carattere web o un'immagine in ritardo arriva improvvisamente o se un elemento interattivo si è spostato improvvisamente dal puntatore. Una CLS elevata è, nella migliore delle ipotesi, un fastidio e causa di nella peggiore delle ipotesi: un "annullamento" pulsante spostato in uno spazio precedentemente occupato da un messaggio "conferma" proprio come l'utente fa clic, ad esempio.
Con tempi di caricamento elevati e la quantità di spazio che possono occupare in un layout, è ovvio che le immagini sono una causa comune di punteggi CLS elevati.
Grazie a modifiche relativamente recenti nei browser moderni, è più facile di quanto si possa pensare evitare punteggi CLS elevati dovuti alle immagini.
Se utilizzi il frontend da qualche anno, avrai familiarità con gli attributi width e height su <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 più stati utilizzati nel tentativo di mantenere i nostri problemi di stile separati dal nostro markup, soprattutto in quanto adattabili.
il web design ha reso necessario specificare le taglie su base percentuale tramite CSS. All'inizio del responsive web design, "rimuovi
gli attributi width e height inutilizzati" era considerata una prassi comune, poiché i valori specificati nel nostro CSS (max-width: 100%) e
height: auto, verranno 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 a disposizione del browser per determinare
l'altezza dell'immagine in questa situazione è quella di richiedere l'origine, analizzarla e visualizzarla nelle sue proporzioni intrinseche, in base al
la larghezza dello spazio che occupa nel layout una volta applicati i fogli di stile. Gran parte di questo processo avviene
dopo che la pagina è stata
con l'altezza appena calcolata che causa ulteriori variazioni del layout.
A partire dal 2019, il comportamento del browser è stato aggiornato per gestire gli attributi width e height in modo diverso. Anziché utilizzare i valori di questi
per determinare la dimensione fissa basata in pixel di un elemento img nel layout, si pensa che questi attributi rappresentino
le proporzioni dell'immagine, anche se la sintassi è la stessa. I browser moderni divideranno questi valori tra loro per
Determinano le proporzioni intrinseche di un elemento img prima del rendering della pagina, in modo da riservare lo spazio occupato dall'immagine durante il rendering del layout.
Come regola, devi utilizzare sempre gli attributi height e width su <img>, con valori corrispondenti alle dimensioni intrinseche dell'origine dell'immagine, quindi
a condizione di aver specificato height: auto accanto 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 nei tuoi elementi <img>, eviterai un punteggio CLS elevato dovuto alle immagini.
È importante notare che questo approccio non presenta svantaggi in quanto si basa su un comportamento consolidato relativo a qualsiasi browser.
con il supporto dei CSS di base funzionerà come sempre, con gli attributi height e width nel markup che sostituiscono gli stili.
Gli attributi width e height evitano perfettamente i problemi di CLS, riservando lo spazio di layout necessario per le immagini, presentando
gli utenti con uno spazio vuoto o un segnaposto di bassa qualità
ma attendono che l'immagine venga trasferita e visualizzata. Anche se ci sono cose che puoi fare per mitigare l'impatto misurabile e percepibile
l'impatto delle immagini che si caricano lentamente, l'unico modo per presentare più rapidamente un'immagine sottoposta a rendering completo a un utente è la riduzione delle dimensioni di trasferimento.
visualizzazione elemento più grande
La metrica Largest Contentful Paint (LCP) misura il tempo necessario per visualizzare l'elemento "contentful" più grande nell'area visibile dell'utente, ovvero elemento di contenuti che occupa la percentuale maggiore della pagina visibile. In apparenza può sembrare una metrica eccessivamente specifica, ma funge da proxy pratico per il punto in cui è stata visualizzata la maggior parte della pagina, dal punto di vista dell'utente. Il valore LCP è fondamentale del rendimento (percepito).
Metriche come DOMContentLoaded o l'evento window.onload possono essere utili per determinare quando il processo di caricamento della pagina corrente
completato tecnicamente, ma non corrispondono necessariamente all'esperienza utente sulla pagina. Un leggero ritardo nel rendering di un elemento
all'esterno dell'area visibile dell'utente verrebbe preso in considerazione in una di queste metriche, ma probabilmente non verrebbe rilevato da un utente reale.
Un LCP lungo indica che la prima impressione dell'utente su una pagina (i contenuti più importanti all'interno dell'area visibile corrente) è che la pagina è lenta,
o rotto del tutto.
La percezione degli utenti acquisita da LCP ha un impatto diretto sull'esperienza utente. Un esperimento fatto da Vodafone proprio l'anno scorso ha rilevato che un miglioramento del 31% dell'LCP non solo ha portato a un aumento delle vendite dell'8% - un forte risultato da solo - ma del numero totale di utenti ha anche rilevato un 15% di vendite. del numero di visitatori che sono diventati potenziali clienti ("tasso visitatore-lead") e dell'11% del numero di utenti che hanno visitato il carrello ("tariffa visite carrello").
Su oltre il 70% delle pagine web, l'elemento più grande nella
l'area visibile coinvolge un'immagine, come elemento <img> autonomo o elemento con un'immagine di sfondo. In altre parole,
il 70% delle pagine I punteggi LCP si basano sulle prestazioni delle immagini. Non ci vuole tanta immaginazione per capire perché: grande, che attire l'attenzione
è molto probabile che le immagini e i loghi si trovino "above the fold".
Esistono alcuni passaggi che puoi seguire per evitare ritardi LCP: prima di tutto, non specificare mai loading="lazy" in una posizione "above the fold" immagine,
poiché ritardare la richiesta fino al completamento del rendering della pagina avrà probabilmente un enorme impatto negativo sul tuo punteggio LCP.
In secondo luogo, l'utilizzo di fetchpriority="high" consente di comunicare al browser che il trasferimento di questa immagine deve avere la priorità rispetto alle immagini in qualsiasi altro punto della pagina.
Tenendo presenti queste regole, la cosa più importante che puoi fare per migliorare il punteggio LCP di una pagina è ridurre il tempo necessario necessario per trasferire e visualizzare le immagini. Per farlo, dovrai mantenere le origini delle immagini di dimensioni ridotte ed efficienti, possibili (senza sacrificare la loro qualità, ovviamente) e assicurati che gli utenti ricevano solo gli asset immagine che rendono meglio per ogni contesto di navigazione.
Conclusione
Gli asset immagine rappresentano il consumo maggiore di traffico larghezza di banda mancante dal trasferimento di ogni altro asset necessario per eseguire il rendering di una pagina. Le immagini introducono problemi significativi in termini di rendimento percepito, sia durante che dopo la pagina circostante il layout è stato sottoposto a rendering. In breve: gli asset immagine danneggiano.
Per quanto possa sembrare imbarazzante, "il web sarebbe meglio con meno immagini" sarebbe certamente vero in termini di solo rendimento, ma anche ai suoi utenti un enorme disservizio. Le immagini sono una parte vitale del web e la qualità delle immagini è sempre accettabile contenuti significativi ai soli fini del rendimento.
Nel resto del corso, scoprirai le tecnologie alla base dei nostri asset immagine e le tecniche per mitigare le loro impatto sulle prestazioni, senza compromettere la qualità.