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

Best Practices for Speeding Up Your Web Site

on

  • 7,124 views

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

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

Statistics

Views

Total Views
7,124
Slideshare-icon Views on SlideShare
7,017
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

11 of 1

  • 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 Best Practices for Speeding Up Your Web Site Presentation Transcript

    • 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
    • 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
    • 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
    • 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
    • 4. Minify JavaScript and CSS
      • Remove unnecessary characters from code to reduce its size thereby improving load times.
      • Use YUI Compressor .
      HUGE / Best Practices
    • 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
    • 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
    • 7. Remove Duplicate Scripts
      • It hurts performance and increases requests to include the same JavaScript file twice in one page.
      HUGE / Best Practices
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Yslow Plugin
      • http://developer.yahoo.com/yslow/
      HUGE / Best Practices
    • More Rules at Yahoo
      • http://developer.yahoo.com/performance/rules.html
      HUGE / Best Practices