Tips om je WordPress website sneller te maken

Het is onderzocht en bewezen dat websitebezoekers een steeds kortere aandachtsboog hebben. 40% van je bezoekers zal na een laadtijd van 3 seconden of meer al zijn afgehaakt. Amazon heeft 2% meer conversie kunnen bekomen door hun website maar 1 seconde sneller te maken. Hoe sneller je website, hoe beter dus.

Door deze tips op te volgen, kan je stapje per stapje je website sneller maken. We beginnen bij het begin, namelijk met tips die je altijd kunt toepassen. Haal het maximale uit je website door zo veel mogelijk tips op te volgen.

Websitebeheer

Verwijder onnodige plugins

Waarom zou je je website vol plugins zetten die onnodig zijn? Iedere plugin die in je website installeert zorgt er voor dat het laden van je website iets langer duurt.

Wat moet je doen: zoek naar onnodige plugings en verwijder ze. Het is belangrijk dat je deze niet alleen deactiveert, maar dat je ze ook echt verwijdert.

Gebruik caching

Door caching kan je je website gegevens opslaan op een andere plaats zodat je een snellere toegang tot data kan krijgen. Je browser moet alleen maar de kopie uit de cache laden. Dit gebeurt heel snel. Zorg wel dat de code van je website goed is en zonder fouten, anders heb je niet veel aan caching.

Wat moet je doen: Caching gebeurt in 3 lagen. Voor de eerste 2 lagen kan je W3 Total Cache, WP Rocket of WP Super Cach gebruiken.

Gebruik WTTP/2

WTTP/2 zal het laden van je website via een beveiligde verbinding nog sneller maken. Om van deze nieuwe techniek gebruik te maken, moeten al je pagina’s via een beveiligde HTTPS-verbinding geladen kunnen worden.

Wat moet je doen: Je webhost moet deze techniek aanbieden. Bij sommige webhosts zoals Savvii, is HTTP/2 standaard al ingesteld. Vraag je webhost welke HTTP-versie zij aanbieden.

Reduceer de grootte van je pagina

Het is de bedoeling dat je paginagrootte zo klein mogelijk is. Een gemiddelde webpagina is 2,3 MB groot. Dit is redelijk veel dat je browser moet laden bij gebruikers die voor de eerste keer op je website komen.

Wat moet je doen: afbeeldingen nemen ontzettend veel grootte in. Je kan dus beginnen met minder afbeeldingen op je website te plaatsen en de onnodige afbeeldingen te verwijderen.  Tegenwoordig is de slogan ‘hoe minder hoe beter’ van toepassing. Navigatie is niet noodzakelijk voor je website. Verwijder alles wat niet noodzakelijk is.

Maak je de grootte van je cookies zo klein mogelijk

Alle informatie die je cookies verzamelen, moeten bij ieder request worden meegestuurd. Dit wil zeggen dat al deze informatie moet worden geladen en gelezen door de browser.

Wat moet je doen: maak de grootte van je cookie maximum 4 kilobyte. Hiermee heb je nog steeds veel ruimte. Maak gebruik van lokale opslag als je informatie bij een bezoeker wil opslaan.

Houd je software up-to-date

Net zoals alle software, krijgt WordPress ook regelmatig updates. Met bijna elke update wordt de code weer een beetje geoptimaliseerd, waardoor je website sneller laadt. Je moet naast de WordPress-core ook je plugins regelmatig updaten.

Wat moet je doen: Update altijd zo snel mogelijk je infrastructuur. Zo maak je meteen gebruik van de laatste versies van WordPress en plugins.

Gebruik Google Accelerated Mobile Pages (AMP)

AMP zorgt ervoor dat het laden van mobiele pagina’s sneller verloopt. Dit is belangrijk aangezien mobiel zijn steeds belangrijker wordt. Google bewaart al je pagina’s in haar cache. Je browser moet dus alleen maar de kopie laden in de cache van Google.

Wat moet je doen: Je kan eenvoudig de AMP for WordPress plugin installeren. Zo wordt er een AMP-variant van je website gemaakt, en dit gebeurt automatisch.

Gebruik goede hosting

De laadtijd van je website heeft ook te maken met de hosting die je hebt gekozen voor je website. Als je een kleine website hebt, kan je je hosting delen: een shared hosting. Wanneer je een website hebt met veel ingewikkelde codes of een website die heel veel wordt bezocht, kan je best een VPS gebruiken. Zo zijn alle resources van die server enkel en alleen voor jouw website. Zo kan je website beter presteren.

