Thursday, December 3, 2015

Optimizing performance of multi-tier web applications using HTTP/2 push

Push is a feature of HTTP/2, that allows a server to speculatively send response to a client, anticipating that the client will use the response.

In my earlier blogpost, I wrote that HTTP/2 push does not have significant effect on web performance when serving static files from a single HTTP/2 server. While that is true, push does improve performance by noticeable margin in other scenarios. Let's look into one common case.

The Theory

Many if not most of today's web applications are multi-tiered. Typically, an HTTP request from a client is first accepted by an httpd (either operated by the provider of the web service or by a CDN operator). The httpd serves asset files by itself, while routing requests for HTML documents to application server through fastcgi or HTTP/1.

It is when the response from the application server takes time that HTTP/2 push gives us a big performance boost.

The chart below should be a clear explanation why. With HTTP/2 push, it has become possible for a server to start sending assets that are going to be referred from HTML, before the generated HTML is returned from the application running behind.

Figure 1. Timing sequence of a multi-tiered webapp
(RTT: 50ms, processing-time: 200ms)


It is not uncommon for an web application to spend hundreds of milliseconds processing an HTTP request, querying and updating the database. It is also common for a CDN edge server to wait for hundreds of milliseconds fetching a HTTP response from an web application server through an inter-continental connection.

In case of the chart, RTT between httpd and client is 50ms and the processing time is 200ms. Therefore, the server is capable of spending 4 round-trips (or typically slightly above 200KB of bandwidth1) for pushing asset files before HTML becomes ready to be served.

And thanks to push transactions, the connection will be warm enough by the time when HTML becomes available to the web server, so that the chance of the server being able to send whole document at once becomes bigger.

Theoretically, the upper bound of time reducible by the proposed approach (i.e. push assets until the main document becomes ready) is:
time_reducedmax = processing_time + 1 RTT
The additional 1 RTT appears if HTML being delivered is small that it is incapable of growing the send window in the pull case. time_reducedmin is obviously zero, when no resource that can be pushed exists.

Cache-aware Server Push

Even in case you have a time window that can be used to push few hundred kilobytes of data, you would definitely not want to waste the bandwidth by pushing responses already cached by the client.

That is why cache-aware server-pusher (CASPER) becomes important.

Initially implemented as an experimental feature in H2O HTTP2 server version 1.5, CASPER tracks the cache state of the web browser using a single Cookie2. The cookie contains a fingerprint of all the high-priority asset files being cached by the browser compressed using Golomb-compressed sets. H2O updates the fingerprint every time it serves a high-priority asset file, as well as for determining whether certain asset files should be pushed or not.

It should be noted that the current fingerprint maintained by the cookie is at best a poor estimate of what is being cached by the client. Without a way to peek into the web browser cache, we cannot update the fingerprint stored in the cookie to reflect evictions from the cache2. Ideally, web browsers should calculate the fingerprint by itself and send the value to the server. But until then, we have to live with using cookies (or a ServiceWorker-based implementation that would give us freedom in implementing our own cache3) as a hacky workaround.

Benchmark

Let's move on to an experiment to verify if the theory can be applied in practice.

For the purpose, I am using the top page of h2o.examp1e.net. The server (H2O version 1.6.0-beta2 with CASPER enabled; see configuration) is given 50ms simulated latency using tc qdisc, and a web application that returns index.html with 200ms latency is placed behind the server. Google Chrome 46 is used as the test client.

FWIW, the size of the responses being served are as follows:

Figure 2. Size of the Files by Type
File typeSize
index.html3,619 bytes
blocking assets319,700 bytes (5 files)
non-blocking assets415,935 bytes (2 files)
Blocking assets are CSS and JavaScript files that block the critical rendering path (i.e. the files that need to be obtained by the browser before rendering the webpage). Non-blocking assets are asset files that do not block the critical path (e.g. images).

Next two figures are the charts shown by the Chrome's Developer Tools. In the former, none of the responses were pushed. In the latter, blocking assets were pushed using CASPER.

Figure 3. Chrome Timing Chart without Push

Figure 4. Chrome Timing Chart with Push4

As can be seen, both DOMContentLoaded and load events are observed around 230 msec earlier when push is being used; which matches the expectation that we would see an improvement of 200 msec to 250 msec.

Figure 5. Timing Improvements with Push
EventWithout Push (msec)With Push (msec)Delta (msec)Gain
DOMContentLoaded82359522838%
load1,01077523530%

Conclusion

As shown in this blogpost, cache-aware server push can be used by a reverse proxy to push assets while waiting for the backend application server to provide dynamically generated content, effectively hiding the processing time of the application server. Or in case of CDN, it can be used to hide the latency between the edge server and the application server.

Considering how common it is the case that the processing time of an web application (or the RTT between an edge server and an application server) is greater than the RTT between the client and the reverse proxy (or the edge server in case of CDN), we can expect cache-aware server push to provide noticeable improvement to web performance in many deployments.


