No Optimization - Huge/bad/gross

No css or styles inline. Tables for layout. Scripts directly on page. Won’t even  bother showing an example.

Step 1. Separate code - 283 KB

Style is separated from content (separate .css). Behavior is separated from content (separate .js). Images are used wisely ( for instance 1px background image that repeats horizontally)

Step 2. Compress images, then compress again - 239 KB [44K less]

Choose the correct file type for each image (JPG for photos, PNG > GIF). Compress each image (using photoshop). PNG images can be compressed again (pngslim removes meta and shuffles bits - like defrag)

Step 3. Minify styles and scripts - 158 KB [81K less]

View compressed script library, or layout css. For Javascript we use JSMin (removes comments white space. Need well-formed code.) There are other algorithms like packer, but they requires non-trivial client-side processing time to uncompress the code. For CSS we use CSStidy ( removes white space., compresses colors, combines styles)

Step 4. Enable HTTP compression - 70 KB [88K less]

Note that this is our live version! Text is compressed by server and uncompressed by browser. Unsupported browsers will receive uncompressed version (wiki). Browser support: Internet Explorer (>= 4.0) FireFox (all) Netscape (>= 4.06) Opera (>=5.12) Images are not compressed further (doesn’t result in smaller size).
Minified files compress better then original.

Total Optimization

283 KB original
70 KB compressed
—————————
213 KB saved [That over a 2/3 savings]

And it adds up quickly!

Over the past year (Aug 4, 2007 - Aug 4. 2008) the site received:

• 32,550,230 Pageviews from
• 2,213,198 Absolute Unique Visitors

If 13KB was saved per pageview, then:

213 kilobytes * 32,550,230 pageviews = 6.5 terabytes of bandwidth saved

Or, with best-possible caching:

First page: 213 kilobytes * 2,213,198pages = 449.6 gigabytes
Subsequent pages: (32,550,230-2,213,198) pages * 20KB (html+images) = 578.6 gigabytes

So…

Between 1 and 6.5TB saved annually (not to mention the amount of time saved for our end-users)

It is available now in the app store and cost the same as wordpress.org - absolutly nothing!

The interface is refreshingly simple and easy to use. There does not seem to be a WYSIWYG editor, but basic HTML should still work.

You can even include images stored on your phone. The final image below shows the interface. The others are just random images that were on the phone.

The problem

Unfortunatly, you have static pages and would have to update each one to add the <link> tag. At PCC, we have a site composed of tens-of-thousands of pages. Some are static, some are dynamic applications we can alter, some are closed vendor products.

The solution

Like I said - we have many different types of pages. However, they all use the same JavaScript library!

JS is really good at inserting content into the page. We use the jQuery library, so adding a feed is as easy as:


/* add feed autofind! */
$("head").append('<link rel="alternate" type="application/rss+xml" title="News Releases | Portland Community College" href="http://www.pcc.edu/about/feeds/news/" />');

We can now add/remove feeds at a later date without opening every page on the site. If desired, the script could check the URL and only display the feed on appropriate pages, but for now lets put them everywhere.

Final Thoughts

I looked around the web, but didn’t see much discussion on this meathod. It seems to work in all modern browsers, but let me know if you find any problems.

“We’re doing an iPhone-native WordPress client, check out the screencast here. It will work for both .com and .org, be available FREE from the App Store, and best of all it’s going to be completely Open Source, which as far as I know no current apps in the store are.”

For me this is the “killer app” that I have been waiting for. Until now - you had to edit your blog through the safari browser. It worked, but it was not easy. I will post a review as soon as it becomes available in the app store.

The problem?

FeedBurner is a great service and probably will stay that way since it was recently acuired by google. However, it is still a 3rd-party service and that’s somthing you should always be worried about.

You see, when someone subscribes to a burned feed, they will be pointing the agregator to: <feeds.feedburner.com/your-feed>. This means that you will loose all of your subscribers if any of the following happens:

• FeedBurner goes down, closes shop, or starts charging an outrageous fee. (unlikely)
• The person who set up the account forgets the password, or becomes a disgruntled employee. (possible)
• A better service comes along and you decide to switch. (very likley)

The solution

The simple solution is to have users subscribe to a feed on your domain.

1. Create a folder structure for the feeds - like: /feeds/news/ and /feeds/videos.
2. In each folder create an index page using you favorite server-side language - index.php, index.cfm, etc. This gives us added flexibility. We can even change the language at a later date!
3. Use this page to mirror the FeedBurner feed. below is an example in ColdFusion. In PHP you will want to look into cURL:

<!----------------------------------------------------------------------------------------------------
-  This is a placeholder for a feed.
-  Make sure to link to the folder and not this .cfm page for even more flexibility.
-  Created:   2008-04-09 Gabriel McGovern
-  Modified:
----------------------------------------------------------------------------------------------------->

<cfhttp url="http://feeds.feedburner.com/pcc-videos/">
<cfoutput>#cfhttp.filecontent#</cfoutput>