Correggere il Layout Shift causato da immagini con dimensionamento automatico

Correggere il Layout Shift causato da immagini con dimensionamento automatico

Sapevi che esiste un modo molto semplice e piuttosto comune per rovinare i tuoi Core Web Vitals con una sola dichiarazione CSS? È diffuso ovunque, l'ho visto molte volte e causerà il caos nel tuo CLS.

Eccolo: il piccolo pezzo di codice che farà automaticamente spostare tutte le tue immagini nella pagina. Causerà persino un layout shift quando la larghezza e l'altezza dell'immagine sono state impostate esplicitamente! Anche impostare il valore CSS aspect-ratio corretto non risolverà il problema!

È un problema di Layout Shift subdolo perché si verifica solo durante le prime visite. Poiché tu, come webmaster, avrai probabilmente l'immagine nella cache del browser, potresti non notare immediatamente il Layout Shift.

Come abbiamo notato il problema?

È difficile individuare questo tipo di problemi che si verificano soprattutto per i nuovi visitatori con dispositivi mobili a bassa larghezza di banda. La risposta è il RUM Tracking. Il RUM Tracking monitora i Core Web Vitals per gli utenti reali e te li riporta. Il RUM Tracking è ottimo per trovare problemi nascosti dei Core Web Vitals!

Come funziona?

Questo piccolo pezzo di codice CSS viene talvolta utilizzato per le immagini responsive. Quando un'immagine non è pre-memorizzata nella cache del browser, il browser non avrà idea della larghezza e dell'altezza intrinseche. Con questo codice ignorerà la larghezza e l'altezza impostate e cercherà di renderizzare la pagina con la larghezza e l'altezza intrinseche. Poiché queste sono sconosciute, l'immagine verrà inizialmente renderizzata a 0x0 pixel e solo quando l'immagine sarà stata scaricata e decodificata verrà ri-renderizzata e occuperà la quantità corretta di pixel.

1. Il height: auto; garantisce che l'immagine abbia sempre l'altezza corretta quando viene ridimensionata. 
2. Il max-width:100%; garantisce che l'immagine non sia mai più grande del viewport visibile 
3. La parte width:auto; genererà un layout shift per le immagini non memorizzate nella cache anche quando imposti esplicitamente la larghezza e l'altezza o l'aspect ratio.

Come risolvere?

La soluzione è semplice. Basta rimuovere width:auto. Questo costringerà il browser a utilizzare la larghezza dell'immagine fornita e a calcolare l'altezza automatica in base all'altezza. 

Quindi fatti un favore, prenditi 15 secondi, ispeziona un'immagine qualsiasi sul tuo sito web (clic destro, ispeziona elemento) e cerca width:auto; e height:auto; Se li trovi, correggili!