Maak je website sneller

Weet je dat de snelheid van je website meeweegt in je score bij zoekmachines?

Een snelle site wordt gewaardeerd door de bezoeker omdat de pagina’s na aanklikken snel op het beeldscherm verschijnen. Omdat mensen een snelle site als prettiger ervaren en snelle websites mensen beter van dienst zijn doordat ze een betere gebruikerservaring geven, laat Google deze sites beter scoren.

 

Gevolgen van een trage website

Uit onderzoek is ook gebleken dat mensen op een trage website minder pagina’s bekijken dan op een snelle website. De snelheid van de website is terug te zien in de omzet van de webwinkel. Een groot deel van de bezoekers verlaat de winkelwagen zonder af te rekenen en bijna de helft geeft daarvoor als reden dat de site traag is.

Los van de gebruikerservaring is het ook zo dat een langzame (grote) site niet snel genoeg door Google geïndexeerd kan worden. Dit is goed merkbaar als je nieuwe pagina’s toevoegt aan zo’n site: afhankelijk van de grootte en traagheid van je site kan het maanden duren voordat Google überhaupt aan een nieuw artikel toekomt.

Als jij een langzame website hebt, leidt dat tot omzetverlies omdat mensen sneller je website verlaten en omdat de site minder goed scoort bij Google.

 

Hoe snel moet je website zijn?

Snelheid wordt steeds voor bezoekers steeds belangrijker. In 2010 verwachtte de helft van de mensen dat een website binnen 2 seconden op zijn scherm stond. Tegenwoordig verwachten desktop gebruikers een website binnen 1 à 2 seconden op het scherm. Voor zolang het nog duurt zijn mobiele surfers zijn op dit moment wat geduldiger.

Netdata stuurde ons een veelzeggende infographic die goed de impact van een trage website laat zien. Bedankt voor deze waardevolle toevoeging, Netdata!

 

 

 

Maak je website sneller

Een simpele HTML-site zonder grote afbeeldingen is razendsnel. Maar bijna iedereen gebruikt een CMS zoals WordPress of Joomla. Vergeleken met een HTML-site zijn dat ingewikkelde systemen met vele php-bestanden en een database. Een dergelijke site wordt dan al snel traag en log. Door wat trucjes kun je zo’n site toch een stuk sneller maken.

Het is de moeite waard om te investeren in de snelheid van je website. Iedere website is anders en heeft dus andere verbeterpunten, maar hieronder geef ik je 8 tips gebaseerd op knelpunten die ik het vaakst tegenkom.

 

Test de snelheid van je website

Voordat je begint met het verbeteren van de snelheid van je website, is het een goed idee om eerst een idee te hebben van de huidige snelheid. Op deze manier kun je ook checken of je inspanningen resultaat hebben. Er zijn diverse sites met tools om de snelheid van je website te testen. Een aanrader is Pingdom.
Vul je URL in en selecteer een testlocatie zo dicht mogelijk bij Nederland (als daar de servers van je hoster staan) en klik op de knop Start test.

 

 

Een andere aanrader is GTmetrix.
Het is overigens aan te raden meerdere malen de test uit te voeren, omdat een enkel testresultaat kan berusten op toeval.

 

1. Zorg voor goede hosting

De server waarop je website draait bepaalt voor een belangrijk deel hoe snel je website is of hoe snel deze kan gaan worden. Als je site op een trage server staat, dan heeft het überhaupt weinig zin om te beginnen met optimaliseren. Die trage server blijft de remmende factor op jouw snelle website en het resultaat van je inspanningen is en blijft een trage website.

Hebben al je inspanningen niet voldoende resultaat, kijk dan eens kritisch naar de hosting die je afneemt en bezuinig er niet op als een snelle website belangrijk voor je is. Bij Stip Hosting weten we dat een snelle website belangrijk voor je is. Daarom gebruiken we professionele en goed geconfigureerde servers in een datacenter in Amsterdam die zijn geoptimaliseerd voor een snelle en probleemloze werking van WordPress en Joomla.

 

2. Verklein afbeeldingen

