Waarom een snelle website belangrijker is dan een mooie

Bij bijna elk ontwerp komt er een moment waarop iemand vraagt of er niet nog een videoachtergrond, een parallaxeffect of een carrousel bij kan. Mijn antwoord is meestal terughoudend, en dat heeft niets met smaak te maken.

Wat er in de eerste seconde gebeurt

Mensen vormen razendsnel een indruk van een pagina, en dat oordeel gaat vooral over of iets betrouwbaar en overzichtelijk oogt. Maar dat oordeel kan pas gevormd worden als er iets in beeld staat. Een pagina die twee seconden wit blijft, krijgt die kans niet.

Daar zit de kern van deze discussie. Mooi design werkt alleen als het er op tijd is.

Wat traagheid concreet kost

Metingen bij grote sites laten steeds hetzelfde patroon zien: elke extra seconde laadtijd kost een deel van je bezoekers, en dat effect is het sterkst op mobiel. Bij een lokale dienstverlener met 500 bezoekers per maand en 4 procent conversie betekent 20 procent minder bezoekers al snel vier aanvragen minder per maand.

Daarnaast weegt snelheid mee in hoe Google je pagina's beoordeelt. Trage sites verliezen dus twee keer: minder bezoekers en minder zichtbaarheid.

De zware elementen op een rij

• Videoachtergrond: vaak 3 tot 10 MB en bijna nooit inhoudelijk relevant. Een goede foto doet hetzelfde werk.
• Carrousels: laden meerdere grote beelden en de meeste bezoekers zien alleen de eerste. Zet die ene beste erin.
• Zware animatiebibliotheken: tientallen kilobytes JavaScript voor effecten die niemand mist.
• Meerdere lettertypen in vier gewichten: elk gewicht is een extra bestand.
• Ingesloten kaarten en video's: laden scripts van derden nog voordat iemand ze gebruikt.

Samen zijn dit meestal de verschillen tussen een site van 500 KB en een van 5 MB.

Waar je je aandacht wel aan geeft

1. Typografie. Goede regellengte, voldoende regelafstand en een duidelijke hiërarchie doen meer voor de leesbaarheid dan welk effect ook.
2. Ruimte. Witruimte laat je content ademen en maakt keuzes duidelijk.
3. Eén sterk beeld per sectie in plaats van vijf middelmatige.
4. Contrast en kleurgebruik dat je knoppen laat opvallen.
5. Consistentie. Dezelfde afstanden, dezelfde hoeken, dezelfde knopstijl overal.

Deze vijf dingen kosten geen kilobyte extra en bepalen bijna volledig hoe professioneel je site oogt.

Wanneer zwaar beeld wel mag

Er zijn uitzonderingen. Bij een hovenier, een fotograaf of een bedrijf met indrukwekkende locaties is beeld het product. Dan investeer je in beeld en compenseer je elders: lettertypen zelf hosten, scripts van derden schrappen, afbeeldingen goed comprimeren en alles onder de vouw pas laden als het nodig is.

Ook een video kan prima, mits je hem niet automatisch laat starten en pas laadt als iemand op afspelen drukt. Toon een stilstaand beeld met een afspeelknop, dat scheelt megabytes.

Design dat je bezoeker laat wachten, is geen design maar decoratie.

Een praktische test

Open je site op je telefoon met mobiel internet, buiten je wifi. Tel hardop tot je iets zinnigs ziet. Kom je verder dan twee, dan weet je genoeg. Doe daarna dezelfde test bij drie concurrenten, want dat is de vergelijking die je bezoeker maakt zonder er bewust bij stil te staan.

Wat ik zou doen bij een bestaande site

Meet eerst op pagespeed.web.dev en kijk welke elementen de meeste tijd kosten. In negen van de tien gevallen zijn dat afbeeldingen. Los die op, verwijder daarna de effecten die niets toevoegen en meet opnieuw. Meestal blijkt dan dat je site niet alleen sneller is, maar ook rustiger oogt. Dat is precies de bedoeling.