Tips voor een snellere website

Tips voor een snellere website Door Maarten op 17 mei 2017

In tijden van vluchtig consumentengedrag is een website die snel laadt onontbeerlijk. Alleen een paar seconden wachten kan ervoor zorgen dat een potentiële klant wegklikt en doorsurft naar jouw concurrent. Belangrijk dus om te weten waar deze laadsnelheid door beïnvloed wordt. In dit blog bespreken we daarnaast de belangrijkste tips om de snelheid van jouw site op orde te hebben.

Een snelle website, essentieel op meer fronten

De laadtijd van je website is allereerst erg belangrijk voor de beleving van je bezoeker. Zeker wanneer iemand voor de eerste keer op jouw site komt zal diegene snel een paar pagina’s willen scannen om te zien of je biedt waar diegene naar op zoek is. De gebruikservaring in die eerste momenten bepaalt voor een flink deel hoe iemand over jou als mogelijke leverancier oordeelt.

Naast de gebruikservaring is de laadtijd een belangrijke factor waarop jouw ranking door Google bepaald wordt. Snellere websites worden, mits er uiteraard ook relevante content te vinden is, hoger beoordeeld dan minder snelle of trage websites. Vrij logisch ook, aangezien Google er in haar indexatie naar streeft websites te belonen die de gebruikservaring van bezoekers optimaliseert. Of het nou om content, aanwezigheid van relevante links of, in het geval van laadsnelheid, om de techniek van je website gaat.

De snelheid van je website meten

Voordat je weet wat je aan je site moet verbeteren is het uiteraard goed om eerst te weten wat de huidige snelheid van je website is en of er mogelijk elementen te identificeren zijn die de laadsnelheid drukken. Er zijn flink wat tools in omloop die je daarbij kunnen helpen. De bekendste gratis tool is waarschijnlijk van Google zelf, Google PageSpeed Insights. Deze tool geeft je voor zowel desktop als mobiel een totaalscore met bijbehorend lijstje van verbeterpunten mee. Het zal niet altijd lukken om direct de verbeterpunten aan te pakken, maar zorg er wel voor dat de meest urgente verbeterpunten als eerste gedaan worden, zeker als ‘Reactietijd van server verbeteren’ er als punt van aandacht tussen staat!

UX design vs. snelheid

De gebruikservaring op je website wordt voor een belangrijk deel bepaald door het gebruik van afbeeldingen, animaties, video’s en iconen. De keerzijde van het ‘opleuken’ van je website is echter wel dat al deze elementen stuk voor stuk opgehaald moeten worden. Een aansprekend design en een snelle website leven dan ook veelal op gespannen voet met elkaar. Keuzes in het design en hoe met deze keuzes om te gaan zijn van grote invloed op de uiteindelijke performance van je website.

Afbeeldingen

Het optimaliseren van afbeeldingen op jouw website begint bij het kritisch kijken naar het aantal afbeeldingen dat je momenteel op je site hebt staan. Teveel afbeeldingen betekent veel afzonderlijke stukjes laadtijd die opgeteld voor een slechte gebruikservaring kunnen zorgen. Zorg er daarom voor dat je:

  • afbeeldingen verwijdert die weinig toevoegen aan het doel van de pagina.
  • CSS gebruikt voor eenvoudige afbeeldingen, zodat je minder data hoeft op te halen.
  • iconen toevoegt als lettertype en niet als afbeelding.

Je streeft daarnaast natuurlijk ook altijd naar de hoogst mogelijke kwaliteit van je afbeeldingen. Uitdaging is echter dat mooie afbeeldingen vaak ook zware bestanden zijn. Door deze afbeeldingen te comprimeren en te optimaliseren bereik je een snelle laadtijd zonder de kwaliteit van de afbeeldingen teveel te beïnvloeden. Het is daarbij handig om te letten op:

  • De afmetingen van de afbeelding. Een breedte van maximaal 1.000 pixels is vaak al genoeg om de afbeelding goed weer te geven.
  • De resolutie van de afbeeldingen. Door het aantal DPI’s te verlagen kan je een afbeelding van meerdere MB’s terugbrengen naar een laag aantal kB’s, wat enorm scheelt in de laadtijd.
  • Het type bestand dat je gebruikt voor de afbeelding. Gebruik bijvoorbeeld voor eenvoudige afbeeldingen of logo’s met transparantie een png of gif-bestand en voor wat complexere afbeeldingen met meer kleurverschillen een jpg. Let daarbij op dat met een jpg transparantie niet mogelijk is.

Animaties

Animaties kunnen je site wat meer tot leven brengen. Zeker wanneer het dient om uitleg te geven over een product of een relevante visualisatie van hetgeen je aanbiedt, dan kan een animatie een goed idee zijn. Om de snelheid van je site te waarborgen is het verstandig om deze animatie in CSS op te bouwen. Vergeleken met Javascript heb je dan minder grote bestanden nodig om te laden. Zorg ervoor dat de animaties getoond worden via een link die binnen de pagina opent en gebruik het niet voor bijvoorbeeld iconen die constant veranderen, dat leidt de bezoeker alleen maar af.

Snelheid van je site op details

Afbeeldingen, iconen en animaties bepalen voor een groot deel de snelheid van je website. Toch zijn de details van het overige design minstens net zo belangrijk te noemen. Wanneer je niet genoeg aandacht geeft aan zaken als lettertypes, kleuren en lay-out dan kan de overall performance van je site alsnog slecht uitpakken.

Lettertypes

Veel merken willen zich onderscheiden met opvallende lettertypes- en grootte. Vaak wordt daarbij vergeten dat afwijkende fonts ook betekent dat er meer bestanden geladen moeten worden, die de snelheid van je site weer negatief beïnvloeden. Standaard beschikbare fonts zijn daarom aan te raden en mocht je toch voor wat anders willen gaan, beperk je daarbij dan tot 1 of 2 stylingopties, dan blijft de ‘schade’ beperkt.

Gebruik van kleur

Het valt vaak niet eens op, maar het is niet ongebruikelijk dat er op een site veel verschillende kleurcodes worden gebruikt. Laden van kleurcodes kost ook tijd, logisch dus dat je website minder snel is wanneer tal van kleurcodes in je code verwerkt zitten. Standaardiseren van kleuren in een style guide zorgt ervoor dat je het gebruik van kleuren beperkt. Neem daarin ook het gebruik van achtergrondkleuren mee en let goed op het verloop van kleur binnen je website, een verantwoord gebruik hiervan kan ook een snellere website tot gevolg hebben!

Wil je meer weten over de elementen die de snelheid van jouw website beïnvloeden? We gaan graag het gesprek met je aan om te kijken hoe we UX voor jou in kunnen zetten om de gebruikservaring van jouw bezoeker te optimaliseren. Neem contact met ons op via 020-7372421 voor meer informatie.