Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How To Make Any Site Blazing Fast!!! Tom Pool - London SEO Meetup Jan'20

651 views

Published on

Originally presented at Blue Array's January LondonSEOMeetup.

In this mobile-first world, it is massively important for all websites to be as fast as possible, to ensure the user can access content as soon as possible. This talk focused on the multitude of things that you can do to ensure any site is as fast as possible. Themes discussed included HTTP/3, image optimisation, optimising the critical rendering path and minimising the number of requests.

Published in: Marketing
  • Be the first to comment

How To Make Any Site Blazing Fast!!! Tom Pool - London SEO Meetup Jan'20

  1. 1. TOM POOL How To Make Any Site Blazing Fast!!! 🔥🔥🔥 @cptntommy linkedin.com/in/tom-pool
  2. 2. Who Am I? @cptntommy
  3. 3. @cptntommy
  4. 4. Look After Technical Output Of The Agency @cptntommy
  5. 5. I Get To Work On Some Awesome Projects @cptntommy
  6. 6. @cptntommy
  7. 7. I Get To Work With Some Awesome People @cptntommy
  8. 8. Recently Won ‘Young Search Professional Of The Year’
  9. 9. I Spend Far Too Much Time On A Bike
  10. 10. I Really Enjoy Testing And Messing Around With Sites
  11. 11. Over The Next 15 Minutes, We’re Going To Focus On @cptntommy
  12. 12. Some Really Slow Sites @cptntommy
  13. 13. Some Really Slow Sites Why They’re So Slow @cptntommy
  14. 14. Some Really Slow Sites Why They’re So Slow How We Can Fix Them @cptntommy
  15. 15. Some Really Slow Sites Why They’re So Slow How We Can Fix Them And Some New Speed Stuff @cptntommy
  16. 16. So @cptntommy
  17. 17. I Was Trying To Buy Something @cptntommy
  18. 18. All About Those Deals
  19. 19. And Ended Up On Some Undisclosed Website @cptntommy
  20. 20. That Was Really…. Really….. Slow @cptntommy
  21. 21. This Was on 4G, On A Pretty New Phone - So You’d Expect Decent Performance @cptntommy
  22. 22. So Like A Good SEO @cptntommy
  23. 23. I Immediately Put It Into Page Speed Insights @cptntommy
  24. 24. Being An SEO Has Ruined The Entire Web Experience For Me @cptntommy
  25. 25. I Just Want To Test EVERYTHING @cptntommy
  26. 26. @cptntommy
  27. 27. For A Brand That Seems Focused On Speed @cptntommy
  28. 28. So It’s Pretty Slow... @cptntommy #ReadingSEO
  29. 29. It’s Pretty Slow...
  30. 30. There’s An Autoplaying Video, Bunch Of JS, High- Res Images, Loads Of CSS, Many Requests… @cptntommy
  31. 31. Looking At Some Of The Stats @cptntommy
  32. 32. Basically, A Bunch Of Red Stuff…. @cptntommy
  33. 33. Page Speed Insights Also Offers Some Good Solutions @cptntommy
  34. 34. @cptntommy
  35. 35. Even Tells You How Much Time Could Be Saved @cptntommy
  36. 36. There’s Also Some More Advanced Diagnostics @cptntommy
  37. 37. Again, More Red Stuff….
  38. 38. @cptntommy
  39. 39. However @cptntommy
  40. 40. I’d Like To Focus On Other Speed Fixes, That Aren’t That Well Covered By Google Documentation @cptntommy
  41. 41. But The Slowness Doesn’t Stop There @cptntommy
  42. 42. I Also Found This Wonderful Gem @cptntommy
  43. 43. @cptntommy
  44. 44. This Scores A Speedy @cptntommy
  45. 45. This Scores A Speedy @cptntommy
  46. 46. Investigation Shows A Pretty Big JavaScript File. @cptntommy
  47. 47. Definitely Need That Here @cptntommy
  48. 48. One More Example Before We Get Into The Actual Fun Stuff @cptntommy
  49. 49. We’ve Found The Fabled Number @cptntommy
  50. 50. @cptntommy
  51. 51. @cptntommy
  52. 52. The Biggest Problem Here Is No Compression. @cptntommy
  53. 53. There Is Also Some Other Interesting Stuff @cptntommy
  54. 54. @cptntommy
  55. 55. @cptntommy
  56. 56. @cptntommy #ReadingSEO
  57. 57. About 2% Of These Are Actually Used On The Page @cptntommy
  58. 58. Is That Big A File Really Needed? @cptntommy
  59. 59. So I Was Thinking
  60. 60. Outside Of The Usual Suggestion s #ReadingSEO
  61. 61. (Minimise JS, Optimise Images, Utilise Compression, Minify CSS…) @cptntommy
  62. 62. What Else Can We Do? @cptntommy
  63. 63. How Can We Make Sites Like This (And Others) As Fast As Possible? @cptntommy
  64. 64. What If We Needed Large JS Files, Or Massive Images?
  65. 65. HTTP3 @cptntommy
  66. 66. To Fully Understand This, @cptntommy
  67. 67. To 1990 And HTTP/0.9 @cptntommy
  68. 68. A Single Request Could Be Made At Once, For A Single Resource @cptntommy
  69. 69. @cptntommy
  70. 70. Only HTML No HTTP Headers Could Be Used @cptntommy
  71. 71. You’d Make A Request. @cptntommy
  72. 72. You’d Make A Request. Get A File. @cptntommy
  73. 73. You’d Make A Request. Get A File. Easy. Fast (ish). @cptntommy
  74. 74. Of Course, This Was Limited By Those Wonderful 56kb Modems @cptntommy
  75. 75. @cptntommy
  76. 76. Nearly 16 Minutes. @cptntommy
  77. 77. Hardware Plays An Important Part In Speed (We’ll Touch On This Later)
  78. 78. Fast Forward To 1997 And HTTP/1.0 @cptntommy
  79. 79. We Got: Status Codes (Yay) @cptntommy
  80. 80. Also: HTTP Headers @cptntommy
  81. 81. HTTP Headers = Different Content Types @cptntommy
  82. 82. Using The Content- Type: Header @cptntommy
  83. 83. So If You Had A HTML Document With A Single Image @cptntommy
  84. 84. You’d Have The Initial Request For The HTML @cptntommy
  85. 85. And Then A Second Request For The Image @cptntommy
  86. 86. So Still Fast(ish) @cptntommy
  87. 87. Then We Got HTTP/1.1 @cptntommy
  88. 88. This Had All Sorts Of New Stuff @cptntommy
  89. 89. Reusable Connections Pipelining @cptntommy
  90. 90. When You Got A Response From A Server On 1.0 @cptntommy
  91. 91. The Connection Would Close @cptntommy
  92. 92. 1.1 Allowed Connections To Be Re- Used @cptntommy
  93. 93. And 1.1 Was Cool For 15~ish Years @cptntommy
  94. 94. Then HTTP/2 Rocked Up @cptntommy
  95. 95. Many Sites Still Don’t Use This @cptntommy
  96. 96. If A Site Is Slow, And They’re Still On HTTP/1.1 @cptntommy
  97. 97. Check With Chrome Dev Tools! @cptntommy
  98. 98. @cptntommy
  99. 99. @cptntommy
  100. 100. @cptntommy
  101. 101. HTTP/2 Allows For ‘Multiplexing’ Allowing Multiple Requests On The Same Connection @cptntommy
  102. 102. HTTP/1.1 @cptntommy
  103. 103. HTTP/1.1 HTTP/2 @cptntommy
  104. 104. This Enables Much Faster Loading Times @cptntommy
  105. 105. @cptntommy
  106. 106. HTTP/2 Also Enabled Server Push @cptntommy
  107. 107. Single Request @cptntommy
  108. 108. Single Request Multiple Responses @cptntommy
  109. 109. So Sites Can Be Much Faster vs HTTP/1.1 @cptntommy
  110. 110. Now Along Comes HTTP/3 September ‘19 @cptntommy
  111. 111. It’s Not Actually Fully ‘Out’ Yet @cptntommy
  112. 112. @cptntommy
  113. 113. Support Is Rolling Out, Exclusively To Cloudflare Customers @cptntommy
  114. 114. @cptntommy
  115. 115. 1 2 3 4 5 6 7 8 @cptntommy
  116. 116. @cptntommy
  117. 117. 1 2 3 4 5 @cptntommy
  118. 118. Just Cuts Out A Bunch Of Time @cptntommy
  119. 119. ‘Speaking’ Via A Different Protocol @cptntommy
  120. 120. Minimising Requests @cptntommy
  121. 121. @cptntommy
  122. 122. Every Single Resource On A Website @cptntommy
  123. 123. Requires A Request To A Server @cptntommy
  124. 124. One Of The Simplest Things You Can Do Is Minimise The Number Of Requests That Are Made @cptntommy
  125. 125. Less Requests = Less Time @cptntommy
  126. 126. How? @cptntommy
  127. 127. @cptntommy
  128. 128. Combine CSS @cptntommy
  129. 129. Combine CSS Cut & Compress Everything @cptntommy
  130. 130. Combine CSS Cut & Compress Everything Minimise Ads @cptntommy
  131. 131. Combine CSS Cut & Compress Everything Minimise Ads Async Load JS @cptntommy
  132. 132. Optimising Request Order @cptntommy
  133. 133. Again, Utilise The Waterfall View @cptntommy
  134. 134. Work Out Exactly What Resources Are The Most Important @cptntommy
  135. 135. 1. The Raw HTML @cptntommy
  136. 136. 1. The Raw HTML 2.Important CSS @cptntommy
  137. 137. 1. The Raw HTML 2.Important CSS 3.The Header Content @cptntommy
  138. 138. 1. The Raw HTML 2.Important CSS 3.The Header Content 4.Any Important Images @cptntommy
  139. 139. 1. The Raw HTML 2.Important CSS 3.The Header Content 4.Any Important Images 5.The Other Stuff @cptntommy
  140. 140. Lazy Loading @cptntommy
  141. 141. This Should Be Familiar To Most Of Us @cptntommy
  142. 142. We’ve All Been T @cptntommy
  143. 143. @cptntommy
  144. 144. If You Have Content That Renders Below The Fold @cptntommy
  145. 145. Say, For Example, Products 20-40 On A Page Of 40 Products @cptntommy
  146. 146. Consider Lazy Loading These Products @cptntommy
  147. 147. - Reduces Initial Page Size @cptntommy
  148. 148. - Reduces Initial Page Size - Improve Initial Page Load Time @cptntommy
  149. 149. - Reduces Initial Page Size - Improve Initial Page Load Time - Faster @cptntommy
  150. 150. - Reduces Initial Page Size - Improve Initial Page Load Time - Faster - More $$$ @cptntommy
  151. 151. The Hardware Side @cptntommy
  152. 152. Ever Tried Running A 3D Rendering Program On A Shit Dell Laptop? @cptntommy
  153. 153. It’s Like Running A Site That You Want To Be Fast, On A Potato Of A Server @cptntommy
  154. 154. Yes, You Can Power A Clock With A Spud @cptntommy #ReadingSEO@cptntommy
  155. 155. But Not A Blazing Fast Site (Yet) @cptntommy
  156. 156. Shared Hosting = NO @cptntommy
  157. 157. Upgrade Your Host If Needed @cptntommy
  158. 158. Make Sure Server Is Up To Date @cptntommy
  159. 159. Get A CDN @cptntommy
  160. 160. Configure Your Cache(ing)
  161. 161. This Helps Optimise That Ever Important TTFB @cptntommy
  162. 162. Improves Delivery & Efficiency Of Delivery Of Resources @cptntommy
  163. 163. So @cptntommy
  164. 164. To Wrap Up @cptntommy
  165. 165. We Have Covered: @cptntommy
  166. 166. We Have Covered: Slow Sites @cptntommy
  167. 167. We Have Covered: Slow Sites Basic Fixes @cptntommy
  168. 168. We Have Covered: Slow Sites Basic Fixes HTTP/3 & Friends @cptntommy
  169. 169. We Have Covered: Slow Sites Basic Fixes HTTP/3 & Friends More Advanced Fixes @cptntommy
  170. 170. Implementing All Of These Will Help Ensure That Your Site Is As Fast As It Can Be. @cptntommy
  171. 171. Thanks! @cptntommy

×