De snelheid van een website heeft een grote invloed op de gebruikerservaring, SEO en conversiepercentages. Het verbeteren van de websiteprestaties is essentieel om verkeer naar een website te trekken en bezoekers betrokken te houden. Hier bespreken we stappen die ontwikkelaars kunnen nemen om een website sneller te maken:
Test website prestaties
Websitesnelheidstests beoordelen hoe een website presteert. Het regelmatig testen van een website kan ontwikkelaars helpen bij het opsporen van prestatieverlagingen of -verbeteringen. Een snelheidstest moet ontwikkelaars ook helpen enkele of alle gebieden te identificeren die de prestaties van de website vertragen, en waar de gebieden voor verbetering liggen.
Er zijn tal van hoogwaardige tests voor het meten van de snelheid van websites, waarvan vele gratis. WebPageTest.org (dat samenwerkt met Cloudflare) heeft verschillende gratis tests en produceert gedetailleerde overzichten van hoe snel individuele elementen van een pagina laden. Met WebPageTest.org kunnen ontwikkelaars ook websites testen voor verschillende apparaten en netwerkverbindingssnelheden.
Google biedt ook PageSpeed Insights voor gedetailleerde prestatietests. Google Chrome DevTools kan ontwikkelaars ook helpen bij het beoordelen van de prestaties van hun site; het tabblad Netwerk toont alle HTTP-verzoeken, hoe groot de aangevraagde middelen zijn en hoe lang het duurt voordat de verzoeken worden ingewilligd.
Gebruik een CDN (content delivery network)
CDN’s verhogen de snelheid van websites door de inhoud op meerdere locaties ter wereld te cachen. CDN caching servers bevinden zich meestal dichter bij de eindgebruikers dan de host of origin server. Verzoeken om inhoud gaan naar een CDN-server in plaats van helemaal naar de hostserver, die zich duizenden kilometers en over meerdere autonome netwerken van de gebruiker kan bevinden. Het gebruik van een CDN kan leiden tot een enorme vermindering van de laadtijd van pagina’s.
Afbeeldingen optimaliseren
Afbeeldingen vormen een groot percentage van het internetverkeer, en het laden ervan op een website duurt vaak het langst omdat beeldbestanden vaak groter zijn dan HTML- en CSS-bestanden. Gelukkig kan de laadtijd van afbeeldingen worden verkort door deze te optimaliseren. Het optimaliseren van afbeeldingen houdt meestal in dat de resolutie wordt verlaagd, de bestanden worden gecomprimeerd en de afmetingen worden verkleind.
CSS- en JavaScript-bestanden minimaliseren
Het minimaliseren van code betekent het verwijderen van alles wat een computer niet nodig heeft om de code te begrijpen en uit te voeren, inclusief code-commentaar, witruimte en onnodige puntkomma’s. Dit maakt CSS- en JavaScript-bestanden iets kleiner. Dit maakt CSS- en JavaScript-bestanden iets kleiner, zodat ze sneller laden in de browser en minder bandbreedte in beslag nemen. Op zichzelf leidt minificatie slechts tot minimale snelheidsverbeteringen. In combinatie met deze andere tips zal het echter leiden tot betere websiteprestaties.
Verminder indien mogelijk het aantal HTTP-verzoeken
Voor de meeste webpagina’s moeten browsers meerdere HTTP-verzoeken doen voor verschillende onderdelen van de pagina, zoals afbeeldingen, scripts en CSS-bestanden. Voor veel webpagina’s zijn zelfs tientallen van deze verzoeken nodig. Elk verzoek resulteert in een retourtje naar en van de server waarop de bron staat, wat de totale laadtijd van een webpagina kan verlengen. Bovendien, met bronnen geladen van verschillende providers, een probleem met een van de hosts kan invloed hebben op de webpagina’s vermogen om snel te laden, of op alle.
Vanwege deze potentiële problemen moet het totale aantal middelen dat elke pagina moet laden tot een minimum worden beperkt. Ook moet een snelheidstest helpen vaststellen welke HTTP-verzoeken de meeste tijd kosten. Als bijvoorbeeld afbeeldingen een pagina langzaam laden, kunnen ontwikkelaars op zoek gaan naar een snellere oplossing voor het hosten van afbeeldingen (zoals een CDN).
Gebruik HTTP-caching van de browser
De browsercache is een tijdelijke opslagplaats waar browsers kopieën van statische bestanden opslaan, zodat ze recent bezochte webpagina’s veel sneller kunnen laden, in plaats van steeds opnieuw dezelfde inhoud te moeten opvragen. Ontwikkelaars kunnen browsers opdragen elementen van een webpagina die niet vaak veranderen in de cache op te slaan. Instructies voor browser caching staan in de headers van HTTP responses van de hosting server. Dit vermindert de hoeveelheid gegevens die de server naar de browser moet sturen aanzienlijk, waardoor de laadtijd voor gebruikers die bepaalde pagina’s vaak bezoeken, korter wordt.
Minimaliseer de opname van externe scripts
Alle gescripte webpagina-elementen die van elders worden geladen, zoals externe commentaarsystemen, CTA-knoppen of pop-ups voor leadgeneratie, moeten telkens worden geladen wanneer een pagina wordt geladen. Afhankelijk van de grootte van het script kunnen deze een webpagina vertragen of ervoor zorgen dat de webpagina niet in één keer wordt geladen (dit wordt ‘content jumping’ of ‘layout shifting’ genoemd en kan vooral frustrerend zijn voor mobiele gebruikers).
Gebruik indien mogelijk geen redirects
Een redirect is wanneer bezoekers van een webpagina worden doorgestuurd naar een andere pagina. Redirects voegen enkele fracties van een seconde, of soms zelfs hele seconden, toe aan de laadtijd van een pagina. Bij het bouwen van een prestatiegerichte website telt elke seconde. Redirects zijn soms onvermijdelijk, maar ze moeten niet worden gebruikt als het niet nodig is.