In mijn vorige blog kon je lezen dat een trage website slecht is voor je business. Maar hoe kan je ervoor zorgen dat een trage website weer snel wordt? In deze blog heb ik 15 handige tips op een rij gezet om de snelheid van je website weer beter te maken.

  1. Neem afscheid van je budget hosting
  2. Neem afbeeldingen onder de loep
  3. Controleer en herstel kapotte links
  4. Beperk het aantal assets
  5. Schrap onnodige functies op je website
  6. Maak gebruik van browsercaching
  7. Minimaliseer en combineer assets
  8. Maak gebruik van een CDN
  9. Beperk het aantal redirects
  10. Gebruik geen standaard thema's
  11. Activeer HTTP/2 protocol op je server
  12. Afbeeldingen ‘lazy’ laden
  13. Activeer compressie op je server
  14. Beperk het aantal share widgets
  15. Kies voor standaard lettertypes

1. Neem afscheid van je budget hosting

Iedereen vindt het fijn om geld te besparen, je bent tenslotte een Nederlander. Maar om te besparen op je hosting is een van de stomste dingen die je kan doen voor de snelheid van je website.

Shared hosting is een populaire en goedkope manier om je website te hosten. Met shared hosting deel je de server met 10, 100, of duizenden andere websites. De hostingprovider kan hierdoor de webhosting voordelig aanbieden. De inkoopkosten van de server worden verdeeld over alle websites.

Dit concept klinkt mooi, maar het heeft een aantal nadelen. Ik maak altijd graag de vergelijking met het delen van een huis in je studententijd.

Het is fijn dat je de kosten kan delen en het is gezellig, maar het is niet altijd rozengeur en maneschijn. Een bezette douche in de ochtend of een keuken die vol staat met de afwas van een ander. Laat staan de momenten dat je huisgenoten besloten een feest te geven en jij net de volgende dag een belangrijk tentamen had.

Het is dan ook niet zo gek dat er maar weinig mensen met een eigen huis staan te springen om weer terug te gaan naar hun oude studenten situatie.

Hetzelfde geldt voor je website. Naast shared hosting kan je ervoor kiezen om je website te hosten op een eigen (virtuele) server. Dit brengt enkele voordelen met zich mee.

  1. Je website heeft beschikking over de volledige capaciteit van server.
  2. Je website heeft geen last van de impact van andere websites.
  3. Je bent baas over de server en bepaalt zelf hoe je deze configureert.

Vanaf ongeveer €7,50 per maand heb je al een (virtuele) server. Heb je minder technische kennis? Dan kan je het beste kijken naar een managed (virtuele) server. Hierbij besteed je het technische beheer van je server uit.

Daarnaast zijn er ook hosting oplossingen beschikbaar die speciaal ontwikkeld zijn voor platformen zoals WordPress en Magento. Hierbij is de (virtuele) server optimaal ingericht om bijvoorbeeld het maximale uit je WordPress website te halen.

Doe jezelf en je website een plezier en neem afscheid van goedkope shared hosting oplossingen. Partijen waar ik zelf goede ervaringen mee heb zijn:

2. Neem afbeeldingen onder de loep

Afbeeldingen zijn vaak de grootste snelheid bottlenecks op je website. Afhankelijk van hoe het content management systeem van je website is ingericht kan het voorkomen dat je te grote foto’s kan uploaden naar je website.

Ik zie het vaak genoeg gebeuren dat een afbeelding van 5 a 10 mb wordt geüpload. Wanneer je een paar van dat soort afbeeldingen hebt word je website een stuk trager en zadel je de bezoekers op met onnodige datakosten.

Als eerste moet je ervoor zorgen dat afmetingen van je afbeeldingen afgestemd zijn op het ontwerp van je website. Wanneer je website bijvoorbeeld 700 pixels breed is, zorg er dan voor dat je foto’s maximaal 700 pixels breed zijn (of 1400 pixels voor retina schermen). Het uploaden van een foto van 5000 pixels breed is nergens voor nodig.