1: in common case where INITCWND is 10 and MSS is around 1,400 bytes, it is possible to send 150 packets in 4 RTT, reaching 210KB in total
2: fortunately, existence of false-positives in the fingerprint is not a big issue, since the client can simply revert to using ordinary GET request in case push is not used
3: ongoing work is explained in HTTP/2 Push を Service Worker + Cache Aware Server Push で効率化したい話 - Block Rockin' Codes
4: Chromes' timing chart shows pushed streams as being fetched when they are actually being adopted after received

EDIT: This blogpost is written as part of the http2 Advent Calendar 2015 (mostly in Japanese).

79 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. we are offering website service & Designs in affordable price for your website......
    telephony applications

    ReplyDelete

  3. ipl 2016 points table
    live predictions

    tips for betting
    betting on payers

    some team players are changing in this matches
    teams are going to change

    ReplyDelete
  4. It is customary in business endeavors that have beginning late entered the information trades industry to suggest a computerized master as an IVR.

    Interactive Voice Response System

    ReplyDelete
  5. Even marketing has been revamped for business promotion, now-a-days there is no longer the yellow pages or word of mouth referral that is being practiced, rather, SEO has emerged as game changer for many business houses.
    web design lessons

    ReplyDelete
  6. If your website looks cheap and is difficult to use, consumers will assume that your products or services share these characteristics. A high quality, clean website is vital if you want customers to have a positive perception of your business. well designed websites

    ReplyDelete
  7. Mother’s Day is celebrated for our family most special person our mother. Mother is a god gift for all people in the world. Every son/daughter is celebrated Mother’s Day for their mother; they express their feelings, love, and joy with their mom. Mother’s Day is celebrated in all over the world on different days; Fathers Day Quotes from Wife it means Mothers Day Date is not same in all over the world. In most countries, Mother’s Day is celebrated second Sunday of month May. Mother’s Day was first celebrated in 1908 when Anna Jarvis held a memorial for her mother at St Andrew’s Methodist Church in Grafton, West Virginia. mothers day wishes St Andrew’s Methodist Church now holds the International Mother’s Day Shrine.

    ReplyDelete
  8. Glad to chat your blog, I seem to be forward to more reliable articles and I think we all wish to thank so many good articles, blog to share with us.
    web agency Italy

    ReplyDelete
  9. Optimizing performance of multi-tier web applications using HTTP/2 push

    ReplyDelete
  10. I've been surfing online over three hours today, yet I never discovered any intriguing article like yours. It's really sufficiently worth for me. As I would like to think, if all website admins and bloggers made great substance as you did, the web will be significantly more helpful than any time in recent memory. web design 

    ReplyDelete
  11. Thank for information this free articles post we provides compare and save money to select the top 3 website visit now # Cheapestpackers.co.in

    movers and packers noida # movers and packers delhi # movers and packers guwahati # movers and packers faridabad # movers and packers ghaziabad # hello

    ReplyDelete
  12. I really thank you for the valuable info on this great subject and look forward to more great posts. Thanks a lot for enjoying this beauty article with me. I am appreciating it very much! Looking forward to another great article. Good luck to the author! All the best! Website Designer in Lucknow

    ReplyDelete
  13. We are Mona Media, professional website development agency in Vietnam with have more than 8+ year experience. We mostly design and develop PHP and .NET website
    wordpress theme

    ReplyDelete
  14. it supports your web based business figures and makes going to your website a pleasant affair. spalding web design

    ReplyDelete
  15. Additionally while choosing the subject to be actualized through web planning, the shading blend ought to be considered as extremely vital.front end frameworks

    ReplyDelete
  16. Wow that's a wonderfull blog having all details & helpful.I am impressed! If you are interested, here is some for your information too open it Andaman tourism Andaman Tour Packages

    ReplyDelete
  17. Correspondence with a potential web designer is likewise basic in the improvement of your web website. bahrain web development

    ReplyDelete

  18. Thanks for the valuable information and insights you have so provided here...
    Speciaali

    ReplyDelete
  19. Regardless as to which program you choose to use for your graphics, you could use your own photographs and just use the graphics programs to re-size them or manipulate them in some way. LDA

    ReplyDelete
  20. This will help you get an improved feel for the style of sites any particular web designer is capable of doing. Local SEO

    ReplyDelete
  21. Hello just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Safari. I’m not sure if this is a formatting issue or something to do with internet browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the problem resolved soon. Cheers. Cineresie Info

    ReplyDelete
  22. This is genuinely an awesome read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!
    Web Development

    ReplyDelete
  23. Wow, cool post. I'd like to write like this too - taking time and real hard work to make a great article... but I put things off too much and never seem to get started. Thanks though. Local SEO

    ReplyDelete
  24. Google bases their rankings on how useful a page is for the query a user has entered, plus the utility of the site - for example, can a user complete the action they would like to?

    ReplyDelete
  25. In any case, by picking in you'll soon observe an arrival on venture that will make it advantageous. https://edkentmedia.com/toronto-website-design-development/

    ReplyDelete
  26. I want recommend you take a look at this research of 2 top JavaScript frameworks - React vs Vue.js

    ReplyDelete
  27. If your company's website is not indexed by search engines, there will be no chance at all for your site to get high visibility rankings on search engines. Therefore, it is extremely important for businesses to take note of SEO and make sure that their websites are properly indexed by search engines.Blog Comment

    ReplyDelete
  28. I want to share you useful article about cost to develop a mobile app , hope you can find very informative facts.

    ReplyDelete
  29. I love to read blog on different topics but at the same time love to play games online
    ||Play happy wheels Are you ready||Now Free Happywheels happywheels.in
    ||Fireboy and watergirl game 4 online at fireboywatergirl.co||
    ||total Jerkface happy wheels game||

    ReplyDelete
  30. In this playbook we plot how universities can use their current assets to manufacture a successful online networking advertising methodology.https://edkentmedia.com/ppc-management-toronto/

    ReplyDelete
  31. What is the procedure of booking an order for web development services? Plz explain soon. web development services

    ReplyDelete
  32. It's a great pleasure indeed to get connected to a well-known SEO company Edkent Media. Hope to get assistance from you soon. Edknt Media

    ReplyDelete
  33. It’s difficult to find knowledgeable people on this topic, nevertheless, you sound like you know what you’re preaching about! Thanks web hosting review

    ReplyDelete
  34. The Outsourcing Programming services have well established infrastructure, and state of the art quality management system & ultimate info security that allows us avoid misunderstanding in the cooperation with clients & achieve highest level of the customer satisfaction. http://hmmedia.uk/Blog/why-graphic-design-is-important-to-you/

    ReplyDelete
  35. In the event that you need to be procured by a web design firm, notwithstanding learning abilities and conceivably acquiring accreditations, you've likewise got the chance to be prepared to pound the asphalt with your resume and portfolio.SEO GOOGLE

    ReplyDelete
  36. This is additionally a decent post which I truly appreciated perusing. It is few out of every odd day that I have the likelihood to see something like this..
    internet marketing service

    ReplyDelete
  37. Exactly when numerous had just been persuaded that these machines were the best innovations in the field of check getting the money for, the possibility of online check changing was presented.usapaydayloanstore.com/chicago

    ReplyDelete
  38. The most essential employments of administration charges to the ticket business are taking care of the expense of getting the tickets from the holding representative. news about the ticketindustry

    ReplyDelete
  39. نكاتي در مورد چسب وكيوم يا چسب ممبران
    چسب وكيوم به اسم چسب های ممبران نیز شناخته می شوندو يا چسب وكيوم پي وي سي و در خريد چسب وكيم پي وي سي ويا همان چسب ممبران بايد نكات زير را مد نظر داشت:

    در خريد چسب وكيوم باید دقت کنید كه چسب وكيوم با روکش شما از لحاظ رنگ همخوانی داشته باشد. مطمئناً رنگ های طبیعی تر می تواند بهتر باشد
    چسب ممبران

    ReplyDelete
  40. This is extremely great information for these blog!! And Very good work. It is very interesting to learn from to easy understood. Thank you for giving information. Please let us know and more information get post to link.
    datapower tutorial

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

    ReplyDelete
  42. When this is done, your fresh out of the plastic new inventive web design is all prepared for the World Wide Web. ny web design company

    ReplyDelete
  43. Thanks for sharing this valuable information to our vision.
    You have posted a trust worthy blog keep sharing.
    hardware and networking course in hyderabad

    ReplyDelete
  44. It’s great to come across a blog every once in a while, that isn’t the same out of date rehashed material. Fantastic read.
    industrial safety course in chennai

    ReplyDelete
  45. Very informative post! Keep sharing more such posts. I'm glad that I came across your article. Looking forward for more from you.

    VMware Training in Chennai
    VMware Training in Velachery
    Oracle Training in chennai
    C C++ Training in Chennai

    ReplyDelete
  46. او الطائرة فنحن نقوم بالتخلص من الحشرات و القوارض نهائيا و بلا رجوع فعلى طريق المثال يبقى الفئران و الصراصير و البرص و الذباب و النمل و البق و غيرهما
    شركة مكافحة النمل الابيض بالقصيم
    شركة مكافحة حشرات بالقصيم
    شركة رش مبيدات بالقصيم
    شركة الانوار لمكافحة الحشرات

    ReplyDelete
  47. We are Gootech, design website on Wordpress CMS in Vietnam. View more: https://gootech.org

    ReplyDelete
  48. For instance, the site of an organization making and offering extravagance products needs to appear to be lavish too. Webdesign

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

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

    ReplyDelete
  51. This blog very nice and informative. Thanks for sharing this blog.I am waiting for your next articles.Keep it up quickly…


    Web Designing Services

    ReplyDelete
  52. Webdesigner waar u een professionele en betaalbare website kan laten maken? De nr. 1 webdesigner in Limburg, Antwerpen en Vlaams-Brabant voor SEO websites. Webdesigner

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

    ReplyDelete
  54. thanks for sharing amazing really appreciated its awesome one
    contacts

    ReplyDelete

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