Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

H2O - making the Web faster

21,531 views

Published on

Introduction to the H2O HTTP/2 server, and discusses the improvements in first-paint time from previous generation protocols

Published in: Technology
  • Be the first to comment

H2O - making the Web faster

  1. 1. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O making  the  Web  faster DeNA  Co.,  Ltd. Kazuho  Oku 1  
  2. 2. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Agenda n  How  H2O  started n  The  Goal  and  Key  Features n  Improving  User  Experience  with  HTTP/2 2  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  3. 3. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   How  H2O  Started 3  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  4. 4. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   About  H2O n  H2O  is  a  HTTP  server ⁃  debut  in  late  2014 ⁃  supports  HTTP/1  and  HTTP/2 ⁃  known  for  its  performance ⁃  developed  by  DeNA  Co.,  Ltd.  and  contributors "H2O  is  a  new  blazingly  fast  HTTP  server  with  http2   support  that  shows  potential" –  http2  explained  by  Daniel  Stenberg 4  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  5. 5. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Benchmark 5  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  6. 6. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   PicoHTTPParser n  originally  written  for  HTTP::Parser::XS ⁃  the  de-‐‑‒facto  HTTP  parser  of  Plack  servers n  the  core  of  H2O 6  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  7. 7. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Design  philosophy  of  H2O n  Do  it  right,  from  the  ground  up n  design  wins  lead  to  higher  performance  with  less   code 7  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) $ wc picohttpparser.[hc] 596 2077 22192 picohttpparser.c 86 495 3363 picohttpparser.h 682 2572 25555 total $ wc http_parser.[hc] 2434 7281 70424 http_parser.c 342 1567 12991 http_parser.h 2776 8848 83415 total
  8. 8. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   High-‐‑‒level  architecture  of  H2O n  event-‐‑‒driven ⁃  can  handle  many  connections  concurrently n  multi-‐‑‒thread ⁃  states  and  upstream  (reverse-‐‑‒proxy)  connections   are  reused •  impossible  under  a  multi-‐‑‒process  design n  multi-‐‑‒protocol ⁃  designed  for  HTTP/2  and  TLS 8  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  9. 9. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   The  Goal  and  Key  Features 9  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  10. 10. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   The  goal  of  H2O  is  to  provide... n  better  performance ⁃  demand  for  handling  more  requests:   •  IoT,  micro-‐‑‒services,  etc. n  better  user  experience ⁃  faster  content  delivery  using  HTTP/2 n  ease  to  use  and  configure ⁃  TLS  (OCSP  stapling,  record  size  tuning,   chacha20/poly1305,  ...) ⁃  dynamic  reconfiguration 10  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  11. 11. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Key  features  of  H2O n  excellent  protocol  implementation ⁃  very  fast  HTTP/1 ⁃  one  of  the  leading  implementations  of  HTTP/2 n  optimally  configured  for  HTTPS ⁃  enabled  by  default:  OCSP  stapling,  record  size   tuning,  chacha20/poly1305,  ... ⁃  bundles  libressl  (hopefully  lesser  security  issues) n  graceful  restart  and  self  upgrade  via  Server::Starter 11  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  12. 12. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Key  features  of  H2O  (cont'd) n  state-‐‑‒of-‐‑‒art  reverse  proxy ⁃  use  of  PicoHTTPParser  leads  to  performance ⁃  reuses  connections  with  a  server-‐‑‒wide   connection  pool ⁃  X-‐‑‒Reproxy-‐‑‒URL  support •  can  do  both:  backend-‐‑‒to-‐‑‒backend  and  backend-‐‑‒to-‐‑‒ local ⁃  DNS  lookup •  backend  servers  can  be  added  /  removed  by   updating  DNS  or  /etc/hosts 12  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  13. 13. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Improving  User  Experience  with  H2O  &  HTTP/2 13  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  14. 14. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Issues  of  HTTP/1  fixed  by  HTTP/2 n  head-‐‑‒of-‐‑‒line  blocking ⁃  using  multiple  TCP  connections  had  performance   issues  due  to  slow-‐‑‒start  /  too  little  concurrency n  prioritized  resource  loading ⁃  load  assets  that  block  rendering  (e.g.  CSS,  JS)   before  images 14  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  15. 15. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Prioritization  in  HTTP/2 n  weight-‐‑‒based  and  dependency-‐‑‒based ⁃  weight-‐‑‒based:  75%  of  bandwidth  to  A,  25%  to  B ⁃  dependency-‐‑‒based:  send  HTML  after  JavaScript n  Firefox  is  known  for  its  state-‐‑‒of-‐‑‒art  protocol  impl. ⁃  send  CSS  and  JavaScript  files  in  <HEAD>  before   HTML  and/or  image  files ⁃  HTML  is  given  2.5x  bandwidth  above  images n  Chrome  uses  weight-‐‑‒based  only ⁃  adapted  from  its  SPDY  implementation 15  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  16. 16. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   The  benchmark n  test  data:  http2rulez.com ⁃  loads  5  CSS  and  8  JavaScript  files  in  <HEAD> •  including  minified  jquery.js ⁃  loads  18  non-‐‑‒blocking  asset  files  (e.g.  images),   both  small  and  large n  network  is  given  100ms  latency ⁃  uses  a  virtual  network  to  avoid  noise n  web  browsers:  Chrome  43  /  Firefox  38 n  servers:  H2O  1.3.0-‐‑‒alpha1  /  Nginx  1.9.1 ⁃  on  Ubuntu  14.04  (on  VMware  fusion) 16  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  17. 17. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Nginx  (HTTP/1.1)  +  Chrome 17  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.83  seconds
  18. 18. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Nginx  (SPDY/3.1)  +  Chrome 18  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.89  seconds
  19. 19. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  (HTTP/2)  +  Chrome 19  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.87  seconds
  20. 20. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Why  not  faster  with  HTTP/2? n  Because  Chrome  (does  not)  prioritize  CSS  /  script   files  above  images n  upcoming  version  of  H2O  provides  a  configuration   directive  http2-‐‑‒reprioritize-‐‑‒blocking-‐‑‒assets  to  tackle   the  issue ⁃  when  set  to  ON,  the  server  sends  CSS  /  scripts   before  anything  else 20  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  21. 21. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  (HTTP/2+reprioritize:ON)  +  Chrome 21  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.32  seconds
  22. 22. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Nginx  (HTTP/1.1)  +  Firefox 22  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.32  seconds
  23. 23. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Nginx  (SPDY/3.1)  +  Firefox 23  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.87  seconds
  24. 24. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  (HTTP/2)  +  Firefox 24  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015) first-‐‑‒paint  time:  1.03  seconds
  25. 25. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   The  benchmark  scores 25  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  26. 26. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Analysis n  H2O  (HTTP/2)  is  50%  faster  in  first-‐‑‒paint  time   than  Nginx  (HTTP/1.1)  on  both  browsers ⁃  Chrome  needs  the  reprioritize  directive  set  to  ON n  Nginx  (SPDY/3.1)  is  not  faster  than  HTTP/1.1,  likely   because  it  does  not  prioritize  the  streams ⁃  on  Firefox,  HTTP/1.1  is  faster  than  SPDY/3.1   since  the  browser  delays  sending  requests  for   images  until  receiving  all  the  blocking  assets 26  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  27. 27. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Conclusion n  H2O  (and  HTTP/2)  provides  better  user  experience ⁃  esp.  under  high-‐‑‒latency  network  (e.g.  mobile) n  prioritization  is  very  important  in  SPDY  &  HTTP/2 ⁃  benchmark  your  HTTP/2  server! ⁃  on  the  client-‐‑‒side,  Firefox  is  doing  very  well •  Chrome  needs  improvement,  H2O  provides  a  fix 27  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  28. 28. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   What's  coming  to  H2O n  Version  1.3 ⁃  expected  this  week? ⁃  http2-‐‑‒reprioritize-‐‑‒blocking-‐‑‒assets  for  better  user   experience  on  Chrome ⁃  preliminary  support  for  FastCGI n  Version  1.4  and  beyond ⁃  ease-‐‑‒of-‐‑‒use  features 28  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)
  29. 29. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Stay  Tuned! 29  H2O  -‐‑‒  making  the  Web  faster  (Jun  2  2015)

×