Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Lots of ways to speed up your site


Consultez-les par la suite

1 sur 176 Publicité

Lots of ways to speed up your site

Télécharger pour lire hors ligne

If you want a fast web site, you have to get a lot of things right. It's worth it - revenue rises steeply if you can get load times under 2 seconds. This is my ever-growing list of tips, tricks and warnings about improving page speed load times.

If you want a fast web site, you have to get a lot of things right. It's worth it - revenue rises steeply if you can get load times under 2 seconds. This is my ever-growing list of tips, tricks and warnings about improving page speed load times.


Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Lots of ways to speed up your site (20)


Plus par Ian Lurie (20)

Plus récents (20)


Lots of ways to speed up your site

  2. @portentint h‫﬙‬p://portent.co/speedy-sites
  4. @portentint WE’LL WALK THROUGH IT well, that’s a relief
  5. @portentint I’ll explain relative difficul‫,﬚‬ impact & when to use each technique
  6. @portentint Ratings Scale difficul‫:﬚‬ impact:
  7. @portentint These are just the techniques I’ve found to be the biggest wins
  8. @portentint WHY?
  10. @portentint HERE’S THE THING MOSTLY. heh. Oops.
  11. @portentint must… deliver…
  12. @portentint HERE’S THE THING
  13. @portentint HERE’S THE THING
  14. @portentint HERE’S THE THING
  15. @portentint WHY? $- $10.00 $20.00 $30.00 1 2 3 4 5 6 7 8 9 Load time (seconds) Page Value vs. Load Time
  16. @portentint WHY? $- $10.00 $20.00 $30.00 1 2 3 4 5 6 7 8 9 Load time (seconds) Page Value vs. Load Time WHY NOT?!!!!
  17. @portentint THREE BOTTLENECKS
  18. @portentint SERVING
  19. @portentint TRANSMISSION
  20. @portentint RENDERING
  21. @portentint DIAGNOSTIC TOOLS
  23. @portentint Mostly transmission diagnostics
  24. @portentint developers.google.com/speed/pagespeed/insights/
  26. @portentint Powerful
  27. @portentint Less intuitive
  28. @portentint yslow.org
  30. @portentint Captures many important stats Hard-to-read HAR
  31. @portentint WHY YOU CAN’T TRUST TOOLS
  32. @portentint Webpagetest.org: > 8 seconds
  33. @portentint Pingdom: 1.67 seconds
  34. @portentint Reali‫﬚‬
  36. @portentint HAR: A direct, step-by-step view of site load & rendering
  37. @portentint
  38. @portentint
  39. @portentint
  40. @portentint
  42. @portentint TRANSMISSION
  44. @portentint Blue = Download time It’s about bandwidth
  45. @portentint Image Compression difficul‫:﬚‬ impact:
  46. @portentint Google PageSpeed
  47. @portentint HAR
  48. @portentint JPG format, 100% quali‫,﬚‬ 800 x 540: 400kb
  49. @portentint JPG format, 90% quali‫,﬚‬ 800 x 540: 217kb
  50. @portentint JPG format, 80% quali‫,﬚‬ 800 x 540: 100kb
  51. @portentint JPG format, 60% quali‫,﬚‬ 800 x 540: 67kb
  52. @portentint Page Speed Insights…
  53. @portentint …But it only does png
  54. @portentint Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop
  55. @portentint Start at 60% JPG and work your way up/down
  56. @portentint Start at 128 color PNG
  57. @portentint USE WHEN WHY THE HELL NOT?!
  58. @portentint Use the right image format difficul‫:﬚‬ impact:
  59. @portentint PNG format, 800 x 540: 1,000kb
  60. @portentint JPG format, 100% quali‫:﬚‬ 60kb
  61. @portentint PNG format, 32m color: 13kb
  62. @portentint PNG format, 256k color: 8kb
  63. @portentint USE WHEN WHY THE HELL NOT?!
  64. @portentint Minification difficul‫:﬚‬ impact:
  65. @portentint Not minified: 260kb
  66. @portentint Minified: 32kb
  67. @portentint Google PageSpeed
  68. @portentint Use .MIN.JS version of javascript libraries
  69. @portentint jscompress.com
  70. @portentint cssminifier.com
  71. @portentint HTML, too
  72. @portentint USE WHEN Always
  73. @portentint HTTP compression difficul‫:﬚‬ impact:
  74. @portentint Lossless compression of HTML, javascript, css, other files
  75. @portentint Hey, thanks! I’ll extract it here. I’m going to compress these files for you so they arrive more quickly.
  77. @portentint Google PageSpeed
  78. @portentint Apache mod_deflate
  79. @portentint nginx ngx_h‫﬙‬p_gzip_module
  80. @portentint IIS Click the checkbox
  81. @portentint Not always possible with 3rd-par‫﬚‬ scripts
  82. @portentint NOT OVER SSLunless you really know what you’re doing
  83. @portentint USE WHEN Any non-encrypted
  84. @portentint Expires Headers difficul‫:﬚‬ impact:
  85. @portentint this file doesn’t change that often. ok, i’ll save it to my hard drive.
  86. @portentint Google PageSpeed
  87. @portentint Not possible w/ 3rd-par‫﬚‬ scripts
  88. @portentint Apache mod_expires
  89. @portentint nginx ngx_h‫﬙‬p_headers_module
  90. @portentint IIS clientCache or h‫﬙‬pExpires or …?
  91. @portentint USE WHEN Site uses many static files
  92. @portentint HERE’S THE THING TEST.my bad.
  93. @portentint RENDERING
  94. @portentint It’s about browser performance How quickly can a browser ‘draw’ this page?
  95. @portentint Webpagetest.org
  96. @portentint This line HAR view This number
  98. @portentint Load order difficul‫:﬚‬ impact:
  99. @portentint CSS first. Javascript last.
  100. @portentint <script src=“script.js” defer> Load in parallel, don’t block
  101. @portentint <script src=“script.js” async> Load in parallel, execute as soon as possible
  102. @portentint Tag managers…?
  103. @portentint Google PageSpeed
  104. @portentint HAR
  105. @portentint May break 3rd-par‫﬚‬ javascript
  106. @portentint USE WHEN You can
  107. @portentint Parallel downloads difficul‫:﬚‬ impact:
  108. @portentint 3 different subdomains
  109. @portentint Parallel load
  110. @portentint USE WHEN You can use multiple subdomains You use a CDN
  111. @portentint Optimizing HTML difficul‫:﬚‬ impact:
  112. @portentint 35,000 lines of code Render time: 1.5s html: 900kb
  113. @portentint why?
  114. @portentint Put in .css instead
  115. @portentint Much be‫﬙‬er
  116. @portentint Minified html
  117. @portentint DOM elements (yslow)
  118. @portentint At least get rid of the white space
  119. @portentint USE WHEN Always
  120. @portentint Lazy loading difficul‫:﬚‬ impact:
  121. @portentint Image loads when I scroll to here
  122. @portentint h‫﬙‬p://portent.co/load-lazy
  123. @portentint USE WHEN You have below-the-fold images You have a gallery
  124. @portentint DNS prefetch difficul‫:﬚‬ impact:
  125. @portentint HAR
  126. @portentint <link rel="dns-prefetch" href="//domainname.com" />
 <link rel=“dns-prefetch” href=“https://api.twitter.com” />
  127. @portentint Prefetch/Prerender difficul‫:﬚‬ impact:
  128. @portentint You go to this page a lot. I’m going to get it ready ahead of time.
  129. @portentint Most popular page prerendered
  130. @portentint
  131. @portentint <link rel="prerender" href=”images/kittens.jpg"> Load file in advance
  132. @portentint <link rel=”prefetch" href="http://my-site.com/bar.html"> Load & render page in advance
  133. @portentint USE WHEN You know certain pages dominate
  134. @portentint HERE’S THE THING TEST!!!d’oh
  135. @portentint SERVING
  136. @portentint Nerds required yeah baby
  137. @portentint TTFB: Time To First Byte
  138. @portentint Google PageSpeed
  139. @portentint HAR
  140. @portentint Time to First Byte (TTFB) should not > 500ms
  141. @portentint But <250ms is be‫﬙‬er
  142. @portentint CDN difficul‫:﬚‬ impact:
  143. @portentint No CDN hellloooooo
  144. @portentint CDN
  145. @portentint A lot of work, but also helps with h‫﬙‬p compression, parallel loading, cookieless delivery, expires headers
  146. @portentint USE WHEN You can
  147. @portentint disk & query caching difficul‫:﬚‬ impact:
  148. @portentint STORED ON DISK
  149. @portentint That’s a long time. Are you using disk caching?
  150. @portentint Stalled may indicate a page generation bo‫﬙‬leneck. Use disk/query caching
  151. @portentint USE WHEN …
  152. @portentint keep-alive difficul‫:﬚‬ impact:
  153. @portentint No keep-alive Sure! may i have index.html?
  154. @portentint No keep-alive Sure! may i have index.html? ok! can I have styles.css? uh, ok
  155. @portentint No keep-alive Sure! may i have index.html? ok! can I have styles.css? uh, okthanks! can i have jquery.js?
  156. @portentint No keep-alive Sure! may i have index.html? ok! can I have styles.css? uh, okthanks! can i have jquery.js? can i have image.gif?
  157. @portentint Maintains connection, so fewer ‘handshakes’ Keep-alive
  158. @portentint Keep-alive Sure! can i have index.html, image.gif, jquery.js and styles.css please?
  159. @portentint USE WHEN Always
  160. @portentint php/code acceleration difficul‫:﬚‬ impact:
  161. @portentint Xcache APC
  162. @portentint USE WHEN It’s available
  163. @portentint pre-rendering/server caching difficul‫:﬚‬ impact:
  164. @portentint Request page Store rendered page Deliver page Generate page Web/application server Phantomjs Cache server
  165. @portentint USE WHEN It’s doable
  166. @portentint HERE’S THE THING TEST!!!whoopsie
  168. @portentint First, do it right
  169. @portentint MORE TO DO
  170. @portentint Sprites/Reduce HTTP calls Responsive image scaling CSS optimization Javascript optimization Cookieless delivery
  172. @portentint SERVING
  173. @portentint TRANSMISSION
  174. @portentint RENDERING
  175. @portentint HERE’S THE THING TEST!!!
  176. @portentint Ian Lurie @portentint www.portent.com h‫﬙‬p://portent.co/speedy-sites h‫﬙‬p://portent.co/page-speed-guide