Daarna dien je ervoor te zorgen dat je je afbeeldingen optimaliseert door het toepassen van de juiste compressie. Compressie zorgt ervoor dat je bestandsgrootte van je afbeelding kleiner wordt zonder dat er zichtbare kwaliteitsverlies is.

Eén van mijn favoriete tools om afbeeldingen te comprimeren is het gratis te gebruiken TinyPng. Via deze tool upload je een afbeelding en vervolgens kan je gratis een geoptimaliseerde variant downloaden. Vaak reduceert TinyPng je afbeelding met 50% a 70%! Deze reductie zorgt ervoor dat je afbeeldingen een stuk sneller gedownload worden zonder dat je enig kwaliteitsverschil ziet.

Tenslotte is het aan te raden om een aparte set afbeeldingen te hanteren voor bijvoorbeeld smartphones. Vaak zijn de schermen van smartphones een stuk kleiner dan dat van je laptop. Het is dan ook logisch dat je voor smartphones een kleinere variant van een afbeelding laadt.

3. Controleer en herstel kapotte links

In de loop van de tijd kan het gebeuren dat hyperlinks naar pagina’s of afbeeldingen op je website niet meer werken. Je doet er goed aan om dit op regelmatige basis te controleren.

Een kapotte link zorgt namelijk voor een extra vertraging bij het laden van je website. De browser van de bezoeker vraagt alle assets van je website op bij je server. De browser wacht vervolgens op een antwoord van je server voordat deze assets gedownload worden.

Bij een kapotte link duurt het terugsturen van een antwoord naar een browser extra lang omdat de server aan het zoeken is naar een bestand of pagina welke niet meer bestaat.

Met een tool zoals dead link checker kan je eenvoudig je website scannen naar kapotte links. Wanneer je website is voorzien van Google Analytics kan je ook de 404 errors van je website terugvinden binnen Google Analytics.

Herstel vervolgens de kapotte links door middel van een redirect, herstel eventuele gemaakte typefouten, of plaats afbeeldingen en pagina’s weer terug naar hun originele locatie.

4. Beperk het aantal assets

Je website bestaat naast een html pagina uit een hele rits aan assets. Assets zijn bestanden zoals een video, afbeelding, JavaScript, lettertype of een CSS bestand. Je browser is in het ergste geval slechts in staat om één assets tegelijk te downloaden wanneer iemand je website bezoekt.

Stel dat de homepage van je website bestaat uit 2 video;s, 18 afbeeldingen, 8 JavaScript bestanden, 3 lettertypes en 8 CSS bestanden. Je browser moet dan 39 assets stuk voor stuk downloaden. Afhankelijk van de grote kan dit gemiddeld tot wel 10 seconden duren. Dat zijn 10 seconden waarop je bezoeker niet gaat wachten.

Gebruik een tool zoals Pingdom of WebPagetest om te kijken hoeveel assets jouw website gebruikt. Ga vervolgens analyseren of bepaalde assets overbodig zijn voor je website en probeer zoveel mogelijk assets te schrappen.

5. Schrap onnodige functies op je website

Deze tip ligt eigenlijk in het verlengde van de vorige tip. Het is een goede gewoonte om de functionaliteiten van je website tegen het licht te houden.

Op veel websites zie ik dat er gebruik wordt gemaakt van fotosliders. Fotosliders zijn killing voor de snelheid van je website. Niet alleen worden er meerdere foto’s geladen, maar daarnaast heeft een slider vaak ook nog extra JavaScript en CSS nodig om te functioneren. Een slider voegt al snel vijf a tien extra assets toe aan je website.

Je moet je afvragen of het noodzakelijk is om een slider toe te voegen aan je website. Je kan er ook voor kiezen om een duidelijke keuze te maken in de content die je wilt laten zien aan je bezoekers. Aan welke content heeft de bezoeker het meest? Waarschijnlijk de eerste slide in je foto slider. Verwijder de slider van je website en toon enkel de content uit je eerste slide.

