Waarom je site traag voelt
Geschreven door Robin Poort, front-end designer in Hilversum.
Een pagina kan binnen een halve seconde binnen zijn en toch traag aanvoelen. Andersom kan een pagina die er langer over doet snel aanvoelen. Wat mensen traag noemen gaat meestal niet over laadtijd, maar over wat er in die tijd op het scherm gebeurt.
Hieronder staan zes redenen, van onzichtbaar tot overduidelijk. Bij de eerste vijf staat een demo waarin je het verschil zelf kunt voelen. Op één na doen beide kanten er even lang over, want dat is nou juist het punt.
Deze zes lopen in de praktijk door elkaar heen. Meestal is er meer dan één aan de hand.
De demo's op deze pagina hebben JavaScript nodig. Je krijgt nu de uitleg zonder de demo's, want een knop die niets doet is erger dan geen knop.
1. Verspringen
De knop schuift weg terwijl je mikt.
DemoKlik in allebei op Controleer.
Zonder gereserveerde ruimteFout
Vul een geldig e-mailadres in.
Met gereserveerde ruimteGoed
Vul een geldig e-mailadres in.
Een validatiemelding of een afbeelding zonder afmetingen duwt de rest van de pagina omlaag. Op een telefoon gebeurt dat vaak precies terwijl je duim al onderweg is: je mist de knop, en je klikt op iets anders. Houd de ruimte voor die melding vooraf vrij en het is weg.
2. Wachten zonder teken
Er gebeurt iets, maar niets laat het zien.
DemoKlik in allebei op Versturen.
Geen terugkoppelingFout
Meteen een tekenGoed
Beide knoppen doen er anderhalve seconde over. De linker geeft geen enkel teken, dus je weet niet of je klik is aangekomen en klikt nog een keer. De rechter zegt meteen dat hij bezig is. Dezelfde snelheid, een ander gevoel, en bij de linker ook nog een mogelijk technische uitdaging door dubbele klik.
3. Late reactie
Je tikt, en pas een halve tel later reageert er iets.
DemoKlik in allebei op Toon details.
Reageert na 300 millisecondeFout
Vertrek op dinsdag, twee personen, ontbijt inbegrepen.
Reageert meteenGoed
Vertrek op dinsdag, twee personen, ontbijt inbegrepen.
Onder de honderd milliseconde voelt een reactie als direct. Daarboven merk je de vertraging, ook al kun je haar niet benoemen. Driehonderd milliseconde klinkt als niets en is genoeg om een interface stroperig te laten aanvoelen.
4. Alles of niets
De pagina wacht met tonen tot het laatste bestand binnen is.
DemoKlik op de knop hieronder.
Wacht op allesFout
Bouwt opGoed
Allebei zijn ze na 1,2 seconde klaar. Links blijft het scherm tot dat moment leeg, rechts kun je na tweehonderd milliseconde al beginnen met lezen. Dit is nagebootst met een timer, want het echte verschil zit in of je stylesheets en scripts het tonen tegenhouden.
5. Beweging zonder reden
Animaties die tijd kosten en niets verduidelijken.
DemoKlik op de knop hieronder.
600 millisecondeFout
Vertrek op dinsdag, twee personen, ontbijt inbegrepen.
150 millisecondeGoed
Vertrek op dinsdag, twee personen, ontbijt inbegrepen.
Je browser staat op minder beweging, dus deze twee openen allebei meteen. Dat is precies zoals het hoort: wie daarom vraagt, hoort niet op een animatie te wachten.
Een animatie mag laten zien waar iets vandaan komt of waar het heen gaat. Zodra je erop moet wachten werkt hij tegen je, en dat geldt dubbel voor iets wat je tien keer per dag doet. Boven de tweehonderd milliseconde ga je het merken.
6. Te zwaar beeld
Meer bytes dan het vakje nodig heeft.
Bij deze reden hoort geen demo maar een meting, en wel van deze site. De klantlogo's op mijn homepage staan op ongeveer 142 pixels breed. De maten waaruit de browser mocht kiezen sprongen van 160 naar 320, dus haalde elk logo altijd die 320 op. Twee tussenmaten erbij en dezelfde twaalf logo's wegen dit:
- w-320122,5 KB
- w-25690,9 KB
- w-20066,4 KB
Bijna de helft eraf, aan hetzelfde beeld op hetzelfde scherm. Dit is het saaiste punt van de zes en meestal de grootste winst, omdat het niets aan het ontwerp verandert.