Wat moet je doen: ga op zoek naar een goede hosting. Zorg dat je een breed spectrum aan shared en VPS pakketten kan krijgen bij de hosting die je kiest.

Verdeel comments over meerdere pagina’s

Het is goed dat er veel lezers commentaar geven op je artikelen. Dit wil zeggen dat je content goed presteert en aandacht kan trekken. Er is wel een nadeel aan veel comments bij je artikelen: je pagina’s moeten hierdoor meer data laden, wat betekent dat het langer zal duren eer de pagina geladen is. De manier om dit nadeel weg te werken, is door je comments te verdelen over meerdere pagina’s.

Wat moet je doen: Ga naar je WordPress admin-omgeving. In Instellingen -> Reacties, vink je ‘Reacties over meerdere pagina’s verdelen’ aan. Daarna selecteer je hoeveel reacties per pagina je wilt tonen en hoe je deze gesorteerd wilt zien.

HTML/CSS/JavaScript

Head

In deze sectie staat belangrijke informatie voor je browser. Deze informatie moet als eerste worden opgepakt om het laden van je pagina mogelijk te maken.

Plaats alle CSS-bronnen in de head

Om je website snellere laadresultaten te geven, moeten alle CSS-bronnen zo snel mogelijk worden aangegeven in het HTML-document. De browser ontdekt de <link> tags dan zo snel mogelijk en stuurt de CSS-aanvraag meteen uit.

Wat moet je doen: Wijzig simpelweg gewoon de volgorde van de HTML-code. Zet alle CSS-informatie in het begin, plaats daar achter pas de overige code.

Stel cache-headers in

Alle bestanden met een cache header, kunnen hierin zien hoe lang de browser de bestanden mag bewaren voordat ze opnieuw moeten worden gedownload.

Wat moet je doen: gebruik Cache-Control: max-age=31536000  in de configuratie van je webserver. Het is belangrijk dat je eerst een onderscheid maakt tussen statische en dynamische content. Het is beter dat je dynamische content kort of zelfs helemaal niet cachet.

Voorkom redirects

Een website met redirects zal veel trager laden dan eentje zonder. Dit is vooral zo het geval bij mobiele sites.

Wat moet je doen: probeer een 301- of 302-redirect op serverniveau te gebruiken als je bepaalde redirects echt niet kan vermijden.

HTML

Check je links

Als je links op je website hebt staan die niet meer werken met een externe tool, zorgt dit voor een slechtere gebruikerservaring. Zorg dus dat je al je broken links verwijdert.

Wat moet je doen: scan je site af en toe met een van deze tools:

• ScreamingFrog
• Brokenlinkcheck

Richt error-pagina’s in

Zorg er voor dat je pagina’s hebt waar mensen op uitkomen bij foutmeldingen; error-pagina’s.

Wat moet je doen: In WordPress is het zo ingesteld dat je bezoeker standaard naar 404-pagina wordt gestuurd wanneer hij een pagina wou bezoeken die niet gevonden is. Je kan zelf deze pagina een andere opmaak of inhoud geven.

Test je site met Adblockers

Omdat meer en meer mensen gebruik maken van Adblocker, is het belangrijk dat je website nog kan functioneren bij iemand die Adblocker gebruikt. Er moet nog genavigeerd kunnen worden, alle content moet nog zichtbaar zijn… Je website kan trager worden als bepaalde content geblokkeerd is maar vanwege een script continu wordt ingeladen.

Wat moet je doen: test je eigen website door Adblocker te installeren. Zo zie je zelf of alles goed werkt.

Minimaliseer HTML

Hoe minder overbodige karakters er in je HTML staan, hoe sneller deze wordt ingeladen. Vermijd dus witregels, onnodige spaties, enzoverder.

Wat moet je doen: je kan gebruik maken van tools zoals minifier of WP Rocket.

Host geen video in je eigen site

Omdat video’s steeds populairder worden, willen bedrijven hier gebruik van maken door video’s op hun website te plaatsen. Het hosten van video’s kost je helaas veel bandbreedte en het vertraagt je website.

Wat moet je doen: je kan het best gebruiken van video-platformen die er te vinden zijn. Enkele voorbeelden hiervan zijn YouTube, Vimeo of Dailymotion.

CSS

