HTTP/2 has been out for about a year. Over that time, Michael Gooding and Javier Garza have worked with many customers to implement it. However, beyond a turnkey solution that offers instant performance gains, HTTP/2 has led to a large amount of questions and confusion about how to optimize for it. Michael and Javier share their experiences with HTTP/2 over the last year, discussing case studies that demonstrate how performance can be improved over HTTP/2 while addressing backward compatibility, exploring using RUM data to review performance-related observations of customers after switching to HTTP/2, and offering hands-on demos of HTTP/2 with server push and HTTP/2 + QUIC. Topics include: Rendering impact without prioritization: Many solutions currently do not support server push or prioritization, which can have a negative impact on rendering when all resources instantly compete for the same bandwidth. Michael and Javier discuss solutions to mitigate this problem. Breaking out to smaller files: Best practices used to dictate combining CSS and JavaScript into as few resources as possible. In an HTTP/2 world, the advice is to leave files alone and serve them as they are. Michael and Javier look at examples where trade-offs exist between the delivery, management, compression, and caching and advise how best to approach the problem. Sprites: As with smaller files, what should we do with sprites in an HTTP/2 world? Looking at examples, Michael and Javier analyze the trade-offs in breaking a sprite out to smaller parts, looking at the effects of less-complex CSS against network performance to see how much of a difference it actually makes on performance. Delivering for HTTP/1.x: Many websites today still have a large user base from older browsers that do not and will not support HTTP/2. By reviewing case study sites optimized for HTTP/2, Michael and Javier display the delta between a site delivered over an HTTP/2 connection and an HTTP/1.x connection. Taking these differences into account, they then explore some common trade-offs and review the delivery options to provide good performance for both protocols at the same time. Real-life HTTP/2 web performance data: Michael and Javier explain how to use RUM data to review web performance data from large websites after enabling HTTP/2 and see the conditions where the performance improvements are at their best. Hands-on demo comparing the web performance of HTTP/2 versus HTTP/1.x 1 and HTTP/2 with server push and QUIC.

1. HTTP/2 (h2) in the
real world
Michael Gooding
@Michael_G_81
Javier Garza
@jjaviergarza

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 Holland a Tiger cub goes outside for the first time!
Picture: Europics

8. ©2016 AKAMAI | FASTER FORWARDTM

9. ©2016 AKAMAI | FASTER FORWARDTM

10. ©2016 AKAMAI | FASTER FORWARDTM
Michael Gooding: Performance Specialist
Javier Garza: Enterprise Architect (h2 evangelist)
1. H2 Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
2. Summary

11. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites

