Show me the assets

Transcript

1. Show me the assets @lukefrake Thursday, 8 May 14

2. @lukefrake Thursday, 8 May 14

3. @lukefrake Conversion rate Thursday, 8 May 14

4. @lukefrake Lets make that button bigger Thursday, 8 May 14

5. @lukefrake Lets take out that input field Thursday, 8 May

   14

6. @lukefrake Lets speed up our websites Thursday, 8 May 14

7. @lukefrake Just make that button bigger Thursday, 8 May 14

8. @lukefrake The Big Cheese Thursday, 8 May 14

9. @lukefrake Give it to them fast Thursday, 8 May 14

10. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Thursday, 8 May 14

11. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Google 0.5 additional seconds decreased clicks by 20% Thursday, 8 May 14

12. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Google 0.5 additional seconds decreased clicks by 20% Etsy 160k to a page 12% bounce rate on mobile Thursday, 8 May 14

13. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Google 0.5 additional seconds decreased clicks by 20% Waiting for pages to load is really boring Etsy 160k to a page 12% bounce rate on mobile Thursday, 8 May 14

14. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Google 0.5 additional seconds decreased clicks by 20% Waiting for pages to load is really boring Etsy 160k to a page 12% bounce rate on mobile Me Thursday, 8 May 14

15. @lukefrake Amazon 100 milliseconds delay Conversion down 1% $745 million

    Google 0.5 additional seconds decreased clicks by 20% Waiting for pages to load is really boring Etsy 160k to a page 12% bounce rate on mobile Everyone Thursday, 8 May 14

16. @lukefrake Thursday, 8 May 14

17. The Problem Thursday, 8 May 14

18. @lukefrake Bandwidth Thursday, 8 May 14

19. @lukefrake Bandwidth ++ Thursday, 8 May 14

20. @lukefrake Bandwidth ++ Thursday, 8 May 14

21. @lukefrake Seriously though... Thursday, 8 May 14

22. @lukefrake Bandwidth vs Latency Thursday, 8 May 14

23. @lukefrake 500ms 1375ms 2250ms 3125ms 4000ms 1 2 3 4

    5 6 7 8 9 10 Page Load Time As Bandwidth Increases (RTT for 60ms) http://bit.ly/1rNCOlC Thursday, 8 May 14

24. @lukefrake 500ms 1375ms 2250ms 3125ms 4000ms 1 2 3 4

    5 6 7 8 9 10 Page Load Time As Bandwidth Increases (RTT for 60ms) 500ms 1375ms 2250ms 3125ms 4000ms 240ms 200pms 160ms 120ms 80ms 40ms 0ms Page Load Time As RTT Decreases (Bandwidth at 5mbps) http://bit.ly/1rNCOlC Thursday, 8 May 14

25. @lukefrake Reducing round trip time (RTT) Thursday, 8 May 14

26. @lukefrake Reducing round trips Thursday, 8 May 14

27. @lukefrake Introducing your new best friend Thursday, 8 May 14

28. @lukefrake Introducing your new best friend Thursday, 8 May 14

29. @lukefrake Introducing your new best friend Thursday, 8 May 14

30. Handling Images Thursday, 8 May 14

31. @lukefrake Sprites bit.ly/1s60yj0 Thursday, 8 May 14

32. @lukefrake Sprites .bulletBill { background: url("/super_mario_world.png") no-repeat -222px -395px; width:

    64px; height: 64px; } bit.ly/1s60yj0 Thursday, 8 May 14

33. @lukefrake Sprites .bulletBill { background: url("/super_mario_world.png") no-repeat -222px -395px; width:

    64px; height: 64px; } bit.ly/1s60yj0 Thursday, 8 May 14

34. @lukefrake Thursday, 8 May 14

35. @lukefrake Thursday, 8 May 14

36. @lukefrake How its done bit.ly/19lTIm6 Thursday, 8 May 14

37. @lukefrake How its done bit.ly/19lTIm6 Thursday, 8 May 14

38. @lukefrake Optimize your images Thursday, 8 May 14

39. @lukefrake Optimize your images PNG JPG Thursday, 8 May 14

40. @lukefrake Optimize your images PNG JPG 49.4mb 21.7mb Thursday, 8

    May 14

41. @lukefrake Optimize your images PNG JPG 49.4mb 21.7mb 56% Saving

    Thursday, 8 May 14

42. @lukefrake Hard & fast rules Thursday, 8 May 14

43. @lukefrake GIF - 1px or animation Hard & fast rules

    Thursday, 8 May 14