6. Maak gebruik van browsercaching

Browser caching zorgt ervoor dat assets van je website worden opgeslagen in de browser van de bezoeker. Dit heeft als voordeel dat bij terugkerend bezoek aan je website de browser van de bezoeker niet meer alle assets opnieuw hoeft te downloaden. Dit bespaart vanzelfsprekend veel tijd en zorgt voor een snellere laadtijden van je website.

Het is redelijk eenvoudig om browsercaching in te schakelen wanneer je website draait op WordPress. Eén van de meest populaire caching plugins voor WordPress is W3 Total Cache. Met deze plugin kan je in een paar eenvoudige stappen browsercaching inschakelen voor je WordPress website.

7. Minimaliseer en combineer assets

Wanneer een developer code schrijft zorgt hij/zij ervoor dat de code goed leesbaar is. Dit wordt gedaan door voldoende witregels te gebruiken en code blokken te voorzien van een juiste inspringing. Deze opmaak is puur voor het leesgemak van de developer en heeft geen verdere invloed op de uitvoering van de code op een server.

Aangezien het niet uitmaakt hoe de code is opgemaakt voor de server kan je de code van je website minimaliseren. Dit houdt in dat je alle witregels en inspringingen verwijdert en alle code achter elkaar plaatst op een regel. De code wordt hierdoor onleesbaar voor mensen, maar een server leest dit nog steeds. Het grote voordeel is dat de bestandsgrootte hierdoor een stuk kleiner wordt.

De volgende stap is het combineren van de verschillende assets. Vaak bestaat een website uit verschillende JavaScript en CSS bestanden. Al deze bestanden hebben hun eigen code en zijn verantwoordelijk voor specifieke functionaliteit op je website. Maar het is zonde om deze bestanden stuk voor stuk in te laden, daarom is het verstandig om alle JavaScript bij elkaar te voegen en alle CSS code bij elkaar te voegen.

In plaats van bijvoorbeeld 10 CSS bestanden hoeft je website nu nog meer één CSS bestand te laden. Je website kan nu sneller beginnen met het laden van de andere assets op je website zoals afbeeldingen, lettertypes of video’s.

Draait je website op WordPress, dan kan je gebruik maken van Autoptimize. Met deze plugin kan je eenvoudig de assets van je website combineren tot één bestand en ook de code van je website minimaliseren.

8. Maak gebruik van een CDN

Een Content Delivery Network (CDN) maakt je website een stuk sneller maken. Een CDN bestaat uit een netwerk van honderden servers die met elkaar in verbinding staan. Deze servers hebben maar één taak en dat is content zo efficiënt mogelijk af te leveren.

Een CDN ondersteunt de server waar je website opdraait met het serveren van de assets van je website. Hierdoor hoeft je server minder hard te werken en kunnen bezoekers de assets op je website sneller en efficiënter downloaden

De servers van een CDN zijn fysiek verspreid over de hele wereld. Dat heeft als voordeel dat bezoekers over de hele wereld dezelfde snelheid kunnen ervaren wanneer ze je website bezoeken. De fysieke afstand van de bezoeker ten opzichte van de server heeft een behoorlijke impact op de laadsnelheid.

Wanneer je website veel bezoekers heeft uit Nederland wil je het liefste je server ook in Nederland hebben staan en niet in de Verenigde Staten of Azië. Maar het is natuurlijk niet te doen om vervolgens zelf in elk land waar je bezoekers vandaan komen een server neer te zetten.

Populaire content delivery networks die je kan gebruiken voor je website zijn CloudFlare, Amazon CloudFront en Akamai

9. Beperk het aantal redirects

Redirects zijn een handig gereedschap om je bezoekers en zoekmachines door te verwijzen naar nieuwe locaties op je website.

