Een snellere WordPress-site: optimalisatie voor beginners

WordPress: Logo pinkJeroen schreef eerder dit jaar al over WordPress. Voor wie het programma niet kent: WordPress is een Content Management System, oftewel een systeem dat het makkelijk maakt om de inhoud van je website aan te passen. WordPress is ongelofelijk veelzijdig en flexibel. Er zijn duizenden gratis plugins te vinden voor uiteenlopende zaken, van wiki’s tot webwinkels.

Met deze flexibiliteit komen we meteen op één van de nadelen van het gebruik van een CMS. WordPress is relatief groot en zwaar. Omdat het systeem goed moet werken met sites die vaak veranderen, moet het telkens de inhoud van die pagina bij elkaar zoeken. Dat neemt wat tijd in beslag, en dus laadt een site die draait op WordPress vaak trager dan een ‘handgemaakte’ site.

Supersnelle website?

Leg nu direct jouw WordPress-pakket
vast en profiteer v/d snelheid.


De servers van Antagonist hebben uiteraard ruim voldoende capaciteit om ook WordPress-sites snel te laten zien. Maar je site kan altijd sneller. Hieronder staan drie (of eigenlijk vier) eenvoudige stappen waarmee je er voor kunt zorgen dat jouw site nét wat eerder op het scherm van je bezoeker staat.

WordPress: Logo original

Stap 0: Kijk waar je de meeste winst kunt halen

Deze eerste stap is misschien wel de meest belangrijke. Voordat je begint met het maken van aanpassingen is het altijd een goed idee om uit te zoeken hoe lang het laden van je site eigenlijk duurt. Wat je graag wilt weten is hoe het totaalplaatje er uit ziet. Waar gaat veel laadtijd in zitten, en wat kun je dus het beste als eerste aanpakken?

De hulpprogramma's voor ontwikkelaars.

Precies voor dat soort vragen hebben de meeste webbrowsers tegenwoordig ontwikkelaarsfuncties, die een spreekwoordelijke blik onder de motorkap kunnen geven. Die tools houden bijvoorbeeld bij hoe lang het geduurd heeft om de verschillende onderdelen van een pagina te laden. Bij Google Chrome zitten de functies onder Tools, Developer Tools, Network (of, voor de Nederlandse versie, onder Extra, dan Hulpprogramma’s voor ontwikkelaars, en dan Netwerk). Gebruik je een andere browser dan Chrome? Op debugbrowser.com staat een handig lijstje met informatie over waar de tools in jouw browser te vinden zijn.

De Network-tab.

Het plaatje hierboven is een voorbeeld van hoe de Network-tab er uit kan zien als je eenmaal een pagina hebt doorgemeten. De meeste informatie in de grote tabel – Method, Status, type en Initiator – kun je vooralsnog negeren. De tijdlijn ernaast is veel interessanter. Hier kun je zien wanneer de webbrowser (Chrome dus, in dit geval) welk onderdeel aan het ophalen was. De blauwe lijn geeft aan wanneer de pagina voor het eerst te zien was, en de rode lijn geeft de totale laadtijd aan.

De eerste rij van de grote tabel geeft aan hoe lang het laden van de pagina zélf in beslag heeft genomen, dus zonder alle afbeeldingen, stijlen en scripts die bij de pagina horen. Dit is het territorium van WordPress. Als je browser meldt veel tijd kwijt te zijn aan het wachten op de ‘overkant’ (waiting) duurt het relatief lang voordat WordPress klaar is om de pagina naar je bezoeker te sturen. Hoe je dit kunt verbeteren lees je in stap 1 en in stap 2.

Is het eerste balkje relatief klein, zoals in het voorbeeld hierboven? Dan is waarschijnlijk niet WordPress de grootste verbruiker van laadtijd, maar zijn je bezoekers veel tijd kwijt met het binnenhalen van alle onderdelen die bij je pagina horen, zoals plaatjes en stijlen. De boosdoeners zijn dan meestal grote foto’s en andere plaatjes. Stap 3 legt uit hoe je afbeeldingsbestanden kleiner kunt maken om zo de downloadtijd te verminderen.

Stap 1: Doe minder

Wie minder doet is sneller klaar. Dat klinkt als een dooddoener, maar in dit geval is het wel degelijk van toepassing. Misschien heb je ooit WordPress-plugins geïnstalleerd die je eigenlijk niet meer gebruikt. Deze plugins moeten nog wel geladen worden, wat kostbare milliseconden in beslag kan nemen. In het Plugins-menu van WordPress kun je eenvoudig plugins uitschakelen (deactiveren). Helaas heeft WordPress nog geen functie waarmee je kunt zien hoeveel tijd elke individuele plugin gebruikt; het eenvoudigste is om wat te experimenteren.

Trouwens, als je plugins geïnstalleerd hebt die verouderd zijn is nu een mooi moment om ze bij te werken. WordPress geeft automatisch een seintje als er updates beschikbaar zijn voor plugins. Zulke updates lossen vaak problemen of lekken op. Soms maken ze de plugin in kwestie ook sneller en lichter. Altijd doen dus!

Stap 2: Doe net alsof

WordPress staat standaard zó ingesteld dat elke pagina bij elke aanvraag opnieuw wordt opgebouwd. Dat opbouwen kan even duren, vooral als je veel plugins gebruikt, of als je een ingewikkeld thema ingesteld hebt. Het is voor de meeste sites ook eigenlijk overdreven: zelfs de meest actieve sites veranderen niet elke seconde. Je zou je kunnen voorstellen dat het handiger is om een opgebouwde pagina even kort te bewaren, zodat opnieuw opbouwen niet nodig is en gewoon de ‘oude’ pagina kan worden opgestuurd. Dit tijdelijke bewaren heet caching.

