Whether you’re talking about weight, height, or the code for a website, the truth is that size really does matter. It isn’t a question of whether or not size matters — in one way or another, our experiences have shown that it does. The real question is how much does size matter? And how much does it matter when it comes to your code?
On the web, size is a major factor in the quality of the user experience. Its a fact — keep visitors waiting and you’re sure to lose them. Every front-end web designer knows there are things we can do to minimize file size and therefore, reduce download times. In short, we recognize size matters.
So, we diligently optimize our images and we use cleaner, leaner code. We use external stylesheets and external scripts — and we combine (concatenate) them into single, larger files (since one large file downloads faster that a lot of little files). And based on the same premise, we use CSS sprites and image maps to further optimize our web pages and reduce download time.
Yet, with my goal of creating web design that serves the user I wondered if there was more I could do to optimize my pages. And I soon realized that there was.
Sizing Up the Options
Essentially, minifying your code means eliminating unnecesarry characters from your code that serve no purpose for your end-users (like extra whitespace or comments) with the goal of reducing your file size. Smaller file size equals faster download times. Size matters.
The thing to note about minification is that it is a lossy compression method. This process intentionally discards unnecessary characters in order to reduce file size.
Related to minification, obfuscated code also removes unecessary characters, but it takes code reduction to the next level by compacting things like function and variable names. The main purpose of obfuscation is to protect code from unauthorized usage, but it also reduces file size.
Smaller file size equals faster download times. Size matters.
The problem with obfuscation for most of us front-end designers is that it adds a level of complexity, sometimes introducing bugs and generally making debugging much more difficult. Obfuscation doesn’t really seem necessary for your run-of-the-mill web site, but it does shrink file size, so its worth mentioning.
Similar to zipping your files, gzip is a method of compressing your files to reduce size. If the browser can handle gzipped content your server sends it along, otherwise it sends the uncompressed content. Compressed files means smaller files, and smaller files means faster downloads. Size matters.
Unlike minification, Gzip is a lossless compression method. Just like when extract a zipped file, gzip files are restored to the exact original.
Tools to Tinker With
So you’ve come to grips with the fact that in code, just as in life, size really does matter. You’re ready to get your code as lean and mean as your images. Here’s how to start thinking small… The best idea is to combine minification with gzipping to achieve the smallest file possible without the additional complexity of obfuscation. There are a number of tools available for reducing your file size and speeding up your site.
This tool does everything, minifying and gzipping your content with one simple tool. Minify is a PHP5 app coded by Steve Clay and Ryan Grove that helps you follow several of Yahoo!’s Rules for High Performance Web Sites.
“From the Minify site, this example shows a 70% reduction in bandwith.”
If you’re using WordPress, then you’re in luck. The WP Minify plugin from Thaya Kareeson “integrates the Minify engine into your WordPress blog. Once enabled, this plugin will combine and compress JS and CSS files to improve page load time.”
What About Gzip?
If you’ve looked into gzipping, it may have seemed overly complex, but this tutorial from BetterExplained.com gives you the details in an easy to understand manner. The general idea is to either add some code to your .htaccess file or use php to return compressed content if the browser can handle it, and if not send the uncompressed file. Fortunately, many hosting companies are already set up to gzip encode your content or offer you the ability to turn it on in your control panel.
There’s More: Firebug and YSlow
If you’re looking for a way to test and grade your website performance, check out YSlow from Yahoo! YSlow is a tool that’s integrated with Firebug that helps you measure your site performance and offers advice based on the results. This year, google has introduced its own page performace testing tool called PageSpeed — also a Firebug add-on that offers an alternative to YSlow.
And, if these tools have left you wanting more, Yahoo!’s YSlow now comes with Smush.it, a utility for additional image optimization. A lossless compression tool, Smush.it eliminates unnecessary bytes from your files without affecting its visual integrity.
Running Smush.it on my colleague’s homepage, I can reduce the total size of the images used by just over 4.5%. Sure, its only 1.39kb. Still, every little bit helps.
“Using Smush.it to compress my images, I can cut my image file sizes even smaller than my already optimized versions without losing quality.”
You can try it out to see how many bytes you can save per image, and then decide whether or not you’d like to use the “smushed” images. Or, if you have Firebug and YSlow you can “smush” while testing and optimizing the rest of your page.
The bottom line is that in code, as in life, size matters — but its not ALL that matters. Its up to each of us to determine to what extent size makes the difference. If you’re looking for more ideas to optimize your web sites, check out Yahoo!’s Best Practices for Speeding Up Your Web Site or check out Website Optimization: Speed, Search Engine & Conversion Rate Secrets by Andrew King (from O’Reilly Media).