Wordpress sneller maken

Maak je WordPress website sneller in 9 stappen

Last van een trage website? WordPress sneller laten laden? In 9 stappen kom je te weten hoe je je WordPress website sneller kan maken.

Hieronder beschrijf ik enkele kleine stappen die je meteen kunt uitvoeren (“quick wins”) maar ook drie belangrijke grote stappen waar je best wat meer tijd voor uitrekt.

Inhoud:

Dit artikel werd geschreven voor niet-technische lezers.

Waarom is snelheid belangrijk?

WordPress is een geweldig systeem om je website te beheren. Het is zeer gebruiksvriendelijk en ook erg flexibel om uit te breiden. Het systeem staat echter niet gekend om zijn snelheid, terwijl de laadtijd van een website wel essentieel is voor bezoekers.

Grafiek laadtijd vs verlatingspercentage

Pagina laadtijd versus verlatingspercentage (cijfers zijn een gemiddelde van enkele recente studies gecombineerd).

Een standaard installatie met een basis website kan al snel drie seconden of meer nodig hebben om te laden. Dit is te lang. Mensen hebben almaar minder geduld op dit vlak en van zodra een website wat meer tijd nodig heeft om te laden wordt hij weggeklikt.

Stap 0: Meet eerst je huidige snelheid

Eerst en vooral moet je weten hoe snel of hoe traag je website op dit moment laadt. Hoeveel seconden duurt het vooraleer je website volledig geladen is? Hoe zwaar is je website? Hoeveel bestanden moeten er geladen worden? Eens je de antwoorden op deze vragen kent, kun je aan de slag gaan.

Gelukkig bestaan er enkele handige online tools om dit te achterhalen. Aan de hand van zo’n tool kun je ook perfect zien waar de knelpunten zitten en of er eventueel andere problemen zijn waardoor je website traag is.

Er bestaan verschillende goede tools maar in dit artikel maak ik gebruik van de GTmetrix tool via de website gtmetrix.com.

Open GTmetrix en typ je website adres in het URL veld. Klik vervolgens op de knop “Analyze”.

GTmetrix laadtijd analyseren

Je krijgt twee scores te zien, een “PageSpeed” score en een “YSlow” score. De scores gaan van A (erg goed, meer dan 90/100) tot F (erg slecht, minder dan 50/100). Deze scores zijn gebaseerd op een lijst van eigenschappen waar je website al dan niet aan voldoet. Onderstaande afbeelding is een voorbeeld van een vrij slecht presterende website.

GTmetrix scores

Aan deze scores hechten we voorlopig nog weinig belang. Hoewel ze een indicatie geven van goed of slecht, zeggen ze niet altijd iets over de effectieve snelheid. Het kan gebeuren dat je website bijvoorbeeld telkens een “C” scoort omwille van de gecontroleerde punten, maar toch erg snel laadt omdat hij licht en compact is.

Daarom kijken we vooral naar de “Page Details”. Hier zie je drie belangrijke zaken:

  1. Fully loaded time: de tijd die nodig is om de website volledig te laden
  2. Total Page Size: de totale grootte van alle geladen bestanden samen
  3. Requests: het aantal bestanden dat geladen moet worden

Noteer deze drie waarden. Het doel is om deze waarden op het einde van dit artikel zo laag mogelijk te krijgen. Hoe lager hoe beter. Een laadtijd van ongeveer 2 seconden beschouw ik als “aanvaardbaar”. Alles wat daaronder ligt is goed.

Wanneer we nog wat verder naar onder scrollen zien we de verschillende punten die gecontroleerd werden, terug telkens met een score ernaast.

PageSpeed optimalisaties

Begrijp je wat er aangepast moet worden? Hou je dan vooral niet in en werk de puntjes af van boven naar onder. De scores (en daarmee ook de snelheid) zullen zienderogen verbeteren bij elke aanpassing.

Is het allemaal Chinees voor jou? Geen nood, volg dan onderstaande stappen om je WordPress installatie sneller te maken. We beginnen met de grote stappen.

Grote stappen

1.     Kies een snelle hosting

Alles begint bij een goede webhosting. De “hosting” is een zeer ruim begrip maar samengevat is dit is de server waar je website op draait.

