Website Optimization

From Supernifty
Jump to: navigation, search

Implementing optimization tips provided by PageSpeed and YSlow

Some of the non-trivial ones, anyway.

Combine CSS and JS files

If you have a build step as part of deploying your website, you can simply concatenate all CSS files into one.

cat *.css > all.css

Expires Headers

You can add expires headers via a .htaccess file

ExpiresActive On
ExpiresByType text/css "access plus 3 months"
ExpiresByType text/javascript "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpg "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/ico "access plus 3 months"

To deal with CSS and JS files that need to be updated, when referring to them in your HTML, append a version parameter. e.g.

src="all.css?v=2"

Minify scripts

If you have a build step as part of deploying your website, use a minifier, such as YUI Compressor

java -jar yuicompressor-2.4.2.jar src.js > final.js

Configure ETags

In .htaccess

FileETag none

Cookie free domains

It's a good idea to keep static resources (JS, CSS, images) on a separate domain. It's also a good idea to serve static resources from a separate web server to dynamic content (PHP, etc).

This enables you to configure a cookie free domain.

Google Analytics by default doesn't do this, you need to add the following line to the Google Analytics JS:

 _gaq.push(['_setDomainName', 'none']);

Optimize images

PNGs are the preferred image format.

Compress losslessly with

pngcrush -q -brute in.png out.png
jpegtran-copy none -optimize -perfect in.jpg > out.jpg

GIFs can potentially be converted to PNG with imagemagick

convert in.gif out.png

Specify image dimensions

Helps prevent reflows and layouts on the browser.

A hack to search for this problem:

grep "img" * | grep -v "height"

And to edit the guilty:

vi `grep "img src" * | grep -v "height" | sed 's/:.*$//' | uniq`

Avoid inline style

Helps prevent reflows and layouts on the browser.

Further information