Page speed and load times are the foundation for a positive user experience on the web.

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
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