Bovenstaande snelheidstesten geven vooral een beeld van de voorkant van je website. Dit zijn de zaken die je zelf in de hand hebt zoals de grootte van de afbeeldingen, het aantal scripts dat geladen moet worden enzovoort. Het zegt echter weinig over de achterkant namelijk de hosting.

Let op volgende zaken bij het kiezen van snelle hosting voor je website.

  • De locatie: hoe dichter je woont bij de server waar je website op draait, hoe sneller hij voor jou geladen zal worden. Woont je doelpubliek vooral in de VS bijvoorbeeld? Dan kun je je website best ook daar laten draaien.
  • Deel je de server met anderen (shared hosting) of krijg je een apart stukje enkel voor jezelf (dedicated hosting)? Wanneer je een server deelt met andere websites dan kan jouw website soms vertraging oplopen wanneer er een zware belasting is op een van de andere websites.
  • Gebruikt men SSD (snelle schijven) of HDD (gewone harde schijven)?
  • Is er server-side caching voorzien? Ga op zoek naar woorden zoals Varnish, Redis, Memcached…
  • Is GZIP compressie beschikbaar?
  • Is minimum PHP versie 7.0 beschikbaar?
  • Is er HTTP/2 ondersteuning?

Misschien heb je al gehoord van managed wordpress hosting? Als de prijs geen issue is voor jou dan is dit zeker ook een optie om te overwegen. Bij dit soort hosting hoef je je niets aan te trekken van bovenstaande technische zaken en wordt alles voor jou geregeld om de website zo snel mogelijk te laten laden (langs de serverkant). Maar met prijzen tussen de €10 en €50 per maand is dit wel beduidend duurder dan gewone hosting natuurlijk. Voor een normale snelle hosting mag je rond de €5 rekenen per maand.

2.     Gebruik een lichtgewicht thema

Het thema waar je mee werkt geeft vorm aan je website. Er zijn drie mogelijkheden:

  1. Je gebruikt een gratis thema uit de thema bibliotheek van WordPress
  2. Je koopt een premium thema bij een van de verschillende aanbieders
  3. Je laat een thema op maat maken door een webdesigner

Heb je gekozen voor optie 1 of 2? Dan is het belangrijk dat je over de kwaliteit en de snelheid van het thema waakt. Liet je het thema door een webdesigner maken? Ga dan verder naar stap 3. In dat geval ga ik er namelijk van uit dat het thema sowieso al snel is (of dat zou toch zo moeten zijn).

Hoe kies je nu een snel, lichtgewicht thema?

  • Vermijd de “multi-purpose” thema’s die verklaren dat ze alles aan boord hebben. Een thema dat alle mogelijke onderdelen van een website aan boord heeft, is meestal niet snel.
  • Thema’s hebben altijd een demo pagina om te tonen wat ze in huis hebben. Drop dit webadres even in GTmetrix en bekijk de snelheid, zoals hierboven beschreven.
  • Kies een thema dat zo weinig mogelijk bestanden gebruikt die eindigen op .css (stijlblad) en .js (JavaScript). Hoe meer van die stijl- en scriptbestanden er geladen moeten worden, hoe trager alles zal verlopen.

3.     Beperk het aantal plugins

WordPress is erg makkelijk uit te breiden via plugins. Voor elke extra functie die je wilt toevoegen bestaat er wel een plugin. Maar hoe meer plugins je toevoegt, hoe trager de website kan worden. Verwijder plugins die je niet (meer) nodig hebt en probeer zo het aantal zeker onder de 10 te houden.

Niet alleen het aantal maar ook de kwaliteit en de grootte van elke plugin is belangrijk. De meest populaire plugin voor SEO (zoekmachineoptimalisatie) bijvoorbeeld is momenteel maar liefst 8 MB groot. Als je weet dat een lege WordPress installatie slechts 25 MB is, dan zie je dat dit een erg zware uitbreiding is op je installatie. Geheel onnodig, want er zijn geweldige alternatieven die wel compact en snel zijn met hetzelfde eindresultaat.

Als snelheid een topprioriteit is, ga dan niet altijd voor de populairste plugin maar wel voor de snelste.

