I work for a web development group at a University in the Houston area. Sometimes we get tips, etc from collegues and instead of letting this languish in my gmail archive, I decided to post it here so I can easily find it later, and so that others might beneifit.
This one comes from Jack Auses at University of Chicago...
---------------------------------------------------------------------------------
Hi folks:
In coding the new homepage and central structure I've been learning
up on ways to reduce the file size of web pages, especially for sites
that are image and JavaScript heavy. The new central structure
definitely falls in to this category, so I've been paying close
attention to total page weight.
One resource that has guided my homepage efforts is the Yahoo!
Developer Network's Best Practices for Speeding Up Your Web Site.
http://developer.yahoo.com/performance/rules.htmlThere is a Firefox extension, developed by Yahoo! called YSlow (an
add-on to Firebug) that analyzes web pages for speed optimization. It
has been a great help to me in sorting all this stuff out and I would
recommend we all install it.
https://addons.mozilla.org/en-US/firefox/addon/5369The new central structure adheres the following speed improvement
guidelines:
1.
Gzip Components - I asked Davey about this at lunch the other day
and, coincidentally, Webadmin was discussing enabling Gzip on K-Split
and Goat this week. They've done that on Goat for
betadev.uchicago.edu and if their production testing is successful,
will enable it on beta.uchicago.edu. After enabling Gzip, the un-
cached size of the new homepage was reduced by almost 200k.
For those of you who don't know, Gzip is a server technology that's
been around for awhile where text files (.html, .css, .js, etc.) are
served compressed (just like a zip archive). The files are then
uncompressed by the browser on the client end. This is huge in
improving the speed at which pages load.
2.
Put Stylesheets at the Top - duh.
3.
Put Scripts at the Bottom - This was new to me. All calls to
external scripts are now at the bottom of the pages right before the
closing body tag.
4.
Make JavaScript and CSS External - again, duh.
5.
Minify JavaScript - this has proved very handy as well. I shrunk
all of the JavaScript used in the new central structure with an
online tool called ShrinkSafe.
http://alex.dojotoolkit.org/shrinksafe/It worked like a charm and reduced the JavaScript footprint by
almost 50%.
I also used a similar tool to optimize my CSS, called CodeBeautifier.
http://www.codebeautifier.com/ I had to play around with the settings
to get it to do what I wanted, but it reduced my 50k CSS file down to
under 30k. HOOOTTTTTT!
The following guidelines didn't apply to the central structure:
1. Reduce DNS Lookups
2. Avoid CSS Expressions
3. Avoid CSS Expressions
4. Avoid Redirects
5. Remove Duplicate Scripts
6. Make Ajax Cacheable
To put all this into context, before applying these speed
optimizations, the un-cached homepage was clocking in at over 900k,
with all the images and scripts we're using. It's now coming in at
305.4k. Erik compared a few other school sites that we have looked at
recently. Notre Dame's new homepage is over 1MB and NC State's site
is 1.28MB. Bloat Town!
Cornell's homepage is 238k, however they don't use any JavaScript and
very little in the way of CSS background images or large images. So
we're a little larger than Cornell, but our site does a lot more in
terms of interface effects...and it's just downright cooler. So
there.
Jack
--------------------
Jack Auses
Senior Site Developer
The University of Chicago
