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