06/03/09 HUGE   /  ParentsConnect  / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com Client-side B...
1. Make Fewer HTTP Requests <ul><li>Making your page fast  for these first time visitors is key to a better user experienc...
2. Put Stylesheets at the Top and Scripts at the Bottom <ul><li>Moving style sheets to the document HEAD makes pages  appe...
3. Make JavaScript and CSS External <ul><li>Using external files generally produces faster pages because the  JavaScript a...
4. Minify JavaScript and CSS <ul><li>Remove unnecessary characters  from code to reduce its size thereby improving load ti...
5. Avoid CSS Expressions and Filters <ul><li>Expressions  are supported in Internet Explorer and  affect the performance o...
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 b...
7. Remove Duplicate Scripts <ul><li>It  hurts performance and increases requests  to include the same JavaScript file twic...
8. Minimize DOM Access <ul><li>Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, ...
8. Minimize DOM Access  (jquery example) <ul><li>$(id).addClass(“yyy”); </li></ul><ul><li>$(id + “ ul” ).show(); </li></ul...
8. Minimize DOM Access  (jquery example) <ul><li>A - Using the class selector </li></ul><ul><li>$('.p-4781').html() </li><...
8. Minimize DOM Access  (jquery example) <ul><li>A - Using attribute search  </li></ul><ul><li>$('[row=&quot;c-3221&quot;]...
9. Optimize Images <ul><li>Check the GIFs and see if they are using a palette size corresponding to the number of colors i...
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 heig...
Gzip Components (server-side) <ul><li>Approximately 90% of today's Internet traffic travels through browsers that claim to...
Advanced Rules <ul><li>Add an Expires or a Cache-Control Header  (server-side) </li></ul><ul><li>Configure Etags  (server-...
Yslow Plugin <ul><li>http://developer.yahoo.com/yslow/ </li></ul>HUGE   /  Best Practices
More Rules at Yahoo <ul><li>http://developer.yahoo.com/performance/rules.html </li></ul>HUGE   /  Best Practices
Upcoming SlideShare
Loading in...5
×

Best Practices for Speeding Up Your Web Site

4,704

Published on

Based on http://developer.yahoo.com/performance/rules.html

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,704
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
193
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Best Practices for Speeding Up Your Web Site

  1. 1. 06/03/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com Client-side Best Practices (for Speeding Up Your Web Site – from yahoo) May 15th, 2008
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Yslow Plugin <ul><li>http://developer.yahoo.com/yslow/ </li></ul>HUGE / Best Practices
  18. 18. More Rules at Yahoo <ul><li>http://developer.yahoo.com/performance/rules.html </li></ul>HUGE / Best Practices
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×