Best Practices For Speeding Up Your Web Site


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Best Practices For Speeding Up Your Web Site

  1. 1. Best Practices for Speeding Up Your Web Site<br />Presenter: Tran Duc Minh<br />
  2. 2. Performance Rule 80 / 20 in economic<br />
  3. 3. Performance rule 80/20 in Web<br />
  4. 4. Loading<br />
  5. 5. Time spent loading popular web sites<br />
  6. 6. 1) Make Fewer HTTP Requests<br />Making your page fast for these first time visitors is key to a better user experience.<br />Reducing the number of components in turn reduces the number of HTTP requests required to render the page. <br />
  7. 7. 1) Make Fewer HTTP Requests<br />Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.<br />CSS Sprites are the preferred method for reducing the number of image requests<br />
  8. 8. 1) Make Fewer HTTP Requests<br />Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page<br />Inline images use the data:URL scheme to embed the image data in the actual page. This can increase the size of your HTML document (not yet supported across all major browsers.)<br />
  9. 9. 2) Use a Content Delivery Network<br />it&apos;s better to first serve your static content. This not only achieves a bigger reduction in response times<br />A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.<br />
  10. 10. 2) Use a Content Delivery Network<br />The server with the fewest network hops or the server with the quickest response time is chosen.<br />Some CDN service providers like Akamai Technologies, Mirror Image Internet, or Limelight Networks<br />
  11. 11. 3) Add an Expires or a Cache-Control Header<br />There are two things in this rule:<br />For static components: implement &quot;Never expire&quot; policy by setting far future Expires header<br />For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests<br />
  12. 12. 4) Gzip Components<br />Compression reduces response times by reducing the size of the HTTP response.<br />Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.<br />Accept-Encoding: gzip, deflate<br />
  13. 13. 5) Put Stylesheets at the Top and Put Scripts at the Bottom<br />Moving style sheets to the document HEAD makes pages appear to be loading faster<br />While a script is downloading, the browser won&apos;t start any other downloads<br />
  14. 14. 6) Make JavaScript and CSS External<br />Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser.<br />
  15. 15. 7) Minify JavaScript and CSS<br />Remove unnecessary characters from code to reduce its size thereby improving load times.<br />UseYUI Compressor, JSLint, Minify<br />
  16. 16. 7) Remove Duplicate Scripts<br />It hurts performance and increases requests to include the same JavaScript file twice in one page.<br />
  17. 17. 8) Flush the Buffer Early<br />In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser<br />The browser can start fetching components while your backend is busy with the rest of the HTML page. <br />The benefit is mainly seen on busy backends or light frontends. <br />
  18. 18. 9) Use GET for AJAX Requests<br />When we use XMLHttpRequest for AJAX request, POST method is implemented in the browsers as a two-step process: sending the headers first, then sending data<br />So it&apos;s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies)<br />
  19. 19. 10) Optimize Images<br />Check the GIFs and see if they are using a palette size corresponding to the number of colors in the image.<br />Try converting GIFs to PNGs and see if there is a saving. <br />Run pngcrush on all your PNGs.<br />Run jpegtran on all your JPEGs.<br />
  20. 20. 11) Don&apos;t Scale Images in HTML<br />Don&apos;t use a bigger image than you need just because you can set the width and height in HTML. <br />If you need &lt;img width=&quot;100&quot; height=&quot;100&quot; src=&quot;mycat.jpg&quot; alt=&quot;My Cat&quot; /&gt; then your image should be 100x100px rather than a scaled down 500x500px image. <br />
  21. 21. YslowPlugin<br /><br />
  22. 22. Google Page Speed<br /><br />
  23. 23. More Rules at Yahoo, Google<br /><br /><br />
  24. 24. Thank you for your listening<br />
  25. 25. Question<br />