Website sneller maken? Hoger in Google komen! 6 tips. (editie 2018)

Voor wie vindt dat deze WordPress-website snel laadt en graag ook zo’n snelle website wil, is er goed nieuws. Met de tips in dit artikel wordt iedere website snel.

Op een bijeenkomst in Brussel mocht ik pas (gelukkig in het Nederlands) spreken voor een groep Belgische ondernemers. Mijn bewering dat Belgische websites heus niet minder hoeven te presteren dan Nederlandse stuitte op tegenwerpingen. De entrepreneurs waren het roerend met elkaar eens dat België wat online communicatie en e-commerce betreft een ontwikkelingsland is.

Eerlijk gezegd ben ik best geschrokken van de houding van mijn toehoorders. Een snelle website is voor iedere ondernemer bereikbaar. Goede hosting kost tegenwoordig niet zo veel meer en de rest is een kwestie van even de schouders eronder.

Is jouw website een traag ladende WordPress-website? Of is hij al zo snel deze?

Als je website vergelijkbaar scoort, dan kun je dit blog overslaan. De score hierboven is van 31 maart 2018. Inmiddels is de website gegroeid en is de voorpagina twee keer zo zwaar geworden. Als je wilt zien hoe snel deze website nu laadt: https://tools.pingdom.com/#!/cf7ETh/https://combron.be/

WordPress website sneller maken? Met deze tips lukt het je zeker!

Een trage WordPress-website sneller maken is niet zo moeilijk als het lijkt. In artikel deel ik hoe ik deze website snel heb gemaakt. Als je een fatsoenlijke webhost hebt, kost het je niets meer dan wat tijd om je website net zo snel te maken.

Hoe gaan we je website sneller maken?

We maken je website sneller met de methode Hollandse gierigheid. Dit is de dag dat je eindelijk eens blij zult worden van de berekenende aard van je bovenburen. Veel websites zijn volgestopt met overbodige plugins en te rijke foto’s. Door de kunst van het weglaten toe te passen, is je website in het vervolg beter dan die van je concurrent.

Pingdom is niet alleen handig om te kijken hoe snel je website laadt, maar het geeft ook een mooie indicatie van de reden waarom een website snel of langzaam is. We bekijken dat in “de waterval” van de bevindingen. Een andere keer wil ik best dieper ingaan op de technische aspecten, maar vandaag maken we je website alleen maar snel. Zo ziet de waterval van ComBron.be eruit:

1. Plugins minimaliseren

Helemaal bovenaan staat de reactiesnelheid van de server waarop je website gehost wordt. Websites met (te)veel plugins vergen teveel van de server, waardoor de reactiesnelheid vaak al een seconde in beslag neemt. Google wil graag dat je website er binnen twee seconden staat, dus breng het aantal plugins van de website terug naar het absolute minimum. Beter nog:

1. Test je website zoals hij nu is.
2. Schakel alle plugins uit.
3. Test de website nog een keer.

De kans dat de website een hele seconde sneller laadt, is groot. Je moet zelf weten hoe noodzakelijk het is om aan de hele wereld te tonen hoeveel volgers je bedrijf op Facebook heeft, maar weet wel dat een frame van Facebook (met een rijtje gezichtjes en je aantal volgers) niet alleen de server meer belast, maar vervolgens ook de rest van de laadtijd flink langer maakt.

Er zijn nog veel meer zaken waar Pingdom je op kan wijzen, maar zoals gezegd, gaan we vandaag niet voor moeilijke technische verhalen. De snellere laadtijd door het uitschakelen van de plugins was gewoon even een inkoppertje.

2. Checken of je webhost bij de tijd is

Een website kan perfect worden ingesteld, maar als je webhostingbedrijf niet bij de tijd is, dan kun je nooit zo goed scoren als je concurrenten.

Goede webhosting hoeft niet duur te zijn!!!

Een erg goed webhostingbedrijf in Nederland is Antagonist. Een webhostingbedrijf met aanzienlijk mindere service maar ook een aanzienlijk lagere prijs, is Versio. Het is niet de bedoeling om Vlaamse bedrijven NIET te laten kiezen voor Belgische webhostingbedrijven. De onderstaande opsomming is puur om goed beslagen ten ijs te komen bij de doorgaans veel te dure onderpresterende Vlaamse aanbieders van webhosting en/of internet (om nog maar te zwijgen over de belachelijke prijzen die de Belgen moeten betalen voor 4G).

Het belangrijkste wat je van het bovenstaande moet onthouden, is dat wat het webhostingbedrijf tenminste het volgende moet bieden:

