Best Practices for Speeding Up Your Web Site


Published on

Based on

Published in: Technology
1 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. 06/03/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 Client-side Best Practices (for Speeding Up Your Web Site – from yahoo) May 15th, 2008
  2. 1. Make Fewer HTTP Requests <ul><li>Making your page fast for these first time visitors is key to a better user experience. </li></ul><ul><li>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. </li></ul><ul><li>CSS Sprites are the preferred method for reducing the number of image requests. </li></ul>HUGE / Best Practices
  3. 2. Put Stylesheets at the Top and Scripts at the Bottom <ul><li>Moving style sheets to the document HEAD makes pages appear to be loading faster </li></ul><ul><li>While a script is downloading, the browser won't start any other downloads </li></ul>HUGE / Best Practices
  4. 3. Make JavaScript and CSS External <ul><li>Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. </li></ul>HUGE / Best Practices
  5. 4. Minify JavaScript and CSS <ul><li>Remove unnecessary characters from code to reduce its size thereby improving load times. </li></ul><ul><li>Use YUI Compressor . </li></ul>HUGE / Best Practices
  6. 5. Avoid CSS Expressions and Filters <ul><li>Expressions are supported in Internet Explorer and affect the performance of your page . </li></ul><ul><li>Filters increase memory consumption and may freeze or block rendering. </li></ul>HUGE / Best Practices
  7. 6. Choose <link> over @import <ul><li>In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it . </li></ul>HUGE / Best Practices
  8. 7. Remove Duplicate Scripts <ul><li>It hurts performance and increases requests to include the same JavaScript file twice in one page. </li></ul>HUGE / Best Practices
  9. 8. Minimize DOM Access <ul><li>Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should: </li></ul><ul><ul><li>Cache references to accessed elements </li></ul></ul><ul><ul><li>Update nodes &quot;offline&quot; and then add them to the tree </li></ul></ul><ul><ul><li>Avoid fixing layout with JavaScript </li></ul></ul>HUGE / Best Practices
  10. 8. Minimize DOM Access (jquery example) <ul><li>$(id).addClass(“yyy”); </li></ul><ul><li>$(id + “ ul” ).show(); </li></ul><ul><li>$(id + “ ul li”).addClass(“xxx”); </li></ul><ul><li>var div = $(id); </li></ul><ul><li>div.addClass(“yyy”); </li></ul><ul><li>$(“ul”, div).show(); </li></ul><ul><li>$(“li”, div) .addClass(“xxx”); </li></ul>HUGE / Best Practices
  11. 8. Minimize DOM Access (jquery example) <ul><li>A - Using the class selector </li></ul><ul><li>$('.p-4781').html() </li></ul><ul><li>B - Using the class selector + tag </li></ul><ul><li>$('p.p-4781').html() </li></ul><ul><li>C - Using attribute search + tag </li></ul><ul><li>$('p[class=&quot;p-4781&quot;]').html() </li></ul><ul><li>D - Using tag search + filter </li></ul><ul><li>$('p').filter('.p-4781').html() </li></ul>HUGE / Best Practices reponse times
  12. 8. Minimize DOM Access (jquery example) <ul><li>A - Using attribute search </li></ul><ul><li>$('[row=&quot;c-3221&quot;]').html() </li></ul><ul><li>B - Using attribute search + tag </li></ul><ul><li>$('p[row=&quot;c-3221&quot;]').html() </li></ul><ul><li>C - Using tag search + filter </li></ul><ul><li>$('p').filter('[row=&quot;c-3221&quot;]').html() </li></ul><ul><li>D - Using (tag + attribute) search + filter </li></ul><ul><li>$('p[@row]').filter('[row=&quot;c-3221&quot;]').html() </li></ul>HUGE / Best Practices reponse times
  13. 9. Optimize Images <ul><li>Check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. </li></ul><ul><li>Try converting GIFs to PNGs and see if there is a saving. </li></ul><ul><li>Run pngcrush on all your PNGs. </li></ul><ul><li>Run jpegtran on all your JPEGs. </li></ul>HUGE / Best Practices
  14. 10. Don't Scale Images in HTML <ul><li>Don't use a bigger image than you need just because you can set the width and height in HTML. </li></ul>HUGE / Best Practices
  15. Gzip Components (server-side) <ul><li>Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip. </li></ul><ul><li>Gzipping generally reduces the response size of your page by about 70% . </li></ul><ul><li>Gzip is the most popular and effective compression method at this time. </li></ul>HUGE / Best Practices
  16. Advanced Rules <ul><li>Add an Expires or a Cache-Control Header (server-side) </li></ul><ul><li>Configure Etags (server-side) </li></ul><ul><li>Reduce Cookie Size </li></ul><ul><li>Use Cookie-free Domains for Components </li></ul><ul><li>Reduce the Number of DOM Elements </li></ul><ul><li>Minimize the Number of iframes </li></ul><ul><li>Make favicon.ico Small and Cacheable </li></ul>HUGE / Best Practices
  17. Yslow Plugin <ul><li> </li></ul>HUGE / Best Practices
  18. More Rules at Yahoo <ul><li> </li></ul>HUGE / Best Practices