Thanks for visiting! While you´re here feel free to take a look at my blog, view my recent work, or view my portfolio.
Unfortunately, I am not available for freelance work at the moment.
So, I was able to play one of my favorite games this last week. I call it the “Web Optimization Game”. The game basically involves trying to figure out just how well you can optimize your web pages to get them to load faster and FASTER! Ok, so it’s not for everyone but man do I love it.
In all seriousness web optimization is one of the funnest parts of creating an application. Not only is it relatively simple and non-time consuming but it can yield some great rewards. There is some sort of magic in watching the load time of a page go down, down, down the more you tweak and optimize the page.
This time around I was able to leverage a great tool. It’s called “YSlow“. It was introduced to me by my good friend Ravi Thinakkal or as I like to call him “Yahoo CSS Template Lover”. YSlow is available through the FireFox “Add-ons” tool and was actually developed by Yahoo. It works right within firebug and is able to verify whether or not you have taken the proper steps to fully optimize your web page. It has 13 checks:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Put JS at the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
After it runs these checks it gives you a grade level for each criteria; A-F based on how well your site measured up. As much as I would like to go through all 13 steps I wouldn’t want to ruin all the fun you’ll have figuring it all out.
The interesting thing I found was that with very tiny modifications here and there, such as moving the JavaScript files to the base of the DOM right above the closing <body> tag, I was able to knock off almost 2 seconds of load time. By using sprites I was able to cut way down on “http” requests, thus further decreasing page load time. After doing all of this, as well as minifying, Gziping and caching Javascript and CSS files, we were able to take the site from a 5-7 second load time to under a second! The best part about it was that we didn’t have to make any major tweaks to the architecture of the application and we didn’t have to mess with the back-end very much at all.
There is a great book that I think every Front-End Engineer or UX Developer should have as required reading. It is called “High Performing Websites” by Steve Souders (Also introduced to me by the, before mentioned, “Yahoo CSS Template Lover” ). It actually goes over all 13 of the YSlow verification steps in detail. There are actually 14 steps in the book. The 14th is “Make Ajax Cacheable”. I highly recommend this book.
The best part about these techniques is that you see instant results. With each optimization step you can see the load time of your site getting faster and faster. In the end it makes for a much more pleasing experience for you and your end user. You are getting your user the content they need quicker and getting them to where they need to go faster.
Through optimization you can greatly minimize bandwidth usage and in the end that just means less money spent, especially if it is a major application that’s accessed constantly throughout the day. Before you know it your boss will be giving you high-fives and treating you to Sushi… ok maybe not, but you get the point.
So, the next time you get a little free time, download firebug and YSlow and play the “Web Optimization Game”.
Jeremy “Jonsin” -
Are you calling me “Yahoo CSS Template Lover” because you don’t know how to spell my last name? Please note that it is called a CSS framework, not template.
Here are some more links you may like:
- Y! 20 More Rules
- Jiffy Firebug Extension for client side performance analysis
- KITE – Like YSlow, but on steroids! Anaylzes your performance from different places in the world
When your boss buys you sushi, don’t forget to save me a piece! And can you help a brother other by telling my manager about your success stories before my year-end review. JKJJ (just kidding, Jeremy Johnson).
Ha! I’m calling you a “CSS Template Lover” because you love Yahoo CSS Frameworks and Templates.
Thanks for the extra links. You are the masta!