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

Best Practices for Speeding Up Your Web Site

on

  • 7,217 views

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

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

Statistics

Views

Total Views
7,217
Views on SlideShare
7,110
Embed Views
107

Actions

Likes
12
Downloads
191
Comments
1

7 Embeds 107

https://confluence.hugeinc.com 74
http://www.slideshare.net 13
http://confluence.hugeinc.com 12
http://websiteloading.wordpress.com 3
http://www.scoop.it 3
http://bypace.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.

    http://www.csqldb.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Best Practices for Speeding Up Your Web Site Presentation Transcript

  • 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. 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
    • http://developer.yahoo.com/yslow/
    HUGE / Best Practices
  • 18. More Rules at Yahoo
    • http://developer.yahoo.com/performance/rules.html
    HUGE / Best Practices