Wat draagt bij aan een snelle WordPress website?

Als je deze blog aan het lezen bent weet je waarschijnlijk al waarom het belangrijk is om een snelle website te hebben, maar anders kun je daar hier meer informatie over vinden. Wij gaan in deze blog kijken naar de nieuwste technieken die helpen bij het sneller maken van jouw WordPress website. 

Er zijn veel factoren die een rol spelen bij de snelheid van jouw WordPress website. Er zijn vijf belangrijke punten:

1. Afbeeldingen optimaliseren 
2. Caching gebruiken: Full page caching instellen / Browsercaching gebruiken
3. Code samenvoegen en minimaliseren / WordPress code injecties verwijderen
4. Server instellingen verbeteren: Comprimeren van data (brotli) / Snelle DNS gebruiken  / HTTP/3 / CDN
5. Geavanceerde technieken: Pre party / boven de fold CSS optimalisatie / JAM-stack 

In deze blog bespreken we punt 1 van dit lijstje, in de volgende blogs komen de andere punten aan bod.

Afbeeldingen optimaliseren

We beginnen bij de grootste boosdoener als het gaat om de snelheid van een gemiddelde WordPress website: afbeeldingen. De meeste websites maken gebruik van afbeeldingen en in sommige gevallen ook video’s om de ervaring te verrijken. Hoewel een beeld meer kan zeggen dan 1000 woorden is het ook een stuk groter dan een 1000 woorden, letterlijk…

Afbeeldingen en video’s (een reeks afbeeldingen achter elkaar) zijn opgebouwd uit pixels welke individueel omschreven moeten worden. Voor een pixel (3 bytes) is 3 keer zoveel ruimte nodig als voor een letter (1 byte). Laten we zeggen dat een gemiddeld woord 5 letters heeft (dus 5 bytes). Een kleine afbeelding van 250 x 250 pixels heeft 62500 pixels x 3 bytes = 187500 bytes. Dat zou dan dus gelijk staan aan 187.500 letters, oftewel ongeveer 37.500 woorden. Deze berekening gaat niet helemaal op, want compressie, zoals JPEG, zorgt er voor dat afbeelding een stuk kleiner kunnen worden gemaakt, maar het geeft een idee.

Een gemiddelde website, zoals www.nos.nl laadt vele afbeeldingen in en dit is daarmee een belangrijke kandidaat voor optimalisatie. 

Afbeeldingen met de juiste afmetingen toevoegen

Wanneer je een afbeelding toevoegt aan je website is het belangrijk dat de juiste afmetingen worden gebruikt. Het is namelijk mogelijk om een grote afbeelding van b.v. 2500 x 2500 pixels te plaatsen in een gebied waar eigenlijk maar ruimte is voor 250 x 250 pixels. De browser zal dit gewoon accepteren en de afbeelding verkleinen (downscalen) om het in te passen. De afbeelding moet echter wel gewoon gedownload worden voordat deze kan worden weergegeven. Gelukkig maakt WordPress tegenwoordig gebruik van responsive images. Dit zijn afbeeldingen die een set van afmetingen met daarbij behorende afbeeldingsbestanden heeft waarmee de browser kan bepalen welke afbeelding wordt gekozen.

WordPress biedt standaard de volgende groottes aan:

• Thumbnail (150 x 150)
• Gemiddeld (afgesneden op 300 pixels)
• Groot (afgesneden op 1024 pixels)
• Volledige grootte (vaak het grootst)
  

Wanneer je een afbeelding invoegt in de lopende tekst in WordPress zal er automatisch een responsive afbeelding worden gemaakt met deze uitsnedes.

Een optimalisatie van dit systeem is om meer afbeelding afmetingen toe te voegen aan jouw website. Het voordeel hiervan is dat er een grotere set kan worden gebruikt en er dus een beter passende afbeelding gevonden kan worden. Stel, je hebt een afbeelding die je 600 pixels breed wilt weergeven, dan zal er nu dus alleen een keuze zijn tussen een 300 pixels en een 1024 pixels afbeelding.

Afbeeldingen toevoegen met plugin