Een goed vuistregel: alles wat je buiten WordPress kunt doen, doe je ook best buiten WordPress. Om afbeeldingen te schalen bijvoorbeeld heb je geen plugin nodig, kan perfect vanop je PC. Google Analytics toevoegen voor de statistieken van de website? Kun je rechtstreeks in de code toevoegen, geen plugin voor nodig.

Kleine stappen (quick wins)

4.     Afbeeldingen schalen en comprimeren

Het vaakst voorkomende probleem waardoor een WordPress website traag is heeft te maken met de gebruikte afbeeldingen. Wanneer je een foto neemt met je smartphone of digitale camera bijvoorbeeld en je wilt die op je website plaatsen, dan gaan veel mensen die foto gewoon integraal uploaden naar de WordPress mediabibliotheek.

Het probleem is dat zo’n foto veel te groot en te zwaar is voor op een webpagina. De afbeeldingen moeten dus een pak kleiner door ze te schalen, en ook compacter door ze te comprimeren.

Schalen

Om afbeeldingen te schalen bestaan er verschillende programma’s. Werk je met Windows dan kun je dit gewoon in Paint doen via Start -> Formaat wijzigen. Maar ook via de Office Picture viewer, Live Photo Gallery, Photoshop, Gimp… Op een Mac toestel kun je bijvoorbeeld de Preview app gebruiken die normaal standaard geïnstalleerd staat.

Hoe groot moet mijn afbeelding dan zijn? Dat is afhankelijk van waar je hem wilt gebruiken. Wil je hem als full-screen achtergrond afbeelding gebruiken? Dan mag die gerust 1280 pixels breed zijn. Echter om gewoon in een afbeeldingen galerij te tonen zal 600 pixels al voldoende zijn om scherp over te komen. En om als miniatuur weer te geven mag je dit nogmaals halveren.

Supertip: wees hier ook slim in. Laat geen achtergrondafbeeldingen laden van 1000+ pixels op mobiele toestellen want die zijn vaak slechts 360 pixels breed. Voor een PC scherm zal dit dan weer wél nodig zijn. Dit zijn zaken die je webdesigner kan voorzien in het thema.

Comprimeren

Naast het schalen moeten afbeeldingen ook gecomprimeerd worden voor het web. Dit zorgt ervoor dat afbeeldingen zo licht mogelijk gemaakt worden zonder zichtbare kwaliteit te verliezen.

Comprimeren kan terug op verschillende manieren maar persoonlijk gebruik ik de online tool van kraken.io aan. Gewoon je afbeeldingen selecteren en comprimeren maar, super eenvoudig. Daarna download je de afbeeldingen terug naar je PC en upload je de gecomprimeerde afbeeldingen naar WordPress. Als je je even gratis registreert kun je bovendien tegelijk ook je afbeeldingen schalen, een extra voordeel.

Kraken.io compressie interface

Om afbeeldingen te comprimeren bestaan er ook WordPress plugins, waaronder ook eentje van Kraken.io. Zoals hierboven beschreven raad ik aan om het comprimeren buiten WordPress te doen, maar indien je soms vergeetachtig bent of weinig tijd hebt kun je altijd de plugin gebruiken. Die heeft als voordeel dat je afbeeldingen automatisch gecomprimeerd worden bij het uploaden. De plugin heeft bovendien weinig impact op je systeem aangezien het comprimeren op de servers van Kraken.io gebeurt, en niet op jouw server zoals bij andere vergelijkbare plugins.

kraken.io plugin

In de gratis versie kun je maandelijks 100 MB aan afbeeldingen comprimeren in WordPress. Andere plugins vind ik minder goed vanwege de kwaliteit of door de opgelegde beperkingen.

5.     Comprimeer al de rest met GZIP

Niet alleen afbeeldingen kunnen compressie gebruiken, alle andere website bestanden ook! GZIP is een manier om je bestanden compacter te maken op de server, vooraleer ze naar de bezoeker van je website gestuurd worden. Dit is een optie die je hosting provider moet ondersteunen en die soms standaard al geactiveerd staat. Beschik je over cPanel toegang? Controleer deze optie dan even via Software -> Optimize Website -> Compress Content.

GZIP compressie inschakelen

