• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Please, dont touch the slow parts v.3.6 @webtechcon

  • 1,367 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,367
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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