Blog
Snelheid is geen extraatje, het is een keuze van de bouwer
Waar de megabytes van een trage website vandaan komen, met de cijfers van een codebestand dat van 1.550 naar 24 kilobyte ging, en hoe je zelf in tien minuten ziet of je bouwer erop let.
- Auteur
- Bart Molkenboer
- Gepubliceerd
- Leestijd
- Ongeveer 8 minuten
- Onderwerp
- Website onderhoud
01Blad 01 van 08
1.550 kilobyte. Zo groot was het codebestand van de voorpagina van een site die wij hebben doorgemeten. Dat bestand is het eerste wat een browser binnenhaalt en waar hij helemaal op moet wachten voordat hij ook maar iets kan tekenen. Na één ingreep was datzelfde bestand 24 kilobyte: vierenzestig keer kleiner, met exact hetzelfde ontwerp, dezelfde foto's en dezelfde teksten erop.
De foto's zijn niet verdwenen, want dat kan niet. Ze zijn uit dat ene bestand gehaald en als losse beeldbestanden ernaast gezet. Daardoor kan de browser de tekst meteen tekenen en de plaatjes er daarna bij halen, en pakt hij ze op de volgende pagina uit zijn eigen geheugen in plaats van ze opnieuw binnen te halen.
Er is niets aan die pagina mooier of lelijker geworden. Er is alleen een keuze teruggedraaid die de vorige bouwer had gemaakt en die niemand ooit aan de eigenaar had uitgelegd.
Dat is waar dit artikel over gaat. Niet over techniek, maar over het feit dat de snelheid van jouw website geen eigenschap van jouw bedrijf is. Het is een optelsom van beslissingen die iemand anders voor jou heeft genomen.
02Blad 02 van 08
Waar de megabytes vandaan komen
Drie plekken leverden op die ene site samen meer dan drie megabyte op. Geen van de drie heeft iets met het ontwerp te maken, en geen van de drie is zichtbaar voor de eigenaar.
De afbeeldingen die in de pagina zelf geplakt zaten
De afbeeldingen op die pagina waren niet als bestand gekoppeld, maar letterlijk in de pagina zelf getypt. Een foto kan namelijk ook als een enorme lap tekens in de code staan, en sommige bouwgereedschappen doen dat standaard omdat het makkelijk is: één bestand en klaar.
Voor een bezoeker pakt het slecht uit. De browser moet eerst die hele lap binnenhalen voordat hij iets kan laten zien, want de tekst en de plaatjes zitten aan elkaar vast. En hij kan die plaatjes niet apart onthouden voor de volgende keer, dus bij elke pagina die je bezoeker opent, komt de hele stapel opnieuw mee.
De oplossing is saai: gewone, gecomprimeerde beeldbestanden in een eigen map, gekoppeld met een net adres. Dat is wat dat bestand van 1.550 naar 24 kilobyte bracht. Het kostte geen extra hosting, geen duurder pakket en geen ander ontwerp. Het kostte alleen dat iemand het deed.
Het ingesloten kaartje van twee megabyte
Op diezelfde site stond een ingesloten kaartje met de locatie erop. Dat ding kost 1,5 tot 2,5 megabyte, en die worden binnengehaald op het moment dat de pagina opent, niet op het moment dat de bezoeker naar beneden scrollt en het kaartje ook echt ziet.
Reken het even bij elkaar op. Anderhalve megabyte aan ingeplakte afbeeldingen plus twee megabyte aan kaartje, en je bent al over de drie en een halve megabyte voordat er ook maar één letter van je aanbod op het scherm staat.
Het kan anders, en dat is geen hogere wiskunde. Je laat het kaartje pas laden op het moment dat de bezoeker er bijna is, ongeveer driehonderd beeldpunten voordat het in beeld komt. Voor de bezoeker voelt dat naadloos, want tegen de tijd dat hij er is, staat het er gewoon. Voor de laadtijd van je pagina kost het niets meer.
Dat is een keuze die een bouwer een keer maakt en daarna voor altijd heeft staan. Hij wordt bijna nooit gemaakt, omdat het kaartje er ook zo wel in geplakt kan worden en niemand er later naar kijkt.
Het lettertype waar je bezoeker op wacht
Derde voorbeeld uit dezelfde controle: een extern lettertype van 50 kilobyte. Klein bedrag in megabytes, groot effect in gedrag. De browser moet dat lettertype eerst ophalen bij een andere server voordat hij je tekst durft te tekenen. Bij een trage verbinding kijkt je bezoeker in die tijd naar een leeg vlak, of ziet hij de tekst eerst in het ene lettertype staan en daarna verspringen naar het andere.
Er bestaat een alternatief dat nul milliseconden kost: het lettertype dat al op het toestel van je bezoeker staat. Op een iPhone ziet dat er uit als een iPhone, op een Android als een Android, op Windows als Windows. Voor de meeste bedrijfssites is dat prima en het scheelt wachttijd bij iedere bezoeker. Wil je per se een eigen lettertype omdat je huisstijl dat vraagt, dan kan dat, maar dan hoort het op een manier geladen te worden die het tekenen van de pagina niet tegenhoudt. Ook dat is een keuze, geen natuurwet.
03Blad 03 van 08
Waarom je dit op je eigen computer niet ziet
Hier gaat het bij ondernemers meestal mis. Je opent je eigen site op de computer op kantoor, op glasvezel, met alles al in het geheugen van je browser omdat je er vorige week ook op zat. Dan is hij snel. Altijd.
Je klant opent hem op een telefoon, op mobiel internet, in een bestelbus langs de weg, en heeft nog nooit eerder op je site gezeten. Dat is het enige moment dat telt. Test dus zo.
04Blad 04 van 08
Wat een bezoeker wel merkt, ook als hij het niet zo noemt
Niemand denkt "deze pagina is 3,5 megabyte". Mensen merken drie andere dingen.
01
De tekst springt weg terwijl je leest
Dat gebeurt als afbeeldingen geen vaste maten meegekregen hebben. De browser weet niet hoeveel ruimte hij vrij moet houden, dus zodra de foto binnen is, duwt hij alles naar beneden. Iedereen kent het moment dat je op een knop tikt en er net op dat moment iets anders onder je duim schuift.
02
Het formulier zoomt in zodra je begint te typen
Dat is geen toeval en geen instelling van de telefoon. Een iPhone zoomt automatisch in op een invulveld waarvan de letters kleiner zijn dan zestien beeldpunten. Zet je ze op zestien of groter, dan gebeurt het niet. Dit staat op ontelbaar veel zakelijke websites verkeerd en het is precies het moment waarop iemand een aanvraag probeert te doen.
03
Er gebeurt eerst een paar tellen niets
Dat is de optelsom van alles hierboven.
Geen van deze drie dingen komt ooit terug als klacht. Mensen bellen je niet om te zeggen dat je contactformulier vervelend werkt. Ze vullen het niet in en gaan naar de volgende naam in de lijst.
05Blad 05 van 08
De controle van tien minuten die je zelf kunt doen
Voordat je iemand inhuurt, kun je hem beoordelen op het enige werkstuk dat hij zeker zelf heeft gemaakt: zijn eigen website. Pak je telefoon, zet wifi uit en doe dit.
Open zijn site en tel hoe lang het duurt voordat je iets zinnigs ziet. Scroll naar beneden en let op of tekst wegspringt. Ga naar zijn contactpagina en kijk of er een kaartje staat en of de pagina daar zwaarder van wordt. Tik in een invulveld van zijn eigen formulier en kijk of het scherm inzoomt. Vul het formulier in met een echte vraag en kijk of je antwoord krijgt, en hoe snel.
Kijk daarna naar de titel bovenin het tabblad van je browser. Staat daar iets als "Home" of "Welkom", dan is er aan de vindbaarheid van die site geen half uur besteed. Staat er een duidelijke zin met waar het bedrijf voor staat, dan wel.
Dit is geen onfeilbare test, maar hij vertelt je iets belangrijkers dan een portfolio: hoe iemand werkt als hij het voor zichzelf doet en niemand meekijkt. Een bouwer wiens eigen site traag is, gaat de jouwe niet snel maken.
06Blad 06 van 08
Wat het kost om het wel goed te doen
Vrijwel niets, en dat is het ongemakkelijke deel van dit verhaal. Een website die snel opent draait op dezelfde hosting als een website die traag opent. Er is geen duurder pakket voor nodig.
Wat het kost is aandacht tijdens de bouw, en dat is precies wat er verdwijnt als een site voor de derde keer in dezelfde vorm wordt uitgerold. Bij ons zit het gewoon in de prijs: de zakelijke website van 595 euro exclusief btw, klaar in twee weken, wordt op dezelfde standaard gebouwd als een website op maat van 995 euro. Het verschil tussen die twee zit in het ontwerp, in het aantal pagina's en in koppelingen, niet in de vraag of je bezoekers moeten wachten. Wat zo'n bedrag over drie jaar wordt, met het onderhoud erbij, staat in wat een website kost over 36 maanden.
Heb je al een site die traag is, dan hoef je meestal niet opnieuw te beginnen. In veel gevallen zit de winst in dezelfde drie plekken als hierboven: de afbeeldingen, de dingen van derden die ongevraagd meeladen, en de maten die niet zijn opgegeven.
07Blad 07 van 08
Wat snelheid niet oplost
Ik wil er eerlijk over blijven. Een snelle website is geen verkoper. Als op je pagina niet duidelijk staat wat je doet, voor wie, in welk gebied en wat het ongeveer kost, dan krijg je geen aanvragen, hoe snel dat scherm ook opbouwt. Snelheid haalt een reden weg om weg te klikken. Meer niet, maar ook niet minder.
En het werkt door in alles waar je later voor betaalt. Adverteren naar een trage pagina is geld in een emmer met een gat.