Webprestaties optimalisatie is een allesomvattende inspanning die verder gaat dan slechts een paar regels code toevoegen of de compressie van afbeeldingen verhogen; het is essentieel om een comfortabele ervaring te garanderen tijdens elke stap van hoe gebruikers de website waarnemen en ermee interageren. Tijdens deze reis worden ontwikkelaars vaak geconfronteerd met een aanzienlijke effectiviteit die voortkomt uit een eenvoudige HTML-attribuut. Namelijk het expliciet vermelden van de <img> tag met de width en height attributen. Laten we eens kijken hoe deze attributen een cruciale rol spelen in de verbetering van de webprestaties, met name het LCP (Largest Contentful Paint) en de CLS (Cumulative Layout Shift) statistieken van Core Web Vitals.

Core Web Vitals: Nieuwe standaarden voor het meten van gebruikerservaring

Core Web Vitals, geïntroduceerd door Google, zijn een set kernmetrics bedoeld om de kwaliteit van de gebruikerservaring op een website te meten. Deze metrics beïnvloeden ook de zoekmachine rankings, dus als ontwikkelaar moeten deze goed begrepen en geoptimaliseerd worden.

  • LCP (Largest Contentful Paint): Dit is de maat voor de laadsnelheid van de pagina. Het geeft de tijd aan waarop het grootste inhoudelijke element binnen de viewport wordt gerenderd. Dit element is meestal de hoofdinformatie van de pagina (bijvoorbeeld een heldere afbeelding, grote tekstblokken, videoposters, enz.), en naarmate de LCP sneller is, ervaren gebruikers dat de pagina sneller laadt. Het doel is binnen 2,5 seconden.

  • CLS (Cumulative Layout Shift): Dit is een metric die de visuele stabiliteit van een pagina meet. Het staat voor de totale som van onvoorspelbare layout verschuivingen (Layout Shift) voor gebruikers. Een typisch voorbeeld is wanneer afbeeldingen plotseling laden en omringende tekst of knoppen naar beneden verschuiven, wat kan leiden tot fouten bij klikken of verwarring bij de gebruiker. Het doel is minder dan 0.1.

  • FID (First Input Delay): Dit is een maat voor de interactiecapaciteit van de pagina. Het meet de tijd vanaf het moment dat de gebruiker voor het eerst met de pagina interacteert (bijvoorbeeld het klikken op een knop of het aanraken van een link) tot het moment dat de browser begint te reageren op die interactie. Het doel is binnen 100 ms.

Onder deze metrics hebben de width en height attributen bijzondere invloed op zowel LCP als CLS.

Problemen bij het ontbreken van de width en height attributen

Als de width en height attributen niet expliciet worden vermeld in de afbeeldingstags, kan de browser de ruimte die de afbeelding in beslag zal nemen niet kennen voordat deze is gedownload. Dit kan leiden tot de volgende problemen:

  1. Vertraging in LCP: De browser moet de afbeelding downloaden en parseren om de grootte ervan te achterhalen. Dit blokkeert de hoofdthread en vertraagt de layoutberekening van de pagina, waardoor uiteindelijk de LCP toeneemt. De inhoud die de gebruiker het belangrijkst vindt, verschijnt daardoor later.

  2. Verschijnsel van CLS (layoutverschuiving): Terwijl de afbeelding te laat wordt geladen, reserveert de browser de ruimte voor de afbeelding. Hierbij wordt de lege ruimte waar de afbeelding was, plotseling gevuld en verschuiven alle omringende tekst, knoppen en andere afbeeldingen naar beneden, wat leidt tot een 'layoutverschuiving'. Dit kan de gebruikerservaring ernstig verstoren en onbedoelde klikken veroorzaken. Bijvoorbeeld, tijdens het lezen van een artikel kan de afbeelding laden en het scrollen naar beneden duwen, of als je op een knop wilt drukken, kan een ander element plotseling verschijnen en leiden tot een verkeerde klik.

De magische effecten van het expliciet vermelden van de width en height attributen

Het expliciet vermelden van de width en height attributen in de <img> tag lijkt heel eenvoudig, maar het brengt fundamentele veranderingen in de manier waarop de browser afbeeldingen rendert.

