Blog
Een snelle website laten maken begint bij de keuzes van je 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
- Bijgewerkt
- Leestijd
- Ongeveer 8 minuten
- Onderwerp
- Website laten vernieuwen
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.
Hoe snel je website opent, hangt dus af van keuzes die je bouwer heeft gemaakt. Hieronder staan de drie plekken waar die keuzes het meest uitmaken, en een test van tien minuten die je zelf op je telefoon kunt doen.
02Blad 02 van 08
Waar de megabytes vandaan komen
Drie plekken leverden op die ene site samen meer dan drie megabyte op. Alle drie staan los van het ontwerp, en de eigenaar zag er zelf niets van.
De afbeeldingen die in de pagina zelf geplakt zaten
De afbeeldingen op die pagina stonden als tekst in de pagina zelf. 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 gewone, gecomprimeerde beeldbestanden in een eigen map, gekoppeld met een net adres. Dat bracht het bestand van 1.550 naar 24 kilobyte. Daar was dezelfde hosting, hetzelfde pakket en hetzelfde ontwerp genoeg voor; iemand moest het alleen doen.
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 de browser haalt die binnen zodra de pagina opent, ook als de bezoeker nooit tot het kaartje scrollt.
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. 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 vaak overgeslagen, 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. Dat is weinig, maar het remt de hele pagina. 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.
Het lettertype dat al op het toestel van je bezoeker staat, kost nul milliseconden. Op een iPhone ziet dat eruit als een iPhone, op een Android-telefoon als 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.
03Blad 03 van 08
Waarom je dit op je eigen computer niet ziet
Hier gaat het vaak 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 opent hij altijd snel.
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 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
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 veel zakelijke websites verkeerd, en het gebeurt precies op 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 naar zijn eigen website kijken. Dat is het ene werkstuk waarvan je zeker weet dat hij het zelf heeft gemaakt. 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 op je computer 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.
De test laat zien 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. 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. Iemand moet bij elke pagina nagaan wat er meelaadt en waarom. Bij ons zit die aandacht in de prijs. De zakelijke website van 595 euro exclusief btw, klaar vanaf twee weken, bouwen we op dezelfde standaard als een website op maat vanaf 995 euro. Het verschil tussen die twee zit in het ontwerp, het aantal pagina's en de koppelingen. Alle bedragen op een rij staan op de pagina over wat een website kost, en wat zo'n bedrag over drie jaar wordt, met het onderhoud erbij, staat in ons artikel over wat een website in drie jaar kost.
Heb je al een site die traag is, dan hoef je meestal niet opnieuw te beginnen. In veel gevallen zit de winst op dezelfde plekken als hierboven: de afbeeldingen, het ingesloten kaartje en het lettertype van een andere server. Is opnieuw beginnen toch de betere keuze, dan lees je op de pagina over een website laten vernieuwen wat daarbij komt kijken.
07Blad 07 van 08
Wat snelheid niet oplost
Een snelle website verkoopt niet vanzelf. 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.
Snelheid telt ook als je gaat adverteren. Adverteren naar een trage pagina is geld in een emmer met een gat.