Please Don't Touch the Slow Parts V2

2,546 views

Published on

Extended version of talk "Please don't touch the slow parts". I gave this at PhpDay on May 15th 2010.

It's about improving web applications speed. Based on Steve Souders work.

Also
http://www.ideato.it/
http://federico.galassi.net/
http://www.stevesouders.com/

http://www.bettersoftware.it/
http://www.phpday.it/

Follow me on Twitter!
https://twitter.com/federicogalassi

Published in: Technology

Please Don't Touch the Slow Parts V2

  1. 1. Please Don’t Touch the Slow Parts V2 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/ Saturday, May 15, 2010
  2. 2. Saturday, May 15, 2010
  3. 3. fast er Saturday, May 15, 2010
  4. 4. fast er WEB Saturday, May 15, 2010
  5. 5. Faster == Better? Saturday, May 15, 2010
  6. 6. We have to wait Saturday, May 15, 2010
  7. 7. ... All the time Saturday, May 15, 2010
  8. 8. “Savings in time feels like simplicity” Saturday, May 15, 2010
  9. 9. “Time is the only commodity that matters” Saturday, May 15, 2010
  10. 10. Psychology of web performance 5-8 SECONDS http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ Saturday, May 15, 2010
  11. 11. Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/ Saturday, May 15, 2010
  12. 12. Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html Saturday, May 15, 2010
  13. 13. Faster web is hot Saturday, May 15, 2010
  14. 14. Say web, Say browser Saturday, May 15, 2010
  15. 15. How browsers work Saturday, May 15, 2010
  16. 16. User clicks on a link Saturday, May 15, 2010
  17. 17. Browser resolves domain name DNS UDP www.google.com 72.14.234.104 domain Saturday, May 15, 2010
  18. 18. Browser connects to web server WEB TCP/IP 72.14.234.104 domain connect Saturday, May 15, 2010
  19. 19. Browser sends a request for a page WEB HTTP GET /language_tools?hl=en Host: www.google.com domain connect send Saturday, May 15, 2010
  20. 20. Browser receives a response with the page WEB HTTP 200 OK domain connect send receive Saturday, May 15, 2010
  21. 21. Browser renders the new page domain connect send receive render Saturday, May 15, 2010
  22. 22. Rendering is complex parse + paint render Saturday, May 15, 2010
  23. 23. Rendering really complex parse + paint + resources render css css img img javascript javascript flash Saturday, May 15, 2010
  24. 24. Each resource is another web request render Saturday, May 15, 2010
  25. 25. Requests are processed in parallel render Saturday, May 15, 2010
  26. 26. Rendering is execution render INPUT EVENT QUEUE mouse moved mouse pressed OS mouse released key pressed key released Saturday, May 15, 2010
  27. 27. Execution in one thread render mouse moved EVENT QUEUE mouse pressed mouse released key pressed key released Javascript Web Execution Browsing Saturday, May 15, 2010
  28. 28. Once upon a time... Static pages Few resources Less javascript Saturday, May 15, 2010
  29. 29. Most time on server domain connect send receive render Saturday, May 15, 2010
  30. 30. Solution is faster serverside domain connect send receive render Saturday, May 15, 2010
  31. 31. Ajax revolution Saturday, May 15, 2010
  32. 32. perfo rmance Ajax revolution Saturday, May 15, 2010
  33. 33. Page updating One time (classic) WEB Saturday, May 15, 2010
  34. 34. Page updating On demand (ajax) WEB ... later ... Saturday, May 15, 2010
  35. 35. Page updating Continuous (polling) WEB Saturday, May 15, 2010
  36. 36. Page updating Push (comet) WEB Saturday, May 15, 2010
  37. 37. Most time on browser domain connect send receive render Saturday, May 15, 2010
  38. 38. Golden rule of faster web 80% of the end user response time is spent on the front-end Saturday, May 15, 2010
  39. 39. Golden rule of faster web Start there. Saturday, May 15, 2010
  40. 40. Why web slow parts? Saturday, May 15, 2010
  41. 41. Easy to understand Saturday, May 15, 2010
  42. 42. Each part has its rules Saturday, May 15, 2010
  43. 43. Which parts are slow? Saturday, May 15, 2010
  44. 44. Network is slow Saturday, May 15, 2010
  45. 45. Less stuff Fewer requests Too many resources Concatenate js/css Css sprites Inline images Saturday, May 15, 2010
  46. 46. Less stuff Cache requests Resources re-downloaded Expires header Revving Files External js/css Remove etags Saturday, May 15, 2010
  47. 47. Smaller stuff Compress responses Resources are too big Content-Encoding Gzip Deflate Saturday, May 15, 2010
  48. 48. Smaller stuff Minify responses Resources are too big js, css, html remove formatting remove comments optimize images use tools Saturday, May 15, 2010
  49. 49. Closer stuff Use a CDN Resources are too far reduce latency Saturday, May 15, 2010
  50. 50. Browser is slow Saturday, May 15, 2010
  51. 51. Scripts block loading html document.write javascript location.href css scripts order img javascript img flash Saturday, May 15, 2010
  52. 52. Put scripts at bottom html css img img flash javascript javascript Saturday, May 15, 2010
  53. 53. Unloaded styles block page rendering html img img flash css Saturday, May 15, 2010
  54. 54. Put styles at top html css img img flash Saturday, May 15, 2010
  55. 55. Indeed ... scripts block everything Saturday, May 15, 2010
  56. 56. Load scripts asynchronously var scriptTag = document.createElement("script") scriptTag.src = "http://www.example.org/js/lib.js" document.getElementsByTagName("head")[0] .appendChild(scriptTag) Saturday, May 15, 2010
  57. 57. Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout(function() { doSomethingElse() }, 50) Saturday, May 15, 2010
  58. 58. Scripts and styles side effects dom is alive layout is alive Saturday, May 15, 2010
  59. 59. Rules pitfalls Saturday, May 15, 2010
  60. 60. Panta rei Browserscope http://www.browserscope.org/ Saturday, May 15, 2010
  61. 61. Expect the unexpected empty cache no compression Saturday, May 15, 2010
  62. 62. Know your users Track user capabilities Saturday, May 15, 2010
  63. 63. Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse Saturday, May 15, 2010
  64. 64. All that glitters is not gold Saturday, May 15, 2010
  65. 65. Everything is a tradeoff Saturday, May 15, 2010
  66. 66. performance brings complexity Saturday, May 15, 2010
  67. 67. know the rules but... Saturday, May 15, 2010
  68. 68. leave complexity to computers Saturday, May 15, 2010
  69. 69. use libraries during development Saturday, May 15, 2010
  70. 70. Use tools at build time Saturday, May 15, 2010
  71. 71. http://abetterbrowser.org/ Saturday, May 15, 2010
  72. 72. Questions? Saturday, May 15, 2010

×