Please dont touch-3.5
•
1 like•410 views
This new version of the talk was used at the Torino DrupalCamp 2010
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to Please dont touch-3.5
Similar to Please dont touch-3.5 (20)
More from Francesco Fullone
More from Francesco Fullone (20)
Recently uploaded
Recently uploaded (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?