After being a Level 3 Support Engineer for a year and a half I have seen pretty much everything related to WPO (Web Performance Optimization). One thing that I have noticed is that a lot of new MaxCDN customers sign up thinking:

“Ah ha, finally the silver bullet! Once I enable a Content Delivery Network, my site will be faster than ever!”

For a SMALL minority of customers that actually happens. But for the majority this isn’t the case. Why is that? What are the customers that see major improvements doing that the others are not? It’s simple really, these customers follow the rules created by Steve Souders which have been battle tested by the WPO community.

The following three steps will help you not only make your site faster but also save a lot of money.

1. Minify CSS & JS
2. GZIP Compression
3. Lossless Compression / Image Optimization

1. Minify CSS & JS

You have probably heard this rule stated over and over and over again. Is it a pain in the ass? Yeah it can be, but anything worth anything takes time and sacrifice. Lets see how minifying your CSS can effect your bottom line:

bootstrap.css (Not Minified):

• 4096 Lines of Code
• 98kb in size

bootstrap.min.css:

• 9 Lines of Code
• 81kb in size

You might say “17kb is not that big of deal”. Well in fact it is. If the file (not minified) gets requested 100,000 times a day. That is roughly 9.25 gigabytes that will be transferred per day.

Lets assume your Web Host or CDN charges you $0.06 per gigabyte. Here is a comparison between minify off vs minify on:

Here are some ways you can get started with Minify:

• http://refresh-sf.com/yui/
• http://code.google.com/p/minify/

2. GZIP Compression

On NetDNA‘s platform customers can (and are encourgaed to) gzip the following mime (file) types:

• text/plain
• text/html
• text/javascript
• text/css
• text/xml
• application/javascript
• application/x-javascript
• application/xml
• text/x-component
• application/json
• application/xhtml+xml
• application/rss+xml
• application/atom+xml
• app/vnd.ms-fontobject
• image/svg+xml
• application/x-font-ttf
• font/opentype

Let’s stick with the bootstrap.min.css for this example. We already learned that we can save $25 a year just with minifying your 87kb CSS file. Lets save even more shall we? Check out how much we can save by enabling gzip.

bootstrap.min.css:

• 9 Lines of Code
• 81K in size

bootstrap.min.css.gz:

• 56 Lines of Code (Binary)
• 13K in size

We just saved 68kb! So using the same example above: 13kb x 100,000 request = 1.24gb / day. Let’s see how much money we save now:

If minifying and gziping one file can save you $130 a year, imagine if you optimized all of your CSS and Javascript…

GZIP Compression Resources:

• http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
• https://developers.google.com/speed/articles/gzip
• http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_3/
• http://www.gzip.org/
• http://en.wikipedia.org/wiki/Gzip

3. Lossless Compression / Image Optimization

Let’s compare two PNG images called: Max.png & Max-Optimized.png. From the naked eye the images looks identical. You will also see that there is a significant file size reduction (25kb). How can this be?

Regular (37kb)	Optimized (12kb)
Meta Data (Not Optimized)	Meta Data (Optimized)

You will notice above all the  unecessary meta data that Photoshop puts in the file by default. Removing meta data is possible by doing the following steps below. Lets assume you have Adobe Photoshop (I am sure GIMP has similar options).

First we will export Max.png:

PNG-24, All Metadata, Transparency
“Save for Web & Devices” – Adobe Photoshop CS5

Now lets export the same image but this time in an optimized state:

PNG-8, No Metadata, No Transparency
“Save for Web & Devices” – Adobe Photoshop CS5

I know that the background of this blog is gray (#EAEEEF) I chose not to use transparency. If you don’t need transparency then do not export your images with it enabled, it adds to the file size.

We are going to stick with the 100,000 request a day theme:

#ProTip You can use PageSpeed Insights for Chrome to view/export images that need to be optimized:

Here are some other ways/programs to help you optimize your images:

• http://www.smushit.com/ysmush.it/
• http://www.8bitalpha.com/ (Thanks @patmeenan)
• http://jpegclub.org/
• http://freecode.com/projects/jpegoptim
• http://optipng.sourceforge.net/
• http://www.advsys.net/ken/util/pngout.htm
• http://docs.gimp.org/en/gimp-images-out.html#file-png-load
• http://www.imagemagick.org/script/jp2.php
• https://developers.google.com/speed/pagespeed/insights_extensions
• https://developers.google.com/speed/docs/best-practices/payload#CompressImages

Besides saving money you will also help speed up the web. I am not going to lie, optimizing your site can be a time consuming task. It takes a culture change within your organization. If you act now, your CFO & users will thank you later.