Your SlideShare is downloading. ×
0
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,422

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,422
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
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. faster
  • 3. WEBfaster
  • 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 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 5-8 SECONDS
  • 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 www.google.com 72.14.234.104 DNS UDP domaindomain
  • 17. Browser connects to web server TCP/IP 72.14.234.104 WEB domaindomain connectconnect
  • 18. Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domaindomain connectconnect sendsend WEB
  • 19. Browser receives a response with the page HTTP 200 OK domaindomain connectconnect sendsend receivereceive WEB
  • 20. Browser renders the new page domaindomain connectconnect sendsend receivereceive renderrender
  • 21. Rendering is complex renderrender
  • 22. Rendering is loading resources renderrender csscss imgimg csscss imgimg javascriptjavascript javascriptjavascript flashflash
  • 23. Each resource is another web request renderrender
  • 24. Requests are processed in parallel renderrender
  • 25. Rendering is parsing renderrender HTML CSS DOM TREE STYLE STRUCT <html> <head> <title>Title</title> </head> <body> <div>This is a Text</div> <div id="hidden">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
  • 26. Rendering is layout renderrender 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
  • 27. Rendering is painting renderrender - root - body - block - inline: This is - inline: a Text RENDER TREE This is a Text repaint
  • 28. Rendering is execution mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender INPUT OS EVENT QUEUE
  • 29. Execution in one thread mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender EVENT QUEUE JavascriptJavascript ExecutionExecution NativeNative BrowserBrowser ActionAction
  • 30. Once upon a time... Few resources Static pages Less javascript
  • 31. Most time on server domaindomain connectconnect sendsend receivereceive renderrender
  • 32. Solution is faster serverside domaindomain connectconnect sendsend receivereceive renderrender
  • 33. Ajax revolution
  • 34. Ajax revolution performance
  • 35. Page updating One time (classic) WEB
  • 36. On demand (ajax) WEB ... later ... Page updating
  • 37. Continuous (polling) WEB Page updating
  • 38. Push (comet) WEB Page updating
  • 39. Most time on browser domaindomain connectconnect sendsend receivereceive renderrender
  • 40. Golden rule of faster web 80% of the end user response time is spent on the front-end
  • 41. Start there. Golden rules of faster web
  • 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 Concatenate js/css Css sprites Inline images Too many resources
  • 48. Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded
  • 49. Smaller stuff Compress responses Content-Encoding Gzip Deflate Resources are too big
  • 50. Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are too big
  • 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 javascriptjavascript csscss javascriptjavascript imgimg flashflash document.write location.href scripts order htmlhtml imgimg
  • 55. csscss Put scripts at bottom javascriptjavascript javascriptjavascript imgimg imgimg flashflash htmlhtml
  • 56. csscss Unloaded styles block page rendering htmlhtml imgimg imgimg flashflash
  • 57. csscss htmlhtml imgimg imgimg flashflash Put styles at top
  • 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. Browser I/O is slow DOM DoG
  • 63. is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM
  • 64. triggers events Event Delegation Events execute JS code DOM
  • 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! Be specific on the “right” #header li a direction
  • 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 http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive Optimization
  • 83. http://abetterbrowser.org/
  • 84. Questions?

×