De tijd dat we bereid waren 20 seconden te wachten op het inbellen via de telefoonlijn ligt ver achter ons. We leven in een snelle tijd. We want it all and we want it now! Bezoekers hebben een heel kort lontje. Laadt de pagina niet snel genoeg, dan zijn ze weg: terug naar Google en door naar de concurrent. In een competitieve markt maakt een snelle laadtijd van je website een groot verschil.
Wat betekent dat voor webbouwers?
Bij het bouwen van een snelle website dient de webbouwer rekening te houden met een aantal vuistregels:
- Gebruik zo min mogelijk resources
Elk bestand dat moet worden geladen heeft tijd nodig. Het moet worden verstuurd, uitgelezen en uitgevoerd. Vijf bestanden versturen en openen kost vijf keer zoveel tijd als een bestand versturen en openen. Het combineren van bestanden, bijvoorbeeld stylesheets en javascripts verdient hier dus de voorkeur. - Niet nodig? Dan hoort het niet in de code
Als je werkt met een systeem als WordPress heb je onvermijdelijk te maken met ‘digitaal overgewicht’: bestanden die de website niet nodig heeft maar toch worden ingeladen. Dit is uiteraard wel tot een minimum te beperken. De belangrijkste tip: gebruik geen grote themes zoals Jupiter, Avada, Enford, etc. Deze themes bevatten veel programmeercode die je niet gebruikt op de website. Wanneer je als webbouwer zelf een maatwerk theme opbouwt, heb je front-end zo weinig mogelijk overgewicht. - Zorg voor een tool die afbeeldingen optimaliseert
Niet iedereen beschikt over professionele tools als Photoshop om foto’s te optimaliseren. En, laten we eerlijk zijn, als je een blog post, wil je gewoon een geschikte foto plaatsen zonder na te denken over optimalisatie. Fotografen hebben echter de gewoonte om zo groot mogelijke bestanden aan te leveren. Daarom is het aan te raden een plugin te installeren als WP Smush die foto’s automatisch optimaliseert bij het uploaden. Dat voorkomt het inladen van onnodig grote bestanden en houdt het werk eenvoudig voor de sitebeheerder. - Maak gebruik van caching
Bij caching wordt een webpagina tijdelijk opgeslagen. De eerste bezoeker van de pagina moet even wachten tot de pagina is gegenereerd. Als dat eenmaal is gebeurd, wordt het resultaat opgeslagen en hergebruikt voor de volgende bezoeker. Hij krijgt de pagina dus veel sneller te zien. Een mooie techniek die het web vele malen sneller maakt. Caching is echter niet de oplossing voor alles. Ik maak een vergelijking met het bouwen van een raceauto. Wanneer je een raceauto hebt gekocht van 2000 kg en je wilt die sneller laten rijden kan je twee dingen doen:- Het motorvermogen uitbreiden: een grotere motor zorgt immers voor meer power waardoor de auto harder gaat rijden. Dit komt ook met een aantal substantiële nadelen.
– De auto wordt nog zwaarder
– Je kunt met al dat gewicht geen fatsoenlijke bocht meer nemen
– Grotere motoren vergen meer onderhoud
– Je verbruikt veel meer brandstof - De auto lichter maken: een lichtere auto komt makkelijker vooruit dan een zware. Stuurt trouwens ook veel prettiger een bocht door. Als je alle overbodige onderdelen van de raceauto afhaalt, gaat deze automatisch harder rijden. Denk aan zaken als een reservewiel, achterbank, bijrijdersstoel, etc. Ook dit komt met nadelen maar dan van een heel andere orde:
– Als je een bijrijder mee wilt nemen zit hij ongemakkelijk
– Als je een lekke band hebt, heb je geen reservewiel mee
In deze vergelijking is de nieuwe website van RealHosting een lichtere raceauto. De voordelen zijn duidelijk. De site is licht en laadt daardoor snel. Als nadeel zou je kunnen noemen dat wanneer RealHosting de site wil uitbreiden, ze in veel gevallen een programmeur nodig hebben. Een visual builder heeft veel panklare oplossingen die een gebruiker zo kan oppakken en gebruiken. Goedkoop in uitvoering dus, maar duur in termen van snelheid. Dat heeft deze site niet. De mogelijkheid om snel en goedkoop uit te breiden wordt betaald met het inboeten op snelheid. Omdat alle techniek modulair is opgebouwd en conform de WordPress Codex, is een uitbreiding alsnog snel en kostenefficiënt uit te voeren.
- Het motorvermogen uitbreiden: een grotere motor zorgt immers voor meer power waardoor de auto harder gaat rijden. Dit komt ook met een aantal substantiële nadelen.
- Onderhoud
Het geoptimaliseerd houden van de laadtijd van een dynamische website vergt onderhoud. Dit heeft twee redenen:- Er wordt continu gewerkt aan de site. Nieuwe content en nieuwe functionaliteit hebben mogelijk impact op de laadtijd van de site. Daarom is het verstandig om de website blijvend te monitoren en bij te sturen waar nodig.
- Nieuwe technieken zorgen voor nieuwe resultaten. Zo is PHP 7 vele malen sneller dan PHP 5.6 en is PHP 7.2 weer veel sneller dan PHP 7.1. Blijf sleutelen aan je raceauto, dan blijf je altijd aan kop.
Hoe blijf je de concurrentie voor?
Wil je meer weten over de snelheidsoptimalisatie van websites? Lees dan het artikel: Het belang van een snelle WordPress website.
Hosting
Uiteraard is hosting een belangrijk onderdeel van de uiteindelijke laadtijd. Een goede setup met technieken als bijvoorbeeld Ngnix, MariaDB en PHP7 kan een groot verschil maken. Aangezien dit artikel vooral gaat over de techniek achter de website ga ik daar verder niet op in. Vragen over hosting kan je stellen via het contactformulier, RealHosting kan je dan meer vertellen over de mogelijkheden.
Tools
Er zijn een aantal tools waarmee je goed kunt bekijken of de site die je ontwikkelt op de juiste manier wordt opgebouwd.
Google Page Speed insights
https://developers.google.com/speed/pagespeed/insights/
Google is dol op efficiënte code en snelheid. Deze eigenschappen hebben een positieve invloed op de ranking van je website. Snelle sites worden beter geïndexeerd dan langzame sites. Google beoordeelt de website vooral op techniek, minder op daadwerkelijke snelheid. Voor de elementen ‘boven de vouw’ dient alle code direct beschikbaar te zijn. Elementen die niet direct zichtbaar zijn moeten juist later (asynchroon) worden ingeladen. Wij houden een gewenste minimale score van 80/100 aan. Uiteraard hebben we eens geprobeerd de maximale score van 100/100 te halen. Dat is gelukt maar commercieel gezien niet aantrekkelijk. Het laatste stukje optimalisatie kost veel tijd en levert volgens ons geen voordeel in de indexering op ten opzichte van een site die hoger dan 85/100 schoort. Leuk weetje: het gebruik van de Google Tag Manager kost punten. Google geeft dus ‘strafpunten’ voor het gebruik van een van zijn eigen tools 😉.
Webpagetest.org
https://www.webpagetest.org/
Webpagetest geeft een veel meer technische kijk op een website. In deze tool kan je eenvoudig zien hoeveel resources er worden geladen, welke resources onnodig veel tijd kosten en welke misschien wel missen. Wij halen websites altijd door deze tool tijdens en na het ontwikkelen om te zien of er nog winst te behalen valt.
Conclusie
Opereer je in een competitieve markt, net zoals RealHosting? Zorg er dan voor dat je de concurrentie voorblijft door een website te bouwen die zich primair richt op de gestelde doelen, maar daarnaast laadtijd heel serieus neemt. Vraag je webbouwer vooraf of hier rekening mee wordt gehouden bij het bouwen en laat je niet verleiden tot het uitzoeken van een groot thema dat er lekker uitziet. Een goede webbouwer maakt snelle websites ‘by design’. Een bestaande zware raceauto lichter maken kost veel meer tijd dan vanaf de start snelheid als uitgangspunt te nemen. Geef de webbouwer opdracht om maatwerk te bouwen, dan bereik je het beste resultaat.
Over New Fountain
New Fountain ontwikkelt professionele WordPress websites op maat. Websites die voor je werken. Hierbij staat de bezoeker altijd centraal. Daarnaast wordt er veel aandacht besteed aan de juiste technieken voor zoekmachineoptimalisatie en zorgt New Fountain ervoor dat de website een waardevol verlengstuk wordt van de organisatie.
In juli 2018 lanceerde New Fountain de nieuwe website voor RealHosting waarvoor ze de wirefames én technische realisatie mochten verzorgen. Het design is aangeleverd door Eagerly, een webbureau uit Utrecht. De nieuwe website heeft als belangrijkste doel om meer leads te genereren en moet het merk RealHosting verder laden.