WotW: Usability 101 – Helping your blog load faster

It’s Wednesday again, which brings us to the last Usability 101 segment. You can find the first three segments here:

• Getting started with navigation
• Becoming acquainted with your readers
• Seeing what your all-important readers see

image source

Today’s segment is about helping your blog load faster or, as I like to say, appreciating your readers by providing instant blog-loading gratification. Don’t make your readers do the dial-up dance while they wait for your blog to load. Most likely, your blog readers aren’t the Slowskys — they’re busy people who probably have a limited time period to be online (you know, like naptime or the amount of time it takes the kids to get bored and start whining). You want them to spend that time reading your posts and browsing your blog, not waiting for your blog to load.

First things first, how fast does your blog load?

The colored bars show how long each element takes to load.

To find out, go to Pingdom Tools to run the full page test. Just enter your blog URL and the full page test loads your blog and tracks the time each element, such as an image, takes to load. Scroll down to the bottom and look in the gray box for your blog’s loading information. (For information about the other stats listed, click on the Full Page Test tab at the top and then scroll down to the bottom. The descriptions are in the same grey box where you found your blog’s information.) Stopwatch can also tell you how quickly your blog loads, but without the added information and stored results that Pingdom provides.

A Pingdom full page test report

Running the tests on Housewife Eclectic, Pingdom reported a 5.5-second loading time and Stopwatch 3.56 seconds. On my blog, just Lu, Pingdom’s report was 3.6 seconds and Stopwatch’s 3.7. The difference in times is due to how the different tests load different elements. Don’t worry too much about a difference of a couple seconds between the two tests. If you run either test regularly, you might see that the time fluctuates a little because your front page of your blog is changing with each new post, and your browser is caching the site so that it will load faster.

So… How fast should your blog load? “Expert” opinions range from 2 seconds to 8. Even though 10 seconds is fast if you are waiting in the checkout line at the supermarket, 10 seconds waiting for a webpage is more akin to the 10 seconds it takes you to haul your screaming toddler from a pin-drop silent church meeting: it feels like an eternity. A 10-second-plus page load time is delay that is visible to your readers–they’re watching your sidebars or your header image or your posts load.

Even if your loading time is low (under 8 seconds), you can lower it to make sure that your readers aren’t waiting on your blog to load. The load times from Pingdom and Stopwatch are based on your browser and internet connection speed–if your readers’ browsers or connection speeds are slower than yours, they’ll wait longer. So it’s always a good idea to make sure that your blog is loading as quickly as possible.

Cutting precious tenths of seconds off your load time isn’t difficult and doesn’t require you to be a tech guru (I’m certainly not!). Especially if your load time is longer than 8 or 10 seconds, try one of these suggestions to help your blog load faster.

As you consider these suggestions for your blog, keep this in mind: page load time and aesthetics (visual appeal and layout) have a give-and-take relationship. Generally, visual elements on your blog require some time to load. The key is to decide which aesthetic elements are most important to you, remove the unimportant elements, and streamline the important ones. That’s where you find the happy medium between a bare-bones UG-ly blog that loads very quickly and a very aesthetically involved blog that requires a significant amount of time to load. 

Minimize image size and/or resolution. Hopefully you don’t have a lot of unnecessary images on your blog; if you do, remove them! But we all know that blog posts with images are so much more fun to read, so don’t feel like you have to get rid of every image. Instead, help the images load faster by reducing the image size and/or resolution of each of your images using a desktop image editor such as Photoshop (following this tutorial) or Picasa (following this tutorial) or using this online image optimizer from Dynamic Drive.

Reducing the image resolution saves your browser from loading more information than it needs to. If you upload a full-size print-quality image to your blog, Blogger will automatically change its display size to fit in your blog layout, but your browser will still load all of the information for the full-size image. Basically your browser is loading a full-size image and then just shrinking each part (or pixel) of the image. Reducing the resolution of the image reduces the number of parts (or pixels) in the image so that your browser isn’t loading information unnecessarily.

Remove unnecessary widgets and other unnecessary elements. Some elements–especially music and video–take a lot of time to load and aren’t necessary or important for your readers. Ditch the music playlist (most readers find it annoying anyway). Switch a video in the sidebar to a text link to a video on YouTube. If you can, reduce or remove the ads, too–they can slow down your page load more than you might think. If you have a hit counter, consider using your blog statistics (like we talked about two weeks ago) instead of the widget.

Once you’ve whittled down your widgets to the ones you deem necessary (such as followers), organize them so that the widgets that take the longest (shown in your Pingdom test) load last. Most blog layouts (those that aren’t extremely customized) load from left to right and top to bottom, so place the slower-loading widgets in the right sidebar or at the bottom of your blog.

Reduce the number of front-page posts. If you write wordy posts (like I tend to) or lengthy tutorials with photos, you’re better off to have 3 or 4 posts show on your front page. If, on the other hand, your posts are shorter and use fewer images, you can have 6 or 7 posts on the front page without slowing down your blog-load time. Reducing my front-page posts from 7 to 3 reduced my blog’s already-low loading time by a full second. You’ll find the front-page post setting (titled Show at most) for Blogger in the Formatting section (under the Settings tab).

Those are the top three ways to reduce your blog’s loading time. If you’re interested in learning more, see one of these articles:

• Blogger Buster: Top Tips for a Faster Loading Blog
• Webweaver: Speed Up Website Load Time
• Vandelay Designs: Designing Pages to Load Quickly

And this brings us to the end of Usability 101. {sob} I’m so proud to see all of you moving on to become upstanding blog citizens! I’d love to hear what you thought about Usability 101 — love it? hate it? didn’t understand it? bor-ing?

If you have any questions, now or ever, leave me a comment or email me at iamjustlu@gmail.com. Don’t fret – even though this is the end of Usability 101, I’ll be back next Wednesday (and every Wednesday for the foreseeable future) with more inspiring, useful, or just plain fun web goodness. Until then…

Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about books, crafts, recipes, and whatever else comes up at just Lu.