Geen cPanel toegang? Dan kun je GZIP ook inschakelen via je .htaccess bestand indien je hosting dit ondersteunt. Dit is een zeer krachtig bestand waar dergelijke zaken ingesteld kunnen worden, maar enkel wanneer je er verstand van hebt. Vraag dit na bij je webdesigner of bij je hostingprovider.

6.     Gebruik een recente PHP versie

Terwijl je nu toch in cPanel zit, controleer ook even de PHP versie die gebruikt wordt op je server. WordPress bestaat namelijk uit een aaneenschakeling van PHP bestanden. Recente versies van PHP zijn geoptimaliseerd voor snelheid en efficiëntie. Selecteer versie 7.0 of hoger en je zult meteen een boost in snelheid waarnemen.

PHP versie selecteren

Opgelet! Controleer daarna zeker of alles nog naar behoren werkt! Indien je gebruik maakt van gedateerde thema’s of plugins dan kunnen die mogelijks nog niet klaar zijn voor de meest recente PHP versie. Dit zal je snel merken; wanneer er foutmeldingen verschijnen kun je altijd nog terugkeren naar de oorspronkelijke versie.

(bovenstaande schermen kunnen er anders uitzien in verschillende omgevingen maar meestal is de mogelijkheid er wel om de versie te selecteren, zoek even rond of vraag het na bij je hostingprovider)

7.     Maak gebruik van caching

Wat?

Een ‘cache’ is een soort tijdelijke ruimte / tijdelijk geheugen waar bestanden in opgeslagen kunnen worden. De bedoeling van een cache is altijd om van daaruit bestanden sneller te kunnen laden dan vanuit de oorspronkelijke locatie.

Er zijn heel wat verschillende soorten caches waar ik lang en uitgebreid over kan vertellen, maar dat ga ik niet doen. In plaats daarvan stel ik voor om gebruik te maken van één type caching namelijk page caching. Deze is het makkelijkst te implementeren in WordPress en levert meteen een merkbaar verschil op.

WordPress haalt standaard een reeks van PHP bestanden op om uiteindelijk één HTML pagina samen te stellen. Dit proces vergt tijd. Wanneer je page caching inschakelt dan wordt die samengestelde HTML pagina opgeslagen in de cache en meteen getoond aan de volgende bezoeker, dat scheelt een pak tijd.

Hoe?

Voor wie enkel gebruik wil maken van dit type caching zonder al te veel andere toeters en bellen, raad ik de WP Fastest Cache plugin aan. En de naam liegt er niet om. Gewoon activeren en de standaard opties aan laten staan.

WP Fastest Cache plugin

Verder is de plugin WP Super Cache ook goed, met een aantal extra opties. De W3 Total Cache plugin bespreek ik hier niet wegens te zwaar, te geavanceerd voor beginners en te weinig ondersteuning van de ontwikkelaar.

8.     Maak zo weinig mogelijk redirects

Wat?

Een redirect is een doorverwijzing. Bijvoorbeeld: je surft naar “facebook.be” en je ziet het adres automatisch wijzigen in “www.facebook.be”. Dit gebeurt aan de hand van een redirect.

Of er momenteel op jouw website te veel redirects gebeuren kun je nagaan via GTmetrix zoals hierboven beschreven. Open op het tabblad “PageSpeed” het item “Minimize Redirects” ofwel “Avoid Landing Page Redirects”.

Redirect chain voorbeeld

Bovenstaande afbeelding toont een typisch voorbeeld van zo’n “redirect ketting”. Eerst wordt de bezoeker naar de “https” versie doorverwezen, daarna wordt er “www” voor de website gezet en ten slotte wordt er op het einde nog een slash aan toegevoegd.

Dit zijn drie stappen, drie redirects en elke redirect neemt tijd in beslag. Deze drie stappen kunnen perfect gecombineerd worden in één enkele redirect. Google geeft de aanbeveling om op elke link maximaal één redirect te maken.

Hoe?

Wanneer je over cPanel toegang beschikt kun je redirects instellen via Domains -> Redirects.

Redirect maken

Bovenstaand voorbeeld zal alle verkeer doorsturen naar de https versie mét www én een slash op het einde.

