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

Hamburg Webperf meetup

Hamburg Webperf meetup

extended h2 in the real world talk

97e38d2c6636968957c178ae61d86184?s=128

Michael Gooding

July 19, 2016
Tweet

Transcript

  1. ©2016 AKAMAI | FASTER FORWARDTM H2 in the real world

    Michael Gooding @Michael_G_81
  2. ©2016 AKAMAI | FASTER FORWARDTM 18 Feb 2015

  3. ©2016 AKAMAI | FASTER FORWARDTM Conflict in Ukraine continued Picture:

    AFP/Getty Images
  4. ©2016 AKAMAI | FASTER FORWARDTM Heavy snow in Istanbul causes

    airport closure Picture: AFP/Getty Images
  5. ©2016 AKAMAI | FASTER FORWARDTM Relatives of missing flight MH370

    passengers protest in Malaysia Picture: AFP/Getty Images
  6. ©2016 AKAMAI | FASTER FORWARDTM People in Finland celebrated Chinese

    New Year Picture: EPA
  7. ©2016 AKAMAI | FASTER FORWARDTM In Russia a Car falls

    into a sink hole! Picture: Europics
  8. ©2016 AKAMAI | FASTER FORWARDTM

  9. ©2016 AKAMAI | FASTER FORWARDTM

  10. ©2016 AKAMAI | FASTER FORWARDTM Michael Gooding: Performance Specialist 1.

    H2 adoption 2. H2 recap 3. H2 Performance i. Measurement ii. Rendering iii. Small files iv. Sprites 4. Summary & Questions
  11. ©2016 AKAMAI | FASTER FORWARDTM 1. Adoption

  12. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adoption Source: http://isthewebhttp2yet.com/measurements/adoption.html
  13. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adoption – Single h2 objects
  14. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adoption – h2 error pages shouldn’t count! http https
  15. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adoption – File pages
  16. 300+ customers using H2 1100+ domains

  17. ©2016 AKAMAI | FASTER FORWARDTM 2. Recap

  18. ©2016 AKAMAI | FASTER FORWARDTM h2 Recap 1. Multiplexing 2.

    Header compression 3. Server push
  19. ©2016 AKAMAI | FASTER FORWARDTM HTTP/1.1 1. Single request/response pattern

    2. Introduced head of line blocking H/2 uses binary framing 1. Allows streaming of content 2. Interleaving of streams 3. Prioritisation of streams Multiplexing
  20. ©2016 AKAMAI | FASTER FORWARDTM HTTP/1.1 1. Headers sent in

    plain text 2. 80-90% repetition 3. Long cookies added to weight H/2 uses HPACK 1. Client/Server Index table used 2. Compression applied Header Compression
  21. ©2016 AKAMAI | FASTER FORWARDTM HTTP/1.1 1. Servers waits for

    requests 2. 1:1 relationship 3. Browser discovery delay 4. In-lining provided cache issues H/2 can push resources 1. 1:many relationship 2. Separate resource = new stream 3. Can be cached & re-used 4. Can be declined Server Push
  22. ©2016 AKAMAI | FASTER FORWARDTM TCP maybe the next bottleneck

    1. Optimised for many small connections 2. Packet loss has a bigger impact on one connection H/2 can free up resources 1. 1 connection per client 2. The server has less to manage Other Considerations
  23. ©2016 AKAMAI | FASTER FORWARDTM 3. Performance

  24. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering

    iii. Small files iv. Sprites
  25. ©2016 AKAMAI | FASTER FORWARDTM Akamai RUM 1. Billions beacons

    collected per day 2. Some sites see good improvements 3. Some sites don’t! 4. 3rd Party content waters down benefit 5. Network conditions vary results 6. Browsers behave differently
  26. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H1 v H2 Demo
  27. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How to test h2 v h1 --disable-http2
  28. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How to test h2 v h1 firefoxPref network.https.spdy.enabled false firefoxPref network.https.spdy.enabled.https2 false navigate https://www.website.com
  29. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How to test h2 v h1
  30. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How do I know it’s h2? h1 h2
  31. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How do I know it’s h2? h1 h2
  32. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. How do I know it’s h2? h1 h2
  33. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H2 – Chrome Net Internals chrome://net-internals/#http2
  34. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering

    iii. Small files iv. Sprites
  35. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering h1 h2 h1 h2 4 sec
  36. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering h1 h2 h1 h2 4 sec
  37. ©2016 AKAMAI | FASTER FORWARDTM What’s the problem? Rendering with

    different prioritisation
  38. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering: Sharding h1 h2 1 Domain All on same connection 2nd connection opened /js /css www.website.com /js /css www.website.com dns connection ssl ttfb d/load
  39. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering: Sharding cdn.website.com/js cdn.website.com/css www.website.com cdn.website.com/js cdn.website.com/css www.website.com h1 h2 2 Domains h2 1 Certificate 2 Certificates cdn.website.com/js cdn.website.com/css www.website.com dns connection ssl ttfb d/load
  40. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance - Rendering: Sharding js.website.com/js css.website.com/css www.website.com js.website.com/js css.website.com/css www.website.com h1 h2 3 Domains h2 1 Certificate 3 Certificates js.website.com/js css.website.com/css www.website.com dns connection ssl ttfb d/load
  41. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Sharding example h2 after h2 before Simple improvement by not making connection
  42. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Sharding example h2 after h2 before
  43. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Progressive jpegs h2 normal jpeg progressive Normal jpegs just 60% loaded
  44. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Progressive jpeg example h2 after h2 before
  45. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: DIY prioritisation <script> var img = document.createElement("img"); img.src = "tshirt2.jpg"; document.getElementById("imgholder").appendChild(img); </script> Different order, but ultimately same outcome
  46. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: DIY prioritisation <img onload="addImages();" src="tshirt12_thumb.jpg"> <script> function addImages() {; var img = document.createElement("img"); img.src = "tshirt2.jpg"; document.getElementById("imgholder").appendChild(img); } </script> Different order and loaded with dependency
  47. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: INITCWND 10 32 10 64
  48. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example Large image fills bandwidth
  49. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example prog jpg h2 before js priority
  50. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example 2 sec 1 sec ??? prog jpg
  51. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Server Push Update
  52. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example 2 sec 1 sec h2 push prog jpg
  53. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering example Server Push h2 push prog jpg
  54. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Rendering: Server push bad example h2 push h2 before
  55. ©2016 AKAMAI | FASTER FORWARDTM Rendering Summary 1. Keep critical

    content on same domain 2. If you need to shard to balance h1 use the same cert 3. Progressive jpgs can help rendering 4. Use JavaScript if you need to delay resources 5. Don’t worry too much about congestion windows 6. Use server push where you can
  56. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering

    iii. Small files iv. Sprites
  57. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS Test Page: 1000 x coloured <div> tags with 1000 CSS rules /* 1 CSS rule for each <div>*/ #div1 { width:20px; height:20px; background-color:#000000; float:left; margin:1px; } … /* HTML */ <div id=“div1"></div> … <div id=“div1000"></div> For example 1 file with 1000 rules OR 500 files with 2 rules in each
  58. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS Visual experience of test H2 is faster to download, rendering is not progressive - (10 file example) h1 h2
  59. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS CSS bytes downloaded 0 250 500 0 6 12 18 0 250 500 750 1000 H2 is smaller because of header compression File size grows because of less compression (gzip) and more headers * # of files file size (kB) visual complete (s) h1 h2
  60. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS 0 250 500 0 6 12 18 0 250 500 750 1000 h1 h2 # of files file size (kB) visual complete (s) Chrome performance comparison H2 is slower when you exceed 20 files!
  61. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: CSS Firefox performance comparison 0 250 500 0 6 12 18 0 250 500 750 1000 # of files file size (kB) visual complete (s) h1 h2 H2 is faster, especially as you increase the number of files Smaller number of files is faster to load
  62. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 0 0.4 0.8 1.2 1 2 3 4 5 6 7 8 9 10 Chrome h2 Chrome h1 Performance – Small files: CSS Zoomed to 7.5 files # of files visual complete (s)
  63. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 0 0.4 0.8 1.2 1 2 3 4 5 6 7 8 9 10 Chrome h2 Chrome h1 FF h2 FF h1 Performance – Small files: CSS Zoomed to 7.5 files # of files visual complete (s)
  64. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files example Network not much different h2 after h2 before
  65. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files example h2 after h2 before Result in browser is big
  66. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Test Page: 1000 x restyled <div> tags with 1000 JS updates /* Example JS code for each block */ document.getElementById('div1').style.backgroundColor = 'red'; /* HTML */ <div id=“div1"></div> For example 1 file with 1000 updates OR 500 files with 2 updates in each
  67. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Visual experience of test With h1 rendering is more progress but overall it’s slower - (20 file example) h1 h2
  68. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS JS bytes downloaded 0 150 300 450 0 6 12 18 0 250 500 750 1000 file size (kb) visual complete (s) # of files h1 h2 H2 has smaller files because of header compression File size grows because of less compression (gzip) and more headers *
  69. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Chrome performance comparison 0 150 300 450 0 6 12 18 0 250 500 750 1000 file size (kb) visual complete (s) # of files h1 h2 Chrome a mixed bag as before
  70. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Firefox performance comparison 0 150 300 450 0 6 12 18 0 250 500 750 1000 file size (kb) visual complete (s) # of files h1 h2 H2 is only slightly faster even as you increase the number of files Smaller number of files is faster to load
  71. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Zoomed to 22 files 0 1 2 1 6 11 16 21 visual complete (s) # of files Chrome h2 Chrome h1
  72. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Zoomed to 22 files 0 1 2 1 6 11 16 21 visual complete (s) # of files Chrome h2 Chrome h1 FF h2 FF h1
  73. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Visual experience of loading the page 0 3 6 9 0 250 500 750 1000 render start (s) # of files h1 h2 Rendering range in h1 is large
  74. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS Visual experience of loading the page 0 3 6 9 0 250 500 750 1000 render start (s) # of files h1 h2 Rendering range in h1 is large
  75. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS example Network results pretty similar h2 after h2 before
  76. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Small files: JS example Faster rendering in browser h2 after h2 before
  77. ©2016 AKAMAI | FASTER FORWARDTM Small files Summary 1. Keep

    combining files, same as h1 2. 2 or 3 is ok, based on frequency of change
  78. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering

    iii. Small files iv. Sprites
  79. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Test Page: 1MB of images split into different sizes /* HTML for 1000 files*/ <img onload="imgMark();" src="1kb_Image?1000"> /* HTML for 10 files*/ <img onload="imgMark();" src="100kb_Image?10"> /* HTML for 1 file*/ <img onload="imgMark();" src="1000kb_Image?1">
  80. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 0 400 800 1200 1600 0 25 50 0 250 500 750 1000 Performance – Image Sprites Image bytes downloaded h1 h2 # of files file size (kB) visual complete (s) Improved file size is just down to headers
  81. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 0 400 800 1200 1600 0 25 50 0 250 500 750 1000 Performance – Image Sprites Chrome performance comparison h1 h2 # of files file size (kB) visual complete (s) Chrome a mixed bag as before
  82. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 0 400 800 1200 1600 0 25 50 0 250 500 750 1000 Performance – Image Sprites Firefox performance comparison h1 h2 # of files file size (kB) visual complete (s) H2 is only slightly faster and only above 250 files Anything under 250 is pretty similar
  83. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Visual experience of loading the page h1 h2 # of files Render start (s) 0 5 10 0 250 500 750 1000 Rendering range in h1 is large
  84. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Visual experience of loading the page h1 h2 # of files Render start (s) 0 5 10 0 250 500 750 1000 Rendering range in h1 is large
  85. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites Other considerations 1. Code complexity 2. Caching 3. Images used in sprite
  86. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example
  87. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example h2 images h2 sprite Load difference much less with sprite
  88. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Performance – Image Sprites example # of images used Load time (ms) #sprite19 {background:url('images/sprite.png') no-repeat -17px 0;} #image19 {background:url('sprite/sprite19.png') no-repeat;} 0 70 140 sprite 1 5 10 20 30 40 code img used
  89. ©2016 AKAMAI | FASTER FORWARDTM Sprite Summary 1. Keep using

    sprites for performance 2. If you are only using a few images files are ok 3. Think about management 4. Think about frequency of change 5. Mobile decoding times can be slow
  90. ©2016 AKAMAI | FASTER FORWARDTM 4. Summary & Questions

  91. ©2016 AKAMAI | FASTER FORWARDTM Anti-patterns aren’t anti-patterns 1. Keep

    combining files 2. Check rendering times carefully 3. Keep using sprites (if you use enough images) 4. If you have to shard reuse the same connection 5. Make sure critical content is on the same domain
  92. ©2016 AKAMAI | FASTER FORWARDTM Questions? Michael Gooding @Michael_G_81