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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 1,724 views

 

Statistics

Views

Total Views
1,724
Views on SlideShare
1,717
Embed Views
7

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 7

http://lanyrd.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Please, dont touch the slow parts v.3.6 @webtechcon Presentation 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?