• MySQL 5.6 (of MariaDB 10.0)
• PHP 7.0 of 7.1
• een gratis SSL
• 1,5 GB opslagruimte
• 1 backup per dag
• voor maximaal 75 euro per jaar

Mijn persoonlijke favoriet is Antagonist, waar onze Nederlandse website draait, maar juist om te laten zien dat het ook kan met een prijsvechter, wordt deze website gehost door Versio.

Perfecte scores zijn niet of nauwelijks haalbaar en tevens zinloos

Het is vast heel ambigue, maar staar je niet blind op de uitslagen van de testtools. Excuses voor de verwarring, want eerst zeg ik dat je je website moet verbeteren en vervolgens bagatelliseer ik mijn eigen uitspraak een beetje. Wat ik bedoel te zeggen, is dat het geen obsessie moet worden. Vooral Yslow en Google Pagespeed beschikken over het talent om de eigenaren van websites tot op het bot te demotiveren. Hieronder staan de bevindingen van GTmetrix. Zoals misschien opvalt, zegt GTmetrix dat de laadtijd bijna twee maal langer is dan Pingdom beweert.

Uiteraard moet je altijd streven naar een zo goed mogelijke score, maar de praktijk leert ons telkens weer dat het veel belangrijker is om je website te laten leven door telkens pagina’s toe te voegen. Ook is het zo dat je score verandert door updates van plugins en voortschrijdend inzicht. Wees niet bang voor een penalty van Google wegens over-optimization. Wie wil leren wat over-optimization is, kan ik het artikel Is my website over-optimized? van Marieke van der Rakt (Team Yoast) aan bevelen. Het is wel in het Engels.

Als je weet dat je webhost kwaliteit levert en je hebt alle overbodige plugins verwijderd, dan is het tijd voor de volgende stap.

3. Afbeeldingen optimaliseren

Zoals gezegd gaan we je website sneller maken met de methode Hollandse gierigheid. De foto’s op de website mogen niet rijker/groter zijn dan strikt noodzakelijk. Het gaat er niet om dat we willen besparen op dataverkeer; we willen besparen op de laadtijd van de website zodat bezoekers niet voortijdig wegklikken. De andere manier om foto’s sneller te laten laden, is door ze te laten laden vanaf een CDN.

Als een pagina op je website traag laadt, dan verlies je bezoekers. Sowieso wil Google dat de pagina’s van websites snel laden. Afgezien daarvan, meten ze ook nog eens hoe lang bezoekers op je pagina verblijven. Klikken ze gelijk (of voortijdig) weg dan is de pagina blijkbaar niet interessant genoeg en zal Google minder gemotiveerd zijn om een pagina even hoog in de zoekresultaten te laten verschijnen als een pagina waar mensen wel graag (lang) op verblijven.

Afbeeldingen verkleinen

Foto’s op het scherm hebben een veel lagere pixeldichtheid nodig om er goed uit te zien dan een foto op papier. Het verkleinen is niet alleen maar het terugbrengen van het fysieke formaat (van 6000 x 4000 pixels naar 1200 x 800 pixels), maar ook het terugbrengen van het aantal pixels per inch. Uit een fotocamera komt een foto met 300 dpi (dots per inch) terwijl een computerscherm met 72 dpi genoegen neemt.

Er zijn diverse methodes om afbeeldingen te verkleinen. Hier staat hoe ik foto’s voor online verklein, maar in dit artikel houden we het eenvoudig. Twee plugins een erg goede en een vrij aardige.

Afbeeldingen laden vanaf een CDN

De andere manier om een website sneller te maken is door bestanden (waaronder afbeeldingen) te laden vanaf een CDN. CDN staat voor Content Delivery Network. Een CDN zorgt ervoor dat bestanden dichtbij en zonder teveel barrières beschikbaar zijn om vliegensvlug te laden. De inzet van een CDN is lang niet altijd te rechtvaardigen. Is je website in het Vlaams, dan kan ik zo snel geen goede reden voor een CDN bedenken. Dat behoeft vast uitleg.

Het plaatje opent in het groot in een nieuw tabblad als je er op klikt. Op de grote versie is goed te zien dat Google het land van het domein kiest als er verder geen informatie beschikbaar is.

Veel aanbieders van webhosting zijn inmiddels zo goed, dat een CDN geen tijdswinst oplevert als de website in België of één van de direct verbonden landen ligt. Het wordt allemaal anders als je een website hebt in meerdere talen die in de VS net zo snel moet laden als in Australië.

