Let’s do Web Dev with HTTP/2 — but When?
HTTP is a pretty old protocol — V1.0 since 1996. We are so familiar with it such that we just assume it won’t change. It has been revising, though new HTTP/2 really catch my attention when Cloudflare announced the support.
In short, HTTP/2 is (claimed) to
- Speed up 30% webpage download in general
- Support concurrent requests (Multiplexing)
- Support server push
- Be binary instead of textual
- Keep our familiar HTTP semantics
- Prioritize what to send first
HTTP/2 IS the future. Google deprecated SPDY in favour of HTTP/2.
So it’s not a question on To be or Not to be. It’s more When to be.
If you are using Cloudflare, it is actually turned on by default.
Everything sounds cool but the situation is a bit complicated and you might want to see what exactly are your action items.
- Time to use HTTP/2 at CDN provider or just turn it off?
- Time to align new HTTP/2 Web Dev Best Practices?
- Time to add server push logic at server-side or even mix with websocket?
I’m no expert in networking so I am talking more from a Front-end engineer perspective.
Like any technical changes, you should think in your users’ shoes.
- Will they really get a better experience?
- What browsers are they using? do they support HTTP/2?
- Are they around the globe?
The most concerning factor — will users just failed to download the resources if HTTP/2 is ON? Cloudflare has a good Fallback mechanism. To be exact, what it support is HTTP/2 + SPDY, it fallback to SPDY if HTTP2 is not available, and further fallback to HTTP/1 if SPDY is unavailable.
Conflicting best practices
With experience in frontend build tools (I love gulpjs & webpack), it’s really striking when I read about the new practice which web dev no longer should bulk their assets, nor domain sharding — sounds good. But wait, what about the users fallback-ed to use HTTP/1? For them it will be even slower.
It’s tricky to do the bulk-only-if-http2 strategy, it must be at server-side, since most cases you want to ship the assets as soon as the page load although in theory you can detect if the browser supports it at client-side. Doing it Client-side will delay a lot and defeats the purpose of server push. Which is an extra overhead as we will need to change both our build flow and rendering logic.
Is your site SSL-protected?
HTTP/2 specification does not require TLS, all major browser vendors have indicated that they will only support HTTP/2 over a TLS connection. As a result, CloudFlare only supports HTTP/2 over TLS. Of course, TLS is free with CloudFlare’s Universal SSL. — Cloudflare
We all know the importance of SSL, I agree totally this opinionated take.
Your site should be already SSL protected anyway — but can you be sure every page in every single flow? There are often quirks in the application such as tricky custom domain, legacy redirects or external assets that make some of your pages unprotected, which then fallback to HTTP/1 — audit them and see if anything will become slower or even break.
How many users can benefit from it?
Browser Compatibility is available in caniuse.com.
Industry data is also available for reference, like 69.6% as stated in caniuse.com. However, the study done by Cloudflare in Dec2015 show only 26.79% of their user is using HTTP/2 compatible browser.
If you can using the Cloudflare HTTP/2 with SPDY option — You should do the math together with SPDY supported browsers.
You should always decide based on your own stats, say, in Google Analytics. Also as in the Cloudflare study instead of just rely on compatibility chart, a more accurate estimation will be tracking the actual support explicitly.
It’s also likely to have demographic-specific browser shares or network architecture. Things are simpler with a reverse-proxy CDN, but still special test will need to be done in regions, say, China and no legacy middleware break the HTTP2 support.
Measure in real user experience
However, it seems there is no simple way to do so. Cloudflare analytics don’t provide such breakdown. Modernizr also seems to provide no such attribute.
If you are going to launch, you should do RUM(Real User Monitoring) to ensure loading behaviour are expected — and faster.
Once you can differentiate HTTP/1 vs HTTP/2, Filmstrips as suggested by Steve Souders is definitely very useful to check the actual visual experience and any quicks out there.
Only on your own servers.
Most servers, content delivery networks (including CloudFlare), and existing applications don’t support server push. — Cloudflare
For me, I am excited to see HTTP2 coming out. Meanwhile I would wait to see toolings become more mature for investigations above. I will keep the option ON, but also current HTTP/1 web dev best practice.
P.S. If you like related challenges, join us.