WordPress website sneller maken: snelle wins!

De optimalisaties die we in deze blog bespreken zijn vaak het eenvoudigst te verwerken en zullen je de meeste prestatiewinst opleveren. Er zijn veel meer optimalisaties mogelijk om je WordPress website sneller te maken, maar die kosten vaak veel meer moeite. Met deze optimalisaties zou je een snel werkende website moeten krijgen op bijna alle hostingplatforms. De hieronder genoemde tools, zowel gratis als betaald, zijn gebaseerd op WordPress. Voor populaire CMS-systemen zijn er vaak vergelijkbare tools beschikbaar. De principes blijven overal hetzelfde.

Caching

Het gebruik van cache is één van de optimalisaties die vaak het grootste verschil maken in prestaties. Er gebeurt veel op de achtergrond wanneer je een webpagina laadt. Gegevens ophalen uit een database, gegevens verwerken, HTML genereren, bestanden ophalen van de server en nog veel meer. Caching maakt het mogelijk om deze gegevens op te slaan voor hergebruik. Hieronder gaan we verder in op server en browser side caching (er zijn er meer). Deze zijn vaak relatief eenvoudig te implementeren.

Wat is Cache geheugen?

Het Engelse woord ‘cache’ (spreek uit als: kesj) betekent voorraad of opslagplaats. Bij de computer wordt een deel van het geheugen bedoeld waar tijdelijke internetbestanden worden bewaard. Ook de opgeslagen gegevens zelf worden ‘cache’ genoemd. Door gegevens van een website tijdelijk op te slaan, verschijnt een internetpagina sneller. De gegevens hoeven namelijk niet elke keer dat je de pagina opent, weer van het internet te komen. Ze staan immers al op de computer. Denk aan stukken tekst, afbeeldingen of video’s. Door de cache te legen, komt de eerstvolgende keer dat de webpagina opent alle informatie op die pagina weer vers van het internet.

Server Side Caching (Full Page Caching)

Pagina’s die door de gebruiker worden opgevraagd, moeten vaak veel werk verrichten voordat ze worden getoond. Dit werk is vaak hetzelfde voor alle gebruikers. Een blog als voorbeeld toont een lijst met berichten die alleen verandert als er een nieuw bericht is toegevoegd. Het is zonde van het werk om alle gegevens opnieuw te verzamelen en op te maken en de HTML opnieuw te genereren. Met behulp van caching kan de resulterende HTML worden opgeslagen. Bij elke nieuwe aanvraag kan dit resultaat uit de cache worden opgehaald. De laadsnelheid kan soms zonder veel moeite worden teruggebracht van seconden naar milliseconden (verschilt per instelling).

Tools: WP Rocket (betaald) of W3 Total Cache (gratis)

Browser Caching

Pagina’s op een website bevatten vaak veel dezelfde bestanden. Bestanden zoals lettertypen, afbeeldingen en stijlen worden vaak op alle pagina’s gebruikt. Het is zonde om ze bij elk paginabezoek opnieuw te downloaden. Dat is waar browser caching (opslag) om de hoek komt kijken. De server kan de browser laten weten hoe lang de bestanden in de browser kunnen worden opgeslagen. Bij het laden van nieuwe pagina’s zal de browser eerst controleren of het bestand al in de browser zijn cache staat. Dit bespaart veel gegevens en zal de laadtijd van je pagina verkorten. Dit is vooral merkbaar bij een lage internet snelheid.

Tools: WP Rocket (betaald) of W3 Total Cache (gratis)

Afbeeldingen optimaliseren

Afbeeldingen kunnen één van de grootste onderdelen, qua data, van je website zijn. Afbeeldingen worden vaak geüpload zonder ze te verkleinen of te comprimeren. Hierdoor worden ze veel groter dan nodig is. Hierdoor kan je website erg groot en traag worden om te downloaden. Vooral met een slechte internet verbinding (bijvoorbeeld in kantoor panden of nieuwbouw wijken). Ze kunnen ook een formaat hebben (bijv. PNG) dat niet optimaal is.

Bestandstype

