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
Ads by Fusion

36 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Niki Brown

    I just started using the Yslow plugin which has helped remind me of all those things that I tend to forget about when I’m in design mode.

    Another thing I do is test sites using 3g on my iPhone - as a point of comparison for slower connections.

  • Dan

    Trent, this is a great write up on a pretty important and often overlooked topic. As a whole our culture has become so dependent upon the immediate. If we don’t get what we want from the first source someone else will surely offer it faster. In order to be successful it really is all about those milliseconds. The balance of ease of use, good looks and speed is a delicate one, and difficult to master. I really enjoyed the quote from John Maeda, I hadn’t thought before of how the ease of use perception is skewed by speed.

    I am happy to see a return to a focus on speed, as I think many of us were in that bandwagon of ‘hey it’s broadband, right’. I think mobile has helped bring a focus back to speed and the sense of urgency behind receiving information immediately.

    Also, thanks for the resources. The sprites workflow is a great tool.

  • Trent

    @Niki Brown:

    Another thing I do is test sites using 3g on my iPhone – as a point of comparison for slower connections.

    Not a bad idea... for both mobile & full versions of a site.

    @Dan:

    As a whole our culture has become so dependent upon the immediate.

    For better and for worse I’d say. I think it’s both impatience and a desire for efficiency all rolled into one. As you said, if the first source isn’t quick enough, people will find the path of least resistance.

  • Ben Shoults

    Though design focused, the same principles can include content as well. Your post was short, to the point and well written. It’s easy to write an essay, but I find myself not reading them (as good as they may be). Great post sir.

  • David Arnold

    Trent, I totally agree with the points you make here... we definitely need more heavy loading FLASH!

    But in all seriousness, yslow rocked my world when the plugin first came out for firefox. I’ve been gzipping, minifying, and spriting ever since. The really awesome thing is to see how many tools have come out to help your average Joe hop on board; I had to pretty much manually create the tools when I was learning.

  • Doug Vander Meulen

    Thanks for the reminder and resources on this topic. There are several sites I have built that could use a tune up. I think this site serves as a good example of a quality looking site that isn’t bloated with tons of images or http requests.

  • Trent

    @David Arnold: Hooray for optimization tools! I’ve found that even using just a few of these can go a long way. If someone isn’t comfortable with gzip, they can surely be smushing images and writing efficient CSS. Of course, if they want to go full out & need help, they can always hire you ;)

  • Christoph

    Haha, I knew somebody would bring up Flash. I’d just like to give my two cents to that.

    Flash loads just as fast as HTML.

    The difference is that the browser shows every single thing it loads right away, as quickly as it can make sense of it. Most Flash developers first load a big site framework, then the whole site with images, videos, etc and then start showing anything. It’s like loading first the Javascript, then the images and videos, then the content and finally putting something in front of you. It’s the reverse process.

    So IMHO, this is more due to practices in the Flash industry, not Flash itself.

    Yay, Flash vs. HTML! Let’s duke it out!

  • Jason Gross

    Great post! I would also say that the placement of a sites content and how easy it is for a user to find information is just as important as the page load time itself. I often find myself leaving a site if I can’t find the information I am looking for, even if the entire page loads just fine. This whole idea of getting the context of the page to the user in a quick and simple way is something that can be dissected from multiple angles.

  • mostafa omar

    yes , very good article indeed. i believe front-end performance will get more attention because of google support. and the most important things dealing with JavaScript for progressive download will make the page appears to load faster for the users

    but there are important techniques not covered by this article : talking about lazy loading for example :)

  • Ted Goas

    Great summary. A few more tools to build on what you have:

    AOL’s Web Page Test (whoa, they redesigned the site). Great waterfalls and pie charts that show the pain points of a page’s load time.
    A lot of tricky things can be done in the .htaccess file (gzipping, far ahead expires. more). Much of it is over my head, but there’s a neat little ready-made drop-in .htaccess file to help get started.
    Also Stoyan is working on YUI Desktop Compressor (a Windows equivalent of ImageOptim). Probably shouldn’t speak for him on it, though!

  • Trent

    @Jason Gross: I couldn’t agree more, and I think this is where the design comes into play: helping sites to communicate efficiently.

  • Patrick Haney

    Really interesting take on page load times from the user’s point of view. I especially found the idea that the “good thing” the user is waiting for isn’t your website at all, it’s something unrelated to using a computer. They’re looking for something, they want it fast, and then they want to get back to whatever it is that they have going on with their family and friends, or even their job.

    Glad to see the topic of website performance hasn’t been lost with all the increases in bandwidth over the years. Especially with mobile devices still lagging behind in performance of their own.

  • Amber Weinberg

    I spent a lot of time trying to get my own website up and running fast - and finally had to scrap the whole design and start from scratch. There’s definitely a talent to getting it right.

  • Octavio Corral

    “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.”

    That was very well said. Throughout these long project cycles, we often forget that the majority of our sites are only visited from 1 to 5 minutes in a full day filled with more important things to worry about.

  • David Arnold

    @Christoph: Flash can be very lightweight, it’s just that in the majority of cases flash devs (I develop flash too) don’t heavily optimize all the components they throw in there.

    @Trent “You can’t buy me hot dog man” http://www.hulu.com/watch/99944/saturday-night-live-digital-short-on-the-ground

  • Ben Smithett

    Great post.

    Any thoughts on the diminished user experience that can come with moving things from images to CSS3? I recently used a massive radial gradient that looked fine on my PC, but when I tested it on a slightly slower machine the browser ground to a halt to render it every time I scrolled. I ended up just going with a PNG, figured a slightly longer wait for the initial load was better than a sucky user experience the whole time.

    That was a single gradient. Once we start seeing big sites use CSS for every gradient, round corner, shadow, glow & transition, is all that client-side image processing going to have an effect on usability that outweighs load time?

    Also, Firefox Throttle is an awesome tool. Throttle your connection speed to see how your site loads over a 56k modem.

  • Trent

    @Octavio Corral: Indeed- and during those few minutes they may be doing more than just browsing.

    @Ben Smithett: Some really good thoughts... I’ve noticed that visual effects, especially CSS animations, can severely tax processors if they’re on a loop. On the flip side, I’ve been using properties like border-radius, box/text-shadow and rgba/hsla color with no noticeable performance issues. It’s definitely something to consider & test for. I wonder if anyone else has experienced similar issues.

  • Jon Larama

    Once again ... another great article from Trent to bookmark. Keep it up man!!!

  • Tom Arnfeld

    This is a great article, resources are useful too!!

  • Brant Tedeschi

    Great topic. . . I actually just made a comic related to this and maybe you guys will like it.

    http://i.imgur.com/Ak8qq.png

  • Bret Glassett

    Trent - Great read. Sometimes in the rush to push a site out the door we forget to slow down and review our work and finalize the details; such as site load times. Smashing had a couple of descent articles on optimizing JPG’s and PNG’s respectively:

    http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
    http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

    Cheers,
    Bret

  • Trent

    @Jon Larama, @Tom Arnfeld & @Brant Tedeschi: Thanks fellas.
    @Bret Glassett: Those are some great resources. Thanks for sharing.

  • malihu

    @David Arnold: I mostly agree but the simple thing with flash devs is that almost everyone is implementing some kind of preloader on their apps. It is stunning how people can wait a whole minute without feeling frustrated, as long as they see that “loading” and how they leave a page if some css or images hang for few seconds. People don’t mind loading times so much as long as they feel that everything work as expected.

  • Bret Glassett

    One more note - often in doing our memory intensive sites (such as Magento ecommerce) we find that the server hardware itself and its configuration can make volumes of difference in a site performance; at least for the users with hi speed connections. SSD rules.

    Cheers,
    Bret

  • Sebastian

    I totally agree to your points! Speed is King for every web app or web service. I remember well how much we tried and discussed at our social productivity service “Idonext” (http://www.idonext.com) relating where our servers and often-loaded code parts are distributed on the planet (web roundtrip time!), fine-tuning Javascript of the Web 2.0 web app and nervously monitoring how long Ajax/XHR requests take over the day on different locations and under different server load situations.

    These days users expect a website and especially a web app to feel more and more like a desktop app. And UI speed/performance is still the major difference between web and desktop. That’s why for example we nearly completely set on Ajax for a web app and optimize wherever and whatever we can. A web app’s page is actually NOT ALLOWED to reload (and become white for some seconds) and every necessary data needs to load silently in the background without disturbing the user.

  • Trent

    @malihu:

    People don’t mind loading times so much as long as they feel that everything work as expected.

    I’m not sure I’d be comfortable making that assumption in any situation. I agree that load bars can be great indicators, but I think that for the most part people do mind the wait. Considering my own browsing habits, I close out windows the second I see a load bar unless it’s a site I really want to be at.

  • Tuhin Kumar

    Hey Trent,
    Totally love how this text becomes the precursor to Dave’s brilliant article on WordPress and Performance. I have read his article and also yours on Trimming the Fat and have noted the things I want to do. Also since I use WP-Cache for the minimisation and gzip of the resources, so I can’t say how it compares to manual methods but an important thing to keep in mind.
    Since my blog is art directed, I had been neglecting the efficiency of CSS (frankly I never knew about it) and also the optimisation of graphics loaded in each article.
    I love the way you nut cracked the user’s intention of “waiting for the good thing” where the thing is not YOUR SITE but the end result of using your site actually. All in all love how it spanned from the guesswork you started with the dribbble shot! :)

  • BJ

    Thanks again..

    Can’t wait for the next story!!!
    Keep it up.

  • FabD

    An excellent plugin for WordPress “W3 total cache” (Easy, configurable
    and very powerful). I’ve replace WP Super Cache with this plugin.

    http://wordpress.org/extend/plugins/w3-total-cache/

  • Mini-WWW

    Great topic! I’m making a special Search Engine http://Mini-WWW.com that includes (presumably) FAST PAGES ONLY!

  • Conquistando Adsense

    Tu sitio web me gusta mucho, te agregaré a favoritos, sigue así!

  • Zack Shapiro

    You should check out http://torbit.com. They’re an awesome company that’s helping to speed up the internet!

  • Eric

    Hey Trent,

    whichloadsfaster isn’t working anymore. You should try https://whichsiteisfaster.com. It’s works surprisingly well.

  • Eric

    @Eric:
    Also, you should maybe consider removing the dysfunctional tool and including the new tool in your article.

Leave a Reply