Voor bezoekers is niets zo vervelend als een trage website. Ook zoekmachines ‘straffen’ websites die traag laden steeds harder. Hierdoor krijgen ze minder bezoek van zoekmachines doorgestuurd en ranken ze lager op belangrijke zoekwoorden. Naast de irritaties bij gebruikers hebben zoekmachines belang bij snel ladende websites. Immers: indien pagina’s sneller laden dan kunnen bezoekers meer pagina’s bekijken en uiteindelijk meer advertenties te zien krijgen van Google.
Tip 1: Gebruik geen grote afbeeldingen en gebruik compressie.
We zien het maar al te vaak: websites waar op het oog een kleine afbeelding staat. Als je de afbeelding bekijkt dan blijkt deze echter 3500×2500 pixels te zijn en enkele MB’s groot! De afbeelding wordt alleen kleiner getoond maar die MB’s moeten wel gedownload worden door iedere bezoeker.
Zorg ervoor dat plaatjes zo groot zijn als dat je ze wilt tonen op de website. Snij deze bij in bijvoorbeeld Photoshop tot een acceptabel formaat. Maak de plaatjes maximaal 150Kb zijn maar kleiner is beter.
In foto’s zit doorgaans veel meer informatie dan nodig. Ze zijn immers bedoeld om op groot formaat te bekijken op desktops en retina schermen. Voor een website is al deze kleurinformatie en mate van detail niet nodig. het is daarom raadzaam om afbeeldingen te comprimeren. Hierbij worden de afbeeldingen kleiner gemaakt door op subtiele wijze detail uit de foto te halen zonder dat dit direct opvalt.
TinyPNG is een tool die afbeeldingen kan comprimeren. Dit kan handmatig maar TinyPNG is ook te integreren in WordPress zodat alle bestaande en nieuwe afbeeldingen automagisch verkleind worden.
Tip 2: Zet server-side caching in
Het kost een webserver veel rekenkracht om een pagina bij een gebruiker op zijn of haar scherm te tonen. Voordat een browser er iets mee kan moet de pagina in HTML gegenereerd worden. Dit gebeurt met behulp van een scripttaal zoals PHP.
Dit gebeurt er normaal als een webserver een pagina voor een bezoeker genereert:
Met cache sla je de gegenereerde HTML-pagina op zodat de webserver niet onnodig belast wordt. De eerste keer dat een bezoeker de pagina bekijkt dan zal de server alle stappen uit moeten voeren. Als de pagina nogmaals bekeken wordt dan hoeft er nog maar weinig te gebeuren:
Uiteindelijk krijg je een snellere performance en kun je meer bezoekers aan zonder dat je aan de limieten van je server of webhostingpakket loopt. Er zijn diverse caching plugins voor WordPress maar je kunt ook gebruik maken van bijvoorbeeld Varnish cache.
Tip 3: Gebruik cache-preloading
Server-side caching is mooi maar je zit altijd met die eerste pageview als de cache verlopen is. Voor deze gebruiker duurt het langer dan dat deze pagina uit cache geserveerd wordt. Deze gebruiker kan ook een zoekmachine zijn en deze tragere pageview interpreteren als langzaam wat weer niet goed is voor je rankings.
Om dit op te lossen kun je de cache preloaden. Hiermee zorg je ervoor dat alle pagina’s geregeld aangeroepen worden zodat ze in de cache worden opgenomen. Op deze manier serveer je bezoekers en zoekmachines altijd pagina’s uit de snellere cache. Dit wordt ook wel ‘warm caching’ genoemd.
Tip 4: Gebruik browser cache
Met caching op de webserver voorkom je niet dat er onnodig afbeeldingen, HTML, CSS etc vanaf de webserver naar de bezoeker verstuurd worden. Dezelfde scripts en afbeeldingen kunnen op meerdere plaatsen in een website geladen worden. Het is dan ook niet zinvol om keer op keer dezelfde elementen te laden.
Je kunt browsers instructie geven om bepaalde (typen) bestanden eens in ze zoveel tijd op te halen. Dit is in te stellen in een caching plugin zoals W3 Totalcache en WP Rocket maar het kan ook in een .htaccess file. Hier kun je de expiration-headers instellen. Bijvoorbeeld:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 7 days"
</IfModule>
## EXPIRES CACHING ##Let op: als je vaak wijzigingen aan je site doorvoert dan kun je beter een kortere expiratietijd gebruiken. Wijzigingen zijn namelijk niet direct zichtbaar omdat browsers pas een nieuwe versie op gaan halen als de expiratietijd verstreken is. Wijzigingen zijn in dat geval niet zichtbaar totdat de expiratietijd verstreken is.
Tip 5: Gebruik minify en combine voor Javascript en CSS
CSS en Javascript bestanden kunnen erg groot zijn. Dit komt doordat er veel ‘loze ruime’ in zit zoals commentaren, spaties en enters. Door deze overhead eruit te halen kun je aanzienlijk besparen in het aantal kilobytes van CSS en .js bestanden.
CSS en Javascript kunnen ook gecombineerd worden tot 1 bestand. Dit scheelt in het aantal connecties dat een client naar een webserver moet maken en maakt alles sneller en efficiënter.
Let op: Minify en combine gaan niet altijd goed. Het kan zijn dat de website hiermee niet meer goed functioneert. Controleer altijd of alles nog goed werkt als je combine en minify toepast!
Tip 6: Unobtrusive laden van Javascript en CSS
Behalve HTML worden er ook veel Javascript- en CSS bestanden geladen. Deze worden doorgaans bovenaan de pagina geladen. Hierdoor duurt het langer voordat de bezoeker de pagina op zijn of haar scherm ziet staan.
Dit kun je oplossen door deze bestanden lager (of onderin) de pagina te laden. Dit heet ook wel ‘unobtrusive’ of ‘niet hinderend’ laden van scripts. Scripts zullen dan pas laden als alle content op het scherm staat.
Tip 7: Gebruik geen onnodige plugins
Dit is eigenlijk een beetje dooddoener maar toch zien we vaak bij websites dat er voor alles en nog wat plugins ingezet worden. Plugins zijn uiteraard noodzakelijk in veel gevallen maar alleen als het echt toegevoegde waarde heeft. Een plugin om je website bijvoorbeeld SSL-proof te maken zoals ‘Really simple SSL’ is niet echt nodig. Het is in dit geval beter om alle links in de site op https:// te zetten. Iedere plugin voegt wat toe aan de code. De website wordt met ieder stukje code weer zwaarder en dus trager.
Daarnaast hebben veel plugins veel secutity-issues. Met iedere plugin wordt de kans dat jouw website een keer gehacked wordt groter. Het is overigens een misverstand dat plugins die niet actief zijn niet misbruikt kunnen worden. Je plugincode staat op de webserver dus als er een exploit zit in deze plugin dan kan deze alsnog misbruikt worden.
Tot slot
Voor al onze klanten maken wij gebruik van WP Rocket om de websites op snelheid te optimaliseren. Met deze WordPress plugin kun je o.a.
Het is altijd verstandig om caching in te zetten via bijvoorbeeld WP Rocket maar er zijn talloze andere plugins te vinden om jouw website sneller te maken zoals W3 Totalcache en WP Supercache.
Ook een snelle website laten bouwen? Neem dan contact met ons op.
