Een langzame website kost je omzet!

6 maart 2018

Het is tegenwoordig algemeen bekend dat het mobiele internetverkeer een piek heeft bereikt en zelfs desktop voorbij is gegaan. Daarom is het nóg meer van belang dat een website en vooral webshop perfect geoptimaliseerd is voor mobiele gebruikers. Dit kan onder andere door de ‘user experience’ te verbeteren, waar mijn collega Ties onlangs een blogbericht over heeft geschreven, maar dit kan ook door puur en alleen de snelheid van een mobiele website te optimaliseren. In dit blogbericht ga ik dieper in op het belang van deze snelheid, voornamelijk voor webshops, en geef ik wat tips om dit te verbeteren. De tips kunnen wat technisch worden, dus hulp van een developer is geen overbodige luxe.

Risico’s van een langzame website

Wanneer gebruikers via hun mobiele telefoon een website openen zijn ze zeer ongeduldig. Het is zelfs zo dat ⅓  van de gebruikers een bezoek op een mobiele website afbreekt wanneer de website niet binnen 3 seconden laadt. Per seconde laadtijd wordt de kans op afbreken van een websitebezoek zelfs steeds groter.

Aangezien de laadtijd bij 3 van de 4 mobiele websites langer dan 10 seconden is, en de gemiddelde laadtijd 19 seconden is, blijkt dat er nog veel verbetering mogelijk is op het gebied van mobiele websites. Vooral wanneer je weet dat iedere seconde vertraging in mobiele laadtijden een impact kan hebben op mobiele omzet tot 20%.

Wij marketeers stoppen veel tijd en moeite in de beste advertenties en de ervaring voordat iemand op de website komt, maar uiteindelijk missen we veel conversies door een langzaam ladende website.

Verbetertips om website snelheid te verbeteren

Om de snelheid van je mobiele website of webshop te verbeteren en uiteindelijk meer omzet te genereren, geef ik 5 tips. Hierdoor zou de basis goed moeten staan:

1. Gebruik tools om de snelheid van je website te meten

Om zelf de snelheid van een pagina te meten heeft Google een tool ontwikkeld genaamd PageSpeed Insights. Daarnaast kan zelfs de mobiele gebruikservaring worden gemeten op Test My Site. Het fijne aan deze 2 tools is dat ze direct wat tips geven om de snelheid te verbeteren. Naast je eigen website doormeten krijg je ook inzicht in hoe je ervoor staat tegenover de concurrentie. Hierbij zie je zelfs hoeveel omzet je misloopt op je website door langzame laadsnelheden. De tool om dit door te meten heet ‘Impact Calculator’.

2. Voldoe zeker aan de volgende optimalisaties

  1. Vermijd landingspagina redirectsWanneer er een redirect op de pagina zit waar je verkeer naartoe stuurt, wordt de server van de website meerdere keren aangeroepen om bepaalde acties door te voeren. Denk bijvoorbeeld aan gebruikers die naar de homepagina surfen op hun mobiele telefoon en daarna worden ge-redirect naar m.homepagina.com. Het beste is om een responsive design te bouwen waar geen redirects nodig zijn.
  2. Activeer compressie, browser caching en minify codeAls gzip compressie geactiveerd is voor je website/webshop kan dit zorgen tot 90% snellere respons tussen server, website en gebruiker. Dit is wat technischer en geavanceerder, maar zeker een aanrader! Wanneer hiernaast browser caching wordt geactiveerd zal een pagina van een eerdere bezoeker sneller laden, omdat elementen worden opgeslagen en niet alsnog volledig opgehaald dienen te worden. Minify code verwijst naar het proces van het verwijderen van onnodige of overtollige gegevens zonder dat dit invloed heeft op hoe de bron door de browser wordt verwerkt – b.v. opmerkingen en opmaak van code, verwijderen van ongebruikte code, gebruik van kortere variabelen- en functienamen etc.
  3. Verbeter server responstijdDit puntje zit vooral aan de kant van de webhosting van je website of webshop. Het kan voorkomen dat een website langzaam is doordat de server niet snel genoeg communiceert. Een richtlijn hierbij is dat je de server responstijd onder 200 milliseconden moet houden.
  4. Optimaliseer afbeeldingen en CSSZorg voor afbeeldingen dat ze niet te groot zijn qua bestandsgrootte. Dit kun je enerzijds doen door de afmetingen van een afbeelding te reduceren tot wat maximaal nodig is. Daarnaast is de juiste bestandstype- en compressie belangrijk. Zo is een JPEG formaat voor foto’s ideaal en PNG voor afbeeldingen met transparante achtergronden. Voor het optimaliseren van CSS zijn er onder andere optimalisaties op basis van plaatsing in de HTML en de structuur van de code mogelijk. Zie deze pagina voor meer informatie.
  5. Breng prioriteit aan laden visuele contentEen pagina hoeft niet per se direct volledig geladen te worden. De best-practice is om de data boven de fold eerst te laten laden, zodat een gebruiker zo snel mogelijk content kan zien (en de website niet verlaat). Hierdoor dient mogelijk de HTML aangepast te worden qua volgorde. Denk bijvoorbeeld aan om externe bronnen zoals widgets op een later moment te laten laden dan de ‘hoofd content’ van een pagina.

