Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Know thy buzzwords: HTTP/2

Surma
July 13, 2017
Technology
1
490

Know thy buzzwords: HTTP/2

Fullstack Conf 2017

Surma

July 13, 2017
Tweet

More Decks by Surma

See All by Surma
Houdini Breakout Session
surma
4
520
Houdini – Demystifying CSS
surma
3
270
Progressive Web Apps – Mobile has natively come to the Web
surma
5
260
The Glorious Era of HTTP/2
surma
1
68
Instant Loading
surma
4
1k
HTTP/2 101
surma
5
440
What if there isn’t?
surma
0
57
What if there isn’t?
surma
2
140
The Web is a Contender
surma
0
89

Other Decks in Technology

See All in Technology
DevOpsDays Taipei 2022 Opening
cheng_wei_chen
2
860
React NativeからNativeアプリへ ~スタートアップ企業における 「機能開発と保守性担保」の両立への挑戦~
bitkey
PRO
0
110
動画だけじゃない！iOS 15のピクチャ・イン・ピクチャを使って好きなUIを表示させよう！
tsuzuki817
2
230
Lobeによるガンプラの識別
miyakemito
0
470
OSSのアプリケーションを開発「し続ける」ための哲学 / Philosophy to continue developing OSS application
1024jp
5
260
220914_ガンダム初学者が色々考えてみた_株式会社コミュカル Mitz
comucal
PRO
0
330
マネジメント3.0モデル入門（90分版）
takufujii
1
300
サポートiOSバージョンを定期的にあげる仕組みづくり / iOSDC Japan 2022
fromatom
1
550
iOSDC2022 - SwiftUI in UIKit で開発する世界
hcrane
4
1.2k
Oracle Cloud Infrastructure：2022年9月度サービス・アップデート
oracle4engineer
PRO
0
160
PHPバージョンアップのための依存ライブラリとの付き合い方 / phpcon2022
blue_goheimochi
1
480
OCI技術資料 : ロード・バランサー 概要 / Load Balancer 100
ocise
3
7.8k

Featured

See All Featured
A Modern Web Designer's Workflow
chriscoyier
690
180k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
BBQ
matthewcrist
74
8k
Making Projects Easy
brettharned
100
4.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
970
Fantastic passwords and where to find them - at NoRuKo
philnash
29
1.7k
Become a Pro
speakerdeck
PRO
3
2.3k
For a Future-Friendly Web
brad_frost
166
7.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M
Fireside Chat
paigeccino
14
1.5k
The Invisible Customer
myddelton
111
11k
Raft: Consensus for Rubyists
vanstee
127
5.5k

Transcript

  1. @DasSurma Developer Advocate ✨HTTP/2✨ OMG so good

  2. TL;DR: SWITCH!

  3. HTTP/1.1 – Upgrade – HTTP/2.0 ✨HTTP/2✨

  4. caniuse.com

  5. None

  6. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997

    2012 2015

  7. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997

    2012 2015 bit.ly/surma-http2 Talk from CDS 2015

  8. Head-of-Line Blocking aka one-resource-at-a-time syndrome

  9. HTTP/1

  10. HTTP/1

  11. HTTP/1 200KB 4s

  12. ✨HTTP/2✨ Single TCP connection

  13. http2.golang.org/gophertiles

  14. h1 h2

  15. Concatenation Inlining Bundling Spriting ? More later

  16. Encryption

  17. None
  18. None

  19. ✨HTTP/2✨ TLS encrypted ? ?

  20. ✨HTTP/2✨ $0

  21. certbot.eff.org

  22. CDNs say bit.ly/surma-http2-performance-increase HTTP/2 is 20% faster (on avg)

  23. h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms

    6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com 26%

  24. HTTP/2 bit.ly/chromeblog-http2

  25. But how? Setup? Testing? bit.ly/surma-http2-setup

  26. What about local development?

  27. None
  28. None

  29. What did I not talk about yet?

  30. HPACK

  31. HTTP/2 Push

  32. RTT > Bandwidth

  33. index.html styles.css webfont.css webfont.woff <link> @import @font-face 14K 1.4K 800B

    12K Back-of-napkin math: Total data: 28.4K Data transfer time: 37ms # of RTTs: 4 Total time: 437ms
  34. None

  35. bit.ly/jake-push

  36. bit.ly/jake-push TL;DR: – Massive inconsistencies between browsers – Not pushing

    things that are already in the cache is a hard problem – Don’t even think about pushing anything but GET

  37. bit.ly/jake-push Alternatives – Inlining for first-paint-critical resources – <link rel=“preload”>

    for interactive-critical resources

  38. Onemore thing about bundling bit.ly/sergio-bundling

  39. TL;DR: SWITCH!

  40. @DasSurma Developer Advocate ✨HTTP/2✨ OMG so good