Snelheidstips voor WordPress
In een eerder artikel schreef ik al over Lighthouse. Een tool waarmee je diverse aspecten van je website kan meten, waaronder de performance.
Wat je vaak ziet is dat WordPress websites een lage score krijgen. Soms wel zo laag als 1 punt van de 100. Een ‘kale’ WordPress zal vrij hoog scoren, maar na het installeren van wat plug-ins en het toevoegen van afbeeldingen daalt de score vaak al snel. En dat is een probleem, want uw bezoeker heeft er ‘last’ van omdat uw website trager laad dan nodig is.
Ook Google geeft de voorkeur aan websites met een hoge performance score. Alle reden dus om eens te kijken hoe uw website scoort. Hoe? Lees mijn eerdere artikel en kom daarna hier terug.
Op moment van schrijven heb ik met mijn WordPress website de volgende score bereikt:
Hieronder geef ik enkele tips over hoe dit bereikt kan worden. Let wel op, niet iedere website is gelijk. Dus bij de één werkt het beter dan bij de ander. Maar het is het proberen waard toch?
De tips van Lighthouse
Nadat u uw website gescand heeft krijgt u een score. Daaronder krijgt u een aantal aanbevelingen. Dit is voor iedere website anders, maar het kan iets zijn als:
Serve images in next-gen formats
Hier kunnen wij kort over zijn. Deze negeren wij even. Het advies is om next-gen afbeeldingen te gebruiken. Punt is alleen dat (nog) niet alle browsers deze nieuwe formaten ondersteunen. Daarnaast wordt deze score vaak al beter door andere optimalisaties die wij hierna behandelen.
Enable text compression
Met tekst compressie wordt alle code gecomprimeerd die naar de browser gestuurd wordt. Met andere woorden, de hoeveelheid data wordt kleiner en kan dus sneller naar de browser gestuurd worden. Deze compressie is gzip. Jouw webhosting moet dat wel ondersteunen, maar dat is vaak het geval. Om dit te activeren is een klein beetje technische kennis vereist. Let op! Volg onderstaande stappen alleen als u weet wat u doet! Een foutje kan uw website onbereikbaar maken.
Maak via FTP of SSH verbinding met jouw website en ga naar de root folder van jouw website. Open vervolgens het bestand .htaccess in een tekst of code editor. Voeg in de .htaccess onder de regel “# END WordPress” de volgende code toe:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>En als je hier dan toch bezig bent, voeg daaronder ook de volgende code toe aan het .htaccess bestand:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 31557600 seconds"
ExpiresByType image/gif "access plus 31557600 seconds"
ExpiresByType image/jpeg "access plus 31557600 seconds"
ExpiresByType image/png "access plus 31557600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 86400 seconds"
ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>Hiermee worden meteen de afbeeldingen, css en JavaScript bestanden goed in de cache opgenomen, zodat de website bij verdere bezoeken voor die bezoeker nog sneller laad.
Sla daarna het bestand op en zorg dat deze ge-upload wordt. Gzip compressie in nu geactiveerd. In Lighthouse zul je de melding zien verdwijnen en de score gaat omhoog.
Properly size images
Hier is vaak veel winst te halen. Het gaat erom dat er te grote afbeeldingen geladen worden voor de plek waar de afbeelding op je website getoond wordt. Bijvoorbeeld een afbeelding van 1280 pixels breed, terwijl die afbeelding op die plek van jouw pagina nooit groter dan 400 pixels breed wordt. Een afbeelding van 400 pixels is ruim 3 keer kleiner dan die van 1280 pixels. En dus ook 3 keer kleiner in Megabytes.
Dus waarom zou je de bezoeker belasten met een afbeelding van 3 Mb als die ook 1 Mb kan zijn. Zeker als de pagina op een mobiel met een data abonnement geladen wordt. Laat staan dat je meerdere van dergelijke afbeeldingen op je website hebt staan. Lees mijn artikel “Afbeeldingen gebruiken in WordPress” voor uitleg over hoe je dit kan oplossen en voorkomen. Je Lighthouse score zal daarna een sprong maken!
Remove unused CSS
CSS is vooral verantwoordelijk voor de vormgeving van uw website. Dit staat vaak in aparte bestanden die bij het laden van de webpagina op de achtergrond ook geladen moeten worden. Deze bestanden bevatten alle CSS die nodig is voor het weergeven van alle pagina’s op uw website. Maar niet alle CSS wordt op iedere pagina gebruikt.
Tenzij je een website hebt die geheel op maat is gemaakt, is dit vaak moeilijk helemaal op te lossen. Zeker wanneer je een Content Management Systeem gebruikt, zoals WordPress er één van is. Toch kun je de score op dit punt verbeteren.
Installeer hiervoor om te beginnen de plug-in Speed Booster Pack. Deze plugin heb je ook nodig voor andere aanbevelingen die hierna nog behandeld worden.
Activeer de plug-in en in wp-admin zie je links in het menu een link met de naam “Speed Booster” verschijnen. Klik hierop en je ziet een “Options” pagina. Pas vervolgens de instellingen naar wens aan. Hieronder een voorbeeld configuratie, maar probeer vooral wat voor jouw website het beste is:
Kies vervolgens voor het tabblad “Advanced” en scroll naar beneden tot je de sectie “CSS Optimization” ziet. Stel deze in volgens onderstaand voorbeeld:
Move all inlined CSS into the footer staat uit. Reden is dat met deze instelling de weergave van uw pagina soms enkele milliseconden zonder opmaak getoond wordt tijdens het laden. Immers, ze worden pas laat geladen. Ik vind dat persoonlijk storend, dus heb ik deze uit gezet.
Sla de instellingen op en draai een nieuwe Lighthouse test. Je zal zien dat de score weer verder omhoog gaat. Als je website er ineens onverwacht anders (en dus niet goed) uitziet, ga dan terug en schakel deze optie dan uit. Blijkbaar zijn er dan plug-ins op uw website actief die hier niet mee om kunnen gaan. Gevorderden kunnen ervoor kiezen om vast te stellen om welk CSS bestand het precies gaat en deze specifiek uit te sluiten om vervolgens de bovenstaande instellingen weer te activeren. Maar daar ga ik nu niet verder op in.
Defer offscreen images
Uw webpagina’s bevatten vaak meerdere afbeeldingen. Toch zijn sommige afbeeldingen pas zichtbaar wanneer uw bezoeker naar beneden scrolt. Het is niet nodig dat deze bij het openen van de pagina direct geladen worden. Hiermee bespaar je veel initiële laadtijd van je webpagina en krijgt je bezoeker dus sneller de pagina te zien.
Om dit makkelijk mogelijk te maken, adviseren wij de plug-in Lazy Load by WP Rocket. Installeer en activeer de plugin. Ga daarna naar de instellingen van deze plugin en vink de volgende vakjes aan:
Controleer hierna uw website of alle afbeeldingen nog wel goed geladen worden. Er kunnen heel soms enkele problemen optreden. Die zijn op te lossen, maar niet zonder technische kennis en daar ga ik nu niet verder op in. Maar vaak gaat het helemaal goed. Voer daarna een audit van Lighthouse uit en zie je score een volgende sprong omhoog maken.
Eliminate render-blocking resources en Minify JavaScript
Net als de eerder behandelde “Remove unused CSS” is dit onderdeel weer iets lastiger te verhelpen, maar wel mogelijk. Deze resources zijn de externe CSS en JavaScript bestanden. Het komt erop neer dat deze bestanden op de achtergrond eerst helemaal geladen moeten worden voordat het eerste zichtbare deel van de webpagina aan de bezoeker getoond kan worden. Dus worden ook alle bestanden die nog helemaal niet relevant zijn voor dat deel van de pagina ook eerst helemaal geladen voordat de pagina getoond wordt.
Met de instellingen die reeds voor CSS in Speed Booster gezet zijn, zullen er geen tot weinig CSS bestanden in de lijst staan die “render-blocking” zijn. Maar de JavaScript bestanden kunnen we nog verbeteren. We gaan hiervoor weer terug naar de instellingen van de plug-in Speed Booster Pack. Ga weer naar het tabblad “Advanced” en scrol nu naar beneden tot je de sectie “JavaScript Optimization” ziet. Stel deze als volgt in:
Sla de instellingen op en controleer of je website nog goed werkt. Ook hiervoor geldt dat het problemen kan geven in combinatie met sommige andere plug-ins die u op uw website gebruikt.
Tot slot
Dit is een selectie van de belangrijkste aanbevelingen die je vanuit Lighthouse kunt krijgen en hoe je ze op kan lossen. Hulp nodig? Of vragen over andere aanbevelingen die jij voor jouw website krijgt? Neem dan vrijblijvend contact met ons op.
Oh ja, benieuwd hoe deze pagina scoort? Zie hier het resultaat:
