Performance optimization in an HTTP/2 world

A revolution is currently going on in the underpinnings of the web. HTTP, the protocol your browser uses to connect to your site, has a new version: HTTP/2. This is not something that should concern the average user, but for web developers, it changes how we do performance optimization entirely. In this short article, I want to explain what performance optimization best practices you can do away with, and why.

What changed?

The most important thing you should know about the new HTTP/2 is that it no longer requires a new request for each file. This is the modification that makes our performance optimization guidelines change so drastically. In the HTTP1 / HTTP/1.1 world, it’d be faster to combine JS & CSS files and even images, so there would be fewer requests between browser and server. In the HTTP/2 world, this type of optimization is no longer needed and can even become counterproductive.

Can I use this already?

The answer is, fairly simply: yes. If your site is running on HTTPS, then all major current browsers support HTTP/2. You or your hosting company might have to change your server configuration to make sure it supports HTTP/2, but that’s it. Some older browsers might not be able to use it, but your site would still work for them.

So I can use HTTP/2, but should I?

Yes, you should use HTTP/2! It’s a lot faster than old fashioned HTTP1, and when you set it up well, most of your visitors will benefit hugely.

Does HTTP/2 mean I don’t need a CDN?

Even with HTTP/2 you still need a CDN. A CDN delivers content a lot faster than your average server ever will, so your site would still benefit enormously from having one. Every proper CDN will already support HTTP/2.

Performance best practices that changed

The following performance best practices are no longer needed with HTTP/2 and should be done away with:

  • Concatenating CSS and JS files
    As reducing the number of requests is no longer an issue, there’s no reason to do this anymore. Minifying files is still ok.
  • Image spriting
    Image spriting is the practice of combining several small images into a larger image so as to reduce the number of requests. This is a cumbersome process with quite a bit of overhead, and HTTP/2 entirely removes the need for it.
  • Domain sharding
    Though this was slightly less common, some heavy sites used multiple CDN domains to serve their files. This because a browser could only open eight parallel connections to a server in the world of HTTP/1 and they’d want to serve more files in parallel. Because HTTP/2 removes the need for parallel connections as there can be parallel downloads within one connection, this best practice becomes counterproductive. The use of multiple CDN domains actually means multiple DNS requests, which slows the site down instead of speeding it up. (Steve Souders, the godfather of web performance, already predicted in 2013 that when HTTP/2 becomes ubiquitous, domain sharding will go away.)
  • Inlining CSS and JS
    Inlining small bits of CSS and JS is a practice that was aggressively pushed by Google. Because the CSS and JS are inline, it cannot be cached properly. As a request for a small file now has no extra overhead, we can do away with this best practice.

Google PageSpeed and HTTP/2

Unfortunately, Google’s PageSpeed tool and many other web performance testing tools are rather slow in their adoption of HTTP/2. They should be changing their guidelines. If a simple HTTP/2 test shows you that a site is capable of using HTTP/2, quite a few of the site speed suggestions are moot. Their documentation speaks of “networking round trips” that simply, in an HTTP/2 environment, don’t happen.

There are people at Google that understand this, of course. This presentation by Ilya Gregorik in 2015 already shows all of that.

Read more: Site speed: tools and suggestions »

Coming up next!


