HTTP/2: wat is het en waarom wil je het?

HTTP(S) is het protocol dat door je webbrowser wordt gebruikt om websites op te vragen van webservers. De meest gebruikte versie van HTTP is momenteel versie 1.1, deze standaard is in januari 1997 geïntroduceerd. Inmiddels zijn we 20 jaar verder en sluit versie 1.1 niet meer aan bij de manier waarop we het web gebruiken. Daarom wordt er een nieuwe standaard geïntroduceerd: HTTP/2.

HTTP/2: wat is het en waarom wil je het?

UPDATE
Sinds 11 april 2017 hebben alle domeinnamen, subdomeinen, aliassen en pointers bij Antagonist gratis SSL en HTTP/2 gekregen. Dit geldt voor iedere klant, ongeacht hun pakket, inclusief Resellers. Lees hier meer!

In dit artikel laat ik je zien hoe HTTP werkt en waarom HTTP/1.1 aan vervanging toe is. Om de voordelen van HTTP/2 goed te begrijpen, zullen we eerst naar de geschiedenis en het ontwerp van HTTP/1.1 moeten kijken. Daarna kunnen we een aantal grote problemen met HTTP/1.1 bekijken en concrete oplossing in HTTP/2 bespreken.

Inhoudsopgave

1. Wat is HTTP?

HTTP staat voor HyperText Transport Protocol. Met ‘hypertext’ worden websites bedoeld. HTTP is dus het protocol dat gebruikt wordt om websites over het internet op te vragen. De ontwikkeling van HTTP begon in 1989 bij het pan-Europese onderzoeksinstituut CERN. Hier werkte onderzoeker Tim Berners-Lee aan een methode om wetenschappelijke publicaties uit te wisselen via het internet.

In 1991 werd de eerste officiële standaard uitgebracht, HTTP versie 0.9. Sindsdien is er aan de basisprincipes niets veranderd, terwijl het web zelf gigantisch veranderd is. Websites in deze periode bestonden enkel uit statische tekst met wat links naar elkaar. Langzamerhand is dit steeds uitgebreid. Denk aan als plaatjes, JavaScript en CSS. Inmiddels worden er complete applicaties voor het web geschreven, zoals Google Docs.

2. Hoe werkt HTTP?

HTTP is een protocol dat zogenaamd text-based is. Dat betekent dat alle informatie als tekst verstuurd wordt. Op zich is dat erg handig, zeker tijdens de ontwikkeling, want je kunt zelf controleren wat er gebeurt. Daarnaast gebruikt HTTP één verbinding per verzoek. De browser opent een verbinding naar de server, vraagt één bestand op en sluit daarna de verbinding. Zowel het verzoek dat de browser verstuurt als het antwoord dat de server geeft, ziet er qua opbouw hetzelfde uit.

Elk HTTP-bericht bestaat uit drie onderdelen: statusregel, nul of meerdere headers en daarna een lege regel gevolgd door de inhoud van het bestand dat opgevraagd wordt. Als je een website bezoekt, gebruikt je browser het HTTP-protocol om de pagina op te vragen en de server beantwoordt dit ook via het HTTP-protocol. In de onderstaande afbeelding is een voorbeeld te zien van het antwoord dat de webserver van Antagonist geeft, wanneer je onze website bezoekt.

Een voorbeeld van een antwoord van een webserver

2.1 De statusregel

De eerste regel is de statusregel. Bij het versturen van een HTTP-verzoek gebruikt de browser de statusregel om aan te geven welke versie van HTTP gebruikt wordt en welk bestand er opgevraagd wordt. Het bovenstaande voorbeeld is het antwoord op de volgende status die je browser verstuurt:

HTTP/1.1 GET /index.html

Wat je browser hiermee bedoelt, is dat de communicatie via het HTTP/1.1-protocol moet verlopen en dat we op zoek zijn naar de webpagina op locatie /index.html. De server antwoordt in dit geval met:

HTTP/1.1 200 OK

