Algemeen

Hoe beïnvloedt design de website performance?

leadership

Studies tonen aan dat een groot deel van je bezoekers de website verlaten wanneer deze niet binnen 3 seconden geladen is. Daarnaast is het effect van laadtijd ook direct zichtbaar in de conversie. De laadtijd van je website, de performance, wordt echter niet enkel beïnvloed door “moeilijke” technische implementaties. Om de website performance te optimaliseren spelen keuzes in het design ook een belangrijke rol. In dit artikel zet CRO-consultant Xeï Hulshoff de belangrijkste elementen voor je op een rij.

Het aantal afbeeldingen

  Beperk het aantal afbeeldingen dat een bezoeker moet downloaden tot het minimum. Iedere afbeelding die je gebruikt wordt namelijk 1 voor 1 opgehaald. Hierdoor moet de gebruiker voor iedere afbeelding even wachten. Als je heel vaak ‘even moet wachten’ wordt dat vanzelf ‘een hele tijd wachten’ en daar zit dan weer niemand op te wachten.

Drie tips om je afbeeldingen op orde te brengen:

  • Verwijder afbeeldingen die niet direct bijdragen aan het hoofddoel van de pagina
  • Vervang eenvoudige afbeeldingen, zoals driehoeken, door CSS
  • Combineer vergelijkbare afbeeldingen, bv. iconen voor betaalmethodes, in een sprite. Dan kun je d.m.v. styling bepalen waar het deel van de afbeelding getoond wordt.

Sprite voor website performance

Kwaliteit van de afbeeldingen

Natuurlijk wil je graag afbeeldingen die er altijd op en top uit zien, ongeacht of je nu op een grote monitor of op je iPhone de website bekijkt. Afbeeldingen van hoge kwaliteit hebben alleen 1 groot nadeel, het zijn namelijk grote bestanden. Voor websites is het niet nodig om de hoogste kwaliteit afbeeldingen aan te bieden. Je kunt de bestandsgrootte van de afbeeldingen beïnvloeden door ze te optimaliseren en te comprimeren, zonder al te veel aan kwaliteit te verliezen.

Vier tips om de kwaliteit op peil te houden:

  • Beperk de hoogte en breedte, een full-width afbeelding van 1280px is prima
  • Gebruik niet meer kleuren of transparantie dan nodig
  • Gebruik .jpg formaat voor foto’s en .png voor afbeeldingen met transparantie
  • Optimaliseer alle afbeeldingen m.b.v. Google’s PageSpeed Tools

Geoptimaliseerd voor website performance

Het gebruik van iconen

Iconen begeleiden de gebruiker tijdens de interactie met de website. Wanneer je hier aparte afbeeldingen voor gebruikt kom je al snel in de problemen met punt 1, het aantal afbeeldingen. Een goed alternatief is het gebruik van een icon font, zoals font awesome. Hiermee kun je niet alleen het aantal afbeeldingen verminderen, maar ben je ook veel flexibeler in de kleuren en groottes van je iconen. Als een standaard icon font niet de iconen biedt die passen binnen je design, kun je ook gebruik maken van icomoon waar je je eigen iconen in kan zetten.

Animaties gebruiken

Als je meer leven in je website wilt brengen, kun je er voor kiezen om animaties te gebruiken. Beperk het gebruik wel tot de momenten dat ze echt wat toevoegen voor de gebruiker, niet alleen omdat het er ‘hip’ uitziet. Wanneer je echt een animatie wil gebruiken, kies dan bij voorkeur om deze op te bouwen met CSS in plaats van Javascript. Je hebt dan minder grote bestanden nodig en het laden van de pagina wordt dan niet door Javascript geblokkeerd.

Dus wel: geanimeerd scrollen, wanneer de gebruiker klikt op een link waarvan de informatie op dezelfde pagina getoond wordt.

Dus niet: geanimeerde logo’s, dit leidt de aandacht van de gebruiker af van het doel van je website.

Animated scroll website performance

animated-logo website performance

Bovenstaande zijn basiszaken waarmee jij de gebruikerservaring op je website verbetert en bezoekers op zijn minst een reden minder geeft om je website te verlaten. Oftewel, een grotere kans op een tevreden klant en een conversie!  

Lettertypen, kleuren en layout

Het design van een website wordt natuurlijk niet alleen beïnvloed door het gebruik van afbeeldingen, iconen en animaties. ook zaken zoals lettertypen, kleuren en layout hebben invloed. Hoe dit precies zit lees je binnenkort in de volgende blogs over deze designelementen. Houd het Tribal blog dus zeker in de gaten.

Meer weten over UX en website performance? Kijk dan op www.tribal.nl en ga voor een optimale gebruikerservaring op jouw website.

Wilt u de winstgevendheid van uw organisatie verhogen?

Bekijk dan –kosteloos- de online kennissessie. Tijdens de sessie worden er kennis en inzichten gedeeld op het gebied van waardecreatie, winstoptimalisatie, waarderingsmethoden en het kapitaliseren/ monetizen van de gerealiseerde financiële bedrijfswaarde. Vul uw e-mailadres in en ontvang de video.

Mogelijk ook interessant

In het verlengde van de inhoud van de artikelen op onze website, biedt Utrecht Business de mogelijkheid op het onderwerp/vakgebied een opleiding te volgen. Hiertoe worden verschillende varianten aangeboden.

Laat een reactie achter

Klik hier om een reactie achter te laten