Onlangs werd mij gevraagd of ik een WordPress website wilde verbeteren zodat de laadtijd een stuk korter zou worden. In de eerste meting duurde het 7 seconden wat veel te lang is. Tijdens het laden van de website worden ongeveer 150 verzoeken gedaan naar afbeeldingen, javascripst, css bestanden en externe bronnen zoals Instagram en Facebook.
De website is een one page scroll website wat inhoud dat alle informatie op een pagina getoond wordt. In oudere versies van websites wordt de informatie verdeeld over meerdere pagina’s waardoor ook het aantal verzoeken wordt verdeeld. Van de 150 verzoeken gaat het in meer dan de helft om afbeeldingen die ingeladen moeten worden voor de fotogalerij.
Na het toepassen van de onderstaande stappen was de laadtijd verlaagd naar ongeveer 1 seconde. In onderstaand stappenplan worden een aantal plugins geïnstalleerd. Aangezien instellingen per website verschillen, afhankelijk van reeds geïnstalleerde thema’s en plugins, laat ik het instellen buiten beschouwing. Probeer diverse instellingen uit en test deze om te zien wat de kortste laadtijd oplevert.
De testen zijn uitgevoerd met :
- Google Chrome met geopende developer toolbar open
- Firefox met geopende Firebug toolbar
- Google Insights Pagespeed analyse tool
Stappen:
- Maak een 0 meting voor de laadtijd met bijvoorbeeld Firefox of Chrome
hiermee bepaal je de huidige laadtijd, doe dit een aantal keren achter elkaar - Maak een back-up van de bestanden en database
een testomgeving gebruiken is nog beter - Controleer of WordPress bijgewerkt moet worden
bijvoorbeeld naar versie 4.8 - Loop alle plugins/thema’s na en controleer of ze nog nodig zijn
overbodige plugins/thema’s verwijder je uit je WordPress installatie - Werk alle plugins/thema’s bij zodat je de laatste verbeteringen gebruikt
lees altijd de changelog, een verbetering kan ook iets wat werkt slopen - Controleer of de website nog steeds juist functioneert, testen blijft belangrijk
open je developer toolbar en klik door je website en test pagina’s - Installeer de plugin WP Smush It en voer deze uit
deze plugin verkleint de omvang van alle afbeeldingen en dit scheelt laadtijd - Installeer de plugin Autoptimize en stel deze in
deze plugin voegt JS en CSS bestanden samen waardoor er minder verzoeken zijn
ook wordt HTML code geoptimaliseerd zodat deze sneller geladen kan worden - Installeer de plugin WP Supercache en stel deze in
deze plugin genereert cache pagina’s zodat deze pure HTML bevatten
normaal moet PHP code uitgevoerd worden en data uit een database opgehaald worden - Voeg de regels onder het kopje “Cache regels .htaccess bestand:” toe aan je .htaccess bestand
deze regels zorgen ervoor dat afbeeldingen pas na 1 jaar weer opnieuw worden opgehaald
belangrijke tip is om bij het veranderen van de afbeelding ook de bestandsnaam aan te passen
Testen, testen en testen:
Je hebt een aantal ingrijpende wijzigingen doorgevoerd aan jouw website. Daarom is het van belang om de hele website uitgebreid te testen in de browser. Maak gebruik van een developer toolbar om fouten te zien. Doordat er gebruik wordt gemaakt van compresie en cachen kan het voorkomen dat er fouten zijn ontstaan die er eerder niet waren. Dit kan komen omdat bestanden in een andere volgorde worden ingeladen of door comprimeren achterwege gelaten worden.
Werkt de website nog goed, meet dan de laadtijd. Herhaal dit een aantal keren. Nog niet tevreden? Probeer dan andere instellingen voor de plugins uit stap 7, 8 en 9.
Cache regels .htaccess bestand:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##