Website Optimization
Implementing optimization tips provided by PageSpeed and YSlow
Some of the non-trivial ones, anyway.
Contents
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.
