De snelheid van je WordPress website verbeteren (stappenplan)

Google maakt er geen geheim van dat de snelheid van je website een belangrijke rankingfactor is. Een trage website heeft niet alleen invloed op de vindbaarheid, maar ook op de gebruikerservaring.

Vooral in het geval van WordPress zijn trage websites een veelvoorkomend probleem.

Zo ook bij Defellow, merkte ik tijdens mijn nulmeting via GTmetrix.

Nulmeting website snelheid test GTmetrix

En ook via PageSpeed Insights vielen de scores alles tegen.

nulmeting snelheid website pagespeed insights

Na een middagje optimaliseren scoorde dezelfde pagina een stuk beter:

eindresultaat website snelheid test gtmetrix

Niet onbelangrijk om te weten. Defellow draait op een goedkope shared hosting en daarnaast maak ik gebruik van enkele zware plugins, waaronder WooCommerce en Elementor.

In dit artikel vertel ik je welke stappen ik heb ondernomen om de snelheid van mijn WordPress website te verbeteren.

  1. Verwijder plugins die je niet gebruikt
  2. Cache je website

Stap 1. Verwijder plugins die je niet gebuikt

Door de jaren heen installeer je veel verschillende plugins op je WordPress website. Sommige plugins zijn essentieel. Andere installeer je voor een enkele functie, of gebruik je misschien helemaal niet meer. Voor je het weet heb je 30 verschillende plugins geïnstalleerd. Het gebeurt ons allemaal.

Zelfs bij nieuwe WordPress installaties worden er vaak plugins meegeïnstalleerd die je nooit gaat gebruiken.

Plugins verhogen het aantal paginaverzoeken en de totale paginagrootte. Het verwijderen van ongebruikte plugins is daarom één van de makkelijkste manieren om de snelheid van je WordPress website te verbeteren.

Stap 2. Cache je website

Bij caching levert je website een pagina dat al eerder is gegenereerd. De webpagina hoeft dan niet meer voor iedere bezoeker opnieuw opgebouwd te worden. Caching verbetert de laadtijd van je website (waaronder Time To First Bite) aanzienlijk.

Er wordt onderscheid gemaakt tussen twee soorten caching:

  • Browsercaching: Op het moment dat iemand voor het eerst je website bezoekt worden bepaalde bestanden (zoals logo’s en headers) opgeslagen door de webbrowser van de bezoeker. Deze bestanden hoeven bij een volgend bezoek niet opnieuw gedownload te worden.
  • Servercaching: Hierbij wordt er een statische versie van een pagina op de server opgeslagen en hoeft deze niet pas opgebouwd te worden als er een bezoeker op je website komt.

Er zijn veel verschillende plugins die het cachen van je website mogelijk maken. In dit artikel laat ik je zien hoe je caching kunt instellen met behulp van de LiteSpeed Cache plugin.

LiteSpeed Cache

De LiteSpeed Cache plugin wordt door veel WordPress gebruikers gezien als de beste cache plugin, mits jouw website draait op de LiteSpeed webserver.

litespeed cache plugin wordpress

Om er achter te komen op welke webserver jouw website draait ga je in het WordPress menu naar GereedschapSitediagnoseServer.

webserver checken wordpress

Andere alternatieven zijn W3 Total Cache of WP Fastest Cache.

WordPress caching plugin instellen

Installeer en activeer de LiteSpeed Cache plugin en ga via het WordPress menu naar LiteSpeed CacheCache

Stel het cachebeheer in als volgt:

litespeed cache instellingen

Stap 3. Laad scripts selectief

Zodra je een plugin op je website installeert worden er scripts aan je website toegevoegd. Vaak worden deze plugins op iedere webpagina geladen. Ook als ze niet nodig zijn.

Defellow draait bijvoorbeeld onder andere op WooCommerce. De scripts van deze plugin hoeven maar op een beperkt aantal pagina’s geladen te worden.

Helaas is het niet zo dat scripts standaard alleen laden op de pagina’s waar dat nodig is. Mede hierdoor hebben plugins een enorme impact op de snelheid van je website.

Met de Asset CleanUp plugin kun je ongebruikte scripts van je pagina verwijderen. Hierdoor worden de pagina’s kleiner en verbeter je de snelheid van je website.

Asset Cleanup plugin instellen

Ga na het downloaden en activeren van de plugin naar Asset CleanUpCSS/JS Manager.

Hier zie je per webpagina welke scripts er allemaal worden geladen. Standaard zie je hier de scripts die worden geladen in de homepage, maar je kunt via de tabbladen al je pagina’s benaderen.

Het is mogelijk om scripts uit te sluiten op specifieke pagina’s, maar ook voor een volledige post type.

