0

 Weboptimalisatie van de toekomst.

http/2, server caching, Google Pagespeed

Weboptimalisatie van de Toekomst

Door Gerritjan Boeve

Anno 2017 mag je van een website verwachten dat deze snel inlaadt op elk apparaat. Welk technieken komen hier nou eigenlijk bij kijken? En hoeveel snelheidswinst levert het optimaliseren van je website nou eigenlijk op? In dit artikel lopen we langs een paar doeltreffende en gloednieuwe technieken die wij gebruiken om onze websites razendsnel te maken.

Wie kent het niet; als een zombie naar je scherm staren terwijl je website aan het laden is. Erg jammer dat dit vandaag de dag nog steeds aan de orde is, aangezien er de laatste paar jaren zo veel voortgang is gemaakt in de webtechnologie.

Het is voornamelijk Google geweest die hier grote stappen in heeft gemaakt. Enkele voorbeelden hiervan zijn bijvoorbeeld het http/2 protocol (welke gebaseerd is op Google’s SPDY), de ontwikkeling van het afbeeldingsformaat webp (welke kleiner en beter is dan JPG) en het ontwikkelen van nieuwe compressie-methoden zoals bijvoorbeeld brotli.

Dankzij Google is het optimaliseren van websites gelukkig een stuk beter en makkelijker geworden. In dit artikel ga ik, aan de hand van de website van Buro Digitaal, laten zien hoeveel snelheidswinst er behaalt kan worden. 

 

Test zonder optimalisatie

Om een goed beeld te krijgen van de snelheid van onze websites testen wij altijd op een minder snelle verbinding. Voor deze test staat de verbinding ingesteld op “Cable” (5Mbps download, 1Mpbs Upload en 30ms RTT). De gemiddelde internetsnelheid in Nederland ligt rond de 15Mbps, dus dit zijn redelijk conservatieve instellingen.

 

 

De “Fully Loaded Time” van 2.3 seconden is natuurlijk al een prima resultaat maar het kan altijd beter! Een goede laadsnelheid dient gemeten te worden in milliseconden i.p.v. seconden.

 

Stap 1: http/2 support

Http/2 is een vrij recente ontwikkeling in de webtechnologie, en een die hard nodig is. Http/2 is uitgekomen in 2015 en vervangt http/1.1 welk uitgekomen is in 1999. Http/1.1 is zijn glorietijd dus al lang voorbij.

Http/2 pakt de grootste problemen van Http/1.1 aan, doordat het bijvoorbeeld meerdere bestanden tegelijk kan versturen. Daarnaast comprimeert Http/2 automatisch de headers, wat ook weer enkele kilobytes scheelt. Http/2 is dus gemaakt voor het web van de toekomst, waar het belangrijk is dat veel verschillende bestanden snel verstuurd kunnen worden. 

Http/2 wordt in 80% van alle browsers ondersteunt. Mocht de browser hier geen support voor hebben, dan kan deze automatisch terugvallen op http/1.1. Er zit dus vrijwel geen nadeel aan het toevoegen van http/2 support aan je website. No pain, only gain!

Http/2 wordt op dit moment slechts door 12,8% van alle websites gebruikt, waaronder zwaargewichten zoals Google en Facebook.

 

Test met http/2 optimalisatie

 

 

Zoals zichtbaar wordt in de bovenstaande grafiek, levert http/2 direct snelheidswinst op door het verminderen van latency en extra header-compressie. Door enkel het toevoegen van http/2 support laadt de website van Buro Digitaal nu 0.15 seconden sneller in. Een snelheidswinst van bijna 7% zonder nadelige gevolgen. Dat is mooi meegenomen!

Http/2 kan dus veel sneller meerdere bestanden tegelijk downloaden dan http/1.1. Dit zal dus relatief meer snelheidwinst opleveren voor websites met veel verschillende bestanden. Ook op bijvoorbeeld mobiele netwerken met een hoge RTT zal http/2 voor flinke snelheidswinst zorgen. In sommige gevallen kan dit wel oplopen tot meer dan 100%! Zie bijvoorbeeld de http/2 demo van Akamai

 

Stap 2: Caching

Caching is al lange tijd een van de meest effectieve en populaire methoden om de laadsnelheid van een website flink op te krikken. Voor Buro Digitaal gaan we nu server-side caching instellen.

Server side caching houdt in dat een pagina maar één keer door bijvoorbeeld PHP gegenereerd hoeft te worden. Er wordt na het genereren een kopie van de pagina opgeslagen en vervolgens wordt deze naar de bezoeker gestuurd. De server hoeft dus maar een keer een pagina te genereren en kan daarna gewoon een opgeslagen bestand versturen. Deze manier van caching zorgt naast een snellere website ook nog eens voor minder belasting van de server. Het versturen van een klaargemaakte pagina scheelt namelijk veel processorkracht.

 

Test met http/2 & server-side caching

 

 

Het gebruik van server-side caching scheert nog eens 0.13 seconden van de pagina af. Afhankelijk van hoe ‘zwaar’ je website is kan dit nog veel meer winst opleveren. De tijdswinst van 0.13 seconden bevindt zich ook in de belangrijkste plaats van het laadproces, namelijk in het begin. Hiermee voelt de website opeens een stuk sneller aan.

 

Stap 3: Google’s Pagespeed module

Google’s pagespeed module is een van de vreemdere eenden in de bijt. Een geweldig stukje software die je enorm veel werk uit handen neemt. De pagespeed module: 

  • Minimized automatisch je bestanden. Geen gedoe meer.
  • Voegt automatisch bestanden samen, wat zorgt voor minder http requests. Erg handig voor http/1.1, voor http/2 maakt dit niet meer uit.
  • Gzip’t alle bestanden met het hoogste compressieniveau en cached deze vervolgens server-side. 
  • Verkleint automatisch afbeeldingen die op je website staan en cached deze vervolgens server-side.

Pagespeed levert op vrijwel elke website enorme snelheidswinsten op, en dan met name op Chrome. Pagespeed heeft namelijk de ingebouwde mogelijkheid om het jpg en het png formaat om te zetten naar het webp formaat. Webp, voor velen onbekend, is een nieuw bestandsformaat voor afbeeldingen dat ontwikkeld is door Google. Webp is over het algemeen 25% – 33% kleiner dan het jpg formaat met dezelfde kwaliteit. Pagespeed zet afbeeldingen op Chrome automatisch om naar webp wat resulteert in flinke besparingen in de grootte van de afbeeldingen.

Wat mij betreft is pagespeed een geschenk uit de hemel.

 

Test met http/2, server-side caching en Google’s Pagespeed

 

 

De resultaten zijn verbluffend. Het installeren (en configureren) van de pagespeed module levert nog eens een snelheidswinst op van 0.3 seconden op Chrome. Het omzetten van de afbeeldingen naar webp formaat, en het automatisch minimizen en comprimeren van alle bestanden zorgt voor een besparing van maar liefst 200kb, een dikke 20%!

 

Conclusie

Door het toepassen van enkele simpele, maar effectieve stappen hebben we de laadtijd van burodigitaal van 2.3 seconden naar 1.7 seconden gekregen. Een snelheidswinst van meer dan 25%! De website voelt opeens een stuk sneller aan, je hoeft vrijwel niet meer te wachten tijdens het navigeren door de website; dat is waar we naar streven.

Ook wordt door de bovenstaande stappen de server ontlast, aangezien de processen die veel rekenkracht kosten (het genereren van pagina’s en het verkleinen van bestanden) op een efficiente manier afgehandeld worden. 

 

Contact

Geïnteresseerd in onze diensten? Schroom niet om contact met ons op te nemen.