Please Don't Touch the Slow Parts V3

2,039 views

Published on

"Please don't touch the slow parts" version 3 given by me at From The Front, Camp Nou Edition on March 18th 2011 in Modena.

It's about improving web applications speed. Based on Steve Souders work. Compared to V2, I improved and expanded on how browsers work and how to optimize dom/css

Also
http://www.ideato.it/
http://federico.galassi.net/
http://www.stevesouders.com/

http://www.bettersoftware.it/
http://www.phpday.it/
http://fromthefront.it/

Follow me on Twitter!
https://twitter.com/federicogalassi

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

No Downloads
Views
Total views
2,039
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Please Don't Touch the Slow Parts V3

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

×