Het juiste bestandstype gebruiken voor je afbeelding kan een groot verschil maken in de grootte van de afbeelding. Het bestandstype WebP wordt nu in de meeste browsers ondersteund. Dit is een relatief nieuw bestandstype dat betere prestaties levert dan PNG en JPEG. Dit resulteert vaak in bestandsgroottes die ~25% lager zijn dan JPG/PNG. Als je WebP niet kunt gebruiken, gebruik dan JPEG. Gebruik PNG alleen als je een transparante achtergrond nodig hebt (wordt niet ondersteund door JPEG). JPEG’s hebben vaak minder gegevens nodig wat resulteert in kleinere bestanden.

Tools: TinyPNG (gratis)

Formaat van afbeeldingen wijzigen

Voordat je afbeeldingen uploadt, moet je altijd de vereiste grootte van de afbeelding controleren. Wordt de afbeelding alleen getoond in een resolutie van 500×500 op je website? Dan hoef je geen resolutie van 2000×2000 te gebruiken.

Tools: Voorvertoning (Mac) of ImageResizer

Afbeeldingen comprimeren

Je afbeelding kan worden gecomprimeerd met online tools of plugins. Deze compressie kan vaak de helft of zelfs meer aan MB’s besparen. Afhankelijk van de afbeelding. Deze compressietools verwijderen gegevens die niet nodig zijn of pixels die niet zichtbaar zijn voor het menselijk oog.

Tools: TinyPNG (gratis)

Video-optimalisaties

Net als afbeeldingen moeten ook video’s worden geoptimaliseerd. Ze hebben vaak een hoge kwaliteit en zijn niet geoptimaliseerd. Heb je echt een 4K auto-play video nodig of is 1080P goed genoeg? Dit bespaart veel gegevens. Met video optimalisatie tools kun je ook de video header (automatisch) aan het begin van het videobestand plaatsen. Deze header moet worden gelezen voordat de video kan starten. Standaard kan deze overal in het bestand staan. Door deze vooraan te plaatsen, kan de video progressief geladen worden. Dit verbetert de snelheid waarmee de video start doordat de video in meerdere delen opgehaald wordt.

Hulpmiddelen: Handbrake (desktop applicatie)

Lazy loading

Niet alle afbeeldingen hoeven meteen te worden geladen wanneer je een webpagina opent. De meeste afbeeldingen zijn pas zichtbaar nadat er naar beneden wordt gescrolled. Met lazy loading kun je afbeeldingen pas laden als ze bijna zichtbaar zijn. Dit vermindert de initiële belasting van je webpagina. Browsers ondersteunen deze functie al sinds 2020. Om gebruik te maken van deze functie kun je ‘loading=”lazy”‘ toevoegen aan HTML-tags voor afbeeldingen. Tools zoals WP Rocket of W3 Total Cache kunnen dit ook automatisch voor je toevoegen of een eigen implementatie van lazy loading toevoegen.

Tools: WP Rocket (betaald) of W3 Total Cache (gratis)

Verwijder overbodige plugins

Een eenvoudig maar vaak over het hoofd gezien prestatieprobleem is het overmatig gebruik van plugins en het geïnstalleerd houden van plugins die niet meer worden gebruikt. Deze tools laden vaak CSS en JavaScript of draaien code in je backend. Dit veroorzaakt onnodige vertragingen. Verwijder altijd tools die niet worden gebruikt of schakel ze op zijn minst uit en zorg ervoor dat je alleen tools installeert die je echt nodig hebt. Soms kunnen externe systemen, zoals een extern boeking platform i.p.v. met een plugin, worden gebruikt als WordPress plugins je website te veel vertragen.

Hosting platform

Zoals in het begin vermeld zou je met de bovenstaande punten op de meeste hosting platformen een snelle website moeten kunnen krijgen. Je hosting partner kan echter nog steeds een grote invloed hebben op de performance. Denk aan het inschakelen van de nieuwste PHP versies of het activeren van JIT voor het versneld compileren van de PHP code van je website. In de meeste gevallen bevind jouw website zich ook op een server welke gedeeld wordt met veel andere websites. Deze kunnen worden overbelast door teveel of te zware andere websites. Hier kan jouw website dan ook last van hebben. Bij Kersvers hebben wij ons eigen hosting platform om te zorgen dat deze altijd geoptimaliseerd is voor performance. Wil je hier meer over weten? Neem gerust contact met ons op.