<img src="your-image.jpg" alt="Beschrijving van uw afbeelding" width="800" height="600">

Door deze attributen toe te voegen, kun je de volgende optimalisatie-effecten behalen:

  1. Verbetering van LCP: De browser kan de uiteindelijke grootte van de afbeelding voorspellend berekenen op basis van de width en height waarden, waardoor de benodigde ruimte vooraf kan worden gereserveerd. Hierdoor kan de layoutberekening doorgaan zonder te wachten op het downloaden van de afbeelding. Dit helpt de browser om het renderen van de pagina efficiënter te beheren en verbetert de snelheid waarmee inhoud, inclusief LCP-elementen, aan de gebruiker wordt getoond.

  2. Voorkomen van CLS: Omdat de ruimte voor de afbeelding van tevoren is gereserveerd, vindt er geen layoutverschuiving plaats wanneer de afbeelding daadwerkelijk wordt geladen. Dit biedt gebruikers een visueel stabiele en comfortabele ervaring en verbetert de CLS-score aanzienlijk.

Gebruik van de aspect-ratio berekening van de browser:

Moderne browsers berekenen intern de aspect-ratio van de afbeelding op basis van de width en height attributen, en bieden de functionaliteit om de height automatisch aan te passen wanneer alleen de width in CSS is opgegeven, zodat de aspect-ratio behouden blijft. Dit is zeer nuttig voor het flexibel omgaan met afbeeldingen in responsieve ontwerpen, terwijl CLS wordt voorkomen. Het is belangrijk om de width en height in HTML expliciet te vermelden, zelfs als je in CSS width: 100%; height: auto; gebruikt.

 

Tux meet de width en height van de Mona Lisa

Nuttige toepassingsuggesties

  • Toepassen op alle <img> tags: Maak er een regel van om width en height attributen expliciet te vermelden voor elke <img> tag die op de webpagina wordt gebruikt. Dit moet van toepassing zijn, ongeacht of het om gebruikersavatar of grote heldenafbeeldingen gaat. In server-side rendering (SSR) omgevingen zoals Django kan dit gemakkelijk worden geïmplementeerd door gebruik te maken van een afbeeldingsverwerkingsbibliotheek zoals Pillow om de breedte en hoogte van de afbeelding op te halen en deze waarden dynamisch naar de sjabloon te sturen voor HTML.

  • Gebruik echte afmetingen:** De expliciet opgegeven width en height waarden moeten gebaseerd zijn op de oorspronkelijke pixelgrootte van de afbeeldingsbestanden. Ook al pas je deze grootte aan via CSS, de HTML-attributen zelf volgen de werkelijke pixelwaarden.

  • Harmonie met responsief design: Gebruik CSS max-width: 100%; height: auto; om te zorgen dat afbeeldingen responsief worden geschaald aan de ouders. Hierbij bieden de width en height in HTML de informatie over de oorspronkelijke verhouding die de browser nodig heeft om ruimte te reserveren.

<style>
  .responsive-image {
    max-width: 100%;
    height: auto; /* Houdt aspect-ratio in stand als gebruikt met width/height attributen */
  }
</style>
<body>
  <img src="responsive-example.jpg" alt="Responsieve afbeelding" width="1200" height="800" class="responsive-image">
</body>
  • Gebruik van de <picture> tag: Wanneer je srcset en de <picture> tag gebruikt om verschillende resoluties en formaten van afbeeldingen te leveren, moeten de interne <img loading="lazy"> tags altijd de width en height expliciet vermelden.

Conclusie: Kleine inspanning, grote prestatieverbetering

Het expliciet vermelden van de width en height attributen in afbeeldings-tags is een van de manieren waarop je in weboptimalisatie de 'grootste resultaten met de minste inspanning' kunt behalen. Deze eenvoudige gewoonte helpt de LCP van een website te verbeteren, voorkomt onnodige layoutverschuivingen en vermindert de CLS, wat uiteindelijk zorgt voor een snellere en visueel stabielere ervaring voor gebruikers. Als ontwikkelaar, als je de Core Web Vitals wilt verbeteren en de klanttevredenheid wilt verhogen, maak dan als eerste prioriteit om aan alle <img> tags de width en height attributen toe te voegen.