Dat betekent dat de server HTTP versie 1.1 ondersteunt en het antwoord volgt. De volgende twee elementen zijn een statuscode (200) en een statustekst (OK), hiermee geeft de server aan dat de pagina gevonden is. Een ander bekend antwoord is 404 NOT FOUND, waarmee de server aangeeft dat het opgevraagde bestand niet gevonden kon worden.

2.2 De headers

Het volgende blok zijn de headers, per regel één. Elke header bestaat uit een naam en een waarde gescheiden door een dubbele punt. Deze headers worden door de browser en de server gebruikt om meta-informatie over het op te vragen bestand te versturen. Zo is in het bovenstaande voorbeeld de header Server: nginx/1.10.2 te vinden, dit betekent dat onze website wordt geserveerd door versie 1.10.2 van de NGINX-software.

2.3 De inhoud

Het volgende blok zijn de daadwerkelijke data waar we naar op zoek waren, de website van Antagonist. Echter, dit had ook JavaScript, CSS of een afbeelding kunnen zijn. Nadat de data verstuurd zijn, wordt de verbinding verbroken. Daarna gaat de browser aan de slag met het bestand.

3. Problemen met HTTP/1.1

Eén van de grootste problemen met HTTP/1.1 is dat het één verzoek per verbinding kan afhandelen. Dat betekent als je een webpagina bezoekt met bijvoorbeeld één plaatje, één JavaScript-bestand en één CSS-stylesheet, dat je al vier verbindingen moet opzetten. Het opzetten van een verbinding kost aardig wat tijd en veroorzaakt daarmee ook veel vertraging bij het bekijken van webpagina’s. Daarnaast is het ook zo dat de browser maar een beperkt aantal gelijktijdige verbindingen opzet naar dezelfde server. Hierdoor kan het relatief lang duren, voordat een pagina volledig is geladen.

Vaak wordt er tekst verstuurd via HTTP (HTML, JavaScript en CSS zijn allemaal platte tekst). Deze data zijn goed te comprimeren, daarom ondersteunt HTTP/1.1 compressie. Hierbij wordt een algoritme gebruikt om de data die verstuurd worden te verkleinen, zoals ‘zip’ dat ook doet. Echter, de headers worden niet gecomprimeerd. Afhankelijk van de grootte van het bestand dat verstuurd wordt, kunnen de headers een groot deel van de totale data voor zich nemen.

Het probleem wordt verergerd door het feit dat veel van de grootste headers van de browser naar de server worden gestuurd en weer terug, zoals bijvoorbeeld cookies. Cookies worden bij elk HTTP-verzoek én elk antwoord meegestuurd. De headers zijn al gauw zo’n 700 á 800 bytes groot. Dat lijkt weinig, maar de voorpagina van Antagonist is (gecomprimeerd) slechts 18 kilobyte groot. Aangezien de headers twee keer verstuurd worden, is dat ongeveer 8% van de totale data die verstuurd worden.

4. Introductie HTTP/2

De problemen met HTTP/1.1 waren al langere tijd bekend, daarom besloot Google uitgebreid onderzoek naar het probleem te doen om zo een nieuw protocol te kunnen ontwikkelen. Dit protocol, SPDY (speedy) genaamd, is later de basis geweest voor HTTP/2. Het HTTP/2-protocol is tot stand gekomen door samenwerking van verschillende grote partijen, zoals Google, Microsoft en Facebook. Het doel van HTTP/2 is om de latency zo laag mogelijk te krijgen. Daarvoor worden een aantal technieken gebruikt. De belangrijkste daarvan gaan we nu bespreken.

4.1 Pipelining

Zoals eerder gezegd, opent HTTP/1.1 voor elk bestand dat opgevraagd wordt een nieuwe verbinding. Echter, er is ook een manier om meerdere bestanden op te vragen via dezelfde verbinding. Deze techniek wordt pipelining genoemd. Dat is in HTTP 1.1 beschikbaar, maar wordt door weinig webservers ondersteund en is daardoor niet erg nuttig.