Het komt erg vaak voor dat ik op websites afbeeldingen aantref van 1, 2, 3 of nog meer MB. Vooral bij Joomla websites gebeurt dit veel omdat in tegenstelling tot WordPress, in Joomla geen voorzieningen zijn ingebouwd om afbeeldingen te verkleinen. Vaak wordt bij Joomla een grote afbeelding geschaald weergegeven waardoor je op de website niet ziet dat de afbeelding eigenlijk heel groot is. Achter de schermen wordt de originele (grote) afbeelding ingeladen.

Verklein daarom afbeeldingen in een fotobewerkingsprogramma zoals Photoshop vooraf tot het juiste formaat.
Als je al grote afbeeldingsbestanden op je website hebt staan, kun je ze ook achteraf nog verkleinen. Je moet dan eerst de juiste lengte en breedte achterhalen van een afbeelding. Gebruik je Google Chrome als browser, dan kun je dat gemakkelijk achterhalen. Surf naar je website en ga naar de pagina met het grote afbeeldingsbestand. Klik met de rechtermuisknop op de afbeelding en kies vervolgens voor Element inspecteren. De browser geeft nu in het blauw de opmaakcode van het plaatje weer. Ga met je muiswijzer op de blauwe regel staan. Als je bij de miniatuur van het plaatje alleen de lengte en breedte in pixels ziet staan, dan zit je goed: de afbeelding op de server is al verkleind naar de afmetingen zoals je die ziet op je website. Staat er tussen haakjes de natuurlijke maten achter, dan is er werk aan de winkel. Deze afbeelding moet je verkleinenen. Noteer de geschaalde (eerste) maten.

 

Open vervolgens de originele afbeelding in bijvoorbeeld Photoshop en schaal de afbeelding naar de genoteerde diemensies en sla de afbeelding op. Als je het goed wilt doen, sla je de afbeelding op met een resolutie van 72 dpi en een kwaliteit van circa 65%. In Photoshop kun je dit eenvoudig doen door te kiezen voor File > Save For Web.
De nieuwe afbeelding upload je daarna via je FTP-programma naar de juiste map van je website, waarbij je de oude versie van de afbeelding overschrijft.

 

3. Comprimeer bestanden

Op de meeste webservers draait software die ervoor kan zorgen dat je website sneller laadt. Om deze mogelijkheden te gebruiken moet je de serversoftware wel aanroepen. Dit doe je met een .htaccess bestand. Veel websites hebben al een .htaccess bestand, maar zelden worden de mogelijkheden hiervan goed benut.

Compressie verkleint de grootte van een bestand. Het is vooral effectief voor HTML-bestanden, JavaScript, CSS stylesheets en XML-bestanden. Een reductie van 60% tot 80% in bestandsgrootte is niet raar en het is dus een goede manier om je website sneller te maken. Op een webserver wordt hiervoor mod_deflate en/of mod_gzip gebruikt,

Je kunt deze modules gebruiken voor je website via het .htaccess bestand. Het .htaccess bestand wordt altijd gelezen door de browser, dus alles wat je erin zet wordt meegenomen. Je moet wel voorzichtig omgaan met dit bestand: maak je een fout of zijn bepaalde regels niet toegestaan op de webserver, dan kan je website onbereikbaar zijn. Je krijgt dan een 500 Internal Server Error. Krijg je zo’n foutmelding, verwijder dan het .htaccess bestand en begin opnieuw.

Via je FTP-programma log je in op je website en download je het .htaccess bestand naar je computer. Je kunt het bestand daarna openen in Kladblok.
Kun je in je websitemap geen .htaccess bestand vinden, maak dan in Kladblok een htaccess.txt bestand aan. Als je het bestand klaar hebt kun je het uploaden en hernoemen naar .htaccess.

Ik raad je aan om onderstaande wijzigingen stapsgewijs door te voeren, d.w.z. dat je een stukje code plaatst, het bestand opslaat en uploadt naar je website. Daarna test je je website en als deze nog goed werkt, ga je naar de volgende stap. Krijg je een foutmelding, check dan of je een fout hebt gemaakt en herstel die. Verwijder anders de laatst geplaatste code omdat de server het mogelijk niet ondersteunt. Het kan leuk en handig zijn om tussentijds de snelheid te testen op Pingdom of GTmetirx.

