Your SlideShare is downloading. ×
Best Practices for Speeding Up Your Web Site
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Best Practices for Speeding Up Your Web Site


Published on

Based on

Based on

Published in: Technology
1 Comment
  • Another important technique would be to cache frequently accessed data from database close to the web application. Open source in-memory products such as memcached, CSQL Cache can be used to cache frequently accessed data from the database.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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