Articles, Tips

Size Really Does Matter

November 18, 2009 • By

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.

By compressing my html, css, and javascript I can serve smaller files and therefore speed up delivery time for the end-user of my sites. These ideas aren’t new, but I’m a designer — not a programmer — so, shrinking my code hasn’t been on the top of my list. Until now.

Sizing Up the Options

Minify

img-01

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.

Obfuscation

img-02

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.

Gzipping

img-03

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.

Minify

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.

size-01

From the Minify site, this example shows a 70% reduction in bandwith.

It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers. A terrific tutorial from Steve Clay walks you through the basics of setting up Minify and getting it to work for you.

YUI Compressor

img-04

In an attempt to safely minify your javascript and css, the YUI Compressor from Yahoo! is another favorite for minifying your code. According to the website, this tool was developed to combat drawbacks in some of the popular minification tools, including: Douglas Crockford’s JSMIN, the Dojo compressor and Dean Edwards’ Packer. The YUI Compressor site claims improved savings as compared to JSMIN.

WP Minify

img-05

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.”

Joomla users have SC Minify that also uses Minify to combine and minify your css and javascript, though this is still an early release and may still have some bugs to work out.

Simpler Options

If the tools listed above are way too complex for you, or you’re looking for a quicker way to have an impact on your file size, the Javascript Compressor is an online tool where you can paste your javascript into a form and have it generate a compressed version of your code. Easy to use, and a great way to jump in to file size reduction.

size-02

The Javascript Compressor tool offers a simple way to compress your javascript. Similarly, JSCompress.com allows you to upload your javascript and choose the JSMin or the Packer compression method.

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.

size-03

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.

Measuring Up

img-06

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).

(Visited 393 times, 1 visits today)