HTTP/2 voor Magento

Met de komst van HTTP/2 is ons advies voor Magento gebruikers om altijd Javascript/CSS merging aan te zetten niet langer van kracht. Sterker nog, we raden het sterk af. Onze partner en Magento developer Peter Jaap Blaakmeer van Elgentos schreef er een gastblog over. 

Gastblog van Peter Jaap Blaakmeer, Elgentos

HTTP/2; hoe, wat, waarom?

HTTP/2 is de nieuwe standaard van HTTP, het protocol waarop het merendeel van wat wij internet noemen is gebaseerd. Deze standaard is voortgekomen uit SPDY, een onderzoeksproject binnen Google dat als doel had HTTP/1.1 te verbeteren. HTTP/2 is in februari 2015 gefinaliseerd en sindsdien door alle grote browsers geïmplementeerd.

HTTP is echter een protocol dat een wisselwerking vereist tussen browser én server. De browsers ondersteunen het dus ondertussen, nu nog de servers. Gelukkig loopt Byte ook hiermee voorop en draaien ondertussen alle Hypernodes al vanaf februari 2016 op HTTP/2.

Wat was er mis met HTTP/1.1?

Een aantal punten die niet meer goed strookten met het moderne internet en de tools die we gebruiken. Eén van de grootste nadelen van HTTP/1.1 is dat het maar één concurrent request per TCP connection toestaat. Deze blog gaat over hoe wij hierom heen werkten en hoe dat nu met HTTP/2 gaat.

Workarounds voor HTTP/1.1 in combinatie met Magento

We hebben de afgelopen jaren een aantal workarounds toegepast om toch snel veel bestanden van een website binnen te halen. De eerste is spriting; dit is een techniek waarbij we zoveel mogelijk plaatjes samenvoegen in één grote image en vervolgens CSS gebruiken om de afbeelding op de correcte plek te laten zien. Dit zorgt ervoor dat we maar één file hoeven te downloaden en we de overhead van een connectie maken maar éénmalig hebben. Dit versnelt het downloadproces.

Het gebruik van CDN’s is op zich geen workaround voor dit probleem, maar kan wel zo ingezet worden. Een browser beschouwt een subdomein als een ander domein. Als er dus meerdere bestanden worden aangevoerd vanaf meerdere subdomeinen zal de browser deze bestanden parallel aan elkaar gaan downloaden (*domain sharding*). Dat is waarom tools zoals Webpagetest.org een CDN aanraden (en je een slechtere score geven als je dat niet doet). Zo zijn er developers die cdn1 t/m cdn10 als subdomeinen gebruiken om zo meerdere parallele downloads te realiseren, wat paradoxaal genoeg dan weer tot een [langzamere site kan leiden](http://calendar.perfplanet.com/2013/reducing-domain-sharding/).

Een andere techniek maar dan voor Javascript en CSS zelf is het mergen van Javascript en CSS bestanden. Magento ondersteunt het mergen van deze type bestanden standaard en veel shops hebben dit dan ook ingeschakeld staan. Bij het mergen worden alle CSS bestanden en alle Javascript bestanden bij elkaar geraapt en achter elkaar in één grote file geplakt. Dit heeft ook wat nadelen; zo kan het mergen zelf soms voor problemen zorgen als bestanden niet goed afgesloten zijn en sommige extensies die kunnen mergen en minifyen (overbodige code verwijderen om het resultaat nog verder te verkleinen) doen dit soms zo agressief dat er onbedoeld benodigde code wordt verwijderd en de shop niet meer goed functioneert. Ook is het debugging van gemergede code lastiger dan wanneer het allemaal in losse files zit, hoewel je op je lokale ontwikkelomgeving natuurlijk altijd de merging uit kan zetten.

De laatste paar jaar is het gebruik van een icon font zoals Font Awesome of Icomoon toegenomen, onder andere met als reden om zo images te kunnen vervangen door icons die worden geladen uit één font. Deze fonts hebben uiteraard meerdere voordelen, maar dit wordt vaak aangehaald als een groot voordeel.

Een aantal minder vaak voorkomende workarounds zijn het inlinen van Javascript en CSS zodat er niet een aparte file gedownload hoeft te worden voor bepaalde functionaliteit en het gebruiken van base64 ge-encodeerde images in CSS, ook weer om niet onnodige files te hoeven te downloaden.

Ok, en dat hoeft nu allemaal niet meer?

Nee! Want in de wondere wereld van HTTP/2 hoeven we niet meer na te denken over het aantal concurrent requests; HTTP/2 ondersteunt namelijk *multiplexing*, wat inhoudt dat er over één enkele TCP connectie meerdere requests parallel kunnen lopen.

HTTP/2 kan zelfs onderscheid maken tussen deze stromen en elementen die te maken hebben met de weergave van de site op het scherm prioriteit geven boven andere elementen (denk aan afbeeldingen & CSS die prioriteit krijgen boven tracker Javascript).

Ook ondersteunt HTTP/2 server push, een techniek waarbij de server data naar de browser kan sturen zonder dat de browser hier om gevraagd heeft, om zo te anticiperen op acties van de bezoeker.

Wat houdt dit nu precies in?

Als je iets onthoudt van deze blog, laat het dan dit zijn; vergeet merging van Javascript & CSS en vergeet spriting. Zou je HTTP/2 gebruiken en toch spriten, dan kan dat zelfs averechts werken; de CSS overhead aan code om de images hun goede positite te geven binnen het element kan meer zijn dan de opbrengst van het spriten ooit was (in extreme gevallen geldt dit zelfs voor HTTP/1.1).

Het mergen van Javascript & CSS geeft met HTTP/2 in bijna alle gevallen een negatief resultaat ten opzichte van niet mergen. Dit komt omdat Magento andere CSS en Javascript bestanden inlaadt per type pagina (homepage, product-pagina, categorie-pagina, checkout, etc). Zo zullen bepaalde CSS/JS files in de gemergde file zitten terwijl die regels op een groot aantal pagina’s nooit gebruikt zal worden. Bij HTTP/1.1 was dit prima, omdat het gemergde bestand al eenmaal gedownload was en in je lokale cache zat maar je niet de overhead van meerdere requests had. Je had tegen die tijd waarschijnlijk echter al te veel code gedownload op de eerste hit. Mocht een bezoeker niet alle pagina’s bezoeken waarvan de code in de gemergde file zat, dan ben je met HTTP/2 qua resources beter uit, omdat de overbodige code nooit gedownload is.

Magento zal in veel gevallen zelfs meerdere CSS/JS bestanden aanmaken die gemergede versies zijn van de CSS/JS die per pagina worden aangeroepen. Dit houdt in dat code van een CSS file die op elke pagina gebruikt wordt in meerdere gemergde files zit, telkens met andere files die wellicht specifiek voor die pagina zijn. Zo download je dezelfde code dus meerdere keren! Er zijn extensies te vinden waarbij je ‘merge groups’ kan instellen zodat bepaalde files altijd bij elkaar in een gemergde file zitten. Makkelijker is nu echter om HTTP/2 te gebruiken.

Wat moet ik doen om HTTP/2 te gebruiken?

Heb je een Hypernode bij Byte? Dan hoef je alleen maar er zeker van te zijn dat je site op HTTPS draait (bekijk Hypernode docs). TLS is officieel geen vereiste voor HTTP/2 maar alle browsers hebben het wel alleen voor beveiligde verbindingen geïmplementeerd. Draait je Hypernode al op HTTPS? Zet dan eens en voor altijd je merging uit!

 

 

Scan je eigen Magento shop op veiligheidslekken