Scribd
Upload
38 views

Ultimate Website Optimization Checklist

This document provides an extensive checklist for optimizing the performance of a website. It includes recommendations in 8 areas: 1) Reducing HTTP requests by combining files, 2) Configuring the order and technique for attaching elements to HTML, 3) Optimizing HTML code, 4) Optimizing stylesheets, 5) Optimizing JavaScript, 6) Optimizing images, and 7) Reducing file sizes of assets. Specific techniques recommended include minifying files, removing unused code and assets, optimizing CSS sprites, and leveraging content delivery networks.

Uploaded by

iamstevemckinney
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views

Ultimate Website Optimization Checklist

This document provides an extensive checklist for optimizing the performance of a website. It includes recommendations in 8 areas: 1) Reducing HTTP requests by combining files, 2) Configuring the order and technique for attaching elements to HTML, 3) Optimizing HTML code, 4) Optimizing stylesheets, 5) Optimizing JavaScript, 6) Optimizing images, and 7) Reducing file sizes of assets. Specific techniques recommended include minifying files, removing unused code and assets, optimizing CSS sprites, and leveraging content delivery networks.

Uploaded by

iamstevemckinney
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Ultimate Website Optimization Checklist

1. Reduce HTTP Requests


a. Combine as many background images that don't tile into sprites as
possible while checking to ensure that larger images combined
don't increase file size.
b. Combine js files into one single file. Checkout Sprockets,
getsprockets.org
c. Combine all of the CSS files into one file.
1. Consult the user statistics of your website and weigh the
importance of fast homepage loading against the speed of caching
these large combined files for speed on multiple pageloads. In
other words, it might be useful to section off what assets are called
on various pages exclusively like CSS selectors and have each page
or some pages only download what is needed. It'll be slower if all
pages are visited but faster if you can shed the weight for those
that only visit the 1 or 2 most popular pages.
d. Remove any assets you're not using such as, images, js files,
stylesheets, movies, audio files, etc. It may seem obvious but
sometimes they slip through the cracks during a long development
process.
e. Remove duplicate assets, js files being the biggest culprit.
f. Base64 encoded images. Make sure the base64 images don't have
horrendus file size increases, but other than that the don't require
an http request.
http://www.hedgerwow.com/360/dhtml/base64-
image/demo.php that url has a php script to allow base64 on IE7
and below.

2. Configure Order and Technique of Attaching Elements to HTML


a. Put JS files at the bottom of the html if possible.
b. Ensure that your stylesheets come last in the <head> scripts
attached in the <head>.
c. Make all CSS and JS files External. This leads to better caching of
assets. If they're inline they have to be downloaded every time.
This is the exception with homepages, see 1-c.
d. Don't use @import it causes download order to be wacky in IE and
if its used with <link> method than you don't get parallel
stylesheet downloads.
e. Load Scripts in parallel. By default multiple JS scripts will not load
in parallel. Each one loads one at a time and stops loading
everything else while it does so. There is a table on
stevesouders.com that shows browser buys indicators and
techniques to load scripts in parallel. The best solution is to figure
out whether or not the functionality in that JS file is something you
want the busy indicator to show up for and use conditional
comments to use the appropriate method for standards browsers
and IE. You'll also want to factor in load order. If you keep it for
dependency reasons then its slower, if you don't preserve load
order its faster since the first script to download is executed
immediately.

f. Don't scatter inline scripts. Each time you get to one it stops
everything and just downloads that one script.
g. Since you only get around 2 connections per server (varies
depending on browser), its best to spread out your assets on about
3 domains max including your current domain. This will ensure a
greater number of parallel downloads, but be careful not to do too
many dns requests as they're hurtful to optimization.
h. Don’t scatter inline scripts, while they’re executing they block
downloads so put them at the bottom when you can.
i. Ensure that all the js that you load for the initial onload event is
needed. Most site don’t need 70% or more of their js. Anything not
needed to display the initial page should be loaded later when its
needed or just in the background.
3. Optimize HTML Code
a. Get rid of iFrames if possible. They're by far the slowest dom
element and even prevent onload from firing until the onload of
the frame src is finished. Also stylesheets will block the iFrame
from loading. iFrames also share the max connections with parent.
2 connections per server don't turn into 4 because the iframe src is
on another server.
b. Get rid of table based layouts. This isn't always the case, but in
most sites going with a css based layout will dramatically reduce
your html file size and number of dom elements (less dom
elements = faster javascript executions).
c. Do a "divitis" checkup. Go through your markup, or better yet code
markup entirely first from the get-go, to make sure you're utilizing
the proper elements in CSS and not using more elements then
necessary.
d. Don't scale images in HTML. (unless you want to blow it up in
html.)
e. Flush the document early with your backend language if
applicable. This will send html code to your browser even though
its not done totally generating.