Bijvoorbeeld wanneer je een nieuwe website lanceert kan het voorkomen dat inhoud van je website veranderd. Met een redirect kan je dan aangeven dat je teampagina vanaf nu bereikbaar is op de over ons pagina.

Maar pas op dat je vervolgens niet dat je een jaar later nog een keer de over ons pagina gaat doorverwijzen, naar bijvoorbeeld je nieuwe company pagina. Je bent dan redirects aan het stapelen. Het stapelen van redirects heeft een negatieve impact op de snelheid van je website.

Wanneer een bezoeker dan een oude link heeft naar je teampagina wordt die eerst doorverwezen naar je inmiddels oude over ons pagina, om vervolgens nog een keer doorverwezen te worden naar je huidige company pagina.

Het is in zo’n geval beter om de originele redirect aan te passen en een extra redirect toe te voegen. De teampagina verwijst dan door naar de company pagina en je maakt een losse redirect aan die verwijst van de over ons pagina naar de nieuwe company pagina.

10. Gebruik geen standaard thema's

Het is uit kostenoverweging aantrekkelijk om te kiezen voor een standaard thema. Populair zijn de standaard thema’s voor WordPress. Voor een bedrag van een paar tientjes koop je een kant en klaar thema voor je website.

Naast dat je website geen unieke uitstraling heeft met een standaard thema zorgt het vaak ook voor een trage website.

Om een thema voor zo’n laag bedrag te kunnen aanbieden en nog winst te maken, moet de maker van een thema heel vaak hetzelfde thema verkopen. Afhankelijk van de complexiteit kan het wel duizend uur kosten om een thema te maken.

De ontwikkelaar van een thema probeert daarom zoveel mogelijk functionaliteit in het thema te stoppen om een zo groot mogelijke potentiële doelgroep te creëren. Hier zit het grote probleem met betrekking tot de snelheid.

Omdat een thema zoveel functies heeft komt het vaak met veel extra JavaScript en CSS bestanden. Meestal heb je echter maar een heel klein aantal van de functies nodig die het thema aanbiedt. Maar toch worden alle functies van het thema wel standaard geladen.

Met een thema heb je negen van de tien keer dus een website die veel functionaliteiten onnodig laadt. Wanneer je voor snelheid gaat ben je beter af met een opmaat gemaakte website. Hierbij houdt de ontwikkelaar rekening met je wensen en voegt enkel de functionaliteit toe welke je website nodig heeft.

11. Activeer HTTP/2 protocol op je server

Zoals je in tip vier hebt gelezen kan een browser in het slechtste geval maar één asset tegelijk downloaden. Dit komt door beperkingen in het HTTP/1.1 protocol. HTTP staat voor Hypertext Transfer Protocol en is een standaard om te communiceren op het internet.

Het HTTP/1.1 protocol is in circa 1997 geïntroduceerd als de standaard. Pas in 2012 is begonnen met het maken van de opvolger HTTP/2. Deze werkzaamheden voor het protocol zijn pas in mei 2015 afgerond. Sinds eind 2016 zijn browsers het HTTP/2 protocol gaan ondersteunen. Het grootste voordeel van het HTTP/2 protocol voor de snelheid van je website, is de mogelijkheid van de browser om meerdere assets tegelijk te downloaden.

Wanneer een bezoeker van je website een snelle internetverbinding heeft kan deze tegelijk meerdere afbeeldingen van je website downloaden. Dit gaat vanzelfsprekend veel sneller dan het stuk voor stuk downloaden via het oudere HTTP/1.1 protocol.

Neem contact op met je hostingpartij om HTTP/2 protocol te activeren.

12. Afbeeldingen ‘lazy’ laden

Wanneer je website groter is dan de grootte van een beeldscherm, is het zonde om je website in één keer helemaal te laden. Je kan er dan voor kiezen om bepaalde assets van je website ‘lazy’ te laden.

