Best Practices for Speeding Up Your Web Site

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

3. Make JavaScript and CSS External

Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser.

4. Minify JavaScript and CSS

Remove unnecessary characters from code to reduce its size thereby improving load times.

Use YUI Compressor .

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.

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 .

7. Remove Duplicate Scripts

It hurts performance and increases requests to include the same JavaScript file twice in one page.

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 "offline" and then add them to the tree

Avoid fixing layout with JavaScript

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”);

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="p-4781"]').html()

D - Using tag search + filter

$('p').filter('.p-4781').html()

HUGE / Best Practices reponse times

A - Using attribute search

$('[row="c-3221"]').html()

B - Using attribute search + tag

$('p[row="c-3221"]').html()

C - Using tag search + filter

$('p').filter('[row="c-3221"]').html()

D - Using (tag + attribute) search + filter

$('p[@row]').filter('[row="c-3221"]').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.

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.

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.

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

Yslow Plugin

http://developer.yahoo.com/yslow/

More Rules at Yahoo

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

Best Practices for Speeding Up Your Web Site

1 comments

Notes on slide 1

10 Favorites