21 Quick Website Optimization Tips

Here are a few optimisation tips I’ve cobbled together. With all performance fixes there is a trade-off between getting your site to load quick and making it maintainable. Also, remember not to optimise too early, make sure you know your site works and that you are improving actual bottlenecks rather than wasting time.

Page Rendering

1. Ensure that any JS that can be executed after the main page content has loaded is in the footer of the page. This will include Analytics JS and any AJAX requests.
2. If you’re AJAX request is less than 2k, use GET, it’s quicker. Try cache AJAX responses where possible.
3. Don’t scale images in HTML, if an image is going to be displayed 100px wide, save it as 100px wide

Optimising Assets

1. Use an External CDN i.e. when using scripts that are available from other sites (e.g. Yahoo libraries), refer to them directly rather than storing them locally on your server. This means that any users who have visited sites that use the same scripts will already have them cached in their browser.
2. When releasing JS and CSS to prod ensure that it is minimised (i.e. remove whitespace, comments etc.) using tools such as http://developer.yahoo.com/yui/compressor/
3. Optimise graphics for web (In Photoshop, Save for Web)
4. Use CSS sprites i.e. combining multiple images in to one graphic, and then cropping that one image in multiple areas (explained in point 1 here: http://www.leemunroe.com/optimise-website/). Reduces # of HTTP requests, one image instead of many.
5. If you have multiple local css or javascript files, consolidate them in to one large CSS and JS file. This cuts down on HTTP requests which introduce unnecessary overhead. You can do it quickly in rails using:
6. Gzip components (http://developer.yahoo.net/blog/archives/2007/07/high_performanc_3.html)

Caching

1. Try and cache in memory rather than in the file system. This will work if you have a server with plenty of RAM. I was on a training course once where the bloke claimed that if accessing RAM takes 1 second (obvisouly in reality it is much less) then accessing the equivalent data on disk would take 3 months.
2. iPhone tip: keep components under 25k otherwise they will not be cached on iPhones

Database Access

1. Use indexes based on the where clause of common queries on each table

Rails Specific

1. Use Timed Fragment Caching to simplify caching a page fragement for particular time periods e.g. 1.hour.from.now (rather event-driven expiration e.g. when a new post is added, when a user signs in) – http://www.ruzee.com/blog/2008/07/timed_fragment_cache-on-rails-21
2. Cache models using acts_as_cached (http://errtheblog.com/post/27)
3. A couple of Ruby tips for good measure: Always use regular expressions over expensive loops. It’s often possible to remove some slow loops all together by restructuring code.
4. Avoid dynamic finders like SomeModel.find_by_*, use SomeModel.find_by_sql to query directly instead
5. Question the use of helpers i.e. do you really need a form helper for a static form or can you make do with the pain of writing the html once?
6. Use eager loading for models with has_many relationships (http://railscasts.com/episodes/22-eager-loading)
7. Automatic asset minimisation – http://davetroy.blogspot.com/2007/12/automatic-asset-minimization-and.html
8. Use Rails’ excellent Page/Action/SQL caching helpers http://guides.rubyonrails.org/caching_with_rails.html

Use Yslow to identify bottlenecks

1. Use firefox add-on Yslow (https://addons.mozilla.org/en-US/firefox/addon/5369)
2. It requires Firebug, which if you don’t already have it, is a good tool to have anyway (https://addons.mozilla.org/en-US/firefox/addon/1843)

Do you have any more? Feedback welcome.

~ by Alex on April 7, 2009.