Een goede opmaak is belangrijk. De styling van je website staat in je CSS bestanden. Doordat websites vaak met veel verschillende stijlen en onderdelen werken en steeds groter worden, worden de CSS-bestanden ook steeds groter. Je kan veel winst behalen door simpelweg je CSS-bestanden te optimaliseren.

CSS minimalisatie

Je kan, net zoals bij HTML, je CSS-bestanden kleiner maken. Je website kan sneller worden geladen als je je bestanden verkleint en overbodige informatie weglaat.

Wat moet je doen: denk na of alle codes die in je CSS staan, voor elke pagina mee gestuurd moeten worden. Veel code is overbodig of oud. Gebruik daarna de tool CSS Compressor. Hiermee worden de laatste overbodige stukjes code weggehaald.

Gebruik tree-shaking

Haal alle losse code die niet verbonden is aan een pagina, uit je bestand. Zo hou je alleen de nuttige onderdelen over die van toepassing zijn op je pagina.

Wat moet je doen: kijk naar het Chrome Coverage rapport om te zien hoeveel procent code niet wordt gebruikt. Als er veel code ongebruikt is, kan je gebruik maken van JavaScripts tools zoals PurifyCSS of uncss. Met deze tools kan je makkelijk overbodige code verwijderen.

Gebruik critical path rendering

Zonder opmaak, wordt je website het allersnelst geladen. Helaas is dit niet gebruiksvriendelijk. Door CSS moeten websitebezoekers wachten tot deze geladen is. Je moet niet álle CSS in laden om bruikbare informatie op het scherm te tonen. Zo kan je websitebezoeker sneller bruikbare informatie zien.

Wat moet je doen: Critical path rendering laat de informatie die de gebruiker direct ziet en dus bovenaan de pagina staat, als eerste laden. Gebruik lazy loading voor je afbeeldingen. Zorg er ook voor dat de CSS die voor een bepaalde gebruiker minder belangrijk is later wordt ingeladen door middel van non-blocking CSS. Of gebruik de preload directive.

Gebruik de preload directive

Door Preload zullen browsers bepaalde onderdelen vast laden. Andere onderdelen van de website komen er aan die deze nodig hebben en moeten hier dan niet meer op wachten.

Wat moet je doen: gebruik <preload> in de referentielink van je stylesheet. Voeg met <onload> functie toe bij welke stylesheet de preload hoort en de browser begint vast met laden.

Javascript

Scripts vragen veel resources van de server. Ze zorgen dus voor vertraging van de laadtijd. Je kan op veel slimme manieren met Javascript omgaan.

Non-blocking Javascript

Niet-essentiële scripts moeten worden uitgesteld. Zo wordt moet de browser een kleinere hoeveelheid werk uitvoeren om de initiële pagina weer te geven.

Wat moet je doen: per script is het anders wat wel werkt en wat niet. Enkele tips:

• Gebruik <script defer src=”script.js”></script>in de head van je HTML. Hiermee wordt het script tijdens het opbouwen van de pagina geladen, maar pas uitgevoerd wanneer het opbouwen klaar is.
• Maak je eigen script waarin je de code opdracht geeft om de .js te laden nadat je hele pagina geladen is.

Reduceer en combineer externe scripts

Zorg er voor dat je alleen maar scripts hebt draaien die echt nodig zijn voor de gebruiksvriendelijkheid van je website. Hou er ook rekening mee dat niet alle scripts apart moeten worden geladen om te kunnen werken.  Hoe minder externe scripts er draaien, hoe sneller je site werkt.

Wat moet je doen: kopieer meerdere bestanden in één bestand. Controleer de Developers Tool Console van je browser om te zien of alles werkt zoals het hoort.

Afbeeldingen

Wat veel mensen vaak over het hoofd zien maar wat misschien wel de meeste snelheid oplevert: afbeeldingen. Vaak zijn ze onnodig groot, van het verkeerde formaat of type, of worden ze foutief ingeladen.

De juiste bestandstypes

Er zijn veel verschillende bestandstypes voor afbeeldingen. Voor elke toepassing van afbeeldingen moet je weten of dit de juiste is. Enkele bestandtypes:

