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