Wat is pipelining?Als pipelining gebruikt wordt, dan verstuurt de browser meerdere verzoeken achter elkaar over dezelfde verbinding. De server reageert in dezelfde volgorde op elk verzoek. Hier wringt echter de schoen. De webserver reageert op dezelfde volgorde en moet ieder bestand compleet versturen, voordat het volgende bestand verstuurd kan worden. Als je browser dus eerst één groot bestand verzoekt en daarna een aantal kleine bestanden, dan zullen die kleinere bestanden moeten wachten op de grote. Het gevolg is dat pipelining in HTTP 1.1 niet altijd efficiënter is dan één verbinding per verzoek.

4.2 Multiplexing

In HTTP/2 zijn deze problemen opgelost door een techniek toe te passen die multiplexing heet. De browser verstuurt dan meerdere verzoeken direct achter elkaar naar de server, net als bij versie 1.1. Echter, de server kan ervoor kiezen om de bestanden in een andere volgorde terug te sturen. Bovendien hoeven bestanden niet volledig verstuurd te worden, ze kunnen ook in stukjes worden opgedeeld. Hierdoor kan pipelining efficiënt toegepast worden in HTTP/2. Daarnaast is het een verplicht onderdeel van de standaard, dus alle browsers en webservers die HTTP/2 ondersteunen, ondersteunen ook pipelining.

4.3 Compressie van headers

Eerder zagen we al dat HTTP/1.1 compressie van bestanden ondersteunt, maar niet van headers. In HTTP/2 is dit opgelost, zowel data als headers kunnen gecomprimeerd worden. Dit levert forse winst op. Zoals we eerder zagen, zijn de headers van antagonist.nl bijna 10% van de verstuurde data. Daarnaast is HTTP/2 een binair protocol, wat betekent dat data niet als tekst verzonden wordt, maar als bytes. Dit maakt het verzenden van binaire data, zoals afbeeldingen, een stuk efficiënter.

4.4 Server Push

Een andere mooie feature die HTTP/2 ondersteunt, is Server Push. Als je een website bezoekt, zal je browser eerst een HTML-bestand downloaden. Daarna wordt gekeken welke andere bestanden dat HTML-bestand nodig heeft om goed weergegeven te worden (denk aan JavaScript, CSS en afbeeldingen). Dit betekent dat de browser eerst de HTML moet ophalen en lezen. Dat kost tijd en levert dus extra vertraging op.

In HTTP/2 kan de webserver ervoor kiezen om samen met de HTML alvast andere data mee te sturen. Zo kan de server besluiten om alvast alle JavaScript- en CSS-bestanden mee te sturen. Hierdoor kan de browser de pagina direct weergeven, zonder meer verzoeken naar de server te hoeven sturen. Uiteraard is het belangrijk dat de server niet meer bestanden meestuurt dan strikt noodzakelijk. Deze feature zorgt er voornamelijk voor dat webpagina’s sneller laden.

5. HTTP/2 bij Antagonist

Bij Antagonist vinden we de ervaring van de bezoekers van onze klanten uiteraard heel belangrijk. Gelet op alle voordelen die hierboven genoemd zijn, kan HTTP/2 een forse verbetering geven. Daarom willen we het zo snel mogelijk voor jouw website inschakelen. Dat is niet zonder gezonde uitdagingen. Wij willen namelijk voor al onze klanten in één keer HTTP/2 inschakelen en daarbij willen we natuurlijk wel zeker weten dat alles naar behoren blijft werken.

De manier waarop wij HTTP/2 gaan inschakelen, zorgt ervoor dat het voor iedereen in één keer goed werkt. Misschien nog wel belangrijker, het zorgt ervoor dat wij in de nabije toekomst een grote stap kunnen maken met betrekking tot SSL/TLS. Zorg er dus voor dat je ons blog goed in de gaten houdt, er komt groot nieuws aan binnenkort!

Webhosting + Domein + Gratis SSL →

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel Tweet +1 Deel