Je kunt gemakkelijk meer afbeeldingen toevoegen door gebruik te maken van een plugin. Ik raad hiervoor Simple Image Sizes aan (https://wordpress.org/plugins/simple-image-sizes/). Nadat je deze plugin hebt geïnstalleerd kun je via “Instellingen -> Media” op de knop “Een nieuwe afmeting van thumbnail toevoegen” klikken. Je moet dan eerst een naam kiezen voor je uitsnede. Het is aan te raden om hier gebruik te maken van een naam waar het aantal pixels in terug komt. Bijvoorbeeld: image-640 voor een afbeelding met 640 pixels uitsnede.

Je kunt vervolgens de maten invoeren per uitsnede, waarin je een breedte en een hoogte kan definiëren. De afbeelding zal altijd als maximum, dan wel de breedte, dan wel de hoogte pakken, afhankelijk van de breedte-hoogte-ratio van de afbeelding. Let op: Voor deze techniek is het belangrijk dat je bij “Bijsnijden” “Nee” kiest, want we willen niet dat de afbeeldingen bijgesneden worden, maar alleen uitgesneden. Bijgesneden afbeeldingen (waar de breedte-hoogte-ratio van de afbeelding dus ook wordt aangepast), worden door WordPress niet meegenomen in de set van afbeeldingen.

Comprimeren van afbeeldingen binnen WordPress

Als je een afbeelding uploadt naar WordPress zal deze dus standaard uitgesneden worden in een aantal versies en kun je, zoals hierboven wordt omschreven, nog meer versies toevoegen. Echter, met de compressie van de afbeeldingen doet WordPress standaard niet veel.

Compressie is een methode waarmee op een slimmere mathematische manier data kan worden gerepresenteerd zonder (veel) afbreuk te doen aan de data zelf. Een illustratief voorbeeld hiervan is als ik een b.v. rode afbeelding heb van 10 x 10 pixels. Je kunt dit representeren in een set (matrix) van 100 pixels (10 x 10) met daarin telkens de waarde van de rode kleur. Op die manier zou het vrij veel data in beslag nemen, omdat telkens de individuele pixelwaardes gedefinieerd zouden moeten worden. Een efficiëntere manier zou zijn als ik zou zeggen: geef mij 100 keer een pixel met deze kleurcode. Dan hoef je de pixel dus maar 1 keer te omschrijven en hem vervolgens 100 keer te kopiëren.

Compressie technieken

Er zijn vele technieken die ervoor kunnen zorgen dat een afbeelding veel kleiner kan worden gerepresenteerd. De bekendste hiervan zijn JPEG en PNG. JPEG is een manier waarmee afbeeldingen wel kwaliteit verliezen (hoewel vaak nauwelijks zichtbaar) en PNG is een Lossless formaat waarbij dus geen kwaliteit wordt verloren. Voor vrijwel alle foto’s op je website wil je JPEG gebruiken en PNG gebruik je soms, en alleen voor lijntekeningen en illustraties.

Hoewel de afbeeldingen die je uploadt waarschijnlijk al in JPEG of PNG formaat zullen zijn kun je toch nog veel winnen met betere compressie. Dit komt omdat binnen de compressie methodes nog allerlei instellingen zitten waarmee de compressie versterkt kan worden. Vaak gaat dit wel gepaard met kwaliteitsverlies, maar die is niet of nauwelijks zichtbaar. Ook zit er soms metadata (zoals de datum waarop de afbeelding is gemaakt, of met welke camera) die weggehaald kan worden. Een WordPress plugin die je helpt met het extra comprimeren van je afbeeldingen is WP Smush (https://nl.wordpress.org/plugins/wp-smushit/).

Nadat je deze plugin hebt geïnstalleerd en geactiveerd kun je op “Smush” klikken in de backend, aan de linkerzijde. Je krijgt dan de mogelijkheid om je afbeeldingen te “Bulk smushen”. In de gratis versie moet je dit per 50 afbeeldingen doen en in de Pro versie kun je dit allemaal in een keer laten doen.

Ik raad aan om de volgende instellingen te gebruiken:

• Afbeeldingsafmetingen: Alle
• Automatische compressie: Aan
• Metadata: Aan
• Afbeelding Verkleinen: Aan

Afbeeldingen Lazyloaden

Een andere techniek die helpt bij het optimaliseren van de afbeeldingen is Lazyloading. Dit is een techniek waarmee afbeeldingen (en in sommige gevallen ook iframes, zoals Youtube filmpjes) pas ingeladen worden als deze in beeld verschijnen bij de gebruiker. Stel je voor dat je een website hebt met 100 afbeeldingen die verspreid zijn over een lange pagina. Niet alle bezoekers zullen helemaal naar beneden scrollen om deze afbeeldingen te bekijken en het is dus niet nodig om deze direct in te laden. Dit is echter wel wat er standaard gebeurt. Door Lazyloading te gebruiken kun je dus voorkomen dat veel afbeeldingen onnodig ingeladen worden.

Gelukkig is ook dit makkelijk in te regelen middels dezelfde plugin die we hiervoor hebben besproken voor de compressie: WP Smush (https://nl.wordpress.org/plugins/wp-smushit/). Je kunt in de backend in WordPress op “Lazyloaden” klikken en vervolgens op “Activeren” klikken.

Nadat je deze functionaliteit hebt ingeschakeld zullen afbeeldingen die in de content staan worden gelazyload. Ik raad aan om de standaardinstellingen over te nemen. Let op: Veel afbeeldingen staan niet in de content, maar worden via een template ingevoerd. Deze afbeeldingen zullen met deze techniek niet gelazyload worden. Je moet hier contact over opnemen met de ontwikkelaar van de template.

Geavanceerd: WebP gebruiken voor extra compressie

We hebben eerder in dit artikel besproken dat de 2 meest voorkomende compressiemethodes JPEG en PNG zijn. Er is echter een relatief nieuwe compressiemethode genaamd WebP welke nog een stuk beter is in het comprimeren van afbeeldingen.

Het gebruik van WebP heeft 2 belangrijke stappen:

1. Het omzetten van je afbeeldingen naar WebP (zowel JPEG als PNG)
2. Afhankelijk van de browser WebP of het origineel (JPEG of PNG) serveren.

Niet alle browsers ondersteunen WebP, dus je kunt niet zomaar alles omzetten. Vandaar dat deze techniek wat lastiger is om te implementeren momenteel.

De makkelijkste manier om dit te doen is, wederom, middels de plugin WP Smush. Voor deze functionaliteit heb je echter wel de Pro versie nodig wat kosten met zich meebrengt. 

Wanneer je de Pro versie hebt, krijg je de mogelijkheid om op Lokale WebP te klikken. Hier krijg je vervolgens een configuratie scherm te zien waarmee je kunt instellen dat alle afbeeldingen naar WebP worden omgezet en dat de server op de juiste manier verwijst naar deze afbeeldingen. Het hangt af van het type server hoe deze instellingen doorgevoerd moeten worden. De plugin zal proberen om dit automatisch voor je te doen, maar dat zal niet altijd goed gaan. Bij problemen kun je contact opnemen met de webhoster om te vragen of zij hiermee verder kunnen helpen.

Conclusie

Er zijn verschillende technieken waarmee afbeeldingen kunnen worden geoptimaliseerd binnen WordPress. We hebben gekeken naar de volgende dingen:

• Meer afbeeldingen toevoegen aan de afbeeldingenset die gebruikt wordt voor responsive images binnen WordPress
• Extra compressie toevoegen middels WP Smush
• Afbeeldingen Lazyloaden
• Afbeeldingen verder comprimeren middels WebP

Met deze technieken kun je gemakkelijk vele MB’s winnen en daarmee ook seconden laadtijd voor jouw bezoekers. Als je meer informatie wilt over het sneller laten maken van jouw WordPress website kun je altijd contact opnemen voor een vrijblijvende sparsessie.

Verder lezen

Klaar voor de volgende stap? Lees hier het volgende artikel over: Caching gebruiken – Full page caching instellen / Browsercaching gebruiken!