44. @lukefrake GIF - 1px or animation PNG - Small images

    or transparent Hard & fast rules Thursday, 8 May 14

45. @lukefrake GIF - 1px or animation PNG - Small images

    or transparent JPG - Photo quality, no transparency Hard & fast rules Thursday, 8 May 14

46. @lukefrake Optimize your images Thursday, 8 May 14

47. @lukefrake Optimize your images 6000px x 2000px 399px x 266px

    Thursday, 8 May 14

48. @lukefrake Optimize your images 6000px x 2000px 399px x 266px

    21.7mb 119kb Thursday, 8 May 14

49. @lukefrake Optimize your images 6000px x 2000px 399px x 266px

    21.7mb 119kb 99.5% Saving Thursday, 8 May 14

50. @lukefrake Think about duplicates Thursday, 8 May 14

51. @lukefrake Optimize your images 100 quality 60 quality Thursday, 8

    May 14

52. @lukefrake Optimize your images 100 quality 60 quality 37kb 119kb

    Thursday, 8 May 14

53. @lukefrake Optimize your images 100 quality 60 quality 37kb 119kb

    69% Saving Thursday, 8 May 14

54. @lukefrake How? Thursday, 8 May 14

55. @lukefrake Optimize your images Baseline Progressive Thursday, 8 May 14

56. @lukefrake Optimize your images Baseline Progressive Thursday, 8 May 14

57. @lukefrake Optimize your images Baseline Progressive Thursday, 8 May 14

58. @lukefrake Optimize your images Baseline Progressive 37kb 37kb Thursday, 8

    May 14

59. @lukefrake Optimize your images Non image mini Image mini Thursday,

    8 May 14

60. @lukefrake Optimize your images Non image mini Image mini 33kb

    37kb Thursday, 8 May 14

61. @lukefrake Optimize your images Non image mini Image mini 33kb

    37kb 10% Saving Thursday, 8 May 14

62. @lukefrake Optimize your images Original Optimized Thursday, 8 May 14

63. @lukefrake Optimize your images Original Optimized 33kb 49.9mb Thursday, 8

    May 14

64. @lukefrake Optimize your images Original Optimized 33kb 49.9mb 99.94% Saving

    Thursday, 8 May 14

65. @lukefrake Optimize your images Non blur Blur Thursday, 8 May

    14

66. @lukefrake Optimize your images Non blur Blur 33kb 28kb Thursday,

    8 May 14

67. @lukefrake Optimize your images Non blur Blur 33kb 28kb 15%

    Saving Thursday, 8 May 14

68. @lukefrake Optimize your images Non blur Blur 33kb 28kb 15%

    Saving Thursday, 8 May 14

69. @lukefrake Now think that but... BIGGER Thursday, 8 May 14

70. @lukefrake Remove your images Thursday, 8 May 14

71. @lukefrake Lazy loading http://bit.ly/1iZN7BP Thursday, 8 May 14

72. @lukefrake Lazy loading http://bit.ly/1iZN7BP Thursday, 8 May 14

73. @lukefrake Move them into CSS Thursday, 8 May 14

74. @lukefrake Move them into CSS do websites need to look

    exactly the same in every browser? Thursday, 8 May 14

75. @lukefrake Move them into CSS dowebsitesneedtolookexactlythesameineverybrowser.com/ Thursday, 8 May 14

76. @lukefrake Turn them into vector / SVG Thursday, 8 May

    14

77. @lukefrake Turn them into base64 http://bit.ly/1nyKiJv Thursday, 8 May 14

78. @lukefrake Turn them into base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0 b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZl cnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8v RFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQv c3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDov

    L3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5 L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9Ijk2cHgiIGhlaWdodD0iOTZweCIgdmll d0JveD0iMCAwIDk2IDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5NiA5Njsi IHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTQ4LDBDMjEuNDksMCwwLDIxLjQ5LDAs NDhjMCwyNi41MTEsMjEuNDksNDgsNDgsNDhzNDgtMjEuNDg5LDQ4LTQ4Qzk2LDIxLjQ5LDc0LjUx LDAsNDgsMHogTTU5LjM2OSwzMy4xN2gtNy4yMTcNCgljLTAuODU0LDAtMS44MDUsMS4xMjEtMS44 MDUsMi42MjN2NS4yMTFoOS4wMjF2Ny40MjhoLTkuMDIxdjIyLjMwNmgtOC41MlY0OC40MzJoLTcu NzIzdi03LjQyOGg3LjcyM3YtNC4zNzINCgljMC02LjI2OSw0LjM1Mi0xMS4zNjgsMTAuMzI0LTEx LjM2OGg3LjIxN1YzMy4xN3oiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxn Pg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4N CjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8 L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K http://bit.ly/1nyKiJv Thursday, 8 May 14

