Google Page Speed: Tien tips om je WordPress website sneller te maken

Google Page Speed: Tien tips om je WordPress website sneller te maken

Google laat een hoop zaken meewegen in je zoekscore, je zoekscore die uiteindelijk bepaalt hoe hoog jouw pagina eindigt in de zoekresultaten. Een van die factoren is de snelheid waarmee de pagina in kwestie laadt, oftewel: de page speed. Hoe lager de laadtijd, hoe hoger je score bij Google Page Speed. De snelheid  is daarmee een essentieel onderdeel van de SEO (zoekmachine optimatlisatie) van je website en daarom geven we je in dit artikel een aantal tips waarmee je je WordPress website sneller kunt maken.

Inladen van Javascript splitsen

Met de doorbraak van jquery, responsive webdesign en het gebruik van dynamische sliders, is het gebruik van javascript in moderne WordPress websites flink toegenomen. Het inladen van (grote hoeveelheden) javascript kan echter een behoorlijke vertraging opleveren op je website. Probeer daarom zoveel mogelijk je javascript te splitsen in twee groepen: 1) Javascript die essentieel is voor het correct weergeven van je website, en 2) Javascript met andere functionaliteiten. Het inladen van javascript uit groep 1 doe je hoofdzakelijk in de <head> van de WordPress website. Meestal wordt dit geregeld door WordPress, plug-ins of onderdelen van je WordPress thema. Groep 2 laad je in door alle overige javascript te combineren tot 1 .js-bestand en die vlak voor de </body> pas toe te voegen aan je pagina. Google zelf adviseert onderstaande code daarvoor te gebruiken. Let op: de naam van en het pad naar de defer.js moeten wel kloppen, anders werkt het uiteraard niet.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Plaatjes optimaliseren

Je zult begrijpen dat wanneer je tig plaatjes van 1MB per stuk toont op je pagina, de laadtijd van de betreffende pagina enorm toeneemt. Zorg er daarom voor dat je plaatjes geoptimaliseerd en gecomprimeerd zijn voor het web. Dit doe je bijvooorbeeld door geen onnodig hoge resoluties te gebruiken en de bestandsgrootte onder de 200KB te houden. Bij deze optimalisatie kun je bijvoorbeeld JPEG Optimizer gebruiken.

Focus op content boven de vouw

Daarnaast is het verstandig om bij het gebruik van veel plaatjes te focussen op alles wat boven de vouw (above the fold) zichtbaar is. Een handig hulpmiddel hierbij is de jquery plugin Lazy Load die gratis te downloaden en te gebruiken is.

Cache, cache, cache!

Wie een pagina van een website opvraagt, krijgt een reactie van de webserver. De webserver vraagt aan WordPress waar hij de inhoud kan vinden en die inhoud is opgeslagen in een database. Om de pagina op je scherm te toveren, moet je webbrowser dus eerst via je webserver naar je database-server en weer terug. Bij iedere pagina begint dit proces weer opnieuw en dit zorgt ervoor dat je server(s) het erg druk hebben met afhandelen van opgevraagde inhoud. Het gebruik van cache is daarbij dé oplossing: een caching-systeem (zoals bijvoorbeeld WP Super Cache of W3 Total Cache) loopt je complete website langs en slaat al je inhoud op als statische pagina’s. Daardoor hoeft je webserver geen vragen meer te stellen aan je database server, maar in plaats daarvan stuurt ‘ie simpelweg de statische pagina terug. Het gebruik van cache is essentieel bij het snel inladen van pagina’s op je website.

Minify je cache

Dit klinkt misschien als abracadabra in de oren, maar het komt hier op neer: cache-bestanden bevatten veel witregels en -ruimte. Aangezien je in cache-bestanden geen aanpassingen hoeft te doen, kun je die witruimte net zo goed weglaten. Dit kan vaak verzorgd worden door je cache plug-in, die zal kijken naar onder meer je css-, html- en javascriptbestanden en zoveel mogelijk witruime verwijderen. Zo neemt je cache af in kilobytes en kan je pagina sneller getoond worden.

Maak gebruik van compressie

De webbrowser van jouw bezoekers moet een hoop werk verrichten wanneer een pagina ingeladen wordt. Zelfs wanneer je (zoals hierboven geadviseerd) cache gebruikt, moet niet alleen de pagina zelf worden opgevraagd, maar ook de gekoppelde javascript, plaatjes en stijlbestanden worden apart binnengehaald. Zou het niet handiger zijn als je webbrowser maar één enkel bestand hoeft op te vragen? Zeker! En dat kan door de inhoud van je website te comprimeren. Zie het als het zippen (inpakken) van een map vol bestanden op je computer: je downloadt één bestand en je computer pakt hem uit en knutselt de pagina’s daarna in elkaar. Dit scheelt vaak enorm veel in de laadtijd van een pagina en wordt door Google Page Speed gezien als een van de grootste performance boosts bij de zoektocht naar een snellere website. Let op: je web hosting omgeving moet deze manier van compressie wel ondersteunen. Check dus altijd even of de zogeheten gzip compression ingeschakeld is bij jouw webhoster, dit kun je doen door een php pagina te maken met de onderstaande code er in:

<?php phpinfo();?>

TIP: Verwijder deze test-pagina direct na het checken van je webserver, zo voorkom je dat anderen de configuratie van jouw website kunnen inzien.

Verwijder ongebruikte plug-ins

Het deactiveren en verwijderen van ongebruikte plug-ins wordt vaak vergeten en dat is erg jammer. Actieve plug-ins worden namelijk gewoon door WordPress ingeladen en zorgen voor extra werk voor je web- en databaseserver. Loop daarom regelmatig je plug-in lijst door en verwijder plug-ins die niet (meer) gebruikt worden. Dit kan zomaar de stille hoofdoorzaak van de vertraging op je website zijn.

Monitor je website

Blijf je website in de gaten houden, ook al is je Google Page Speed optimalisatie succesvol geweest. Doe regelmatig een check en kijk of je nog steeds dezelfde scores haalt in Google Page Speed. Websites worden altijd doorontwikkeld en bij die ontwikkeling hoort het in gebruik nemen van nieuwe plug-ins, meer javascript, meer stijlbestanden en meer downloadbare bestanden en bijlages. Wanneer je je website monitort en alles goed in de gaten houdt, voorkom je dat je oude problemen weer terugkomen.

Gebruik de Google Pagespeed Insights plug-in

De Google Pagespeed Insights plug-in is speciaal ontwikkeld om optimaal te integreren in een WordPress website. De plug-in geeft je een compleet overzicht van alle bottlenecks op je website en vertelt je hoe je deze kunt verhelpen. Je moet echter wel beschikken over een Google API key, maar deze is gratis op te vragen bij Google.   Google Page Speed alternatieven: yslow etc.

Optimalisatie Service

Mochten deze tips je niet (voldoende) geholpen hebben of mocht je niet over de tijd beschikken om de optimalisatie zelf uit te voeren, dan kun je bij esomnia aankloppen voor onze Optimalisatie Service. Meer info kun je opvragen door contact met ons op te nemen via onderstaande knop.

contact

Reacties

Contact

Stel me een vraag, boek een WordPress training, vraag een offerte op voor een WordPress website. Hieronder vind je alle info.

Contactgegevens

esomnia
t.a.v. Haiko Peters
André Voltenlaan 1
3541AG, Utrecht
06 39 83 52 86