The document discusses various ways that web performance can be improved, including reducing the number of server requests, minimizing file sizes through compression and minification, leveraging caching, optimizing browser rendering through techniques like deferred parsing of JavaScript, and using tools to automate optimizations. It emphasizes that most of the end user response time is spent in the frontend and recommends starting performance improvements there.

1. Please Don’t Touch the Slow Parts V3.6 [email_address] http://www.ideato.it/ [email_address] http://www.cleancode.it /

2. Approved by Steve Souders

4. faster

5. WEB faster

6. Faster == Better ?

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 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 5-8 SECONDS

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

16. How browsers work

17. User clicks on a link

18. Browser resolves domain name www.google.com 72.14.234.104 DNS UDP domain

19. Browser connects to web server TCP/IP 72.14.234.104 WEB domain connect

20. Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domain connect send WEB

21. Browser receives a response with the page HTTP 200 OK domain connect send receive WEB

22. Browser renders the new page domain connect send receive render

23. Rendering is complex render

24. Rendering is loading resources render css img css 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 CSS DOM TREE STYLE STRUCT < html > < head > < title >Title</ title > </ head > < body > < div >This is a Text</ div > < div id = &quot;hidden&quot;>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

28. Rendering is layout render 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

29. Rendering is painting render - root - body - block - inline : This is - inline : a Text RENDER TREE repaint This is a Text

30. Rendering is execution mouse moved mouse pressed mouse released key pressed key released render INPUT OS EVENT QUEUE

31. Execution in one thread mouse moved mouse pressed mouse released key pressed key released render EVENT QUEUE Javascript Execution Native Browser Action

32. Once upon a time ... Few resources Static pages 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

36. Ajax revolution performance

37. Page updating One time (classic) WEB

38. On demand (ajax) WEB ... later ... Page updating

39. Continuous (polling) WEB Page updating

40. Push (comet) WEB Page updating

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. Start there. Golden rules of faster web

44. Why web slow parts ?

45. Easy to understand

46. Each part has its rules

47. Which parts are slow ?

48. Network is slow

49. Less stuff Fewer requests Concatenate js/css Css sprites Inline images Too many resources

50. Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded

51. Smaller stuff Compress responses Content-Encoding Gzip Deflate Resources are too big

52. Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are too big

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 javascript css javascript img flash document.write location.href scripts order html img

57. css Put scripts at bottom javascript javascript img img flash html

58. css Unloaded styles block page rendering html img img flash

59. css html img img flash Put styles at top

60. Indeed... scripts block everything

61. Load scripts asynchronously var scriptTag = document.createElement( &quot;script&quot; ) scriptTag.src = &quot;http://www.example.org/js/lib.js&quot; document.getElementsByTagName( &quot;head&quot; )[ 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. Browser I/O is slow DOM DoG

65. is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM

66. triggers events Event Delegation Events execute JS code DOM

67. Reflow is expensive Batch DOM changes “offline” Cloned element Document Fragment Display: none

68. Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property

69. Inefficient element location CSS are bottom-up! Be specific on the “right” #header li a direction

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

81. use libraries during development

82. Use tools at build time http://code.google.com/speed/tools.html

83. Code smart at run time http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive Optimization

84. http://abetterbrowser.org/ 9

85. Questions ? Rate us on joind.in http://joind.in/3364

86. 12, 14 May - Verona www.phpday.it

87. 27, 28 June - Florence Come and see “ don't touch the... mobile parts “ www.bettersoftware.it