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.

TL;DR Web Performance Workshop

1,211 views

Published on

Slides from TL;DR Web Performance Workshop presented by Gareth Hughes & Michael at Fluent 2017

Published in: Technology
  • Be the first to comment

TL;DR Web Performance Workshop

  1. 1. TL;DR Web performance workshop Gareth Hughes & Michael Gooding
  2. 2. © 2017 AKAMAI | FASTER FORWARDTM TL;DR performance workshop 1. Introduction 2. What you need to know I. Compression II. Images III. Page Structure IV. HTTPS / HTTP/2 V. Resource Hints 3. Summary
  3. 3. © 2017 AKAMAI | FASTER FORWARDTM INTRODUCTION
  4. 4. © 2017 AKAMAI | FASTER FORWARDTM
  5. 5. © 2017 AKAMAI | FASTER FORWARDTM Social Media Blogs Books
  6. 6. © 2017 AKAMAI | FASTER FORWARDTM
  7. 7. © 2017 AKAMAI | FASTER FORWARDTM http://wpostats.com
  8. 8. © 2017 AKAMAI | FASTER FORWARDTM Webperf 101 • Measurement • Distance • Size • Optimise • Devices • Browsers • Networks
  9. 9. © 2017 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. Measuring isn’t easy
  10. 10. © 2017 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. Distance limited by lightspeed!
  11. 11. © 2017 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. Size does matter!
  12. 12. © 2017 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. Optimise device browser network RWD Image sizes Image formats Progressive enhancement IPv6 HTTP/2 RTT
  13. 13. © 2017 AKAMAI | FASTER FORWARDTM WHAT YOU NEED TO KNOW
  14. 14. © 2017 AKAMAI | FASTER FORWARDTM Assumptions
  15. 15. © 2017 AKAMAI | FASTER FORWARDTM We will not cover the following Cache is King https://www.youtube.com/watch?v=Yg1kYGUrSok
  16. 16. © 2017 AKAMAI | FASTER FORWARDTM We will not cover the following • Original 14 rules • CSS optimisations • JS best practice • Frameworks
  17. 17. © 2017 AKAMAI | FASTER FORWARDTM COMPRESSION
  18. 18. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  19. 19. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  20. 20. © 2017 AKAMAI | FASTER FORWARDTM
  21. 21. © 2017 AKAMAI | FASTER FORWARDTM Render Tree HTML CSS DOM CSSOM Layout Paint DOM Content Loaded Render Start DOM CSSOM Why is it important? JavaScript
  22. 22. © 2017 AKAMAI | FASTER FORWARDTM Render Tree HTML CSS DOM CSSOM Layout Paint DOM Content Loaded DOM CSSOM Why is it important? JavaScript Render Start
  23. 23. © 2017 AKAMAI | FASTER FORWARDTM Render Tree HTML CSS DOM CSSOM Layout Paint DOM Content Loaded Render Start DOM CSSOM Why is it important? JavaSc ript
  24. 24. © 2017 AKAMAI | FASTER FORWARDTM Zopfli
  25. 25. © 2017 AKAMAI | FASTER FORWARDTM
  26. 26. © 2017 AKAMAI | FASTER FORWARDTM
  27. 27. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  28. 28. © 2017 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. 11% fastergz original br 23% faster
  29. 29. © 2017 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 2 4 6 8 10 12 14 16 18 20 0.00 200000.00 400000.00 600000.00 800000.00 1000000.00 1200000.00 1400000.00 1600000.00 original gzip brotli zopfli file size time to compress Compression comparison
  30. 30. © 2017 AKAMAI | FASTER FORWARDTM DYNAMIC CONTENT STATIC CONTENT SPEED = GZIP SIZE = BROTLI
  31. 31. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  32. 32. © 2017 AKAMAI | FASTER FORWARDTM Web Server Brotli Support 2.4.26 + mod_brotli 1.x.x ngx_brotli http { ... brotli on; brotli_static on; brotli_types application/javascript ... text/html; ... }
  33. 33. © 2017 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. CDN Brotli support Partial (if the origin supports it) Encoding at the Edge
  34. 34. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  35. 35. © 2017 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. Compression adoption 0.00% 2.00% 4.00% 6.00% 8.00% 10.00% 12.00% 98% of pages have at least 1 compressed object 11% 100% Median 70-75%
  36. 36. © 2017 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. GZip adoption 0.00% 2.00% 4.00% 6.00% 8.00% 10.00% 12.00% 98% of pages have at least 1 gzip object 11% 100% Median 65-70%
  37. 37. © 2017 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. Brotli adoption 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 45% of pages have at least 1 Brotli object 54% 100% Median 1-5%
  38. 38. © 2017 AKAMAI | FASTER FORWARDTM I. Compression • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  39. 39. © 2017 AKAMAI | FASTER FORWARDTM Good adoption currently (majority GZIP) Could do better! GZIP is widely supported and low-risk Brotli better compression over GZIP but slower Investigate using Brotli for static content (or dynamic if you can!)
  40. 40. © 2017 AKAMAI | FASTER FORWARDTM IMAGES
  41. 41. © 2017 AKAMAI | FASTER FORWARDTM II. Images • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  42. 42. © 2017 AKAMAI | FASTER FORWARDTM CREATE DELIVER
  43. 43. © 2017 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. Create Images Size / Shape Format Quality
  44. 44. © 2017 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. Smaller images download faster and need less memory https://www.youtube.com/watch?v=jP68rCjSSjM Network Device
  45. 45. © 2017 AKAMAI | FASTER FORWARDTM CREATE DELIVER
  46. 46. © 2017 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. Deliver Responsive images Adaptive Images JavaScript
  47. 47. © 2017 AKAMAI | FASTER FORWARDTM Lazy Loading Below the fold Above the fold Viewport
  48. 48. © 2017 AKAMAI | FASTER FORWARDTM 3 Types of Lazy loading 2. As you scroll down the page 3. Loaded on a use event e.g. a click 1. Delay non critical images until after onload
  49. 49. © 2017 AKAMAI | FASTER FORWARDTM
  50. 50. © 2017 AKAMAI | FASTER FORWARDTM II. Images • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  51. 51. © 2017 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. http archive – May 2017 other images
  52. 52. © 2017 AKAMAI | FASTER FORWARDTM Mobile Data Plans Less is More Don’t deliver more than you need Device Constraints Mobile devices Network Performance Cellular Wi-Fi Why Serve the right sized image? £ $ ¥ €
  53. 53. © 2017 AKAMAI | FASTER FORWARDTM $0.65 - $7.15 / MB
  54. 54. © 2017 AKAMAI | FASTER FORWARDTM Mobile Data Plans Less is More Don’t deliver more than you need Device Constraints Mobile devices Network Performance Cellular Wi-Fi Why Serve the right sized image? £ $ ¥ €
  55. 55. © 2017 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. Over loading bytes a big problem KB Original Resized 72% less Bytes
  56. 56. © 2017 AKAMAI | FASTER FORWARDTM How do you paint an image Request Decode Copy to GPU Display Store in memory Need CPU
  57. 57. © 2017 AKAMAI | FASTER FORWARDTM 520 1280 What does an image REALLY look like?
  58. 58. © 2017 AKAMAI | FASTER FORWARDTM
  59. 59. © 2017 AKAMAI | FASTER FORWARDTM 1280 x 520 x 4 = 2.5 MB Images contain A LOT of information
  60. 60. © 2017 AKAMAI | FASTER FORWARDTM “...25% of new Android phones have only 512MB of RAM.” Jen Fitzpatrick VP of Product Management Google Maps
  61. 61. © 2017 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. Not all devices are created equal 1.0s 2.0s 2.6s 334ms 1003ms 1180ms 222ms 494ms Decode times 0.7s 103ms
  62. 62. © 2017 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. original sizes format quality all 3 -1% -85% -92% -45% 6.3MB
  63. 63. © 2017 AKAMAI | FASTER FORWARDTM II. Images • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  64. 64. © 2017 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. Image Strategy 101 Create Step 1 – On demand or create up front Step 2 – DIY or commercial offering Deliver Step 1 – choose a delivery method
  65. 65. © 2017 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. When to create images On demand Create upfront ü Fast to make changes ü No wasted storage Potentially slower first time images Potential lack of control ü Always fast response Slow time to market Changes to all images can take days Secure storage
  66. 66. © 2017 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. DIY or Buy DIY Commercial https://imagetragick.com/
  67. 67. © 2017 AKAMAI | FASTER FORWARDTM Responsive Images
  68. 68. © 2017 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. srcset (and sizes) <picture> Responsive Images <img src=“small.jpg” alt=“” srcset=“…” sizes=“…”/> <picture> <source media=“…” srcset=“…” sizes=“” /> <img src=“small.jpg” alt=“” /> </picture>
  69. 69. © 2017 AKAMAI | FASTER FORWARDTM <img src=”small.jpg” srcset=”small.jpg 400w, large.jpg 800w” sizes=”(max-width:400px) 100vw, 50vw” alt=”selfie picture”> srcset for sizes <img src=”small.jpg” srcset=”small.jpg 400w, large.jpg 800w” sizes=”(max-width:400px) 400px, 800px” alt=”selfie picture”> src for fall back Sizes help tell the browser when to select each image ALTERNATIVELY USE RELATIVE WIDTHS comma-separated list of available versions of the image; each image’s width is specified using the w descriptor Sizes can also use viewport percentage to inform the decision
  70. 70. © 2017 AKAMAI | FASTER FORWARDTM srcset for resolution <img src=”lowres.jpg” srcset=”lowres.jpg 1x, highres.jpg 2x” alt=”selfie picture”> Pixel density assigned against each image
  71. 71. © 2017 AKAMAI | FASTER FORWARDTM <picture> for everything <picture> <source type="image/webp" media="(max-width : 400px)" srcset="small.webp 1x, small_hd.webp 2x"> <source type="image/webp" srcset="large.webp 1x, large_hd.webp 2x"> <source media="(max-width : 400px)" srcset="small.jpg 1x, small_hd.jpg 2x"> <source srcset="large.jpg 1x, large_hd.jpg 2x"> <img src="small.jpg" width="95%" /> </picture> Format detection Size switching resolution switching
  72. 72. © 2017 AKAMAI | FASTER FORWARDTM Client hints <meta http-equiv=”Accept-CH” content=”DPR, Viewport-Width, Width”>
  73. 73. © 2017 AKAMAI | FASTER FORWARDTM Size
  74. 74. © 2017 AKAMAI | FASTER FORWARDTM Resizing in the browser 600 X 600 200 X 200
  75. 75. © 2017 AKAMAI | FASTER FORWARDTM Reduce each image by 50px 550 X 550 150 X 150
  76. 76. © 2017 AKAMAI | FASTER FORWARDTM What break points? = 230,000 wasted bytes = 70,000 wasted bytes 200px 700px 1200px
  77. 77. © 2017 AKAMAI | FASTER FORWARDTM Implementation ../image/upload/image.jpg ../image/upload/w_100,h_100,c_scale/image.jpg convert image.jpg -resize 100x100 image_100x100.jpg
  78. 78. © 2017 AKAMAI | FASTER FORWARDTM Format
  79. 79. © 2017 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. Formats used today jpg png gif webp svg other 42% 26% 24% 2% 2% 4% 41% 25% 11% .5% 1.5% 22% Mime-type Extension
  80. 80. © 2017 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. Correct use cases Graphical Interchange Format Transparency: Yes # of Colours: 256 Compression: Lossy Supports Animation: Yes Chroma Subsampling: No Use: Simple animation Joint Photographic Experts Group Transparency: No # of Colours: 16.8 million Compression: Lossy Supports Animation: No Chroma Subsampling: Yes Use: Photos Portable Network Graphics Transparency: Yes # of Colours: 16.8 million Compression: Lossless Supports Animation: Yes Chroma Subsampling: No Use: images with drop shadows, glows, transparency etc Scalable Vector Graphics Transparency: Yes # of Colours: 16.8 million Compression: Lossless Supports Animation: Yes Chroma Subsampling: No Use: Icons
  81. 81. © 2017 AKAMAI | FASTER FORWARDTM New Flavours of JPEG Format Size vs JPEG Transparency Encoder Browser Support JPEG N/A No jpegtran Everybody WebP -35% Yes cwebp JPEG XR -30% Yes jxrlib JPEG 2000 -30% Yes OpenJPEG 10+ 12.1+4+23+ 6+ 6+
  82. 82. © 2017 AKAMAI | FASTER FORWARDTM Implementation ../image.jpg ../image.jpg?auto=format
  83. 83. © 2017 AKAMAI | FASTER FORWARDTM Quality
  84. 84. © 2017 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. Quality / Compression Q5: 5KB Q10: 9KB Q15: 13KB Q50: 31KB Q75: 46KB Q90: 99KB
  85. 85. © 2017 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. Perceptual Quality Zhou Wang, Alan C. Bovik, Hamid R. Sheikh, and Eero P. Simoncelli
  86. 86. © 2017 AKAMAI | FASTER FORWARDTM We can detect approximately 10 million unique colours. The Eye can be tricked We notices changes to light more than changes to colour
  87. 87. © 2017 AKAMAI | FASTER FORWARDTM Chroma Subsampling chroma luma 4:4:4 4:2:2 4:2:0 -50% -75%
  88. 88. © 2017 AKAMAI | FASTER FORWARDTM Chroma Subsampling - The result 4:4:4 4:2:2 4:2:0 chromaluma
  89. 89. © 2017 AKAMAI | FASTER FORWARDTM Implementation { "auth": { "api_key": "your-api-key", "api_secret": "your-api- secret"}, "url": "http://website.com/example.jpg", "wait": true, "lossy": true, "quality": 50 }
  90. 90. © 2017 AKAMAI | FASTER FORWARDTM ../image/upload/image.jpg ../image/upload/q_85:440/image.jpg Implementation convert image.jpg –sampling-factor 2x1 image_cs.jpg
  91. 91. © 2017 AKAMAI | FASTER FORWARDTM Lazy loading
  92. 92. © 2017 AKAMAI | FASTER FORWARDTM Implementation function addImages() {; var img = document.createElement("img"); img.src = “noncriticalimage.jpg"; document.getElementById("imgholder").appendChild(img); } /* 1. after critical content */ <img onload="addImages();" src=“criticalimage.jpg"> /* 2. after onload */ window.onload = addImages(); /* 3. on scroll */ window.onscroll = addImages(); /* 4. user event e.g. click */ onclick = addImages();
  93. 93. © 2017 AKAMAI | FASTER FORWARDTM
  94. 94. © 2017 AKAMAI | FASTER FORWARDTM Implementation + Many many libraries that can be used:
  95. 95. © 2017 AKAMAI | FASTER FORWARDTM II. Images • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  96. 96. © 2017 AKAMAI | FASTER FORWARDTM Create
  97. 97. © 2017 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 we use images 0.00% 1.00% 2.00% 3.00% 4.00% 5.00% 6.00% 7.00% 100% of sites have at least 1 image 6% 200+ Median 50-55 images per page
  98. 98. © 2017 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. jpg adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 89% of pages have at least 1 jpg 23% 200+ Median 20-25 images per page
  99. 99. © 2017 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. webp adoption 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 10% of pages have at least 1 webp 66% 200+ Median 1-5 images per page
  100. 100. © 2017 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. svg adoption 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 30% of pages have at least 1 svg 66% 200+ Median 1-5 images per page
  101. 101. © 2017 AKAMAI | FASTER FORWARDTM Deliver
  102. 102. © 2017 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. srcset adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% 50.00% 0.2% of sites with at least 1 srcset 46% 200+ Median 5-10 images per page
  103. 103. © 2017 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. <picture> adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% 2% of sites with at least 1 <picture> 39% 200+ Median 5-10 images per page
  104. 104. © 2017 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. Adaptive delivery 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 80.00% 2% of sites use adaptive delivery 75% 200+ Median 1-5 images per page
  105. 105. © 2017 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. Chroma subsampled images 4:2:0 4:4:4 https://calendar.perfplanet.com/2015/why-arent-your-images-using-chroma-subsampling/
  106. 106. © 2017 AKAMAI | FASTER FORWARDTM II. Images • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  107. 107. © 2017 AKAMAI | FASTER FORWARDTM Create derivatives upfront or on demand Transform with DIY or commercial tool Choose a delivery method Optimise size, format & quality Don’t forget lazy loading
  108. 108. © 2017 AKAMAI | FASTER FORWARDTM PAGE STRUCTURE
  109. 109. © 2017 AKAMAI | FASTER FORWARDTM 3 Topics within Page Structure 2. User Timing 3. Service Workers 1. JS loading
  110. 110. © 2017 AKAMAI | FASTER FORWARDTM III. Page Structure • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  111. 111. © 2017 AKAMAI | FASTER FORWARDTM JS loading
  112. 112. © 2017 AKAMAI | FASTER FORWARDTM “The rules” Rule 1 - Make Fewer HTTP Requests Rule 2 - Use a Content Delivery Network Rule 3 - Add an Expires Header Rule 4 - Gzip Components Rule 5 - Put Stylesheets at the Top Rule 6 - Put Scripts at the Bottom Rule 7 - Avoid CSS Expressions Rule 8 - Make JavaScript and CSS External Rule 9 - Reduce DNS Lookups Rule 10 - Minify JavaScript Rule 11 - Avoid Redirects Rule 12 - Remove Duplicate Scripts Rule 13 - Configure ETags Rule 14 - Make AJAX Cacheable
  113. 113. © 2017 AKAMAI | FASTER FORWARDTM “The rules” Rule 1 - Make Fewer HTTP Requests Rule 2 - Use a Content Delivery Network Rule 3 - Add an Expires Header Rule 4 - Gzip Components Rule 5 - Put Stylesheets at the Top Rule 6 - Put Scripts at the Bottom Rule 7 - Avoid CSS Expressions Rule 8 - Make JavaScript and CSS External Rule 9 - Reduce DNS Lookups Rule 10 - Minify JavaScript Rule 11 - Avoid Redirects Rule 12 - Remove Duplicate Scripts Rule 13 - Configure ETags Rule 14 - Make AJAX Cacheable
  114. 114. © 2017 AKAMAI | FASTER FORWARDTM Render Tree HTML CSS DOM CSSOM Layout Paint DOM Content Loaded Render Start JavaScript DOM CSSOM
  115. 115. © 2017 AKAMAI | FASTER FORWARDTM I NEED JS EARLY! JavaScriptASYNC DEFER
  116. 116. © 2017 AKAMAI | FASTER FORWARDTM User Timings
  117. 117. © 2017 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. User timing
  118. 118. © 2017 AKAMAI | FASTER FORWARDTM Service Workers
  119. 119. © 2017 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. Offline support with service workers ü A built in browser proxy ü JavaScript based ü Decent support (no Safari…yet) ü Bonus of push notifications ü Cache assets on start up ü Use cache when no network ü Error handle when no cache and no network ü And more…..
  120. 120. © 2017 AKAMAI | FASTER FORWARDTM III. Page Structure • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  121. 121. © 2017 AKAMAI | FASTER FORWARDTM JS loading
  122. 122. © 2017 AKAMAI | FASTER FORWARDTM /critical.js /func.js /css /html /critical.js /func.js /css /html /critical.js /func.js /css /html async defer render start
  123. 123. © 2017 AKAMAI | FASTER FORWARDTM User Timings
  124. 124. © 2017 AKAMAI | FASTER FORWARDTM User Timing Loaded @ 1.24 seconds
  125. 125. © 2017 AKAMAI | FASTER FORWARDTM Service Workers
  126. 126. © 2017 AKAMAI | FASTER FORWARDTM Service Worker Map of train route… Mobile mast Iphone frame around news site
  127. 127. © 2017 AKAMAI | FASTER FORWARDTM III. Page Structure • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  128. 128. © 2017 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. <script src=“func.js” async></script> <script src=“func.js” defer></script> No guarantee of order. To preserve order, combine into a single file. Order is preserved! JS loading
  129. 129. © 2017 AKAMAI | FASTER FORWARDTM <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src=“myHero.jpg” onLoad=“performance.mark(‘myHeroArrived’);” /> . . . <script> performance.measure(‘timeToHero’, ‘navigationStart’, ‘myHeroArrived’); </script> </body> </html> User Timing
  130. 130. © 2017 AKAMAI | FASTER FORWARDTM <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope:', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script> Service Worker - registration
  131. 131. © 2017 AKAMAI | FASTER FORWARDTM <script> self.addEventListener('install', function(event) { // Perform install steps }); self.addEventListener('fetch', function(event) { // Bespoke caching rules to go here }); </script> Service Worker - skeleton
  132. 132. © 2017 AKAMAI | FASTER FORWARDTM III. Page Structure • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  133. 133. © 2017 AKAMAI | FASTER FORWARDTM JS loading
  134. 134. © 2017 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. async JS adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% 50.00% 43% of sites use async JS 47% 20+ Median applied to 2 scripts
  135. 135. © 2017 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. defer JS adoption 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 80.00% 14% of sites use defer JS 71% 20+ Median applied to 1 script
  136. 136. © 2017 AKAMAI | FASTER FORWARDTM User Timings
  137. 137. © 2017 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.mark adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% 0.19% (186) of sites use performance.mark 40% 20+ Median 2 timings
  138. 138. © 2017 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.measure adoption 0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00% 70.00% 80.00% 0.06% (56) of sites use performance.measure 73% 20+ Median 2 timings
  139. 139. © 2017 AKAMAI | FASTER FORWARDTM Service Workers
  140. 140. © 2017 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. Service Worker adoption Just 116 sites with Service Workers registered ~ 0.1%
  141. 141. © 2017 AKAMAI | FASTER FORWARDTM III. Page Structure • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  142. 142. © 2017 AKAMAI | FASTER FORWARDTM Use async or defer where you can Combine files to preserve order User Timing helps measure what’s important Service Workers can provide offline experiences However, they are not well adopted (yet)
  143. 143. © 2017 AKAMAI | FASTER FORWARDTM HTTPS & HTTP/2
  144. 144. © 2017 AKAMAI | FASTER FORWARDTM IV. HTTPS and HTTP/2 • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  145. 145. © 2017 AKAMAI | FASTER FORWARDTM
  146. 146. © 2017 AKAMAI | FASTER FORWARDTM SECURITY PERFORMANCE ≠
  147. 147. © 2017 AKAMAI | FASTER FORWARDTM HTTP/2
  148. 148. © 2017 AKAMAI | FASTER FORWARDTM Round Trip Time
  149. 149. © 2017 AKAMAI | FASTER FORWARDTM Round Trip Time 3 Round Trips! Round Trip Time
  150. 150. © 2017 AKAMAI | FASTER FORWARDTM Is TLS Fast Yet (.com) https://istlsfastyet.com/ • TLS handshake • TLS session resumption • TLS False Start • TLS record size optimization • Early termination • HTTP Strict Transport Security (HSTS)
  151. 151. © 2017 AKAMAI | FASTER FORWARDTM TLS 1.3 & 0-RTT Round Trip Time 2nd RT! 0 RT! Round Trip Time Full Handshake Session Resumption
  152. 152. © 2017 AKAMAI | FASTER FORWARDTM See how well you are doing https://www.ssllabs.com
  153. 153. © 2017 AKAMAI | FASTER FORWARDTM H2 Recap i. Multiplexing ii. Header Compression iii. Server Push
  154. 154. © 2017 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. Multiplexing H/2 uses binary framingHTTP/1.1
  155. 155. © 2017 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. HTTP/1.1 H/2 uses HPACK Header Compression
  156. 156. © 2017 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. HTTP/1.1 H/2 can push resources Server Push
  157. 157. © 2017 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. HTTP/1.X H/2 TomorrowH/2 Today Summary
  158. 158. © 2017 AKAMAI | FASTER FORWARDTM IV. HTTPS and HTTP/2 • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  159. 159. © 2017 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. Slow HTTPS example When you don’t get your TLS connection right you are guaranteeing poor performance for everyone!
  160. 160. © 2017 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 h1 15% improvement
  161. 161. © 2017 AKAMAI | FASTER FORWARDTM IV. HTTPS and HTTP/2 • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  162. 162. © 2017 AKAMAI | FASTER FORWARDTM HTTPS
  163. 163. © 2017 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. Implementation of HTTPS Certificate Choose a certificate provider e.g. Symantec, LetsEncrypt Choose a verification type e.g EV, OV or DV Choose a certificate type e.g. Single host, SAN, Wildcard etc Server / CDN If using Linux a tool like certbot can help Mixed access or HSTS? Too many flavours to mention CDN’s also vary wildly, they may also provision the certificate above
  164. 164. © 2017 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. It might not be that easy?
  165. 165. © 2017 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. Search Engines
  166. 166. © 2017 AKAMAI | FASTER FORWARDTM h2
  167. 167. © 2017 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. Implementation of h2 Server CDN # for a https server Protocols h2 h2c http/1.1 Load mod_http2 if not already done so server { ... listen 443 ssl http2 default_server; ... }
  168. 168. © 2017 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. Measurement and performance advice https://www.youtube.com/watch?v=ok-KOhEyICc
  169. 169. © 2017 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. Implementation of Server push Push from the edge Push from the origin ü More time to push more Less benefit as have less time Changes are cumbersome ü Dynamic requests
  170. 170. © 2017 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. Problems with Push 1. Repeat users i. Objects in cache ii. What to push? 2. Browser Implementation i. Slow to issue RST stream ii. Inconsistent 3. Server side logic i. Content changes ii. Long lists https://tools.ietf.org/html/draft-ietf-httpbis-cache-digest-00
  171. 171. © 2017 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. Tools to help https://canipush.com/ https://shouldipush.com/
  172. 172. © 2017 AKAMAI | FASTER FORWARDTM IV. HTTPS and HTTP/2 • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  173. 173. © 2017 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. HTTPS adoption 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 31% of sites are fully secure 31% 100% Median 35-40%secure content on a page
  174. 174. © 2017 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 adoption 0.00% 2.00% 4.00% 6.00% 8.00% 10.00% 12.00% 14.00% 16.00% 4% of sites are fully h2 14% 100% Median 35-40% h2 content on a page
  175. 175. © 2017 AKAMAI | FASTER FORWARDTM IV. HTTPS and HTTP/2 • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  176. 176. © 2017 AKAMAI | FASTER FORWARDTM Moving to HTTPS can be hard Measure and optimise Rewards for moving e.g. h2, brotli, svc workers etc h2 can give an instant performance boost However, important to measure real users
  177. 177. © 2017 AKAMAI | FASTER FORWARDTM RESOURCE HINTS
  178. 178. © 2017 AKAMAI | FASTER FORWARDTM V. Resource Hints • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  179. 179. © 2017 AKAMAI | FASTER FORWARDTM
  180. 180. © 2017 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. dns-prefetch 3rd party /js /css /html 3rd party /js /css /html
  181. 181. © 2017 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. preconnect 3rd party /js /css /html 3rd party /js /css /html
  182. 182. © 2017 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. preload 3rd party /js /css /html 3rd party /js /css /html
  183. 183. © 2017 AKAMAI | FASTER FORWARDTM Push alternative – Post HTML <link rel=preload> ü Add “as” for download priority ü Proper accept headers ü Content-security-policy ü Honours Cache ü Can load asynchronously ü Add media queries for responsive loading ü Can load different domains Still requires the HTML to be sent Still requires the HTML to be processed Or maybe not??
  184. 184. © 2017 AKAMAI | FASTER FORWARDTM V. Resource Hints • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  185. 185. © 2017 AKAMAI | FASTER FORWARDTM
  186. 186. © 2017 AKAMAI | FASTER FORWARDTM
  187. 187. © 2017 AKAMAI | FASTER FORWARDTM V. Resource Hints • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  188. 188. © 2017 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. markup script headers <link rel=“preload” href=“styles.css” as=“style”> <script> var res = document.createElement(“link”); res.rel = “preload”; res.as = “style”; res.href = “styles.css”; document.head.appendChild(res); </script> Link: https://site.com/styles.css; rel=preload; as=style Implementation
  189. 189. © 2017 AKAMAI | FASTER FORWARDTM V. Resource Hints • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  190. 190. © 2017 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. Resource hints – dns-prefetch 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 5% of sites use dns-prefetch 30% 20+ Median 4 domains prefetched
  191. 191. © 2017 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. Resource hints – preconnect 0.00% 2.00% 4.00% 6.00% 8.00% 10.00% 12.00% 14.00% 16.00% 18.00% 20.00% 1% of sites use preconnect 18% 20+ Median 4 domains connected
  192. 192. © 2017 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. Resource hints – preload 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 0.6% of sites use preload 27% 20+ Median 3 objects loaded
  193. 193. © 2017 AKAMAI | FASTER FORWARDTM V. Resource Hints • What is it? • Why should you care? • How do I set it up? • Who else is doing it? • Summary
  194. 194. © 2017 AKAMAI | FASTER FORWARDTM A good way of optimising network utilisation DNS-prefetch the most popular Overall adoption is low Very low risk and simple setup Helps reduce risk of poor 3rd party performance
  195. 195. © 2017 AKAMAI | FASTER FORWARDTM SUMMARY / Q&A
  196. 196. © 2017 AKAMAI | FASTER FORWARDTM Make objects as small as possible by Compressing Optimise images for size, format & quality Look at the page load efficiency in the browser HTTPS can open the door for performance gains Optimise network utilisation
  197. 197. Questions?

×