Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?

1,772 views

Published on

Talk from Akamai Edge 2014 looking at some of our current web performance optimisation practices and how they may need to change as new standards and protocols emerge

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?

  1. 1. http://www.flickr.com/photos/nzbuu/4093456029 Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? @andydavies #Akamai Edge, Oct 2014
  2. 2. One Christmas… http://www.flickr.com/photos/willypayne/3116395089
  3. 3. One Christmas… http://www.flickr.com/photos/willypayne/3116395089 What if …! !
  4. 4. One Christmas… http://www.flickr.com/photos/willypayne/3116395089 What if …! ! … dataURIs are an anti-pattern?
  5. 5. dataURIs are a technique to reduce number of HTTP requests /images/redsquare.png .selector { background-image: url(/images/redsquare.png); }
  6. 6. Encode image as base64 string encode iVBORw0KGgoAAAANSUhEUgAAABk AAAAZCAMAAADzN3VRAAAAGXRFWH RTb2Z0d2FyZQBBZG9iZSBJbWFnZ VJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpi YBgFo2AwAIAAAwACigABtnCV2AA AAABJRU5ErkJggg== /images/redsquare.png base64 string
  7. 7. Replace image path with dataURI ! .selector { background-image: url( ! ! ! ! ! } data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA AwACigABtnCV2AAAAABJRU5ErkJggg==); dataURIs can also be used with other non-image elements too
  8. 8. Reduces number of requests but it’s a tradeoff Makes a blocking resource (CSS) larger by including non-blocking resources! • Browser can’t start rendering page until CSS has downloaded *! • Images don’t block! ! Do they have the same caching lifetime?! Overrides browsers pre-loader heuristics * Some browsers defer download of CSS when media query doesn’t match
  9. 9. Test the theory http://www.flickr.com/photos/marc-flores/8367323660
  10. 10. 1.Take 50 icons! 2.Create 50 stylesheets, each with one more dataURI than previous! 3.Create matching HTML file for each stylesheet! 4.Test them all! (using WebPagetest)
  11. 11. Larger CSS download = longer time to RenderStart 1000 ms) 875 (TTFB - 750 RenderStart 625 500 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 Number of Sprites
  12. 12. Larger CSS download = longer time to RenderStart 1000 ms) 875 (TTFB - 750 RenderStart 625 500 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 Number of Sprites
  13. 13. This started me thinking! www.flickr.com/photos/irishwildcat/3020466221
  14. 14. We have our rules… http://www.flickr.com/photos/sowrey/2441134911
  15. 15. and we love recipes… http://www.flickr.com/photos/mrsmagic/2247364228
  16. 16. But, what happens when things change?
  17. 17. Browsers already use the network differently
  18. 18. Download order != Document order https://www.flickr.com/photos/add1sun/4993432274
  19. 19. Prioritisation sometimes has unexpected consequences Major UK retailer’s site in Chrome
  20. 20. Prioritisation sometimes has unexpected consequences These JS resources are at the foot of the body! (perhaps they should merge them into fewer resources but…)
  21. 21. Prioritisation sometimes has unexpected consequences The hero image is delayed as it waits for the JS to downloaded
  22. 22. New network protocols are coming here http://www.flickr.com/photos/jonlachance/3427660741
  23. 23. They use TCP connections differently HTTP 1.1 SPDY
  24. 24. New standards present both opportunities and challenges
  25. 25. So how might this change what we do today?
  26. 26. How much do we rely on inline JavaScript? www.flickr.com/photos/jfraissi/6352877711
  27. 27. 82% of visitors support async attribute ! <script async src="script.js"></script> http://caniuse.com/script-async
  28. 28. 82% of visitors support async attribute ! <script async src="script.js"></script> http://caniuse.com/script-async Tells browsers they don’t need pause DOM construction while the JavaScript downloads and executes
  29. 29. Yet, this is how we typically load scripts asynchronously <script type="text/javascript"> (function() { var js = document.createElement('script'); js.async = true; js.src = 'script.js'; var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(js, first); })(); </script>
  30. 30. Yet, this is how we typically load scripts asynchronously <script type="text/javascript"> (function() { Browser won’t discover script until outer script inserts it into DOM var js = document.createElement('script'); js.async = true; js.src = 'script.js'; var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(js, first); })(); </script>
  31. 31. XSS
  32. 32. Content-Security-Policy “Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS)” http://www.w3.org/TR/CSP/
  33. 33. Only allow scripts to be executed if they come from a designated host, disables inline scripts by default. Content-Security-Policy: script-src http://www.site.com Can re-enable inline scripts, but increases XSS risk Content-Security-Policy script-src 'self' Doesn’t just apply to scripts, can be used with CSS, fonts, images etc.
  34. 34. What other performance enhancements do we rely on inline JS for? The Guardian prioritise their content! ! Divide page load into:! - Content! - Enhancements! - Leftovers ! ! Some sites rely on scroll handlers for lazyloading
  35. 35. W3C Resource Priorities - adds lazyload attribute (also look at Ilya Grigorik’s proposal for Resource Hints)
  36. 36. So what about the network? http://www.flickr.com/photos/uwwresnet/5881727219
  37. 37. http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x could use TCP more efficiently
  38. 38. We’ve been hacking around the gaps https://www.flickr.com/photos/rocketnumber9/13695281
  39. 39. Browsers added support for more parallel connections Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
  40. 40. We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
  41. 41. Use DataURIs to “push” assets ! url( ! ! ! ! ! ! data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA AwACigABtnCV2AAAAABJRU5ErkJggg==); =
  42. 42. Use DataURIs to “push” assets ! url( ! ! ! ! ! ! data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAABkA AAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQB BZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAA AwACigABtnCV2AAAAABJRU5ErkJggg==); = Larger downloads (needs gzip)! Overrides browser priorities
  43. 43. We create CSS and JavaScript bundles + + + + = =
  44. 44. We create CSS and JavaScript bundles + + + + = = More to download and parse
  45. 45. We create CSS and JavaScript bundles + + + + = = More to download and parse +! x ! Whole bundle is invalidated if a single file changes
  46. 46. Combine small images into CSS Sprites
  47. 47. Combine small images into CSS Sprites To get just one sprite …
  48. 48. Combine small images into CSS Sprites To get just one sprite … Browser must download and decode the whole image
  49. 49. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  50. 50. SPDY & HTTP/2 can reduce that tension SPDY Multiplexed connection reduces overhead of requests! ! - less need to merge resources! ! - better cache hit ratios
  51. 51. HTTP/1.1 - browser sets priorities
  52. 52. SPDY - browser hints priorities server can override them
  53. 53. Change doesn’t just create challenges…! ! ! …it offers new opportunities too
  54. 54. How much of an image do we need to make it usable - 5%?
  55. 55. How much of an image do we need to make it usable - 15%?
  56. 56. How much of an image do we need to make it usable - 25%?
  57. 57. How much of an image do we need to make it usable - 80%?
  58. 58. How much of an image do we need to make it usable - 80%? There are some questions over the user experience with progressive images
  59. 59. https://www.flickr.com/photos/steveweaver/2915792034 Browsers pull resources from the server but …
  60. 60. https://www.flickr.com/photos/christian_bachellier/582457911 What if the server could push them?
  61. 61. Browser Server Server! builds! page GET index.html <html><head>… Loading a web page Request other page resources
  62. 62. Browser Server Server! builds! page GET index.html <html><head>… Network! Idle Request other page resources Loading a web page
  63. 63. Browser Server Server! builds! page GET index.html Push critical resource e .g. CSS <html><head>… Server Push Request other page resources
  64. 64. Browser Server Server! builds! page GET index.html Push critical resource e .g. CSS <html><head>… Request other page resources Server Push
  65. 65. Browser Server Server! builds! page GET index.html Push critical resource e .g. CSS <html><head>… Request other page resources Server Push Browser can reject push
  66. 66. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  67. 67. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint
  68. 68. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint Could we push them?
  69. 69. There’s a huge amount to cope with http://www.flickr.com/photos/atoach/6014917153
  70. 70. and it’s only going to get more complex http://www.flickr.com/photos/freshwater2006/693945631
  71. 71. “Situational Performance Optimization, The Next Frontier”! ! Guy Podjarny
  72. 72. Will the complexity be the end of hand crafted optimisations? http://www.flickr.com/photos/simeon_barkas/2557059247
  73. 73. Will automation be the only sane way to manage this? https://www.flickr.com/photos/skynoir/12342499794
  74. 74. http://www.flickr.com/photos/rkramer62/4028530901 The way we optimise is going to evolve
  75. 75. Start experimenting, share your experiences http://www.flickr.com/photos/giosp/3933753363
  76. 76. Limits to what new protocols or automation can fix Requests by Domain Bytes by Domain
  77. 77. Thank You! http://www.flickr.com/photos/nzbuu/4093456029 @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies

×