Er is echter een grote kans dat je webmaster redirects op een andere manier heeft ingesteld, namelijk rechtstreeks in het .htaccess bestand waar ik daarnet al over sprak. Heb je te maken met zo’n redirect ketting? Vraag je webdesigner dan om dit bestand na te kijken en aan te passen waar nodig.

9.     Verklein en combineer HTML, CSS en JS bestanden (minify)

 

Wat?

Dit zijn drie soorten bestanden die door zowat elke normale website gebruikt worden.

  • HTML: bestand met de tekst, afbeeldingen en andere elementen van de website
  • CSS: bestand(en) met alle stijlinformatie zoals o.a. de kleuren en de lay-out
  • JS: bestand(en) die scripts laden voor o.a. bewegende onderdelen zoals een foto-slider

Deze bestanden worden door de webdesigner in code geschreven op een leesbare manier. Dit wil zeggen: met spaties, enters, toegevoegde commentaar, gesplitst in verschillende bestanden… Dat is handig om de code te kunnen lezen als mens maar niet zozeer als computer. Computers hebben al die extra info niet nodig en kunnen veel sneller werken wanneer alle code op 1 lijn achter elkaar zou staan.

Hoe?

Het verkleinen en combineren van deze verschillende bestanden kun je vragen aan je webdesigner. Dit is eigenlijk een standaard praktijk geworden bij de bouw van een website maar in werkelijkheid zie ik nog heel wat website bouwers die het niet standaard doen.

Doe je het liever zelf? Dan kun je in WordPress opnieuw een van de beschikbare plugins gebruiken. Voor deze taak raad ik de Fast Velocity Minify plugin aan. Deze doet een prima job met de standaard instellingen, maar wees je ervan bewust dat er mogelijks nog enkele opties aangepast moeten worden na het activeren van de plugin.

Fast Velocity Minify plugin

Soms zijn bestanden namelijk afhankelijk van elkaar of van een bepaalde volgorde. Wanneer ze dan allemaal samen in één bestand worden geladen kunnen soms problemen optreden.

 

Conclusie

Deze 9 stappen zijn zeker niet het einde. Om de snelheid te optimaliseren kun je zo ver gaan als je zelf wilt. Er zijn nog verschillende andere zaken die de snelheid ten goede komen zoals gebruikmaken van een CDN, browser caching, opschonen van de database…

Met dit artikel probeerde ik echter de belangrijkste zaken aan te halen en een mogelijke oplossing voor te stellen, zonder al te technisch te worden.

De plugins of tools die ik aanraad zijn op basis van eigen ervaringen. Laat gerust een reactie na voor meer info over de motivatie waarom ik ze wel – of juist niet – aanraad.

Webdesigner kiezen

6 Gouden Tips bij het kiezen van een website bouwer

Hoe kies je een persoon of bedrijf om je website te laten maken? In een zee van webdesigners, reclamebureaus en freelancers kan het soms moeilijk kiezen zijn. Met onderstaande tips in het achterhoofd kom je al een heel eind verder.

1. Bekijk de referenties

De snelste manier om een beeld te krijgen van de website maker is om referenties te bekijken. Bijna elke webdesigner heeft op zijn/haar website een portfolio of een selectie met enkele referenties van klanten staan. Bezoek deze websites! Zien ze er professioneel uit? Werken ze goed? Is alle informatie snel te vinden?

Wees ook niet bang om de mensen achter de referenties zelf te contacteren en te vragen naar hun ervaringen met de website bouwer. Je zal snel merken of hetgeen de webdesigner vertelt ook strookt met de werkelijkheid.

2. Bekijk goed de mogelijkheden

Dit is een zeer belangrijke. Voor je in zee gaat met een webdesigner of webdesign bureau moet je absoluut zeker zijn dat hetgeen je vraagt mogelijk is. Niet alle webdesigners of bedrijven hebben namelijk alle kennis in huis die nodig is voor jouw specifieke wensen. Typische voorbeelden zijn het maken van een logo, maken van bedrijfsfoto’s, schrijven van teksten voor op de website…