• GIF: Voor eenvoudige online afbeeldingen zoals logo’s in slechts één of twee kleuren. Transparantie mogelijk.
• PNG: Voor simpele foto’s of plaatjes met kleurverloop. Deze afbeeldingen hebben een betere kwaliteit dat GIF. Transparantie mogelijk.
• JPEG: Voor afbeeldingen en foto’s met veel diepte, schaduwen, kleuren en overloopjes. Geen transparantie mogelijk.
• WebP: Wordt alleen ondersteund door Google Chrome. Verbeterde versie van JPEG.

Wat moet je doen: denk goed na vooraleer je een afbeelding gebruikt. Weet welke transparantie je nodig hebt, wat het type afbeelding is etc.

Lazy loading

Wanneer je een afbeelding wilt laden, kijkt de browser waar de afbeelding staat en start met het laden van de afbeelding. Hoe meer afbeeldingen, hoe meer de browser moet inladen en dus hoe langer de laadtijd is. Ookal zijn dit 100 foto’s die de gebruiker niet eens zal zien, moeten deze toch eerst geladen zijn. Door Lazy loading zal er eerst een tijdelijke, kleine afbeelding worden geladen. De echte afbeelding wordt in de cache opgeslagen. Pas wanneer de originele afbeelding getoond moet gaan worden haalt de browser de afbeelding uit de cache. Je zorgt er op deze manier dus voor dat afbeeldingen die niet niet op het scherm getoond worden, pas laden als je bezoeker er naar toe scrollt.

Wat moet je doen:

• Voor WordPress is Infinite Scroll beschikbaar. Eigenlijk lost deze functie het probleem anders op, door middel van paginering, maar het geeft wel hetzelfde effect
• Een lazyloader JavaScript met goede responsive image support

Gebruik een Content Delivery Network (CDN)

Een Content Delivery Network slaat je afbeeldingen op verschillende plaatsen in de wereld op. Zo kunnen gebruikers over de hele wereld snel bij de content. Vooral wanneer je grotere afbeeldingen, video’s of veel verkeer van een bepaalde plek in de wereld krijgt is het slim om een CDN te gebruiken.

Wat moet je doen:

1. Kies een van de vele CDN’s
2. Kies welke bestanden door het CDN moeten worden gehost
3. Verplaats je bestanden naar het CDN. Voor WordPress leveren de CDN’s vaak een plugin.
4. Bepaal hoe de nieuwe benaming van je URL’s moet zijn.
5. Zorg ervoor dat je bestanden op de juiste manier worden aangeroepen. Je kan hiervoor een WordPress plugin gebruiken
6. Test of alles werkt zoals het hoort

PHP- en databaseoptimalisatie

PHP

Voorkom onnodige kopies van je variabelen.

Je code is mooier wanneer je vooraf bepaalde variabelen gebruikte met kortere namen. Toch vraagt  elke toegevoegde variabele server-geheugen dat niet gebruikt kan worden voor andere processen. Gebruik ook elke variabele één keer.

Gebruik geen punten in een “echo” functie

Wanneer je de “echo”-functie gebruikt met punten daarin, gaat PHP de strings samenvoegen voordat deze naar de output gaan. Dit kost performance. Gebruik komma’s in plaats van haakjes.

Gebruik geen dubbele komma’s in lange strings zonder variabelen

Wanneer je strings bekendmaakt met dubbele komma’s, heeft PHP extra processorkracht nodig om eventuele variabelen in de string te zoeken. Losse strings samenvoegen werkt ook met enkele komma’s. De strings worden daardoor sneller verwerkt dan met dubbele komma’s.

Database

Sommige databases zijn duizenden rijen en kolommen groot. Het is dus logisch dat een goed geoptimaliseerde database sneller resultaten teruggeeft, waardoor een website sneller informatie op scherm laat zien. Een aantal tips:

Schoon je database regelmatig op

Je database kan veel geclusterde data bevatten. Daarom is het belangrijk regelmatig je database op te schonen en opnieuw te indexeren. Daardoor hoeft de server minder processorkracht te gebruiken. Dit is eenvoudig te doen met phpMyAdmin. Selecteer al je tabellen door Check all aan te klikken en daarna in de ‘With Selected’ lijst Optimize table aan te vinken.

Stel een limiet aan revisies

Met elke revisie van één van je berichten, genereer je extra ruis in je database. Bijna nooit het je meerdere revisies van je berichten nodig. Om het aantal revisies te limiteren kun je een plugin inzetten, of nog beter je wp-config.php aanpassen. Voeg de regel toe om het aantal revisies op maximaal drie te zetten.