Let’s face it, if your page fails to load in time, all the effort put towards information architecture, content strategy and interaction design will be for naught. During my formative front-end coding days, I did a fair bit of assuming that as Internet connections transitioned from dial up to DSL I’d be able to make compromises.  Piling sprite-less PNGs upon redundant CSS upon tons of HTTP requests became commonplace, and a few seconds for a page load seemed worth it.

Not Seconds, Milliseconds

But that’s not really how things are.  We close out the windows of tweeted links if the load bar lags.  We leave news and shopping sites early if they feel unresponsive and sluggish.  If a site is slow, the amount of time we’re willing to continue to invest decreases exponentially with every second... every millisecond. Bing and Google agree that slow pages lose users. Each company ran similar experiments where they deliberately delay server response time by a varying number of milliseconds finding that the longer users wait the less engaged they are with a page and the more likely they are to leave.

But good things come to those who wait. Right?

It’s tempting to want to build in enhancements-- if all those extra layers of functionality make a site more interesting, so what if they add to load times, right?  I’m not so sure.  Is it wise to assume that these features are something users will happily wait for? Users don’t crack open their browser thinking, “I can’t wait to experience the Acme Company’s website.”  They’re thinking, “I want to find a product / service / answer as quickly & easily as possible.” Waiting for content online isn’t about patience, it’s about simplicity. John Maeda sums it up brilliantly in his Laws of Simplicity (#3)

No one likes to suffer the frustration of waiting. Thus all of us, consumers and companies alike, often try to find ways to beat the ticking hand of time. We go out of our way to find the quickest option or any other means to reduce our frustration. When any interaction with products or service providers happens quickly, we attribute this efficiency to the perceived simplicity of experience.

We are building websites and creating user experiences for human beings.  More likely than not, that ‘good thing’ the user is waiting for isn’t your website-- it’s family dinner, time with their kids, or a few extra minutes of sleep.

We Are Presenters

But our job isn’t binary.  Unlike UPS or FedEx, whose job it is to get something from point A to B, web builders aren’t charged with just delivering information, but presenting that information through design.  Imagine a site like CampaignMonitor without its unique style, layout and imagery.  The design makes it easier to learn about the service, saving users time and effort. The balancing act here is to think critically about the graphics, scripts and code we’re serving to our users.  There’s an economy to it-- a give and take that shouldn’t be considered mid-process, but from the get-go.

The How-To

I’ll be the first to admit I’m no expert; nor do I consider myself a shining example of best practices.  Thankfully, Dave Rupert has been waving the page speed banner at Paravel for quite some time.  He’s led the way in changing the way we plan, design and code for web projects from the beginning to prevent users from having to wait to find & load content. Here are some resources & tips Paravel has found handy over the months/years. Whether you choose to lessen textures, simplify a design, and/or even swap images in favor of CSS3, that’s up to you. As we’ve found, little shifts, baby steps, can lead to a lot of gradual improvement over time. The most important thing one can do is to view a site visit not only as an impression or a page view, but also as a small part of someone’s day.

Resources

• Web Performant WordPress: 5 steps to a faster website from Dave Rupert
• Firebug: Firefox plugin for performance analysis
• Yslow: Firebug plugin from Yahoo that grades your page speed
• Google Page Speed: Evaluate website performance via Firebug
• Which Loads Faster: Pages compete in your browser for quickest load
• WP Super Cache: If you run WordPress, you need this.

Image Compression & Sprites

• Image Optim: A simple drag & drop for images, reducing disk space
• Smush.it: Batch shrink images while retaining file structure
• SpriteMe: Automatic image sprites and CSS for everyone!
• Specify Image Dimensions: Part of a Google article about optimizing browser rendering

Efficient CSS

• Minify CSS: Compress CSS & JS
• Efficiently Rendering CSS: Solid tips for how to keep your CSS lean & mean
• CSS Sprites Workflow: Chris Coyier’s implementation workflow

My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.
.tag_list ul {
-webkit-column-count: 4; -webkit-column-gap:20px;
-moz-column-count:4; -moz-column-gap:20px;
-o-column-count:4; -o-column-gap:20px;
column-count:4; column-gap:20px;
}

Safari / Chrome shuffles an extra item into the last column & hides my last tag.

Mobile Safari does better, showing all tags & arraying them in left-hand columns first.

Firefox performs fairly well, filling out each column from left to right.

Opera doesn’t currently offer support for column-count.

Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site.  That being said, I’m happy to continue to use this for my Tags list.  It’s lightweight, efficient and a constant reminder that the web is ever-evolving.

Click here to visit Dave’s site & download the WP Dribbble plugin.

It may not look like it, but this version is a complete code & design overhaul. Tiny annoyances with my style sheet and page structure compounded over the past few months until I happily yielded to the urge to start messin’.

Outside The Box

I love the 960x400 pixel graphic playground that the banner box above provides. In this version I went a step further and built in the ability to define the style for the entire page body whether or not it fits in the banner box. Dave helped me adapt this code that pulls a custom css field from a wordpress post and echo it in the within the head tag.

Centered Page Layout

The left justified layout (shown right) provided an easy way to frame large & somewhat incomplete banner box photos, but having all that content shoved to one side felt unbalanced and drove me mad... sort of like sitting down with an overstuffed wallet in your back pocket.

Notes Section

This section is for quick posts, links and tips. I felt like it was bad e-karma to come across something valuable online & not share it. Most of us design types have googled “negative margins in ie6″ or spent hours searching for some graphic inspiration. For those of you publishing good online content, I appreciate it.

Threaded Comments

WordPress offers it and I wanted to take advantage. Possibly (but probably not) unique to this site, my replies will be displayed in the right margin.

Shorter Line Length

While there is some debate on the optimal number of characters per line in regards to readability, I wanted to cut the 100+ CPL down quite a bit to suit my own preference. Narrowing the post entry column also defined a standard space to the right for blockquotes, photos, and reference links.