Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Honey I Shrunk the Website

September 20, 2010 by Web Strategy and Development

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Honey I Shrunk the KidsWeb pages should load fast. Period. It’s irritating for any reason to wait on a computer. As a web developer, so many of the factors that go into page loading speed are outside of our control. However, some of the biggest ones are fixable with a minimal amount of work. The effort isn’t really justified for every page, but high traffic pages (like the university homepage) are definitely worth it.

Formatting for speed

As a programmer, I much prefer to maintain nicely formatted code. But when you are after speed, the whitespace has got to go. You can reduce the size of your page significantly. Smaller code size = less bandwidth used = faster load times = win for everyone but the programmer. Removing whitespace is effective on the HTML of the page, stylesheets and JavaScript.

Beyond whitespace

With JavaScript you can optimize even further. Tools such as Google’s Closure-Compiler can not only remove whitespace, but perform some pretty hefty optimizations on your code. For our redesign, Closure-Compiler reduced a 38KB file down to 14KB – and size was only part of the speed benefits it gave.

All zipped and ready

In today’s world, why would you send uncompressed resources? Processing power is cheap – it’s network speeds that still seem to limit us. Text files such as HTML, CSS and JavaScript can easily be compressed on the fly by almost any modern web server – as long as you have the processing power to spare. That 14KB JavaScript file actually gzips down to a measly 5.2KB. That brings our combined savings on that file alone up to nearly 87%!

Compression Resources

  • IIS 7 Compression. Good? Bad? How much?
  • Compress Web Output Using mod_gzip and Apache

Zero is less than something

Of course downloading nothing is always faster. Usage stats show us that we have a high degree of returning visitors to our homepage. By setting some pretty aggressive cache headers, users only have to request new HTML. All of the images, stylesheets and scripts can be loaded from what they got on their last visit.

Cache headers are somewhat confusing and can have unintended side effects. Google has a great article on the relevant cache headers: http://code.google.com/speed/page-speed/docs/caching.html

Tools of the trade

Optimizing your site for loading speed can be a daunting task. There are a few tools that make this easier. My personal favorite is Google Page Speed (an addon for FireBug). In addition to a prioritized list of suggestions, several optimizations can be run within the tool itself such as image optmization and whitespace removal.

This is the second post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

  • Johnny Five is Alive (HTML5)
  • About the Author
  • Latest Posts

About Web Strategy and Development

  • Celebrate Global Accessibility Awareness Day (GAAD) on May 19 - May 16, 2022
  • New Content Management System Coming Soon - March 3, 2021
  • Meet our newest team member: Valerie Cummings - October 20, 2020
  • Graduate students: Share the stories of MSU - May 1, 2019
  • New design for university websites - April 17, 2019
  • Marketing and communications offices have new names - July 6, 2018
  • Social Media Kit: Spring 2018 Public Affairs Conference - March 27, 2018
  • Lessons learned from the Alumni Association and Bear Bulletin redesigns - March 2, 2018
  • Be smart on social: You’re one of us - February 27, 2018
  • Recap: Making Your Statement in a Digital World, Spring 2018 - February 26, 2018

Filed Under: Redesign, Technical, Web redesign 2010, web strategy and development Tagged With: css, html, javascript, solex

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Redesign
    • Academic websites
    • Web redesign 2010
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: July 2, 2018
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.