De populairste caching-plugin voor WordPress is W3 Total Cache, of kortweg W3TC. De plugin is makkelijk te installeren. Kies Plugins > Add New:

W3TC installeren: stap 1

Zoek vervolgens op W3 Total Cache

W3TC installeren: stap 2

…en installeer de plugin.

W3TC installeren: stap 3

W3TC is nu geïnstalleerd, maar doet standaard nog niks. Ga daarom meteen door met activeren.

W3TC installeren: stap 5

Ga naar de instellingen…

W3TC installeren: stap 6

…en schakel alle cache-onderdelen in: Page Cache, Minify, Database Cache, Object Cache en Browser Cache.

W3TC installeren: stap 7

Klaar! Als je nu wat rondkijkt op je site zul je merken dat je site een stuk sneller laadt. Het verschil is vooral duidelijk als je teruggaat naar een pagina die je al gezien hebt: die pagina zit dan nog vers in het geheugen en hoeft dus niet opgebouwd te worden.

Heb je een site die helemaal niet vaak verandert, en ben je bereid wat tijd en energie te steken in het haarfijn afstellen van caching? Dan kun je zelfs nog een stapje verder gaan dan W3TC. Er zijn plugins die de hele WordPress-site omzetten in een statisch geheel. Die statische site gebruikt dan helemaal geen WordPress meer. Met zo’n opzet heb je nog steeds de mogelijkheid om de inhoud van je site aan te passen met WordPress, maar hoeft het systeem niet telkens geladen te worden. Een plugin die dit omzetten doet is Super Cache. Met Super Cache kan je site nog sneller laden dan met W3TC, de plugin hierboven, maar de installatie van Super Cache is wat lastiger dan die van W3TC.

Stap 3: Download minder

Als het goed is is de ‘waiting’-tijd nu een stuk korter geworden. De volgende stap is het lichter maken van de site: zorgen dat er minder kilobytes aan plaatjes en andere onderdelen gedownload hoeven te worden. Een lichte site is vooral erg voordelig als een deel van je bezoekers mobiele apparaten gebruiken. Op mobieltjes en tablets is de internetverbinding vaak niet al te best. Als de verbinding tussen je site en je bezoeker niet snel genoeg is, kunnen zelfs de snelste WordPress-sites traag overkomen, en dat is natuurlijk niet de bedoeling.

De beste manier om er achter te komen welke onderdelen van je pagina het zwaarst meetellen in de downloadgrootte van je pagina is (jawel!) opnieuw de Network-tab. Je kunt in de meeste browsers de grote tabel sorteren op bestandsgrootte, zodat de zwaarste afbeeldingen bovenaan komen te staan.

Foto’s zijn vaak een grote boosdoener van lange laadtijden. De meeste fotocamera’s en zelfs mobieltjes maken tegenwoordig digitale foto’s met ongelofelijk veel pixels. Dit betekent scherpere plaatjes, maar helaas ook grotere bestanden, en in ons geval dus meer downloadtijd. Het is een goed idee om te kijken hoe groot je foto’s in je ontwerp zijn, en vervolgens kleinere kopieën van je foto’s in dat formaat te maken. Alle programma’s die met foto’s werken kunnen ook foto’s schalen, maar als je niet zo’n programma hebt kun je ook een site als imageoptimizer.net gebruiken.

Gebruik je een fotoprogramma, zoals Adobe Photoshop? Kijk of het programma dat je gebruikt een speciale functie heeft om afbeeldingen kleiner op te slaan. In Photoshop heet die functie Save for Web (of Opslaan voor Web), in andere programma’s vaak Export.

Ook png-bestanden, dus achtergronden, logo’s, knoppen en dergelijke, zijn vaak groter dan strikt noodzakelijk. Controleer in ieder geval of je misschien foto’s aan het opslaan bent als png in plaats van jpg (png is geen goede indeling voor foto’s.) Wil je echt de laatste kilobytes van je plaatjes afschaven? Gebruik dan een dienst als TinyPNG, die op een slimme manier nutteloze informatie uit png-bestanden verwijdert.

Naast het kleiner maken van plaatjes is ook mogelijk om de webbrowser van je bezoekers de opdracht te geven afbeeldingen nog even in het geheugen te houden, zodat ze maar één keer opgehaald hoeven te worden. WordPress heeft standaard al instellingen die deze zogenaamde browser cache aanspreken. Total Cache, de plugin hierboven, past standaard ook browser caching toe. Als je stap 2 hebt gedaan maak je dus ook al gebruik van browser caching.

Kortom…

Een snelle site is niet alléén een kwestie van de goede webhostingprovider kiezen. De snelheid waarmee je site op het scherm van je bezoeker staat is ook voor een groot deel afhankelijk van hoe je je site opbouwt en instelt. Met handig gebruik van caching en andere technieken kun je ook met een relatief zwaar systeem als WordPress een razendsnelle site hebben, met tevreden bezoekers als resultaat.

Zit je al bij Antagonist en heb je nog vragen over je site? Onze afdeling Support zit voor je klaar – stuur gewoon een mailtje naar support@antagonist.nl, we helpen je graag verder!

Deel Tweet +1 Deel