In dit artikel geven we wat theorie, en lichten we twee recente verbeteringen uit waarmee we jouw website kunnen versnellen, namelijk een verbeterd communicatieprotocol en een nieuwe manier om beter geoptimaliseerde afbeeldingen te plaatsen op je website.

Meten van snelheid

Wanneer een gebruiker klikt op een zoekresultaat naar jouw website gebeuren er verschillende dingen: De structuur en opmaak van je website wordt geladen en getoond op het scherm, afbeeldingen laden in en komen tevoorschijn en uiteindelijk wordt de website interactief waarbij de gebruiker bijvoorbeeld op sliders, uitklapbare elementen of links kan klikken. Nadat de gebruiker zich georiënteerd heeft besluit deze of de pagina bevat wat hij of zij zoekt. De gebruiker blijft op deze pagina en sluit daarna de tab, besluit door te klikken naar een relevantere pagina of gaat terug naar de zoekresultaten om verder te zoeken.

Het percentage gebruikers dat niet verder komt dan de eerste pagina noemen we de bounce rate. Yoast heeft een artikel over wat bounce rate precies inhoudt met categorieën van gebruikers die in dit percentage worden opgenomen. Wanneer een gebruiker niet snel genoeg kan bepalen dat een pagina relevant is voor hem of haar gaat deze al snel terug naar de zoekresultaten om een resultaat te vinden dat beter aansluit.

In ons geval kijken we naar twee verbeterpunten die voornamelijk te maken hebben met de tijd die de browser nodig heeft om bronnen te downloaden. Hoewel dit niet het enige verbeterpunt is, kost dit, zeker op mobiel, de grootste hoeveelheid tijd. Daarnaast is de browser ook beter in staat zaken als het renderen en opmaken van de pagina te prioriteren wanneer deze alle bronnen eerder binnenkrijgt.

HTTP/2 protocol

Websites en webapplicaties worden geladen vanaf een webserver. Om een enkele webpagina te laden worden de structuur (de html), de stijl, de afbeeldingen en interactieve elementen (de scripts) apart geladen. In zekere zin zorgt het apart laden van deze bronnen ervoor dat de browser bronnen op een efficiëntere manier kan downloaden en toepassen, in plaats van afhankelijk te zijn van hoe deze in een enkel bestand staan.

Een van de grote nadelen van deze manier van leveren van bronnen is dat wanneer een webpagina bestaat uit veel bronnen, er relatief veel overhead is. Voor iedere bron die wordt geladen moet bij de “klassieke” manier van ophalen van bronnen eerst een verbinding worden opgezet met de webserver, waarbij de browser onderhandeld met de webserver hoe de content precies wordt opgestuurd. Dan worden zogenaamde headers gestuurd, waarin de webserver aangeeft wat de bron bevat, maar ook bijvoorbeeld informatie over wat de browser wel en niet mag doen met de inhoud en eventuele cookies en andere informatie voor autorisatie van een gebruiker. Daarna wordt pas de inhoud van de bron gestuurd. Het herhaaldelijk opzetten van een verbinding met dezelfde webserver is tijd die beter besteed kan worden.

HTTP/2 is een verbetering op het protocol dat de browser gebruikt om te communiceren met de webserver. Een van de grootste veranderingen is dat HTTP/2 het toestaat dat headers gecomprimeerd worden, en dat meer verzoeken aan dezelfde webserver kunnen worden samengevoegd. Dit zorgt ervoor dat er minder data hoeft te worden verstuurd, en dat er minder tijd wordt besteed aan het opzetten van een verbinding tussen de webserver en de browser. Bronnen worden met HTTP/2 sneller geladen.

Wil je verhuizen naar een server die HTTP/2 ondersteunt, neem dan contact met ons op.

Bestandsgrootte van afbeeldingen

Afbeeldingen zijn niet weg te denken van websites. Van stijlelementen tot productfotos, en van beeldvullende headerfoto’s tot het logo van je bedrijf, een pagina bevat soms tientallen afbeeldingen. Er bestaan tal van manieren om webpaginas met afbeeldingen te optimaliseren, maar als je een afbeelding wil tonen zal deze altijd gedownload moeten worden.

De hoeveelheid bandbreedte die iedere bezoeker van een website besteed aan het downloaden van afbeeldingen is aanzienlijk. Om na het toepassen van gebruikelijke optimalisaties toch nog tot een verbetering te komen moet een andere oplossing gevonden worden. Om deze reden worden er nieuwe bestandsformaten ontwikkeld voor afbeeldingen, waar met minder informatie (en dus bestandsgrootte) nog steeds visueel dezelfde afbeelding kan worden weergegeven.

In de nieuwsbrief van juli (schrijf je in!) schreven we dat WordPress sinds de nieuwe versie nu standaard ondersteuning heeft voor het Webp-formaat. Dit formaat gebruikt compressiemethoden uit het videoformaat Webm om afbeeldingen te kunnen reconstrueren van minder data. Afbeeldingen kunnen zowel opgeslagen worden in een modus dat de afbeelding lijkt voor het menselijk oog op de oorspronkelijke afbeelding (lossy compression), zoals voorheen al gebeurde met JPEG, of in een modus dat exact dezelfde afbeelding kan worden gereconstrueerd (lossless compression), zoals met PNG-afbeeldingen gebeurt. Een afbeelding in Webp-formaat neemt 25-34% minder ruimte in dan dezelfde afbeelding in PNG of JPEG-formaat. Het Webp-formaat wordt door alle moderne browsers ondersteund. Naast Webp wordt er ook gewerkt aan andere formaten, waaronder AVIF en JPEG XL. Deze worden nog niet breed ondersteund.

Hoewel WordPress nu wel Webp ondersteunt, worden afbeeldingen alleen in dit formaat getoond als een nieuwe afbeelding in Webp-formaat wordt geupload. Bestaande afbeeldingen, en nieuwe afbeeldingen die in een ander formaat worden geupload blijven in het oude formaat getoond worden. Als je wilt zorgen dat jouw website ook Webp gebruikt voor alle afbeeldingen die er al op staan en sneller laadt op langzamere verbindingen kunnen wij helpen WordPress in te stellen hiervoor.