28 Responses to Performance optimization in an HTTP/2 world

  1. Odira
    Odira  • 7 years ago

    Quite interesting. With what was said above, it more like saying that caching plugins are no more needed.

  2. Brian J King
    Brian J King  • 7 years ago

    With HTTP/2 you can use Brotli compression as well! If Brotli isn’t available GZIP will automatically be used as a fallback. Test for Brotli compression support online at https://tools.keycdn.com/brotli-test

  3. Jan Reilink
    Jan Reilink  • 7 years ago

    Unfortunately, it is not always easy to “change your server configuration to make sure it supports HTTP/2”. Windows Server 2012 (R2) for example, it is widely used and will never support HTTP/2.

    Therefore, I think you should develop with HTTP 1.1 and HTTP 2 in mind.

    Maybe plugin developers can catch the protocol used, to perform different actions based on that. For example, concatenating CSS and JS files in Autoptimize only if HTTP 1.1 is used.

  4. Charles Lowe
    Charles Lowe  • 7 years ago

    I trust Google will heed your commentary. If it doesn’t, you should feel insulted.

  5. download4i
    download4i  • 7 years ago

    Is HTTP/2 automatically activated when I use Cloudflare?

  6. IranNod32
    IranNod32  • 7 years ago

    Hi
    How is https performance optimization?
    thanks

  7. Per Søderlind
    Per Søderlind  • 7 years ago

    Adding HTTP/2 is simple if you use Cloudflare. You can learn more about it at https://www.cloudflare.com/website-optimization/http2/

    and yes, I’m using it on my site.

  8. Sachin
    Sachin  • 7 years ago

    Sir,
    I didnt understand what is duplicate content and how to recognise this thing. any article belong to this.
    by the way yoast seo is awesome.

  9. Nyssa
    Nyssa  • 7 years ago

    I wish I saw this a week ago. I just spent a lot of time optimizing my sites and trying to figure out which plugins successfully minify etc. I checked and discovered that, with Siteground and an SSL, my sites already are on http/2. So I turned off the minifier, and my sites loaded faster. :D

  10. Sean W
    Sean W  • 7 years ago

    Well this was timely. I’m looking to do a full on performance upgrade to a couple of clients sites. We are doing a complete new web design and migrating over to https. The information brought forth in this article should definitely help the transition go smoother. Thanks a bunch!

  11. Coach David
    Coach David  • 7 years ago

    Interesting, now I just need to learn how to set it up.

  12. ???
    ???  • 7 years ago

    I don’t understand http/2 workes with https or without ?

  13. Matt
    Matt  • 7 years ago

    Inlining CSS and JS
    “Inlining small bits of CSS and JS is a practice that was aggressively pushed by Google.” — Should it be punished rather than pushed?

  14. Curt
    Curt  • 7 years ago

    It might be like PHP7 where those of us with cPanel had to wait several months before it was compatible. It was well worth the wait and since HTTP/2 is new and unknown to the average web site owner it will probably be well into 2017 before we can jump on it. Fingers crossed it’ll be sooner, but technology on servers (even dedicated ones) is much slower than in our minds.

  15. Curt
    Curt  • 7 years ago

    Not such an easy thing for Liquid Web. I inquired with their tech support (which always goes above and beyond) about HTTP/2 and here’s what they had to say about it working with cPanel:

    “HTTP2 requires the use of Application-Layer Protocol Negotiation (ALPN) which is a form of TLS and is not supported in OpenSSL version 1.0.1. It is supported in 1.0.2, but that is not included in the managed software on your server. So, you would need to maybe use an unmanaged Fedora server and install OpenSSL v 1.0.2 first, then try to get it working. This is beyond our level of support. The other is wait for Centos 8 or Unbuntu 16 to come out and hope that OpenSSL is updated in those version. “

  16. Apartamento de Luxo
    Apartamento de Luxo  • 7 years ago

    Hello my friends. Need to check with the server if they have support for this.

    You can also check here on this site ==> https://tools.keycdn.com/http2-test

    To see if it already supports the second version of the HTTP / 2 protocol.

  17. Ryan
    Ryan  • 7 years ago

    What isn’t particularly clear to me from this article is the how: how do we enable HTTP/2? Is this something we’re requesting at the host end? What action is required on our end? A small addition of a ‘Getting Started’ would enhance this article quite a bit, imho.

    • Cathy
      Cathy  • 7 years ago

      Totally agree with this. Really interesting to know about HTTP/2 but I’m left wondering – do I even have a choice to use HTTP/2 or is it entirely up to the host to implement???

      So many questions

      • Paul
        Paul  • 7 years ago

        Your host has to have implemented it before you can take advantage if it, Cathy. In addition, your site must be using https (an SSL certificate) for HTTP/2 to take effect.

  18. Anthony
    Anthony  • 7 years ago

    I have plans to change a few sites to HTTP/2 in the next few months and wondering if you recommend any hosting and CDNs?

    • Andrew
      Andrew  • 7 years ago

      For CDN I recommend Cloudflare. It is a great CDN and it’s free.

  19. Jacco
    Jacco  • 7 years ago

    It certainly mitigates any negative effects using SSL might have on your performance, as HTTP/2 more than compensates this. It also feels a bit like a reward after the punishing Google is doing to regular content sites by enforcing to go SSL with their browser.

  20. John-Pierre Cornelissen
    John-Pierre Cornelissen  • 7 years ago

    Ok, but how do you start using it?

    • Jacco
      Jacco  • 7 years ago

      Hi,

      if your hosts support HTTP/2 and your site is configured for SSL you should be good to go.

      Jacco

  21. Imoveis de Luxo
    Imoveis de Luxo  • 7 years ago

    What good news. So that means a lot will change and we will have less work with performance practice.

    Bad forces us to use Https on all websites and still check if the server supports to enable the correct http/2?

  22. Kristof
    Kristof  • 7 years ago

    Does that means you should force use https or can you leave both (https and http) active?

    • Luke
      Luke  • 7 years ago

      Hi Kristof, I found your question interesting and did a bit of research… I don’t know if this will help you make your decision on whether to keep both HTTP & HTTPS or require HTTPS only but it is interesting to see no browser currently supports HTTP/2 without TLS even though HTTP/2 supports non-encrypted (HTTP) connections. Read more here: https://http2.github.io/faq/#does-http2-require-encryption

    • Joost de Valk

      You need to force https for this.