Thursday, October 22, 2015

Performance improvements with HTTP/2 push and server-driven prioritization

tl;dr

HTTP/2 push only marginally improves web-site performance (even when it does). But it might provide better user experience over mobile networks with TCP middleboxes.

Introduction

Push is an interesting feature of HTTP/2.

By using push, HTTP servers can start sending certain asset files that block rendering (e.g. CSS and script files) before the web browser issues requests for such assets. I have heard (or spoken myself of) anticipations that by doing so we might be able to cut down the response time of the Web.

CASPER (cache-aware server pusher)

The biggest barrier in using HTTP/2 push has so far been considered cache validation.

For the server to start pushing asset files, it needs to be sure that the client does not already have the asset cached. You would never want to push a asset file that is already been cached by the client - doing so not only will waste the bandwidth but also cause negative effect on response time. But how can a server determine the cache state of the client without spending an RTT asking to the client?

That's were CASPER comes in.

CASPER (abbreviation for cache-aware server pusher) is a function introduced in H2O version 1.5, that tracks the cache state of the web browser using a single Cookie. The cookie contains a fingerprint of all the high-priority asset files being cached by the browser compressed using Golomb-compressed sets.

The cookie is associated with every request sent by the client1. So when the server receives a request to HTML, it can immediately determine whether or not the browser is in possession of the blocking assets (CSS and script files) required to render the requested HTML. And it can push the only files that are known not to be cached.

With CASPER, it has now become practical to use HTTP/2 push for serving asset files.

Using HTTP/2 push in H2O

This week, I have started using CASPER on h2o.examp1e.net - the tiny official site of H2O.

The configuration looks like below. The mruby handler initiates push of JavaScript and CSS files if the request is against the top page or one of the HTML documents, and then (by using 399 status code) delegates the request to the next handler (defined by file.dir directive) that actually returns a static file. http2-casper directive is used to turn CASPER on, so that the server will discard push attempts initiated by the mruby handler for assets that are likely cached. http2-reprioritize-blocking-assets is a performance tuning option that raises the priority of blocking assets to highest for web browsers that do not.
"h2o.examp1e.net:443":
    paths:
      "/":
        mruby.handler: |
          lambda do |env|
            push_paths = []
            if /(\/|\.html)$/.match(env["PATH_INFO"])
              push_paths << "/search/jquery-1.9.1.min.js"
              push_paths << "/search/oktavia-jquery-ui.js"
              push_paths << "/search/oktavia-english-search.js"
              push_paths << "/assets/style.css"
              push_paths << "/assets/searchstyle.css"
            end
            return [
              399,
              push_paths.empty? ?
                {} :
                {"link" => push_paths.map{|p| "<#{p}>; rel=preload"}.join("\n")},
              []
            ]
          end
        file.dir: /path/to/doc-root
    http2-casper: ON
    http2-reprioritize-blocking-assets: ON

The benchmark

With the setting above (with http2-reprioritize-blocking-assets both OFF and ON), I have measured unload, first-paint, and load timings2 using Google Chrome 46, and the numbers are as follows. The RTT between the server and the client was ~25 milliseconds. The results were mostly reproducible between multiple attempts.


First, let's look at the first two rows that have push turned off. It is evident that reprio:on3 starts rendering the response 50 milliseconds earlier (2 RTT). This is because unless the option is turned on, the priority tree created by Chrome instructs the web browser to interleave responses containing CSS / JavaScript with those containing image files.

Next, let's compare the first two rows (push:off) with the latter two (push:off). It is interesting that unload timings have moved towards right. This is because when push is turned on, the contents of the asset files are sent before the contents of the HMTL. Since web browsers unload the previous page when it receives the first octets of the HTML file, using HTTP/2 push actually increases the time spent until the previous page is unloaded.

The fact will have both positive and negative effects to user experience; the positive side is that time user sees a blank screen decreases substantially (the red section - time spent after unload before first-paint). The negative side is that users would need to wait longer until he/she knows that the server has responded (by the browser starting to render the next page).

It is not surprising that turning on push only somewhat improves the first-paint timing compared to both being turned off; the server is capable of sending more CSS and JavaScript before it receives request for image files, and start interleaving the responses with them.

On the other hand, it might be surprising that using push together with reprioritization did not cause any differences. The reason is simple; in this scenario, transferring the necessary assets and the <head> section of the HTML (in total about 320KB) required about 10 round trips (including overhead required by TCP, TLS, HTTP/2). With this much roundtrips, the merit of push can hardly be observed; considering the fact that push is technique to eliminate one round trip necessary for the browser to issue requests for the blocking assets4.

Conclusion

The benchmark reinforces the claims made by some that HTTP2 push will only have marginal effect on web performance5. The results have been consistent with expectations that using push will only optimize the web performance by 1 RTT at maximum, and it would be hard to observe the difference considering the effect of TCP slow start and how many roundtrips are usually required to render a web page.

