Please dont touch-3.6-jsday

2,163 views

Published on

More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,163
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
13
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Please dont touch-3.6-jsday

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

×