Fix Layout Shift veroorzaakt door auto sizing afbeelding

Fix Layout Shift veroorzaakt door auto sizing afbeelding

Wist je dat er een heel eenvoudige en vrij veel voorkomende manier is om je Core Web Vitals te verpesten met slechts één CSS-statement? Het komt in het wild voor, ik heb het vaak gezien en het zal voor chaos zorgen in je CLS.

Hier is het: het kleine stukje code dat er automatisch voor zorgt dat al je afbeeldingen op de pagina verschuiven. Het veroorzaakt zelfs een layout shift wanneer de breedte en hoogte van de afbeelding expliciet zijn ingesteld! Ook het instellen van de juiste aspect-ratio CSS-waarde lost het probleem niet op!

Het is een stiekem klein Layout Shift probleem omdat het alleen optreedt bij eerste bezoeken. Aangezien jij, als webmaster, de afbeelding waarschijnlijk in je browsercache hebt staan, merk je de Layout Shift misschien niet direct op.

<style>
img{
   width:auto;
   height:auto;
   max-width:100%
}
<style>

Hoe hebben we het probleem opgemerkt?

Het is moeilijk om dit soort problemen te detecteren die vooral optreden bij nieuwe bezoekers met mobiele apparaten met een lage bandbreedte. Het antwoord is RUM Tracking. RUM Tracking houdt de Core Web Vitals bij voor echte gebruikers en rapporteert dit aan jou terug. RUM Tracking is geweldig voor het vinden van verborgen Core Web Vitals problemen!

Hoe werkt het?

Dit kleine stukje CSS-code wordt soms gebruikt voor responsive afbeeldingen. Wanneer een afbeelding niet vooraf in de cache van de browser is opgeslagen, heeft een browser geen idee van de intrinsieke breedte en hoogte. Met deze code negeert hij de ingestelde breedte en hoogte en probeert de pagina te renderen met de intrinsieke breedte en hoogte. Aangezien die onbekend is, wordt de afbeelding eerst gerenderd op 0x0 pixels en pas wanneer de afbeelding is gedownload en gedecodeerd, wordt deze opnieuw gerenderd en neemt hij het juiste aantal pixels in beslag.

1. De height: auto; zorgt ervoor dat de afbeelding altijd de juiste hoogte heeft wanneer de afbeelding wordt vergroot of verkleind. 
2. De max-width:100%; zorgt ervoor dat de afbeelding nooit groter is dan de zichtbare viewport 
3. Het width:auto; gedeelte genereert een layout shift voor niet-gecachete afbeeldingen, zelfs wanneer je de breedte en hoogte of aspect ratio expliciet instelt.

Hoe fix je het?

De fix is eenvoudig. Verwijder gewoon de width:auto. Dit dwingt de browser om de opgegeven afbeeldingsbreedte te gebruiken en de auto hoogte te berekenen op basis van de hoogte. 

Dus doe jezelf een plezier, neem 15 seconden, inspecteer een willekeurige afbeelding op je website (rechtermuisknop, element inspecteren) en check op width:auto; en height:auto; Als je het ziet, fix het dan!.