3. Gebruik het RAIL-model om prestaties te meten

Het RAIL-model is een prestatiemodel waarbij de gebruiker centraal staat. In dit model wordt de gebruikerservaring in specifieke acties opgedeeld waarbij laadtijden centraal staan:

    1. Response
      Gebruikers spenderen een groot gedeelte van hun tijd om te wachten op websites die reageren op hun input, naast het laden van een pagina zelf. Denk hierbij aan respons na klikken op buttons, formulieren invullen of starten van animaties. De richtlijn is om tussen de 50 en 100 milliseconden te blijven met een reactie op input van een gebruiker
    2. Animation
      Zorg dat bij een animatie op de webpagina een frame in 10 milliseconde geproduceerd is.
    3. Idle
      Gebruik ‘inactieve tijd’ om na de belangrijkste onderdelen de rest van de pagina te laden. Dit sluit aan op het eerder genoemde kopje ‘Breng prioriteit aan laden visuele content’.
    4. Load
      Zorg dat binnen 5 seconden content visueel is en dat een pagina interactief is.

Dit model kan gebruikt worden om iedere x-termijn (bijv. een maand) een website te meten en analyseren, zodat hij aan de richtlijnen voldoet.

4. Bouw AMP pagina’s

AMP pagina’s, of Accelerated Mobile Pages zijn pagina’s volledig geoptimaliseerd voor mobiel gebruik. Dit is een specifiek ontworpen techniek waardoor HTML eenvoudiger en sneller kan worden verwerkt. Zonder te diep in de technische materie te gaan, gaat AMP net wat anders met HTML, JavaScript en Cache om. Google geeft aan: “veel ontwikkelaars kunnen zelfs binnen een week AMP-versies van hun pagina’s maken.” Om AMP te leren en toe te passen zijn er meerdere tools en trainingen ontwikkeld: Create your first AMP page, AMP foundations en AMP advanced concepts.

5. Maak gebruik van pre-rendering en pre-fetching

Wanneer je het browsegedrag van een website in kaart hebt, kun je gebruik maken van pre-rendering of pre-fetching. Dit is een techniek om alvast een pagina op de achtergrond te laden, waar de gebruiker hoogstwaarschijnlijk heen gaat als volgende pagina. Door in het <head> gedeelte van de HTML van een pagina een stukje code te plaatsen, geef je een hint aan de browser om alvast de volgende pagina te laden.Het verschil tussen pre-rendering en pre-fetching is dat bij de eerste optie een gehele pagina alvast wordt geladen, maar bij pre-fetching alleen een aangegeven gedeelte van de pagina.

Verbeter je website snelheid vandaag nog!

Dit blogbericht heeft hopelijk de invloed duidelijk gemaakt van de websitesnelheid op de prestaties en vooral omzet. Door het verbeteren van deze snelheid zorg je dat gebruikers op je website komen en blijven, maar vooral dat de kans tot conversie hoger is.

Door enkele verbetertips kun je zelf al wat optimalisaties doorvoeren waardoor de basis goed zou moeten staan. Voor meer info of hulp bij dit onderwerp kun je altijd contact opnemen met ons!

Plaats een Reactie

We are part of Happy Horizon