Om mod_deflate te gebruiken kun je onderstaande code in je .htaccess bestand plaatsen. Je kunt over het algemeen zonder problemen zowel de code voor mod_deflate als voor mod_gzip plaatsen, zelfs als slechts een van beide modules op de server aanwezig is.

 

Mod_deflate

 

Mod_gzip

 

 

4. Gebruik browser caching

Met browser caching geef je de browser de opdracht om bepaalde bestanden voor een bepaalde tijd vast te houden in zijn geheugen (cache). Dit zorgt ervoor dat het bestand niet telkens opnieuw hoeft te worden ingeladen vanaf de server, maar al aanwezig is in de cache van de browser. Dit scheelt tijd.
Als op de webserver de modules mod_expires en mod_headers aanwezig zijn kun je onderstaande code in je .htaccess bestand plaatsen.

 

Expires headers

 

Cache-control headers

 

 

5. Verwijder ongebruikte plugins of extensies

Hoe kleiner de database van je site, hoe sneller de benodigde informatie eruit kan worden gehaald. Veel sites gebruiken plugins of extensies die niet worden gebruikt. Zelfs een gedactiveerde plugin of extensie slaat vaak informatie op in de database. Verwijder ze daarom als je ze niet meer gebruikt.

 

6. Revisies opschonen

WordPress, en sinds kort heeft Joomla ook die mogelijkheid, bewaart oudere versies van je berichten en pagina’s. Met een oudere versie achter de hand kun je makkelijk een back-up terugzetten van een pagina of bericht. Door het opslaan van oude versies neemt de grootte van de database enorm toe.
In Joomla kun je een limiet instellen op het aantal oudere versies van een pagina of bericht dat je wilt bewaren.
Helaas kan dit niet in WordPress. Ik raad aan om gebruik te maken van de gratis plugin WP-Optimize. Je verwijdert hiermee oudere versies van berichten en pagina’s en kunt instellen dat dit automatisch, bijvoorbeeld wekelijks, gebeurt.

 

7. Voeg CSS en Javascript bestanden samen

De meeste sites maken gebruik van meerdere Javascript- en CSS-bestanden. Al die bestanden moeten ingeladen worden en daarvoor moet de browser telkens een bestandje ophalen en inlezen. Het inlezen van meerdere kleine bestanden kost meer tijd dan het inlezen van één groot bestand.
Je kunt hiervoor het beste gebruik maken van een plugin. Voor Joomla adviseer ik JCH optimize en voor WordPress Autoptimize. Je kunt in zo’n plugin gedetailleerde instellingen doen met betrekking tot het samenvoegen van bestanden.
In veel premium templates zijn overigens al mogelijkheden aanwezig om CSS en Javascript bestanden samen te voegen en in dat geval heb je geen extra plugin nodig.

Niet elke site reageert even goed op zo’n samenvoeging. Met name het samenvoegen van Javascripts kan problemen opleveren. Het samenvoegen van CSS bestanden geeft zelden een probleem en is veiliger te gebruiken.

Veel plugins die bestanden kunnen samenvoegen, hebben ook de mogelijkheid om de scritps te minimaliseren. Daarbij worden onnodige spaties, commentaar, tabs en witregels uit de code verwijderd, zodat de totale bestandsgrootte afneemt. Vaak reageert een site daar niet goed op. Wees dus voorzichtig met deze opties.

 

8. Kies voor de nieuwste PHP-versie

Op de webserver draait PHP en de laatste versie hiervan, geeft een behoorlijke snelheidsverbetering voor websites met een CMS. Sommige sites worden twee à drie keer zo snel.
Niet elke website kan draaien op de nieuwste PHP-versie; met name oudere versies van een CMS zijn niet geschikt.
Bij Stip Hosting kun je zelf je in het hosting control panel zelf je PHP-versie kiezen.