Bij het maken van een website komt tegenwoordig ook veel meer kijken dan vroeger. Hij moet:

  • Responsive zijn

    Zich aanpassen aan alle mogelijke schermgroottes van PC tot smartphone.

  • Te vinden zijn

    in zoekmachines zoals Google, Bing en Yahoo via SEO zoekmachineoptimalisatie.

  • Makkelijk aanpasbaar zijn

    via een CMS (Content Management System) zoals WordPress, Joomla of Drupal.

  • Social media klaar zijn

    zodat je eenvoudig pagina’s of nieuwigheden kan delen.

  • Beveiligd zijn

    tegen inbraak via onder andere een HTTPS certificaat (groen slotje bovenaan in de adresbalk).

Vraag of de webdesigner kennis heeft van al deze zaken.

Supertip:
In plaats van dit allemaal te vragen kun je natuurlijk ook de Sherlock Holmes in jezelf naar boven halen en zelf op onderzoek gaan. Bezoek de website van het bedrijf eens vanop een smartphone, tablet en PC. Ziet die er overal even goed uit? Google eens de naam van de webdesigner. Vind je meteen de meest relevante resultaten?

3. Vraag naar het prijsmodel

Iedereen gebruikt namelijk een ander model om zijn prijzen te bepalen. Soms betaal je een eenmalig bedrag voor de website en jaarlijks voor de hosting en de domeinnaam. Soms betaal je enkel en alleen een maandelijks bedrag voor zowel het maken van de website, als de domeinnaam, als het onderhoud. Soms betaal je alles apart, maandelijks of jaarlijks, met of zonder onderhoudscontract… Alles is mogelijk. Dit is belangrijk om te weten.

Laat je echter niet misleiden. Men kan bijvoorbeeld reclame maken voor een super goedkope website van €400, maar dan in de kleine lettertjes van de voorwaarden staat dat je twee jaar gebonden bent aan een onderhoudscontract van €50 per maand, wat uiteindelijk toch uitkomt op €1600…

4. Kies een onderneming die bij jou past

Er zijn eenmanszaken die websites maken, er zijn kleine bedrijven met een 5-tal medewerkers maar er zijn ook bedrijven met 50 medewerkers of meer.

Heb je zelf een groot bedrijf dan kun je best ook een groot webdesign bedrijf aanspreken om je website te maken. Zij zijn namelijk gewend om met andere grote bedrijven te werken en kunnen dan ook best je noden en behoeften inschatten. Jouw marketing mensen kunnen dan met hun marketing mensen praten, jouw ontwerpers met hun ontwerpers enzovoort. Een groot bedrijf zal over het algemeen ook hogere eisen stellen aan de website bouwer. In dat geval is het handig om met een bedrijf te werken dat alle mogelijke specialisaties in huis heeft.

Heb je echter een eenmanszaak dan zal een zelfstandig webdesigner vaak een betere keuze zijn. Eén uitvoerende kracht en dus één contact voor al je vragen. Bovendien zal de prijs ook meer overeenstemmen met het budget van je kleine onderneming. Reden: een zelfstandig webdesigner heeft geen grote personeelskosten en andere overheadkosten in vergelijking met een groot bedrijf. De eisen van de klant zijn vaak lager waardoor er geen extra personeel nodig is.

5. Denk ook aan de toekomst

Wie gaat de website onderhouden? Wie zal aanpassingen doorvoeren? Als mijn bedrijf groeit kan mijn website dan ook makkelijk meegroeien? Wie zal back-ups maken? Is dit allemaal inbegrepen in de prijs of zijn hier extra kosten aan verbonden?

Ga ook na of je achteraf makkelijk van webdesigner kunt veranderen. Jij moet eigenaar zijn van de website bestanden en jij moet eigenaar zijn van de domeinnaam. Kortom: jij moet de touwtjes in handen hebben. Ben je niet meer tevreden? Dan moet je eenvoudigweg kunnen veranderen. Vraag dit na op voorhand.

6. De klik, het buikgevoel

Alles kan nog zo mooi voorgesteld zijn op papier, als de klik er niet is dan wordt het niets. Zoals bij alles vertrouw je best van al op je buikgevoel. Werden al je vragen beantwoord en heb je er een goed gevoel bij? Ga er dan voor.

Conclusie

Je kan nooit te veel vragen stellen. Hoe meer je weet hoe beter je een keuze kunt maken.

Benieuwd of het tussen ons klikt? Neem contact op!