O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Please Don’t Touch the Slow Parts V3.6 [email_address] http://www.ideato.it/ [email_address] http://www.cleancode.it /
Approved by Steve Souders
 
faster
WEB faster
Faster == Better ?
We have to wait
... All the time
“ Savings in time feels like simplicity ”
“ Time is the only commodity that matters ”
Psychology of web performance http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 5-8 SECONDS
Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Faster web is hot
Say web , Say browser
How browsers work
User clicks on a link
Browser resolves domain name www.google.com 72.14.234.104 DNS UDP domain
Browser connects to web server TCP/IP 72.14.234.104 WEB domain connect
Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domain connect send WEB
Browser receives a response with the page HTTP 200 OK domain connect send receive WEB
Browser renders the new page domain connect send receive render
Rendering is complex render
Rendering is loading resources render css img css img javascript javascript flash
Each resource is another web request render
Requests are processed in parallel render
Rendering is parsing render HTML CSS DOM TREE STYLE STRUCT < html > < head > < title >Title</ title > </ head > <...
Rendering is layout render DOM TREE STYLE STRUCT - document - elem : html - elem : head - elem : title - t...
Rendering is painting render - root - body - block - inline : This is - inline : a Text RENDER TREE repaint T...
Rendering is execution mouse moved mouse pressed mouse released key pressed key released render INPUT OS EVENT QUEUE
Execution in one thread mouse moved mouse pressed mouse released key pressed key released render EVENT QUEUE Javascript E...
Once upon a time ... Few resources Static pages Less javascript
Most time on server domain connect send receive render
Solution is faster serverside domain connect send receive render
Ajax revolution
Ajax revolution performance
Page updating One time (classic) WEB
On demand (ajax) WEB ... later ... Page updating
Continuous (polling) WEB Page updating
Push (comet) WEB Page updating
Most time on browser domain connect send receive render
Golden rule of faster web 80% of the end user response time is spent on the front-end
Start there. Golden rules of faster web
Why web slow parts ?
Easy to understand
Each part has its rules
Which parts are slow ?
Network is slow
Less stuff Fewer requests Concatenate js/css Css sprites Inline images Too many resources
Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded
Smaller stuff Compress responses Content-Encoding Gzip Deflate Resources are too big
Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are t...
Closer stuff Use a CDN Resources are too far reduce latency
Closer stuff Flush document early Server can be slow Chunked encoding
Browser is slow
Scripts block loading javascript css javascript img flash document.write location.href scripts order html img
css Put scripts at bottom javascript javascript img img flash html
css Unloaded styles block page rendering html img img flash
css html img img flash Put styles at top
Indeed... scripts block everything
Load scripts asynchronously var scriptTag = document.createElement( &quot;script&quot; ) scriptTag.src = &quot;http...
Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout( function () { doSomethingElse() ...
Browser I/O is slow
Browser I/O is slow DOM DoG
is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM
triggers events Event Delegation Events execute JS code DOM
Reflow is expensive Batch DOM changes “offline” Cloned element Document Fragment Display: none
Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property
Inefficient element location CSS are bottom-up! Be specific on the “right” #header li a direction
Inefficient element location Go native in DOM getElementById Xpath querySelectorAll
Rules pitfalls
Panta rei Browserscope http://www.browserscope.org/
Expect the unexpected empty cache no compression
Know your users Track user capabilities
Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse
All that glitters is not gold
Everything is a tradeoff
performance brings complexity
know the rules but...
leave complexity to computers
use libraries during development
Use tools at build time http://code.google.com/speed/tools.html
Code smart at run time http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive O...
http://abetterbrowser.org/ 9
Questions ? Rate us on joind.in http://joind.in/3364
12, 14 May - Verona www.phpday.it
27, 28 June - Florence Come and see “ don't touch the... mobile parts “ www.bettersoftware.it
Próximos SlideShares
Carregando em…5
×
Tecnologia, Design
2.260 visualizações
16 de Mai de 2011

Please dont touch-3.6-jsday

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.

Licença: CC Attribution License
no profile picture user

  • Entre para ver os comentários

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

×