Sommige delen (bijvoorbeeld de homepage en andere landingspagina’s) van deze website werken bijvoorbeeld met de Elementor plugin. Maar blogs schrijf ik gewoon in de Gutenberg Editor. Daarom kan ik op alle blogpagina’s de Elementor scripts verwijderen.

Hiervoor ga ik naar het tabblad ‘Posts’ en selecteer ik een willekeurig blog. Vervolgens kan ik alle Elementor scripts uitschakelen.

Een script uitschakelen

Wil je een script alleen uitschakelen voor een specifieke pagina, klik dan op Unload on this page, wil je dat een script wordt uitgeschakeld op alle pagina´s binnen een bepaald post type (dus bijvoorbeeld voor alle blogs), klik dan op Unload of all pages of ‘post’ post type.

scripts uitsluiten asset cleanup

Herhaal dit proces voor alle post types en pagina’s.

Let op! Dit proces kan je website makkelijk breken. Als je een script uitschakelt die de pagina toch gebruikt, werken er waarschijnlijk delen van de pagina niet meer. Daarom is het belangrijk om te blijven testen. Het liefst zelfs script voor script. Zet een script uit, leeg de cache en kijk vervolgens of je pagina nog naar behoren werkt.

Stap 4. Verklein HTML, CSS en Javascript

Met het verkleinen van je code wordt alle onnodige witruimte en commentaar weggehaald. Witruimte en commentaar wordt door developers gebruikt om de code leesbaar te houden.

Door je HTML, CSS en Javascript bronnen te verkleinen wordt het weliswaar onleesbaar voor een webdeveloper, maar voor een webbrowser is dit meestal geen probleem.

Controleer na het verkleinen van je code altijd of je website nog goed werkt. Zo kwam ik erachter dat het verkleinen van de HTML code in mijn geval voor problemen zorgde. Dit is voor iedere website anders.

Combineer de bronnen niet!

Vaak wordt aangeraden de CSS- en Javascript bronnen te combineren. Er wordt dan één grote bron gemaakt waar naar wordt verwezen. Over het algemeen kan dit de snelheid van je website bevorderen. Het enige nadeel is dat het gebundelde bestand op een gegeven moment erg groot wordt.

Als je stap 3 hebt uitgevoerd (het selectief laden van scripts) kun je de bronnen simpelweg niet meer combineren. Zelf heb ik gemerkt dat het selectief laden van scripts vele malen efficiënter is.

Stap 5. Stel laden van JavaScript uit

Hiermee wordt JavaScript pas geladen nadat de HTML code is geladen in plaats van andersom. Omdat HTML de basis is van je website is het (indien mogelijk) beter om dit eerst te laden.

Met LiteSpeed Cache heb je twee verschillende opties.

  • Uitgesteld: Javascript wordt uitgevoerd zodra de HTML klaar is met laden.
  • Vertraagd: Javascript wordt pas uitgevoerd zodra er gebruikersactiviteit wordt gedetecteerd (zoals een muisbeweging).

Beide opties verbeteren de laadtijd van je website aanzienlijk. Het is aan jou om goed te testen welke het best werkt qua gebruiksvriendelijkheid.

Een alternatief voor LiteSpeed Cache is in dit geval Async Javasript.

Stap 6. Optimaliseer je afbeeldingen

Afbeeldingen zijn vaak de reden dat een webpagina niet snel laadt. Vaak heeft dat de volgende redenen:

  • Ze hebben een verkeerd bestandstype
  • Ze hebben een te groot formaat
  • Ze zijn niet gecomprimeerd
  • Alle afbeeldingen worden direct ingeladen

Eerder heb ik al een uitgebreid blog geschreven over het optimaliseren van je afbeeldingen voor SEO.

Stap 7. Laad Google Fonts lokaal in

Veel WordPress websites maken gebruik van Google Fonts. Google Fonts is een enorme bibliotheek aan fonts die je gratis kunt gebruiken. Inmiddels zijn Google Fonts bij elkaar al meer dan 60 biljoen keer vertoont!

Enkele bekende Google Fonts zijn bijvoorbeeld Open Sans, Roboto en Lato.

De meeste WordPress thema’s geven je standaard de mogelijkheid om hier gebruik van te maken.

Al deze fonts staan op de server van Google. Zodra er een bezoeker op je website komt krijgt zijn of haar webbrowser de instructie om de font vanaf Google te downloaden.

Dit kost hoe dan ook extra tijd en daarnaast ben je ook nog eens afhankelijk van een externe server.

Wat veel mensen niet weten is dat het ook mogelijk is om de fonts lokaal op je eigen server te installeren. Op deze manier kunnen ze direct ingeladen worden, wat weer ten goede komt aan de snelheid van je WordPress website.

Deze mogelijkheid zit bijvoorbeeld standaard in het Blocksy Pro thema.

Een alternatief is de OMGF plugin.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd.