Waarom je site traag voelt
Interactieve demo's: probeer het zelf.
Geschreven door Robin Poort, front-end designer in Hilversum.
Een pagina kan binnen een halve seconde geladen zijn en alsnog traag aanvoelen. Andersom kan een pagina die er langer over doet toch snel aanvoelen. Wat mensen traag noemen gaat niet altijd over laadtijd, maar over wat er in die tijd op het scherm gebeurt.
Ze staan hieronder op volgorde, van onzichtbaar tot overduidelijk. Op één demo na doen beide kanten er even lang over, want dat is nou juist het punt.
Deze zes redenen lopen in de praktijk door elkaar heen en vaak 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.
1Verspringen
De knop schuift weg terwijl je mikt waardoor je op een verkeerd element klikt.
DemoProbeer in allebei op Bestellen te klikken.
Zonder gereserveerde ruimteFout
Met gereserveerde ruimteGoed
In het eerste voorbeeld komt de voorraadmelding binnen op het moment dat je de knop bereikt. Bestellen zakt een knop omlaag en Verwijderen komt te staan op de plek waar je op mikte. In het tweede is de ruimte voor die melding vooraf vrijgehouden, dus daar beweegt niets. Allebei doen ze er even lang over. Na een paar seconden zet de demo zichzelf terug, zodat je het nog eens kunt proberen.
OplossingReserveer altijd ruimte voor elementen die nog in beeld komen.
2Wachten zonder feedback
Er gebeurt iets, maar niets laat dat zien.
DemoKlik in allebei op Versturen.
Geen terugkoppelingFout
Meteen een tekenGoed
Beide knoppen doen er anderhalve seconde over. De eerste geeft geen enkel teken, dus je weet niet of je klik is aangekomen en klikt nog een keer. De tweede zegt meteen dat hij bezig is. Dezelfde snelheid, een ander gevoel, en bij de eerste ook nog een mogelijk technische uitdaging door dubbele klik.
OplossingZorg er altijd voor dat je direct feedback geeft aan de gebruiker.
3Late reactie
Je klikt, en je krijgt pas laat feedback.
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 die niet benoemen. Driehonderd milliseconde klinkt als niets maar is genoeg om een interface stroperig te laten aanvoelen.
OplossingZorg dat een gebruiker niet op jouw scripts hoeft te wachten na het klikken op een knop.
4Alles of niets
De pagina toont pas helemaal wanneer het laatste bestand binnen is gehaald.
DemoKlik op de knop hieronder.
Wacht op allesFout
Bouwt opGoed
Allebei zijn ze na 1,2 seconde klaar. In het eerste voorbeeld blijft het scherm tot dat moment leeg, in het tweede voorbeeld 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.
OplossingToon alles wat je hebt zo snel mogelijk zodat de gebruiker je pagina al kan gebruiken.
5Beweging zonder reden
Animaties die tijd kosten en niets verduidelijken.
DemoKlik op de knop hieronder.
1,2 secondeFout
Vertrek op dinsdag, twee personen, ontbijt inbegrepen.
200 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.
OplossingKleine animaties horen kort te duren; grote animaties mogen langer duren. Stem het af op het element.
6Te zwaar beeld
Te grote afbeeldingen inladen op mobiel of in kleine cards.
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.
OplossingStem het formaat van de afbeelding af op de container waar deze in staat. Dat scheelt wachten voor de gebruiker.
Dit artikel gaat over een pagina die er al staat. Wil je weten wat er daarvoor gebeurt, tussen het ontwerp en de gebouwde pagina, lees dan wat er met je ontwerp gebeurt in de browser.
Kom je hiervan iets tegen op je eigen site, dan is dat het werk dat ik doe onder gebruiksvriendelijkheid en interactie.