HTTP2
And Sitefinity
Introduction
The new HTTP protocol, HTTP2 is here. You can see it being used on the web if you know where to look. It is something we need to be aware of, understand how it works and how to take advantage of it. For Sitefinity projects we need to consider what we may change in our project structure and processes to address and take advantage of the protocol. First things first, lets briefly discuss what the protocol is, how do we implement it and finally what we need to change to take advantage of it.
And HTTP2 Is???
I will just go over a summary of the protocol as opposed to a deep dive. There are plenty of resources on the HTTP2 protocol out there for you to look up.
Lets start with the main issue of HTTP1.1. With HTTP1.1 when we make a request for a resource, (web page, image, css file, etc) a TCP connection is established and the resource retrieved. Need multiple resources? Then multiple connections are opened. We have spent 15 years understanding this and optimising how we work with it. Shrinking file sizes, minifying and combining resources, image sprites and domain sharding. (Putting our resources on another host to increase the browsers parallel download number.) But for every one of those connections we are repeating a lot of networking communications steps. Resolving DNS, communication handshakes, certificate validations.
In a nutshell, HTTP2 makes one TCP connection and then streams multiple resources and requests up and down the one connection. So much smarter. This will give your site the ability to service more requests, use less resources and do it faster.
There are other features in the protocol which I encourage you to read about including Server Push and Header compression.
How do I Turn it On!
You don't need to do anything to enable HTTP2. If the conditions are met HTTP2 will be used. If not HTTP1.1 will be used.
The first conditions for HTTP2 is that you need both the browser and server to support the protocol. Good news is that the protocol is supported in all the major browsers and has been for years now. On the server side you need Windows server 2016.
The other requirement is that your site must be running over TLS, (HTTPS). Interestingly enough the HTTP2 standard does not have this requirement but long ago, all the major browser vendors decided to make it a requirement. You can do HTTP2 requests without TLS when going from server to server but not when using your favorite browser. I haven't tried to find out why they did this but I can make my own assumptions and I would also have voted for this requirement.
Azure websites
I meant to write this article almost a year ago but I have been agonisingly waiting for Azure websites to support it. As of March and at over 3000 user votes they say they are close now.
With that, the first thing you need to consider is applying a SSL certificate to your site. This is not hard or expensive to get completed. You can even get free certificates from some vendors. I won't recommend anyone in this post but you can easily see the vendor I have chosen for this site in the address bar.
The other thing to consider with a Sitefinity site is how to enforce and use SSL and secure your pages. You can of course refer to the Sitefinity docs on their recommendations but, in my opinion they are a little lacking in thoroughness. Keep an eye out as I intend to write a post on securing Sitefinity soon.
How Do I Take Advantage of HTTP2?
One of the keys to taking advantage of HTTP2 is to stop combining files into one large file. JavaScript, CSS and sprite images, these are served more efficiently as many smaller files as opposed to the one large one. Minifying is still an advantage of course but only delivering the code required when required is a better tactic.
How may this look in our Sitefinity projects? You potentially already do this to some degree, especially with CSS but having JavaScript and CSS references that are only relevant to the page or the widget is the way to go. You may have your app.js or main.css with your core or shared code but in each widget you place or reference the files required just to run or display that widget. As well, rather than combining your smaller images into a master sprite file with the HTTP2 protocol you are better to keep them separate. And, in-lining images with Data Uris in your CSS is now not a good idea any more.
Putting our resources on a separate domain, (referred to as domain sharding) to increase download speed is now detrimental. Though, CDN's still have their place because they are also moving resources closer to the requester and so reducing the download distance.
The main thing to realise and consider is that HTTP requests are cheap with HTTP2. Reducing requests by combining our resources is not tactic number one, or two any more. A 'simple' way to look at it is that the time it takes to load your page is determined by the size of the largest file.
How to Tell if it is Working?
You can see what protocol is being utilised via your browsers developer tools. Open the network tab and browse to Google. You will see the protocol in use in the protocol column. If you don't see the column, right click on the column headers and select the protocol option.
HTTP2 is here and over time it will be the de facto protocol used. I can't see it not being so and don't believe there are any real barriers for people not moving to it. I suggest you start thinking about what steps you need to take to start towards moving towards utilising the HTTP2 protocol.
April Update
Azure Web Apps now support HTTP2! I have enabled it and I am pleased to confirm that the speed of my site, especially in the back-end feels very responsive. I will need to look at stats but I am thrilled with it.
Thanks for reading and feel free to comment - Darrin Robertson
If I was really helpful and you would buy me a coffee if you could, yay! You can.
Leave a comment Load more commentsMake a Comment