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