Een CDN-aanbieder zorgt ervoor dat er overal ter wereld servers staan met jouw content. Dat scheelt laadtijd. De tekst die je nu leest, staat echter op een server in Nederland en we maken geen gebruik van een CDN. Althans…

Onbewust gebruikt bijna iedereen regelmatig een CDN. Hierbij valt te denken aan de foto’s die je deelt via Flickr, Facebook en Twitter, maar ook die video’s op YouTube en Netflix. Wie de plugin Jetpack voor WordPress gebruikt, maakt meestal ook gebruik van Photon. Photon is de gratis CDN van Jetpack. Photon is alleen beschikbaar voor afbeeldingen en heeft eigenlijk geen verwende West-Europeanen voordelen behalve dan dat het mogelijk maakt dat je er erg mooie fotomozaieken mee kan maken.

4. WP Super Cache en GZIP instellen voor je website

WP Super Cache is een plugin waarmee je je website vooral voor terugkerende bezoekers sneller maakt, maar ook nieuwe bezoekers ervaren kortere laadtijden als WP Super Cache goed wordt toegepast. Google vertaalt Cache met noodvoorraad. Er moeten haast wel betere vertalingen voor bestaan, maar toch leg ik het woordje Cache even uit met voorraad. WordPress bouwt de meeste pagina’s van je website met telkens dezelfde informatie/gegevens/bestanden. Vaak zijn alleen de tekst en de afbeeldingen anders. Wat WP Super Cache doet, is ervoor zorgen dat er niet telkens een heel systeem in werking moet treden om een pagina op te bouwen.

Bij het instellen van WP Super Cache doen we drie dingen. We stellen de caching in, we stellen de tijdsduur van de caching in en we zetten GZIP aan. Als je dit niet aandurft, bel dan degene die je website gemaakt heeft en vraag hem/haar het te doen. Ze zullen er misschien een uurtje voor rekenen, maar dat uurtje is het zeker waard.

WP Super Cache instellen deel 1:

• Installeer WP Super Cache door “aan de achterkant” van WordPress op Plugins > Nieuw plugin te klikken. Zoek WP Super Cache en klik op Nu installeren.
• Klik na het in installeren op Activeren.
• Klik op Instellingen > WP Super Cache. Vink Caching On (Recommended) aan.
• Klik op Update status.

WP Super Cache instellen deel 2:

• Ga naar het tabblad Advanced.
• Als het goed is staat Enable caching aangevinkt, zo niet doe het dan nu.
• Vink alle opties aan waarachter (recommended) staat, tot je bij Update status komt.
• Klik op Update status.
• Ga verder naar beneden. Vul bij Time cachout 3600 seconds in.
• Vul bij Scheduler 1 x per week in.
• Vervolg je weg naar beneden tot je bij de blauw knop met Change Expiration komt. Klik erop.
• Wederom ga je een stukje naar beneden. Vink Feeds (is_feed) aan.
• Klik op de blauwe knop met de tekst Save settings.
• Onder de blauwe knop bevindt zich een tekstvak. In het tekstvak haal je de bestaande tekst weg en plak je de onderstaande tekst.
  wp-.*\.php
