De laadtijd van je WordPress-website optimaliseren

Wil je de laadtijd van je WordPress-website optimaliseren? Een belangrijk onderdeel daarbij is de content die geladen moet worden. Voordat content bij de bezoeker op zijn scherm zichtbaar wordt, moet het immers eerst van de server worden opgehaald en vervolgens door de browser worden geïnterpreteerd. Denk hierbij aan:

• afbeeldingen;
• JavaScript;
• CSS.

Er bestaan verschillende technieken om de laadtijd van je website te optimaliseren. In dit artikel vind je meer informatie over deze technieken en welke invloed ze hebben op de snelheid van een website.

Inhoudsopgave

1. Het aantal verzoeken naar de webserver
   • Wat is een verzoek?
   • Mogelijke optimalisaties
2. De grootte van je content
   • Waarom is de grootte van belang?
   • Mogelijke optimalisaties
3. De volgorde van laden
   • Waarom is de volgorde van belang?
   • Mogelijke optimalisaties
4. Caching
   • Wat is caching?
   • Cachingtechnieken

1. Het aantal verzoeken naar de webserver

Wat is een verzoek?

Een voorbeeld van een verzoek is het opvragen van de homepagina. Wanneer er op de homepagina een afbeelding staat, is er weer een extra verzoek nodig: de gebruiker vraagt ook de afbeelding bij de server op om de pagina juist te tonen. Denk ook aan JavaScript- en CSS-bestanden die de server naar de gebruiker moet versturen, voordat de browser deze kan interpreteren. 

Om de laadtijd laag te houden, is het belangrijk dat alleen het minimumaantal verzoeken naar de server wordt verstuurd bij het laden van een pagina. Elk extra verzoek kost immers tijd, en heeft dus invloed op de laadtijd. 

Mogelijke optimalisaties

• Combineer JavaScript en CSS

Het combineren van JavaScript- en CSS-bestanden zorgt ervoor dat er minder verzoeken naar de server nodig zijn, omdat aan de serverkant alle afhankelijkheden in 1 bestand zijn samengevoegd. Het toesturen van 1 groot bestand gaat sneller dan 10 kleine, omdat dan niet voor meerdere bestanden een nieuw verzoek nodig is.

• Lazy loading van afbeeldingen

Het lazy loaden van afbeeldingen zorgt ervoor dat niet alle afbeeldingen op een pagina in een keer geladen hoeven te worden. Afbeeldingen laden pas in op het moment dat jij (bijna) op dat punt van de pagina bent. Dat wil zeggen dat ze pas opgevraagd worden wanneer dat nodig is en in eerste instantie vervangen worden door minder grote placeholders. Zo blijft het aantal benodigde verbindingen bij het tonen van een nieuwe pagina minimaal, waardoor de pagina sneller laadt.

• Verwijder niet-gebruikte content en plugins

Tijdens het ontwikkelen van een website gebeurt het vaak dat plugins of andere content worden toegevoegd die uiteindelijk niet meer noodzakelijk zijn voor de werking van de website, maar toch blijven rondslingeren. Afhankelijk van het type content/plugin zorgt dit echter voor extra verzoeken naar de webserver bij het laden van een pagina. 

2. De grootte van je content

Waarom is de grootte van belang?

Naast het aantal verzoeken is ook de grootte van de content van belang. Dit heeft impact op zowel de Time To First Byte (TTFB) aan de serverkant (omdat er minder data heen en weer hoeft te worden gestuurd), als op de totale laadtijd van de gebruiker (omdat de ontvangen content minder zwaar is om te tonen). 

Mogelijke optimalisaties

• Afbeeldingen optimaliseren

Je kunt afbeeldingen op je website zowel optimaliseren qua grootte (denk aan afmeting en kwaliteit), als qua bestandsformaat (bijvoorbeeld .jpeg, .png).

Optimaliseer afbeeldingen lokaal, voordat je deze uploadt naar je server. Houd afbeeldingen qua formaat altijd zo klein mogelijk, voor het doel dat je wilt bereiken. Daarbij kun je het best nieuwe bestandsformaten gebruiken, die zijn geoptimaliseerd voor het web. Bijvoorbeeld webm en webp.

Er zijn meerdere betaalde plugins beschikbaar, waarmee je afbeeldingen kunt optimaliseren.

• JavaScript of CSS verkleinen

Naast het verkleinen van afbeeldingen is het ook mogelijk om de CSS of JavaScript te verkleinen. Dit doe je door onnodige karakters, zoals witregels en comments, uit de bestanden te verwijderen. 

3. De volgorde van laden

Waarom is de volgorde van belang?

Indien de volgorde van het laden van content niet optimaal is, kunnen processen bij het laden van de pagina elkaar onnodig blokkeren. Dit kan de laadtijd van je pagina ernstig benadelen. 

Denk hierbij aan een niet-essentieel stuk JavaScript dat een afbeelding of knop iets laat bewegen. Stel jezelf de volgende vraag: is het van belang dat de gebruiker dit stuk code heeft ontvangen voordat de pagina wordt getoond? Of kan het prima even zonder, zodat de pagina sneller wordt geladen en het effect daarna wordt geactiveerd? De volgorde van laden van content is goed te regelen. 

Mogelijke optimalisaties

• JavaScript deferring

Met behulp van JavaScript deferring kun je JavaScript-content 'niet blocking' maken. Dit zorgt ervoor dat je deze code pas uitvoert/laadt na de andere content van je website. 

Je kunt deze techniek toepassen op verschillende niveaus: zowel bij losse script files als bij de inline JavaScript uit de html. De tweede variant brengt echter wat meer risico met zich mee, omdat de inline code vaker kritiek is voor de werking van de website.

4. Wat is caching?

Caching is een manier om veelvoorkomende en weinig veranderende dynamische onderdelen van een website statisch op te slaan. Hierdoor hoeft niet bij elk verzoek dezelfde berekening gedaan te worden. Dit heeft niet alleen een enorme impact op de performance van een verzoek, maar ook op het aantal gelijktijdige bezoekers dat een VPS of website aankan. Wanneer een verzoek sneller wordt afgehandeld, zijn er immers eerder resources beschikbaar voor het volgende paginabezoek.

Cachingtechnieken

Memcached wordt standaard opgeleverd op ons Managed (WordPress) Hosting-platform. Memcached maakt het mogelijk de caching-onderdelen in het werkgeheugen op te slaan, waardoor dit razendsnel laadt.

De volgende caching is hierdoor mogelijk:

• Page caching

Het cachen van de resulterende pagina’s zelf: via Memcached worden pagina’s direct uit het geheugen opgeleverd. 

• Opcode caching

Normaal gesproken wordt bij het uitvoeren van PHP-code de code voor elk verzoek opnieuw gecompileerd, voordat het kan worden uitgevoerd. Opcode slaat de gecompileerde PHP-code op in het geheugen. Is er sprake van een volgend verzoek dat dezelfde code oproept? Dan is er een stap minder nodig om het resultaat te tonen.

• Database en object caching

Met database caching cache je het resultaat van veelgebruikte database queries. Object caching is bedoeld voor het cachen van complexere database queries. Het kan voorkomen dat database en object caching tegelijk voor problemen met resources zorgen.

• Fragment caching 

Fragment caching slaat het resultaat van een uitgevoerd blok code op. Het voordeel is dat je de code dus niet 2 keer hoeft uit te voeren voor hetzelfde resultaat.