79. @lukefrake Turn them into base64 <img alt="" src="data:image/svg+xml;base64, Encoded string"

    /> background-image: url(data:image/svg+xml;base64,Encoded string); http://bit.ly/1nyKiJv Thursday, 8 May 14

80. @lukefrake Remove your images Thursday, 8 May 14

81. Reducing Requests Thursday, 8 May 14

82. @lukefrake Cache Thursday, 8 May 14

83. @lukefrake Cache Forever++ Thursday, 8 May 14

84. @lukefrake Cache Forever?21 Thursday, 8 May 14

85. @lukefrake Concatenate http://bit.ly/1m11pl8 Thursday, 8 May 14

86. @lukefrake Concatenate Don’t forget about the cache http://bit.ly/1m11pl8 Thursday, 8

    May 14

87. @lukefrake Concatenate Thursday, 8 May 14

88. @lukefrake Minify & Uglify http://bit.ly/1s66jgx Thursday, 8 May 14

89. @lukefrake Minify & Uglify http://bit.ly/1s66jgx Thursday, 8 May 14

90. @lukefrake Minify & Uglify http://bit.ly/1s66jgx Thursday, 8 May 14

91. @lukefrake Prefetching http://bit.ly/1iZQAQP Thursday, 8 May 14

92. @lukefrake CDN Content delivery network Thursday, 8 May 14

93. @lukefrake CDN Content delivery network Thursday, 8 May 14

94. @lukefrake CDN Content delivery network Thursday, 8 May 14

95. @lukefrake CDN Content delivery network They had it all along

    http://bit.ly/1m0XSTU Thursday, 8 May 14

96. @lukefrake Async / Defer Thursday, 8 May 14

97. @lukefrake Async / Defer Thursday, 8 May 14

98. @lukefrake Async / Defer Thursday, 8 May 14

99. @lukefrake <script type="text/javascript" async></script> <script type="text/javascript" defer></script> Thursday, 8 May

    14

100. @lukefrake <script type="text/javascript" async></script> <script type="text/javascript" defer></script> Thursday, 8 May

     14

101. @lukefrake <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script");

     element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> http://bit.ly/1cDySO9 Thursday, 8 May 14

102. Critical Rendering Path Thursday, 8 May 14

103. @lukefrake The secret to under 1 second page load... Thursday,

     8 May 14

104. @lukefrake 14kb Thursday, 8 May 14

105. @lukefrake 14kb But wait! Thursday, 8 May 14

106. @lukefrake The secret to under 1 second page load... Thursday,

     8 May 14

107. @lukefrake The secret to under 1 second paint... http://bit.ly/RtNt7U Thursday,

     8 May 14

108. @lukefrake Inline CSS / JS Thursday, 8 May 14

109. @lukefrake Inline CSS Thursday, 8 May 14

110. @lukefrake Defer assets Thursday, 8 May 14

111. @lukefrake <html> <head> <style> main{ ... } aside{ ... }

     </style> <script> // I would hope there is none here </script> </head> <body> <main> Main Content </main> <aside> Sidebar </aside> <script> function run_after_onLoad() { Load('stylesheet', 'theRest.css') Load('javascript', 'theRest.js') } </script> </body> </html> Thursday, 8 May 14

112. Tools Thursday, 8 May 14

113. @lukefrake webpagetest.org http://bit.ly/1f4B1CG Thursday, 8 May 14

114. @lukefrake http://bit.ly/1l0DZex Thursday, 8 May 14

115. @lukefrake Google PageSpeed Insights bit.ly/18oQqhi Thursday, 8 May 14

116. @lukefrake PageSpeed Insights Thursday, 8 May 14

117. @lukefrake Google PageSpeed module http://bit.ly/18wlJSa Thursday, 8 May 14

118. Wrapping it up... Thursday, 8 May 14

119. @lukefrake Bandwidth won’t save you Thursday, 8 May 14

120. @lukefrake Do something about your images Thursday, 8 May 14

121. @lukefrake Deliver as little as possible Thursday, 8 May 14

122. Test Everything Thursday, 8 May 14

123. Any questions Thursday, 8 May 14