Will HTTP/2 help my Magento Store?
Introduction
HTTP/2 is the new http standard. Most browsers, including Chrome, Opera, Firefox, Internet Explorer 11, Safari, Amazon Silk and Microsoft Edge support HTTP/2. Nginx and other web servers too support HTTP/2. Magento 1.x and Magento 2 work very well with HTTP/2. In this article we see the benefit of HTTP/2 and give some configuration recommendations for Magento store owners or administrators.
What are key differences of HTTP/2 ?
At a high level, HTTP/2:
- is binary, instead of textual
- is fully multiplexed, instead of ordered and blocking
- can therefore use one connection for parallelism
- uses header compression to reduce overhead
- allows servers to “push” responses proactively into client caches
We will review some of these features in relation to usefulness for a Magento store.
Multiplex – what makes HTTP/2 fast!
In order to prevent the sequential connect->download->disconnect nature of HTTP/1 it was common to do the following
- merge js and css files
- inline css if small
- Use sprites as loading multiple small images was slow
With multiplexing, the browser sends out multiple simultaneous requests an the server send back multiple responses simultaneously. This diagram shows the difference between HTTP 1 pipelining with the “head of line blocking” problem that requires the entire content to be retrieved before a new request can be sent.
Practically here is the difference as seen in the network view of firefox.
The color codes in the rightmost column are illustrated in the detailed view below
Observations
- HTTP/1 view has more “Connecting” color. This is the time HTTP/1 took to connect.
- In HTTP/1, the connection time seems to progressively increase with requests
- HTTP/2 has almost no connection time
- The order of requests differ between the two HTTP protocols
Explanation
This is demonstration of multiplex in action – before HTTP/2 the requests went one after the other from the browser. My observation of firefox is it made upto 5 simultaneous connections per subdomain. Even with keep alive the sequencing could be seen with a progressively increasing time line.
HTTP/2 multiplex meant all the requests from the browser were sent out simultaneously without waiting for the previous request to complete. The server sent back the data again in no specific order.
HTTP/2 requires https
While the protocol specification for HTTP/2 does not require secure only, current implementations of the server work only for secure protocols. However, the earlier objection of TLS (https) overhead is reduced as the same connection is reused. (The overhead of one connection yet remains and so does the cost of encryption and decryption).
Verdict : Most useful, expect page load times to come down.
If you have not as yet moved to HTTP/2, do it now! You will need a SSL certificate.
CDN support for HTTP/2
All modern CDNs support HTTP/2 – so if you are using a CDN just moving to https will be enough to give you the benefits of HTTP/2.
Configuration Recommendation for Magento Store Owners on HTTP/2
- Make your website fully secure. unsecure and secure base URLs should be https.
- Disable merge js / css
- Ensure skin/js/css insecure URLs are set to the secure versions
What was good for HTTP/1 may not be good for HTTP/2. Merge js / css
- Magento’s merge of js or css files will result in a larger file. Not all pages have the same set. This would result in the same original js or css being cached multiple times
- For best browser caching results merge is not a good idea
- This means that the page load times with and without cached content may be different
- In HTTP/1 merge prevented multiple connects to the same server to get small files. With HTTP/2 multiplexing prevents multiple connects
Upgrade to nginx 9.5+ (or the latest)
- HTTP/2 is only supported in the latest nginx builds.
- A small edit to the nginx configuration will be needed to take advantage of HTTP/2
Conclusion
We recommend that all Magento sites switch to nginx 9.5+ to take advantage of HTTP/2. If SEO permits it may be time to switch to https for the entire site.