Laadtijd website van 7 seconden verlagen naar 1

16 juni 2017 om 08:34

Laadtijd van een WordPress website verlagen.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 :

Stappen:

  1. 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
  2. Maak een back-up van de bestanden en database
    een testomgeving gebruiken is nog beter
  3. Controleer of WordPress bijgewerkt moet worden
    bijvoorbeeld naar versie 4.8
  4. Loop alle plugins/thema’s na en controleer of ze nog nodig zijn
    overbodige plugins/thema’s verwijder je uit je WordPress installatie
  5. Werk alle plugins/thema’s bij zodat je de laatste verbeteringen gebruikt
    lees altijd de changelog, een verbetering kan ook iets wat werkt slopen
  6. Controleer of de website nog steeds juist functioneert, testen blijft belangrijk
    open je developer toolbar en klik door je website en test pagina’s
  7. Installeer de plugin WP Smush It en voer deze uit
    deze plugin verkleint de omvang van alle afbeeldingen en dit scheelt laadtijd
  8. 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
  9. 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
  10. 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 ##

Tweet about this on TwitterGoogle+Share on FacebookPrint this page