Als iedere seconde telt; Site laadtijd nog meer van belang dan ooit
Björn | 03 augustus 2017
Björn | 03 augustus 2017
Door Björn Valk | 3 augustus 2017
Afgelopen maart heeft Google het al aangekondigd. De mobile first index (de indexering waarbij, voor het bepalen van de posities van een site in de zoekmachine, eerst wordt gekeken naar de mobiele website) zal ook de laadtijd van een pagina gebruiken als factor voor het bepalen van de positie in de zoekresultaten.
Naast het belang van een zo kort mogelijke laadtijd voor de gebruikerservaring, zal het dus ook een groter wordende invloed hebben op de vindbaarheid van jouw site.
De laadtijd van een site was al van belang als het gaat om gebruikerservaring en dus conversies op een site, door de toenemende mate van mobiel sitebezoek is dit alleen maar belangrijker geworden. Mobiele gebruikers zijn sneller geneigd om een site te verlaten en elders te kijken wanneer een site te langzaam laadt. Gemiddeld duurt het niet langer dan 3 seconden tot een bezoeker een site verlaat. Binnen die 3 seconden zou dan iets van inhoud zichtbaar moeten zien, in ieder geval dat deel wat op na laden op het scherm zichtbaar is (dit noemt men ook wel “boven de vouw”).
Hoe de laadtijd van een site te verbeteren met behulp van de 3 C’s (Combineer, Comprimeer en Cache)
Naast een degelijk responsive ontwerp van een (mobiele) site zijn er nog een aantal dingen die op technisch vlak gedaan kunnen worden om de laadtijd van een site te verbeteren. Tijdens het laden van een site worden namelijk ook allerlei andere bestanden ingeladen. Hierbij valt te denken aan afbeeldingen, video’s, JavaScript code bestanden en opmaakinstructies. Door deze bestanden kleiner te maken, kan het inladen ervan zo snel mogelijk plaatsvinden. Maak hierbij gebruik van de 3 C’s: Combineer, Comprimeer en Cache.
Bestanden zoals JavaScript code, opmaakinstructies in de vorm van CSS, maar ook een verzameling van kleine afbeeldingen kunnen gecombineerd worden tot één bestand. Een browser is namelijk in staat om een groter bestand sneller in te laden dan meerdere kleine. Door alle bestanden te combineren tot één bestand wordt een flinke tijdswinst geboekt op de laadtijd.
Meerdere kleine afbeeldingen kunnen gecombineerd worden tot een zogenaamde sprite met daarin alle afbeeldingen die vervolgens door middel van CSS bij de weergave kan worden opgebroken in kleinere plaatjes
Voorbeeld van een afbeelding sprite met iconen
Een bestand kleiner maken door middel van comprimeren is een bekendere techniek om de laadtijd van een bestand te verkleinen. Comprimeren, oftewel compacter maken, wordt bij Javascript, HTML en CSS bestanden gerealiseerd door zoveel mogelijk onnodige tekens en regels te verwijderen. Door “onnodige” regeleindes en spaties te verwijderen, kan een bestand tot soms wel 50% kleiner worden gemaakt. Deze techniek word ook wel minification genoemd.
Minification van de Bootstrap JavaScript resulteert in een veel kleiner bestand
Voorbeeld van gecomprimeerde JavaScript code
Afbeeldingen kunnen gecomprimeerd worden door deze op te slaan met een andere kwaliteitsinstelling. Dit kan soms tot wel 80% aan bestandsgrootte schelen zonder dat er een groot verschil zichtbaar is, zoals in onderstaand voorbeeld
Naast dat deze technieken ervoor zorgen dat pagina’s op jouw site sneller laden scheelt dit ook opslagcapaciteit op de webserver, zoals onderstaand voorbeeld illustreert. Een klant van ons heeft een grote hoeveelheid afbeeldingen op haar WordPress site staan om blogs mee te illustreren. Na een aantal jaar van bloggen bevatte de webserver ruim 6 Gigabyte aan geüploade afbeeldingen. Na compressie van deze afbeeldingen bleef er amper 3,5 Gigabyte aan data over, een besparing van bijna 50%!
Een techniek die op de server ingesteld kan worden voor het comprimeren van gegevens die aan de browser van een bezoeker worden aangeboden is gzip. gzip of zip is een methode om bestanden middels een algoritme in te pakken. Mits de browser van de bezoeker en de webserver dit ondersteunen, kan een ingepakte versie van een bestand (tot wel 90% kleiner dan het origineel) worden aangeboden waarna de browser het weer uitpakt en weergeeft. Een HTML-bestand van 100 kilobyte kan zo gedownload worden door de browser als bestand van 15 kilobyte. Het uitpakken en weergeven van een ingepakt bestand word door de browser afgehandeld en kost slechts milliseconden. Op betterexplained is meer informatie te vinden over hoe gzip compressie werkt.
Caching is het op een makkelijk bereikbare plaats opslaan van dingen die je vaak nodig hebt. Het Engelse woord “cache” betekent opslagplaats of noodvoorraad. Zie het als een timmerman die een voorraadje schroeven in zijn gereedschapsgordel bij zich draagt in plaats van dat hij iedere keer naar zijn bus moet lopen wanneer hij een schroef nodig heeft, een stuk efficiënter. Door gebruik te maken van een cache techniek kan een flinke tijdswinst worden behaald.
Hoe werkt caching voor een website?
Wanneer een bezoeker een webpagina opvraagt, zal een webserver dit verzoek doorsturen naar de applicatie die de webpagina moet serveren. Deze applicatie doorloopt een aantal stappen, zoals bijvoorbeeld het ophalen van dynamische gegevens uit een database.
Het ophalen en samenstellen van een webpagina kost servercapaciteit en bij grote aantallen bezoekers tegelijkertijd kan dit voor een flinke belasting op de server zorgen. Alle verzoeken naar een server worden in een wachtrij geplaatst, waardoor er een vertraging in de afhandeling van een verzoek kan ontstaan.
Het samenstellen en weergeven van één en dezelfde webpagina wordt voor iedere afzonderlijke aanroep opnieuw gedaan, waardoor een webapplicatie steeds opnieuw hetzelfde moet doen om dezelfde pagina op te bouwen. Juist dat herhaaldelijk ophalen van dezelfde informatie kan door middel van caching worden voorkomen. Het mechanisme van caching slaat het resultaat of delen van een resultaat op in een tijdelijke locatie. Wanneer datzelfde resultaat nogmaals wordt opgevraagd, zal het resultaat uit de tijdelijke opslag worden opgehaald waardoor deze sneller toegankelijk is.
Caching kan op meerdere manieren plaatsvinden, zowel aan de kant van de server als aan de kant van de bezoeker. Dit kan bestaan uit cachen van volledige pagina’s (pagecaching), caching in de browser, of onderdelen van pagina’s door middel van zogenaamde opcode of database caching.
Een andere techniek om de laadtijd van een site te verkleinen is het gebruik van een Content Delivery Network (CDN). Dit is een netwerk van servers dat het aanleveren van voornamelijk statische content zoals afbeeldingen verdeelt. Dit betekent dat dezelfde afbeelding staat opgeslagen op meerdere servers in data centers over de hele wereld, zodat bezoekers op een betrouwbare en snelle manier toegang hebben tot het betreffende bestand.
Benieuwd hoe jouw site presteert op het vlak van laadtijd? Doe de test op PageSpeed Insights van Google, Website Speed Test van Pingdom of Web Page Test
Is jouw site wat traag volgens bovenstaande tests en ben je benieuwd wat ByYourSite kan doen om jouw website te optimaliseren? Bel dan met onze sales manager Evert Kuipers op 050 588 54 50