Onder ‘lazy’ laden wordt verstaan dat een asset niet direct wordt ingeladen, maar pas wanneer een bepaalde actie uitgevoerd is. Een veel voorkomende actie waarnaar geluisterd wordt is het scroll gedrag van de bezoeker.

Zo kan door middel van JavaScript gekeken worden hoe ver een gebruiker door de website is gescrold. Op basis van een berekening kan vervolgens gezegd worden dat vanaf dat moment een asset geladen wordt.

Een uitstekende kandidaat voor het ‘lazy’ laden zijn afbeeldingen. Afbeeldingen zijn in de regel de grootste assets van je website en zorgen voor de grootste vertraging. Het is zonde om alle afbeeldingen van je website vooraf te downloaden. Het is veel slimmer om de afbeeldingen pas te laden wanneer de bezoeker naar beneden scrolt.

Wanneer je website op WordPress draait zijn er genoeg plugins beschikbaar om je afbeelding en video’s lazy te laden.

13. Activeer compressie op je server

Je hebt vast wel eens gehad dat je een aantal foto’s of mp3’s wilde versturen. De kans is groot dat je deze eerst samen hebt gevoegd in een zip bestand, om deze vervolgens pas te versturen. Het voordeel van bestanden ‘zippen’ is dat de totale bestandsgrootte een stuk kleiner is geworden door de toegepaste compressie.

Een server kan hetzelfde principe ook toepassen, maar dan voor de assets van je website. Door middel van zogenaamde gzip compression kan de grootte van de pagina’s op je website tot wel 70% verkleind worden.

Het activeren van compressie op je server moet gedaan worden door je hostingpartij.

14. Beperk het aantal share widgets

Share widgets geven bezoekers de mogelijkheid om eenvoudig je website te delen op social media. Populaire share opties zijn het delen van je website op Facebook, Twitter, LinkedIn en via Email.

Maar in de regel komt elke share widget met zijn eigen bijbehorende JavaScript, CSS en afbeeldingen. Dit zijn behoorlijk wat extra bestanden die zeker geen positieve invloed hebben op de snelheid van je website.

Vraag jezelf eens af; Hoe groot is de kans dat iemand mijn website wilt delen op social media? En hoe groot is de kans dat diegene dan niet bereid is om de link vanuit zijn browser te kopiëren naar bijvoorbeeld Facebook, Twitter of zijn mailclient?

Zet vervolgens deze kans af tegen de negatieve snelheid impact welke share widgets met zich meebrengen. Ik durf te stellen dan 9 van de 10 keer je website prima af kan zonder social share widgets.

Want het is natuurlijk niet zo dat je website niet meer gedeeld mag worden op social media wanneer je website niet beschikt over een share widget. Een share widget is puur een gemaksvoorziening voor je bezoekers om je website te delen.

15. Kies voor standaard lettertypes

Zoals je in tip 4 hebt gelezen is het goed om het aantal assets van je website te beperken. Eén van die assets waarop je kan besparen zijn lettertypes.

Twee populaire manieren om lettertypes toe te voegen aan je website zijn Google Fonts en Adobe Typekit. Met deze diensten heb je toegang tot duizenden (gratis) lettertypes.

Maar je moet jezelf afvragen; heeft mijn website per se een hip lettertype nodig, of kan een standaard lettertype ook volstaan op je website ? Het besturingssysteem van een computer of telefoon beschikt namelijk ook over een standaard set lettertypes die je kan gebruiken op je website.

Kiezen voor een set standaard lettertypes betekent vaak een sneller website, maar sluit daarentegen misschien weer minder goed aan bij de rest van je branding. Maak voor jezelf de afweging of je snelheid of juist branding belangrijker vindt.

Tot slot

Heb je wat geleerd van deze tips? Ik zou het dan leuk vinden dat je deze blog deelt met je vrienden en collega’s.

Hulp nodig hebt met het verbeteren van de snelheid van je website? Neem dan contact met mij op voor een vrijblijvende prijsopgave.

Neem contact op