Notes de l'éditeur

  • Thank you so so much
  • Here are the links
  • Here are the links
  • This is going to be a super rapid-fire walk through site speed issues and how to deal with them.. It’ll be a bit terrifying if you’re not a serious nerd.
  • The main goal here is to walk through it all
  • and get you an idea of relative impact/difficulty for each technique. With that, you can decide what to do next and research if necessary.
  • Everything’s rated by difficulty and impact.
  • And, these aren’t every technique. They’re just the ones I’ve found to offer the most impact for the time and money spent.
  • Well, of course, faster is better.

  • You do need to test stuff. I’ll bring that up a few times.
  • If you put in the effort to create great content, don’t kill it w/ a slow site.
  • There is SOME correlation to organic search rankings. But it’s weak. Google says it’s a ‘tie breaker.’

  • The correlation to lead generation and sales, on the other hand, is VERY strong.
  • Getting under 2 seconds generates a very high return.
  • So the real question is: Why on earth would you not do this? Before we go through the techniques and tricks, though, I need to talk about bottlenecks and measurement.
  • There are three places that can slow sites down – three bottlenecks or chokepoints.
  • Serving the content – the web server generating web pages and content – is the first bottleneck. It’s hard to make a site faster if the server’s slow.
  • The bottleneck most people focus on is transmission: Basically, how your site uses bandwidth.
  • And the most-forgotten bottleneck is rendering. Your browser has to draw the page or content. If the page/content has problems, it can slow rendering, which creates a slower perceived load time.
  • There are tools that let you measure and diagnose issues at all three chokepoints.
  • If you want basic, easy-to-read site speed diagnosis, Google Page Speed Insights is great. If you’re just starting out with a site performance audit, start here.
  • Google PageSpeed Insights mostly focuses on transmission – on bandwidth.
  • Don’t worry – it’s in the link
  • Yslow has more oomph. If you want to really dig I, Yslow looks at more metrics.
  • Yslow is very, very powerful.
  • It’s less intuitive. But it’s worth using if you’ve exhausted Google PageSpeed Insights
  • WebPageTest.org – I’d love to love it. It’s just got some issues.
  • It captures such a nice set of metrics. But the diagnostics and the HTTP Archive are harder to get at.
  • When you’re ready to really nerd out – learn to read and use an HTTP Archive, or HAR.
  • You can generate it in Chrome w/ a few clicks.
  • Just open the console, refresh the page, and you’re good to go.
  • Now we get to the heavy stuff: How to actually diagnose and fix/optimize
  • Starting w/ Transmission
  • In this HAR diagram, the blue line is download time. It’s an indicator of bandwidth used.
  • This is the single easiest win in all of site speed.
  • Google PageSpeed will provide the analysis
  • And, of course, the HAR will do it.
  • A few quick examples. This image totally uncompressed was 4 megabytes. Doing even a tiny bit of compression reduced it to 400kb.
  • Look at what happens – can you see a difference? No? But it’s half the size.
  • Even smaller
  • And yes, even smaller
  • PageSpeed isn’t bad, either, but…
  • It only uses lossless – PNG - compression.
  • You can use Photoshop, of course, but here are two other tools. Be very careful about using web-based compression tools, Make sure they’re reputable.
  • Always always always do this.
  • Using the right image format is another one
  • JPG is for photos, PNG is really for line art. So convert my friend to PNG and it balloons back to 1 megabyte.
  • Put our logo in JPG and it’s 60k
  • In PNG, it’s 13kb. And this isn’t even the vector version
  • Take out some colors and it’s down to 8kb.
  • Always always always do this.
  • This is an unminified file.
  • This is the same file, minified. The difference? Tabs, blank lines are all removed. Invisible characters are still characters!!! Removing them from a large file makes a huge difference. Obviously, keep an editable version of the files. How can you do this?
  • In Google PageSpeed, you can download the minified files with a click.
  • But many libraries already come w/ minified versions – Jquery, for example.
  • Again, there’s no reason not to.
  • Seriously. Doesn’t get much easier.
  • I’ve never seen this break anything. I’ve heard rumors it can cause issues, which is why I advocate testing. But in 20 years I’ve never seen an issue.
  • Set expires headers for static files
  • When you set far-future expires headers, the server tells visiting browsers that a particular file isn’t going to change any time soon.
  • Google PageSpeed will show you issues. So will Yslow, etc., but PageSpeed is easy.
  • But you can’t usually do this w/ third-party scripts.
  • Really, it’s any site. But expires headers work well for ‘static’ files that don’t change that often. So that’s when/where to use it.
  • Test all of these things. Again – I haven’t seen them break anything, but…
  • Some resources can block page load.
  • At it’s most basic: Load CSS first. Defer javascript as long as possible. That means all CSS includes should come before any javascript includes. But it’s more subtle than that.
  • You can load javascript in parallel.
  • Google will show render-blocking javascript. That’s the stuff that’s in the wrong load order – the page is stuck.
  • Use HAR to really drill down and get a look at what loads when.
  • Do the same for javascript. This ensures visiting browsers only load the javascript/css once per session. They they cache it locally.
  • Yslow is my favorite tool here.
  • I don’t know why you’d write crappy code. It’s actually more work.
  • When you set far-future expires headers, the server tells visiting browsers that a particular file isn’t going to change any time soon.
  • This not only means faster load time because server is closer – it also means the main server doesn’t have to retrieve and deliver the files.
  • Retrieving from a database is slower than retrieving from disk (you can also cache in memory – that’s a separate topic, really)
  • I won’t go into a lot of detail here – code acceleration usually caches executed code so that the server doesn’t have to re-run the code.