4. Optimize Stylesheets
a. Avoid CSS Expressions. These puppies are powerful and IE
proprietary. The problem is that they're executed on load, resize,
scroll, and mouse movement. just moving the mouse can cause it
to execute 10k times. Use event handlers and javascript instead.
b. Delete selectors you're not using. This is obvious but just like
assets they can slip by on long development processes.
c. Delete duplicate or unused properties.
d. Avoid CSS Filters. Another proprietary IE item. Most common is
the AlphaImageLoader. It blocks rendering and freezes the
browser while the image is being downloaded. It also increases
memory consumption per element and not per page which means
the problem is multiplied.
e. CSS reads right to left so #foobar a might seem easy cause you just
find #foobar then style the a tags. Actually the browser must check
every single a tag to see if its inside #foobar. So keep the rightmost
selector item as unique as possible.
5. Optimize JS
a. Minimize DOM Access. Manipulating the DOM is very resource
intensive for browsers.
b. Smart Event Handlers. Use Event Delegation. You can put on event
handler on a container div and then figure out which button inside
that div was actually clicked in the function to be executed.
c. Reduce size of private functions (those called only within the js
itself, not those called in other documents). So function foobar()
would become function a() .
d. Use local variables whenever possible
e. Use the IF statement when
i. There are no more than two discrete values for which to test
ii. There are large number of values that can be easily separated
into ranges
f. Use the SWITCH statement when
i. There are more than 2 but fewer than 10 values in which to
test
ii. There are no ranges for conditions because the values are
nonlinear
g. Use array lookup when:
i. There are more than 10 values to test
ii. The results of the conditions are single values rather than
number of actions to be taken.
h. Avoid the FOR-IN loop
i. Use Duff’s Device for looping through arrays when you notice a
bottleneck in loops that process a large number of items
j. Alias javascript properties like foo.style or
document.getElementById

6. Optimize Images
a. Use smushit.com or punypng.com (says its better) to remove any
unwanted metadata from your images.
b. Since smushit.com doesn’t strip meta from jpeg you can do it
manually with jpegtran
c. Be sure to always check between gif, png 8, png 24, and jpg when
saving images for the web to ensure that you're using the format that
will yield the smallest file size.
d. Optimize CSS sprites to go horizontally instead of vertically, combine
similar colors to keep color count low (in other words have a sprite
with all green together and another with brown, but only do so if it
keeps file size lower and http requests down. Only do it if it will not
yeild higher http requests and not yeild higher file sizes. the whole
point is to reduce those factors.) Also don't leave big gaps between
image in the sprite.
e. Favicon - Get one if you don't have one. 404 errors are slow to
respond with and even if you don't want a favicon it'll request it. So
keep it under 1k and be careful about your expires header since you
can't rename the file if you want to change it.
f. png 8 is able to save full alpha transparency but only at 256 colors and
only from fireworks or some other app than photoshop. I can greatly
reduce size from png 24.

7. Reduce File sizes of assets.


a. See optimizing images for reducing image sizes.
b. Minify CSS and JS files. Use YUI compressor for JS and ICEY for CSS.
Don't use Dean Edwards PACKER if you gzip your files as it'll end
up being larger in the long run than YUI compressor.
c. Minify HTML files.
d. Reduce file size with using relative links including
//subdomain.example.com instead of
http://subdomain.example.com

8. Configure Apache and .htaccess Settings


a. Disable ETags
b. Add future expires headers
c. Enable GZip Compression
d. Since 15% of users don’t have gzip due to proxies you can override
that with gzip detection. See page 130 of “Even Faster Websites”.

Google: +500ms = -20% traffic

Yahoo: +400ms = -5-9%

Amazon: +100ms = -1% sales

You might also like