12. ©2016 AKAMAI | FASTER FORWARDTM
Akamai Real User Monitoring (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. A/B testing
6. Browsers behave differently
7. Network conditions vary results

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.
Network variations for non-cellular connections
seconds
% users
h1 h2

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.
Network variations for cellular connections
seconds
% users
h1 h2

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.
Real latency vs Simulated latency, h1 vs h2,
Chrome vs Firefox
1. Test real cities with real latency
2. Test using synthetic latency from dulles
3. Using Chrome and Firefox agents (h2 on/off)
4. Tens of thousands of WPT tests
Using Webpagetest.org (WPT) to measure Latency

16. ©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.
Using WPT to measure (Real vs Simulated) Latency
Lessons learned:
• Can’t trust simulated latency
• Difference between real and simulated changes
by browser too
• Better stick with RUM testing (more work to
clean results)

17. ©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.
Using WPT to measure Packet Loss
Source: http://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51303 - https://goo.gl/MPndFs
h2 performance suffers with packet loss
0% packet loss 2% packet loss h1 h2
0% packet loss 2% packet loss

18. ©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.
Other research studies on packet loss
h2 helps with a lot of small objects TCP slow start impacts a single connection
when delivering more bytes
Source: https://www.akamai.com/us/en/multimedia/documents/technical-publication/http2-performance-in-cellular-networks.pdf > https://goo.gl/y0NYha

19. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites

20. ©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

21. ©2016 AKAMAI | FASTER FORWARDTM
What’s the problem?
Rendering with different prioritisation

22. ©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

23. ©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

24. ©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

25. ©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

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.
Performance – Rendering: Progressive jpegs
h2
normal jpeg
progressive
Normal jpegs just 60% loaded

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.
Performance – Rendering: Progressive jpeg example
h2
after
h2
before

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.
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

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.
Performance – Rendering example
Large image fills bandwidth

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.
Performance – Rendering example
prog
jpg
h2
before
js
priority

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.
Performance – Rendering example with Push
2 sec1 sec
Push
prog
jpg

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.
Performance – Rendering example Server Push
h2
push
prog
jpg

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.
Performance – Rendering: Server push bad example
h2
push
h2
before

34. ©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. Use server push where you can

35. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites

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 – Small files: CSS
CSS bytes downloaded (gzip off)
H2 is smaller because of header compression
h1 h2
# of files
bytes

37. ©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
h2 performance comparison h
# of files
time

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 – Small files: CSS
h2 performance comparison - Chrome h
# of files
time
h1 h2
H2 is faster, especially as you increase the number of files
Smaller number of files is faster to 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 – Small files: CSS
h2 performance comparison - Firefox h
# of files
time
h1 h2
H2 is slower in FF after ~100 files
Smaller number of files is faster to load for h1 and h2

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 – Small files: CSS
h2 performance comparison – Safari Mobile h
# of files
time
h1 h2
H2 is faster, especially as you increase the number of files
Smaller number of files is faster to 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 – Small files: CSS
h2 performance comparison – Chrome Mobile h
# of files
time
h1 h2
H2 is faster, but struggles > 500 files

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 – Small files: CSS
Too many files causes problems in Chrome
???

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 – Small files example
Network not much different
h2
after
h2
before

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 – Small files example
h2
after
h2
before
Result in browser is big

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 – Small files: JS
h2 performance comparison h
# of files
time

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 – Small files: JS
What about rendering? h
h1 h2

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 – Small files: JS example
Network results pretty similar
h2
after
h2
before

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 – Small files: JS example
Faster rendering in browser
h2
after
h2
before

49. ©2016 AKAMAI | FASTER FORWARDTM
Small files Summary
1. h2 is more efficient in most browsers
2. NOT faster dealing with many files
3. Keep combining files, same as h1
4. 2 or 3 is ok, based on frequency of change

50. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites

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.
Performance – Image Sprites
h2 performance comparison h
# of files
time
mob-Safari X

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 – Image Sprites
h2 performance comparison - Chrome h
# of files
time
h1 h2
Difference between h1 and h2 is almost non existent for images
Smaller number of files is faster to load for both protocols

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 – Image Sprites
h2 performance comparison - Firefox h
# of files
time
h1 h2
h2 is only slightly slower in FF
Smaller number of files is faster to load for h1 and h2

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 – Image Sprites
h2 performance comparison – Safari Mobile h
# of files
time
h1 h2
h2 just breaks >200 files
Smaller number of files is faster to load

55. ©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
h2 performance comparison – Safari Mobile h h2
Harder to debug on iPhone, could be:
1. Max streams
2. Memory
3. CPU

56. ©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
h2 performance comparison – Chrome Mobile h
# of files
time
h1 h2
h2 performance is mixed for Chrome Mobile

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 – Image Sprites
Visual experience of loading the page
h1 h2

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 – Image Sprites
Other considerations
1. Management complexity
2. Caching
3. Images used in sprite

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 – Image Sprites example

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 – Image Sprites example
h2
images
h2
sprite
Load difference much less with sprite

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 – 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

62. ©2016 AKAMAI | FASTER FORWARDTM
Sprite Summary
1. Keep using sprites for performance, especially mobile
2. If you are only using a few images files are ok
3. Think about management cost
4. Think about frequency of change
5. Mobile decoding times can be slow and has issues with
large numbers of files

63. ©2016 AKAMAI | FASTER FORWARDTM
Most of the times h2 improves performance
Don’t give up if it doesn’t
Anti-patterns aren’t anti-patterns
1. Don’t shard critical content
2. Keep combining files
3. Keep using sprites (if you use enough images)
Everything is evolving FAST (servers, browsers, QUIC)

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.
Shameless plug
https://goo.gl/3ZVNN8

65. ©2016 AKAMAI | FASTER FORWARDTM
1. Turn h2 on
2. Measure
3. Experiment
4. Share
What if we could save 1 second on every page this
woman views in a day? (50 page views/day)

66. ©2016 AKAMAI | FASTER FORWARDTM
1 sec/page x 50/day x 365 = 5 hours/year
5 sec/page = 25 hours/year

67. Questions?
Michael Gooding
@Michael_G_81
uk.linkedin.com/in/mgooding1981
Javier Garza
@jjaviergarza
www.linkedin.com/in/jjgarza