Please, dont touch the slow parts v.3.6 @webtechcon

1,653 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,653
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Please, dont touch the slow parts v.3.6 @webtechcon

  1. 1. Please Don’t Touch the Slow Parts V3.6 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/
  2. 2. faster
  3. 3. WEBfaster
  4. 4. Faster == Better?
  5. 5. We have to wait
  6. 6. ... All the time
  7. 7. “Savings in time feels like simplicity”
  8. 8. “Time is the only commodity that matters”
  9. 9. Psychology of web performance http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 5-8 SECONDS
  10. 10. Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
  11. 11. Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  12. 12. Faster web is hot
  13. 13. Say web, Say browser
  14. 14. How browsers work
  15. 15. User clicks on a link
  16. 16. Browser resolves domain name www.google.com 72.14.234.104 DNS UDP domaindomain
  17. 17. Browser connects to web server TCP/IP 72.14.234.104 WEB domaindomain connectconnect
  18. 18. Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domaindomain connectconnect sendsend WEB
  19. 19. Browser receives a response with the page HTTP 200 OK domaindomain connectconnect sendsend receivereceive WEB
  20. 20. Browser renders the new page domaindomain connectconnect sendsend receivereceive renderrender
  21. 21. Rendering is complex renderrender
  22. 22. Rendering is loading resources renderrender csscss imgimg csscss imgimg javascriptjavascript javascriptjavascript flashflash
  23. 23. Each resource is another web request renderrender
  24. 24. Requests are processed in parallel renderrender
  25. 25. Rendering is parsing renderrender HTML CSS DOM TREE STYLE STRUCT <html> <head> <title>Title</title> </head> <body> <div>This is a Text</div> <div id="hidden">Hidden</div> body { padding: 0; } #hidden { display: none; } - document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden - selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # site css - selector: hidden rule: display: none # site css
  26. 26. Rendering is layout renderrender DOM TREE STYLE STRUCT - document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden - selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # fsite css - selector: hidden rule: display: none # site css - root - body - block - inline: This is - inline: a Text RENDER TREE reflow
  27. 27. Rendering is painting renderrender - root - body - block - inline: This is - inline: a Text RENDER TREE This is a Text repaint
  28. 28. Rendering is execution mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender INPUT OS EVENT QUEUE
  29. 29. Execution in one thread mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender EVENT QUEUE JavascriptJavascript ExecutionExecution NativeNative BrowserBrowser ActionAction
  30. 30. Once upon a time... Few resources Static pages Less javascript
  31. 31. Most time on server domaindomain connectconnect sendsend receivereceive renderrender
  32. 32. Solution is faster serverside domaindomain connectconnect sendsend receivereceive renderrender
  33. 33. Ajax revolution
  34. 34. Ajax revolution performance
  35. 35. Page updating One time (classic) WEB
  36. 36. On demand (ajax) WEB ... later ... Page updating
  37. 37. Continuous (polling) WEB Page updating
  38. 38. Push (comet) WEB Page updating
  39. 39. Most time on browser domaindomain connectconnect sendsend receivereceive renderrender
  40. 40. Golden rule of faster web 80% of the end user response time is spent on the front-end
  41. 41. Start there. Golden rules of faster web
  42. 42. Why web slow parts?
  43. 43. Easy to understand
  44. 44. Each part has its rules
  45. 45. Which parts are slow?
  46. 46. Network is slow
  47. 47. Less stuff Fewer requests Concatenate js/css Css sprites Inline images Too many resources
  48. 48. Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded
  49. 49. Smaller stuff Compress responses Content-Encoding Gzip Deflate Resources are too big
  50. 50. Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are too big
  51. 51. Closer stuff Use a CDN Resources are too far reduce latency
  52. 52. Closer stuff Flush document early Server can be slow Chunked encoding
  53. 53. Browser is slow
  54. 54. Scripts block loading javascriptjavascript csscss javascriptjavascript imgimg flashflash document.write location.href scripts order htmlhtml imgimg
  55. 55. csscss Put scripts at bottom javascriptjavascript javascriptjavascript imgimg imgimg flashflash htmlhtml
  56. 56. csscss Unloaded styles block page rendering htmlhtml imgimg imgimg flashflash
  57. 57. csscss htmlhtml imgimg imgimg flashflash Put styles at top
  58. 58. Indeed... scripts block everything
  59. 59. Load scripts asynchronously var scriptTag = document.createElement("script") scriptTag.src = "http://www.example.org/js/lib.js" document.getElementsByTagName("head")[0] .appendChild(scriptTag)
  60. 60. Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout(function() { doSomethingElse() }, 50)
  61. 61. Browser I/O is slow
  62. 62. Browser I/O is slow DOM DoG
  63. 63. is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM
  64. 64. triggers events Event Delegation Events execute JS code DOM
  65. 65. Reflow is expensive Batch DOM changes “offline” Cloned element Document Fragment Display: none
  66. 66. Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property
  67. 67. Inefficient element location CSS are bottom-up! Be specific on the “right” #header li a direction
  68. 68. Inefficient element location Go native in DOM getElementById Xpath querySelectorAll
  69. 69. Rules pitfalls
  70. 70. Panta rei Browserscope http://www.browserscope.org/
  71. 71. Expect the unexpected empty cache no compression
  72. 72. Know your users Track user capabilities
  73. 73. Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse
  74. 74. All that glitters is not gold
  75. 75. Everything is a tradeoff
  76. 76. performance brings complexity
  77. 77. know the rules but...
  78. 78. leave complexity to computers
  79. 79. use libraries during development
  80. 80. Use tools at build time http://code.google.com/speed/tools.html
  81. 81. Use tools at build time Apache mod_pagespeed http://code.google.com/speed/tools.html
  82. 82. Code smart at run time http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive Optimization
  83. 83. http://abetterbrowser.org/
  84. 84. Questions?

×