index\.php
sitemap_index.xml
post-sitemap.xml
page-sitemap.xml
testimonials-widget-sitemap.xml
category-sitemap.xml
post_tag-sitemap.xml
zoekresultaten/*
product_brand-sitemap.xml
product-sitemap.xml
product_cat-sitemap.xml
feed/
• Klik op de blauwe knop met de tekst Save Strings.

&nsbp;

WP Super Cache instellen deel 3:

Het derde deel van het instellen is het moeilijkste uit deze hele tekst. We moeten de .htaccess instellen. Op internet zijn allerlei prachtige manieren vinden om een dergelijk bestand te maken en te uploaden, maar ik heb beloofd het allemaal zo eenvoudig mogelijk te houden. De eenvoudigste manier is met een andere (onmisbare) plugin genaamd Yoast SEO. Grote kans dat je de plugin al gebruikt zo niet, installeer hem dan even.

Geïnstalleerd? Mooi! We gaan verder.

• Ga (opnieuw “aan de achterkant” van WordPress) naar Yoast > Extra.
• Verwijder de tekst in het tekstvak .htaccess bestand niet. Plak onder de tekst het volgende:

  # BEGIN EXPIRES
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"

  # END EXPIRES

  # BEGIN GZIP

  AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

  # END GZIP

  
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"

• Klik op Sla .htaccess wijzigingen op.

 
In het bovenstaande heb je waarschijnlijk enkele overbodige strings (regels) aan je installatie toegevoegd. Maar ik denk niet dat het je veel kan schelen als je de snelheid van je website nu opnieuw meet met Pingdom. (Graag gedaan!)

5. Remove query strings from static resources

Dit is een eenvoudige, maar doeltreffende verbetering voor je score in Pingdom. Het installeren van de plugin Remove Query Strings From Static Resources. Het werkt hetzelfde als het installeren van andere plugins:

Ga aan de achterkant van WordPress naar Plugins > Nieuwe plugin.

Zoek naar Remove Query Strings From Static Resources. Er zijn meerdere plugins die hetzelfde doen. Deze website gebruikt de plugin van Speed Up My Website. Niet omdat we uitgebreid onderzoek hebben gedaan welke plugin de beste is, maar domweg omdat het zo ongeveer de eerste was en de plugin doet wat hij moet doen.

Klik op Nu installeren en daarna op Activeren. Meer is niet nodig. Het werkt vanaf nu.

Het is goed mogelijk dat Pingdom na het activeren van de plugin Remove Query Strings From Static Resources nog steeds ontevreden is. Een reden kan zijn dat je Gravatar gebruikt. Je kunt Gravatar uitzetten. Jetpack > Instellingen > Delen. Op de pagina zie je blok dat er ongeveer uitziet als de afbeelding hieronder.

Zet de pop-up visitekaartjes uit en laat Pingdom nog een keer naar je website kijken.

6. HTML, Javascript en CSS optimaliseren met Autoptimize

Autoptimize is een plugin waarmee het optimaliseren van je website flink wat eenvoudiger wordt. Autoptimize kan scripts en stijlen samenvoegen, verkleinen en cachen. Het injecteert je CSS standaard in de paginakop (maar kan het ook uitstellen). Autoptimize verplaatst en vervangt scripts naar de footer en verkleint de html. Met de opties “Extra” kun je niet-geaggregeerde JavaScript asyncen, WordPress core emoji rommel verwijderen, Google Fonts optimaliseren en meer. Zo verbetert Autoptimize de prestaties van je site. Ook als je al HTTP/2 gebruikt!

Waarom moet de website sneller?

De website moet sneller om ervoor te zorgen dat de website gevonden en gelezen wordt. Een langzame website komt niet hoog in de zoekresultaten omdat Google snellere websites voortrekt. Niet alleen omdat een beter geoptimaliseerde website de voorkeur van Google heeft, maar ook omdat Google meet hoe lang bezoekers op de website blijven. Als een bezoeker te lang moet wachten klikt hij/zij weg voordat de pagina verschenen is. Dit zorgt voor een hoge bounce rate. (Bounce rate is het percentage mensen dat direct of zeer snel alweer teruggaat naar Google.) Dit wordt door Google opgevat als ontevredenheid over de aangeboden zoekresultaten en omdat Google gebaat is bij tevreden gebruikers zal Google de website nog dieper weg laten zakken.

Mijn spreekbeurt (grappig dat Vlaamse organisatoren wèl het woord keynote gebruiken) in Brussel was de reden om deze website tot leven te wekken. Mijn keynote ging helemaal niet websites. Ik sprak over online marketing. Bij online marketing heeft de website allang niet meer dezelfde rol als tien of twintig jaar geleden, maar ik ben ervan overtuigd dat je website op orde moet zijn. Vlaanderen is geweldig. Noem me een watje, maar het doet een beetje pijn als ondernemers me vertellen dat ze als Vlaming kiezen voor Nederlandse webshops. Leuk voor de Nederlandse klanten van ComBron, maar erg slecht voor België.

ComBron is geen concurrent voor Vlaamse communicatieadviseurs

De blogs hier zijn inmiddels al bij een groep Vlaamse collega’s opgevallen. In een e-mail werd me gevraagd of ik in Nederland niet genoeg werk had. De .be-website van ComBron is niet bedoeld om klanten te werven. De reiskosten die ik in rekening moet brengen maakt ComBron in veel gevallen oninteressant voor Belgische bedrijven. De motivatie voor deze website is juist om kleine ondernemers te helpen, dus zitten we niemand in het vaarwater. Ik nodig de Vlaamse collega’s dan ook graag uit om hier of op onze Nederlandse website te bloggen. Iedere bijdrage is welkom zolang het anderen kan helpen.

 
Als er vragen zijn, dan hoop ik dat ze hieronder gesteld worden.