This means to the users of H2O (with reprioritization turned on by default) that they can expect near-best performance without using push.

On the other hand, we may still need to look at networks having TCP proxies. As discussed in Why TCP optimisation has become more important than content optimization (devcentral.f5.com) some mobile carriers do seem to have such middlebox installed.

Existence of such device is generally a good thing since it not only reduces packet retransmits but also improves TCP bandwidth during the slow-start phase. But the downside is that their existence usually increase application-level RTT, since they expand the amount of data in-flight, which has a negative impact on the responsiveness of HTTP/2. HTTP/2 push will be a good optimization under such network conditions.


Notes:
1. the fingerprint contained in the Cookie header is efficiently compressed by HPACK
2. wpbench was used to collect the numbers; first-paint was calculated as max(head-parsed, css-loaded); in this benchmark, DOMContentLoaded timing was indifferent to first-paint
3. starting from H2O version 1.5, http2-reprioritize-blocking-assets option is turned on by default
4. at 10 RTT it is unlikely that we have hit the maximum network bandwidth, and that means that packets will be received by the browser in batch every RTT
5. there are use cases for HTTP/2 push other than pushing asset files

33 comments:

  1. "That's were CASPER comes in."
    Typo? 'were' should be 'where'?

    ReplyDelete
  2. Nice Post to share. Thanks...

    Fred Lam's ipro

    If you're aiming to find out about internet market
    ing, social networks, and so on, then Fred Lam's T
    he Better Business Mogul Blog is an exceptional lo
    cation to start. You'll learn a lot in an easy, ea
    sy to digest way that is a breath of fresh air in
    the blogging world.

    ipro Reviews

    ReplyDelete
  3. If you're aiming to find out about internet market
    ing, social networks, and so on, then Fred Lam's T
    he Better Business Mogul Blog is an exceptional lo
    cation to start.
    ipro Academy Reviews


    ReplyDelete
  4. Hello ,
    It's really a nice and helpful piece of info. I'm satisfied that you simply shared this helpful information with us. Please keep us informed like this. Thank you for sharing.
    http://listacademyanik.com/dna-wealth-blueprint-3-0-review-bonus

    ReplyDelete
  5. Objek wisata jatim park 1 kota malang batu menjadi tempat belajar yang cocok bagi anak-anak kecil karena menyajikan wisata edukasi untuk perkembangan anak. Wisata jatim park 1 malang ini harga tiketnya juga sangat terjangkau dan bagi anda yang memiliki anak kecil sangat pas untuk berwisata ke jatim park 1 ini. Lokasi jatim park 1 yang luas dapat menjadikan hati gembira dan menyenangkan.
    Berbagai macam tipe mobil yang disediakan oleh penyedia jasa sewa mobil di malang menjadikan kita lebih nyaman mau menggunakan tipe mobil sewa yang, tinggal mencocokkan dengan kebutuhan. Beberapa tipe mobil dalam sewa mobil di malang antara lain mobil avanza, xenia, ertiga, innova, elf short, elf long dan hi ace. Harga sewa dari tiap tipe mobil sewa tersebut berbeda-beda, disesuaikan dengan jenisnya.
    Membahagiakan suami merupakan kewajiban bagi setiap istri, termasuk juga memberikan kepuasan diatas ranjang adalah hal yang harus dipenuhi oleh istri. Agar suami bisa senang maka minum jamu sari rapet asli adalah solusi terbaik yang terbukti ampuh menjadikan suami merasakan kepuasan seksual yang sesungguhnya. Kegunaan jamu sari rapet ini untuk merapatkan organ intim kewanitaan agar bisa menggigit dan mencengkeram saat berhubungan seksual. Hal inilah yang sangat disukai oleh para suami, karena suami aka merasakan kenikmatan seperti pada awal-awal pernikahan. Gairah seks yang semakin memudar akan kembali meningkat dengan minum jamu sari rapet asli madura. Khasiat jamu sari rapet bukan hanya untuk merapatkan vagina tapi juga bagus untuk kesehatan tubuh halaman terkait.

    ReplyDelete
  6. Harga rak sepatu gantung yang dijual secara online yaitu Rp.75.000 per pcs. Namun berbeda dengan produsen RakGantung.com yang menjual produk organizer rak sepatu gantu g dengan harga 65.000 rupiah saja. Lebih murah bukan? Dan jika anda membeli dengan pembelian minimal 3 pcs (reseller) maka akan mendapatkan diskon khusus. Apalagi pembelian rak sepatu gantung dengan jumlah minimal 1 lusin dan minimal 100 pcs. Anda akan mendapatkan super diskon. Sampai saat ini masih dicari reseller, agen dan distributor yang siap bekerja sama memasarkan produk organizer ini. Silahkan anda bandingkan sendiri harga rak sepatu gantung resleting karakter di tempat kami dengan produsen lainnya. Kualitas bahan yang digunakan untuk membuat rak sepatu gantung karakter resleting ini merupakan yang terbaik. Pesan rak sepatu gantung kepada kami sekarang juga.

    ReplyDelete
  7. Harga rak sepatu gantung karakter di tokopedia atau di website lainnya hanya 65.000 rupiah saja. Produk rak sepatu gantung karakter ini merupakan tempat sepatu paling favorit pembeli, terutama rak sepatu gantung karakter hello kitty dan doraemon. Hampir setiap hari selalu ada konsumen yang pesan rak sepatu gantung karakter kartun hello kitty tersebut. Perpaduan warna pink pada rak sepatu gantung hello kitty tersebut memang membikin pembeli tertarik. Rak sepatu gantung karakter hello kitty lihat produk disini.

    ReplyDelete
  8. It’s really a great and helpful piece of information. I’m satisfied that you shared this useful information with us. Please stay us informed like this. Thanks for sharing.Read here

    ReplyDelete
  9. I definitely enjoyed my first read throughout this post. Also check: Apkill

    ReplyDelete
  10. http://www.cot66.com/home.php?mod=space&uid=136515

    ReplyDelete
  11. I wanted to thank you for this websites! Thanks for sharing. Great websites! for More visit:- YoWhatsApp by APKill.

    ReplyDelete
  12. Hey admin it was very nicee to read your article. Do you know even I love to writes article. I am sure everyone of us love to watch movies but most of the site owners these days lock download with surveys. And the worst part of it is that those never completes. If you are facing this problem then you are lucky. I am providing you complete guide on How to Bypass Surveys on my website MiTechCenter. I am sure you will find it very useful.

    ReplyDelete
  13. Download Game Killer for iOS
    to hack Games on iPhones and iPads.
    Download IPTV Apk
    to watch TV on Phone.
    Download Xender for PC
    and use Xender app on your PC

    ReplyDelete
  14. Great and helpful piece of information. Thanks for sharing.Also check Game Killer Apk

    ReplyDelete
  15. downloa dthe latest version of YoWhatsapp Download.

    You will like it.

    ReplyDelete
  16. Actually, numerous substantial organizations have for some time been utilizing the innovation.In online check liquidating, the checks won't actually be gotten the money for and conveyed to you.Check Cashing chicago

    ReplyDelete
  17. GBInstagram is the Android application which will help the users to download Instagram images, videos, and stories in just some clicks without external app

    ReplyDelete
  18. Do you love listening to your favorite songs online? I know you answer is yes. With the help of Pandora Cracked Apk you can enjoy millions of hits songs without the subscription

    ReplyDelete
  19. Hi would you mind letting me understand which web host you're using?
    I've packed your blog in 3 different web browsers and I must say this.
    blog loads a lot quicker then most. Can you recommend a great web hosting provider at.
    a fair price? Congratulations, I value it!
    Quit 9 To 5 Academy Review

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. As the name suggests, Gujarati movies are majorly based out of the Indian state of Gujarat. Though, they are consumed by Gujaratis residing all over India and even in different parents of the world. Due to its limited availability, its fans often look for Gujarati movie download site list. This lets them watch and download their favorite Gujarati movies on their device, no matter where they are. To help you, we have come up with a detailed Gujarati movie download website list right here.

    New Gujarati Movie Download Websites

    Gujarati Movie Download Site List
    Without much ado, let’s get to know about some of the best existing and new Gujarati movie download site options.


    If you are looking for a free Gujarati movie download website, then simply visit Indian Movie Pro. It has collected a wide range of all Indian movies in languages like Hindi, Telugu, Marathi, Tamil, Gujarati, etc. You can simply look for a movie of your choice using its search bar or browse its extensive collection. Without the need of creating your account, you can watch unlimited movies in high-quality. The Gujarati movie download site doesn’t feature unwanted pop-ups and ads as well.
    gujarati movie download website

    2. Eros Now
    Eros Now is a paid service that would require you to create your account and buy a subscription beforehand. Later, you can visit its Gujarati full movie download site or app to watch your favorite flicks. While the service is quite user-friendly, it does come with a price.

    3. SBS Movies
    This is another popular Gujarati movie free download site that you can try. You can visit it on any web browser and device. While the list of movies is not that extensive, you can find all the classics and popular Gujarati movies.

    4. Spuul
    Spuul features a wide range of Tamil, Telugu, Gujarati, Bhojpuri, and other regional language movies. You can go to this Gujarati movie download free website to watch as many movies as you want. After completing its free trial, you would have to get a paid subscription.

    5. Hotstar
    Owned by Star Media, Hotstar is one of the most popular streaming services in India. It has got free as well as premium plans. You can go to its website or use its app to watch Gujarati movies. Though, there is no option to download them on your device.

    New Gujarati Movie Download

    ReplyDelete
  22. Your Website is amazing keep writting recently we have shared fmwhatsapp apk download link on our website if you are looking for it then must download the ANTIBAN version from our site only.

    ReplyDelete

Note: Only a member of this blog may post a comment.