Wat is HTTP/2? en het maakt je website sneller!
Hypertext Transfer Protocol (HTTP) is het protocol voor de communicatie tussen een browser en een webserver. Dit protocol is onderdeel van de applicatielaag van het zogeheten OSI-model. Je gebruikt dit protocol dus bij het surfen op internet.
De ontwikkelingen op internet gaan snel, misschien wel té snel. Je kan gerust zeggen dat het internet uit zijn jasje is gegroeid, behoeften zijn veranderd en het toe is aan een nieuwe versie van dit protocol. We hebben het hier over HTTP/2 .
Terug naar 90´er jaren
In het jaar 1999 telde de wereldbevolking 6 miljard inwoners, werd de eerste aflevering van Big Brother uitgezonden. In hetzelfde jaar werd ook de ene na de andere internetprovider gelanceerd en was er sprake van een heuse internethype.
Het zal je dan ook niet verbazen dat we in dit jaar voor het eerst te maken kregen met HTTP/1.1. Deze versie van het HTTP-protocol gebruiken we bij het surfen op internet.
Groter, geavanceerder en zwaarder
Waar een website in die jaren vaak niet meer was dan een verzameling (statische) pagina’s met wat tekst, is dat vandaag de dag wel anders. Het zijn nu geavanceerde systemen met talloze functionaliteiten zoals bestel- of inlogmogelijkheden en hebben vaak veel kwalitatieve content zoals afbeeldingen of video. Hierdoor zijn websites niet alleen mooier en gebruiksvriendelijker geworden, maar ook groter en zwaarder (van een paar kilobyte (KB) in de 90´er jaren naar een paar megabyte (MB) in 2016).
Dit komt onder andere door het gebruik van een Content Management System (CMS) zoals WordPress, Joomla of Magento. Hiermee creëer je eenvoudig pagina’s en kan je kiezen tussen verschillende thema’s en plugins. Deze thema’s of plugins maken in veel gevallen weer gebruik van externe bibliotheken (Javascript bijvoorbeeld) om de website goed te laten functioneren.
Hoewel dit zeer gebruiksvriendelijk is, komt dat vaak de snelheid van een website niet ten goede. Veel website ontwikkelaars gebruiken daarom technieken als minifying, lazy loading, caching, domain sharding et cetera om websites sneller te laten laden.
Wat is HTTP/2?
HTTP/2 is de nieuwe versie van het HTTP-protocol en is gebaseerd op het SPDY-protocol (Speedy), een ambitieus project van Google met als voornaamste doel websites sneller te laten laden. In 2015 werd HTTP/2 een erkende IETF standaard en eind dat jaar ondersteunden alle moderne browsers dit nieuwe protocol.
Het HTTP/2 protocol kenmerkt zich door zijn grootste troef: snelheid.
Multiplexing
Wanneer een browser een moderne website opvraagt worden vaak tientallen verzoeken (gemiddeld 80) naar de webserver verstuurd om de website te presenteren op jouw beeldscherm. Voor zo’n verzoek wordt een TCP-verbinding opgezet om de dataoverdracht plaats te laten vinden.
HTTP/1.1
In HTTP/1.1 kunnen er meerdere verzoeken tegelijk worden gestart, afhankelijk van het type browser. Een probleem wat hierbij kan ontstaan is dat een verzoek pas kan worden gestart wanneer een ander verzoek is afgerond. Je kunt dit vergelijken met een wachtrij in een winkel waarbij een klant een lastige vraag heeft, waardoor andere klanten in de wachtrij moeten wachten totdat deze klant geholpen is. Dit wordt head-of-line blocking genoemd.
HTTP/2
In HTTP/2 worden alle verzoeken samengevoegd en in één verbinding verstuurd naar de browser. In het voorbeeld van de wachtrij wordt de klant met de lastige vraag geholpen, maar tussentijds worden de andere klanten in de wachtrij ook geholpen. Dit noemen we multiplexing.
Prioriteren
Bij het laden van een website worden alle bestanden zoals HTML, CSS, JavaScript, afbeeldingen et cetera ingeladen. Hierbij is de volgorde waarin deze bestanden worden ingeladen erg belangrijk. Wanneer een CSS bestand bijvoorbeeld pas wordt ingeladen op het einde, dan kan dit resulteren in een website zonder vormgeving. Anderzijds kan het te laat inladen van JavaScript er voor zorgen dat bepaalde functies op de websites niet werken.
In HTTP/1.1 is het eenvoudig de prioriteit van bestanden te bepalen middels head-of-line blocking. In HTTP/2 is dit echter overbodig, omdat alle verzoeken over één verbinding gaan en moderne browsers zelf prioriteiten kunnen stellen per bestandstype. Hierdoor is de volgorde waarop de verzoeken binnenkomen niet meer relevant.
Gecomprimeerde (binaire) HTTP-headers
Bij het opvragen van bestanden van een webserver, wordt additionele informatie over bestanden meegezonden via HTTP-headers.
In HTTP/1.1 wordt voor iedere HTTP-header een aparte verbinding gemaakt. In HTTP/2 worden echter alle HTTP-headers gecomprimeerd (HPACK) en in één verbinding verzonden. Daarbij komt kijken dat de HTTP-headers in HTTP/2 binair zijn. Dit in tegenstelling tot de tekstuele HTTP-headers in HTTP/1.1. Dit maakt HTTP/2 minder foutgevoelig en resulteert in een snellere laadtijd.
Server push
In HTTP/1.1 worden bestanden pas ingeladen wanneer de browser deze opvraagt bij de webserver. In HTTP/2 worden bestanden al pro-actief ingeladen, zonder dat je deze opvraagt. Wanneer je dus een andere webpagina aanroept welke bepaalde bestanden nodig heeft, dan zijn deze al ingeladen en kunnen ze dus direct gepresenteerd worden zonder hiervoor opnieuw een verbinding op te zetten.
Let op, server push is bij ons experimenteel en nog niet beschikbaar.
Welke browsers ondersteunen HTTP/2?
Alle moderne browsers ondersteunen HTTP/2. Hieronder volgt een kort rijtje met de meestvoorkomende browsers en versies:
- Chrome 41 of hoger
- Firefox 36 of hoger
- Edge 12 of hoger
- Safari 9 of hoger
- Opera 28 of hoger
Waarom is SSL verplicht bij HTTP/2?
Ondanks dat het gebruik van SSL steeds belangrijker wordt in algemene zin, is het technisch gezien niet noodzakelijk voor het gebruik van HTTP/2.
In de praktijk ligt dat net iets genuanceerder. Dit komt namelijk omdat toonaangevende browsers als Google Chrome en Mozilla FireFox (samen een wereldwijd marktaandeel van 72%) het gebruik van TLS (SSL) verplichten bij HTTP/2. Er is dus (terecht) geen ontkomen meer aan.
Meer weten?
Wil je meer weten over HTTP/2 en wat Webtool4all voor jou kan betekenen? Neem contact op met ons voor verder advies en een offerte.