25.04.2017
Search

​Betere SEO met HTTP/2; yay or nay?

By: Jeroen de Hooge

BlogSearch

Probeer je al een tijdje om je website sneller te maken, maar blijft het gewenste resultaat uit? Denk dan eens aan het implementeren van HTTP/2.

Onlangs sprak Fili Wiese op Friends of Search over technische mogelijkheden om de laadtijden van websites te verbeteren. Eén van de verbeteringen die hij aandroeg is het implementeren van HTTP/2.

Momenteel gebruikt slechts 12,9 % van de websites HTTP/2.

Veel websites maken nog geen gebruik van dit protocol dus liggen er (SEO-)kansen voor websites die er wél mee geoptimaliseerd zijn. Om te begrijpen waarom dat zo is, is het handig om nog even de basis door te nemen:

Wat is HTTP?

HTTP staat voor Hypertext Transfer Protocol, een serie regels voor het uitwisselen van bestanden tussen de browser en een server. Aan de hand van verzoeken (requests genaamd) en antwoorden (responses).

Een voorbeeld van een dergelijke interactie is dat er een afbeelding of ander pagina-element geladen moet worden. Wat business as usual is, maar iedere request aan de server kost tijd en kán dus ten koste gaan van de laadtijd en gebruikservaring.

Wat is nieuw in HTTP/2?

HTTP/2 is de update van HTTP 1.1 Met direct goed nieuws: voor de implementatie ervan hoef je bestaande websites niet aan te passen.

Het grote verschil zit hem in de manier hoe de data wordt neergezet en verstuurd tussen de browser en server. In plaats van dat de browser voor iedere actie een request aan de server stuurt (pull), stuurt de server na één request álle data mee (push) naar de browser.

Als de server bijvoorbeeld ziet dat iemand een artikel wil lezen, ‘weet’ de server dat er ook die afbeelding bij hoort. Voorheen werden die elementen per stuk aangevraagd. Door ze te bundelen, reduceert het aantal requests en responses aanzienlijk.

Als je dat visueel weergeeft, ziet dat er zo uit:

<i>Bron: Cloudflare Blog</i>
Bron: Cloudflare Blog

Als je dit nog aantrekkelijker wil weergeven, is het verschil tussen HTTP/1 en HTTP/2 ook zo te verbeelden:

<i>Bron: Kinsta</i>
Bron: Kinsta

Lekker snel! En het is bij HTTP/2 niet meer nodig om Javascripts, CSS en afbeeldingen te comprimeren. Sterker nog, het kan zelfs schadelijk zijn voor de werking van de website.

Keep alive versus HTTP/2

De werking van HTTP/2 doet misschien een beetje denken aan ‘Keep alive, maar dat werkt net weer wat anders.

Keep alive zet een constante verbinding tussen de server en browser op, waardoor de browser niet steeds ‘op de serverdeur hoeft te kloppen’ om data op te vragen. Dit scheelt al in de laadtijd, maar het kan nog sneller met HTTP/2.

Daar wordt immers alle data die nodig is voor het laden van die specifieke pagina in één keer (synchroon) ingeladen.

Voordelen van HTTP/2:

  • Er zijn geen aanpassingen aan de huidige site nodig. HTTP/2 is compatibel met HTTP/1.
  • Taken stapelen (multiplexing genaamd); HTTP/2 kan meerdere requests (asynchroon) in 1 verbinding doorsturen, terwijl HTTP/1 per request 1 verbinding moet opzetten.
  • Proactief pushen en prioriteren van data; meteen doorsturen van alle elementen die nodig zijn op een pagina te laden, met de belangrijkere elementen voorop.
  • Beperken van RTT’s (round trip times); dit zorgt voor minder requests aan de server, wat weer bijdraagt aan een kortere laadtijd van de pagina.
  • Brede ondersteuning door meestgebruikte browsers als Chrome, Safari, Opera, Firefox, Edge en Internet Explorer.

En een paar nadelen:

  • HTTPS-verbinding; noodzakelijk voor veel browsers die HTTP/2 ondersteunen, is een HTTPS-verbinding. Heeft jouw website geen HTTPS-verbinding, dan zullen gebruikers een andere browser moeten proberen, of ze kunnen je website niet bezoeken.
  • Niet persé sneller; in verschillende tests komt naar voren dat HTTP regelmatig nog sneller is dan HTTP/2 of HTTPS. Als je puur vergelijkt tussen HTTPS en HTTP/2, dan blijkt HTTP/2 wel vaak sneller te zijn. Als je een beveiligde website hebt (een SEO-must), kun je dan ook beter voor het HTTP/2-protocol kiezen.
  • Veiligheidskwesties; omdat deze versie van het protocol nog compatibel moest zijn met de eerste versie, zitten er ook in HTTP/2 nog kwetsbaarheden op het gebied van bijvoorbeeld cookies en encryptie.
  • Compatibility; oudere versies van browsers ‘begrijpen’ mogelijk je website niet, waardoor elementen niet (goed) inladen, wat je mogelijk bezoekers kost.

Eigen tests

De presentatie van Fili Wiese was de inspiratie voor mijn Searchresult-collega Gregory Pinas om op zijn website Provefit.nl te testen wat het effect was van de implementatie van HTTP/2.

Hij heeft meerdere aanpassingen doorgevoerd, om betere prestaties af te dwingen, zoals de toevoeging van een CDN, PHP7 en Cache Content. De resultaten laten een grote verbetering zien:

<i>Voor implementaties \/ na implementaties</i>.
Voor implementaties \/ na implementaties.

In bovenstaande screens is het effect van HTTP/2 duidelijk zichtbaar. In de rechterafbeelding (HTTP/2) is de communicatie tussen server en browser veel efficiënter ingericht.

<i>Voor implementaties</i>.
Voor implementaties.
<i>Na implementaties</i>.
Na implementaties.

De laadtijd van de website (eerste bezoek) is van iets meer dan 15 seconden naar ongeveer 4 seconden gegaan en nog opmerkelijker: de first byte is van 4,5 seconden naar 0,31 seconden gegaan.

Tot besluit is het aantal requests van 89 naar 57 gegaan. Dit zijn gigantische stappen, die de gebruikers van de website (en dus ook zoekmachines) zeker weten waarderen.

Conclusie

HTTP2 kan een zeer nuttige toevoeging zijn voor websites die op HTTPS-verbinding draaien. In onze eigen tests was de verbetering groot.

De moeite waard om je er eens in te verdiepen en ermee te testen op je eigen website.

Bovendien heeft de laadsnelheid van je pagina ook nog eens direct invloed op de conversieratio van je website.

Yay!

[Afbeelding © zakokor – Fotolia]

Share this post