Want More Constituents on Your Website? Don’t Annoy Them! Part 2

Nate Luttrell - 10.05.2009

Last time, we talked about how impatient we all are, and how all the bells and whistles in the world won’t amount to a hill of beans if your online constituent is annoyed by waiting for page after page to load…

So how can you optimize and “streamline” your content for sending? Let’s bring in a couple suspects to see if we find the culprit of slow pages:

Suspect one is Text. Could we “lighten up” our pages by lowering the total amount of text on a page? Suspect two is Media – including primarily images, but encompassing video and audio as well.

A Text vs. Media Data-Size Comparison

Let’s look at the data-transfer needs to send both across an Internet connection:

  • On the left column of the table below, are the opening paragraphs from “Walden” by Henry David Thorough (Note: You don’t have to read it, of course, but it’s pretty awesome.)
  • On the right is the following image of “Skeeter” – one of the dogs from (shameless “triple-plug” coming…) one of Blackbaud’s newest NetCommunity Grow clients, The SPCA of Tampa Bay.
  • This image is about 9,500 bytes, or almost 5 times the size of the “Walden” intro text above. So it’s important to note, that this image is only 200 x 189 pixels, and only at 72 dpi.
  • However – to get it to be the same data-size as the “Walden” paragraphs – it has been resized to the image on the right column of the table below.

 

Comparison of 2K of Text vs. a 2K image

 

 

Opening Paragraphs of Walden

2048 Bytes or 2 Kilo-Bytes Exactly1.

 

 

JPEG Image of “Skeeter”

Resized to 2 Kilo-Bytes - Approximately

 

 

WHEN I WROTE the following pages, or rather the bulk of them, I lived alone, in the woods, a mile from any neighbor, in a house which I had built myself, on the shore of Walden Pond, in Concord, Massachusetts, and earned my living by the labor of my hands only. I lived there two years and two months. At present I am a sojourner in civilized life again.

 

I should not obtrude my affairs so much on the notice of my readers if very particular inquiries had not been made by my townsmen concerning my mode of life, which some would call impertinent, though they do not appear to me at all impertinent, but, considering the circumstances, very natural and pertinent. Some have asked what I got to eat; if I did not feel lonesome; if I was not afraid; and the like. Others have been curious to learn what portion of my income I devoted to charitable purposes; and some, who have large families, how many poor children I maintained. I will therefore ask those of my readers who feel no particular interest in me to pardon me if I undertake to answer some of these questions in this book. In most books, the I, or first person, is omitted; in this it will be retained; that, in respect to egotism, is the main difference. We commonly do not remember that it is, after all, always the first person that is speaking. I should not talk so much about myself if there were anybody else whom I knew as well. Unfortunately, I am confined to this theme by the narrowness of my experience. Moreover, I, on my side, require of every writer, first or last, a simple and sincere account of his own life, and not merely what he has heard of other men's lives; some such account as he would send to his kindred from a distant land; for if he has lived sincerely, it must have been in a distant land to me. Perhaps these pages are more particularly addressed to poor students. As for the rest of my readers, they will accept such portions as apply to them. I trust that none will stretch the seams in putting on the coat, for it may do good service to him whom it fits.

 

 

 

 

1. This is just amazing. I randomly picked out “Walden” because it was a joke opening for my blog in an email I sent a couple months ago. Completely by chance – I copy-pasted it into Microsoft Word from the Internet, deleted a trailing space at the end of it, and Holy Cow – by freak coincidence, it was exactly 2048 characters – meaning 2048 bytes, meaning exactly 2 Kilobytes. Making it very easy for the rest of this example! The geek in me is so easily entertained, and I love it when a plan comes together.

 

So that told us something, eh? That tiny little image was only 50 x 47 pixels; 0.3% percent of the area of the minimum-sized computer-screen, and it took up as much data as ALL that text! 

 

“Show Your Work:”

Image: 50 x 47 = 2350 pixels

Minimum Computer Screen: 1024 x 768 = 786,432 pixels

2350 / 786,432 = .0029881

 

 

And furthermore, a JPEG is an image compression format – so in terms of data-size, it’s already as small as it can get!

 

So what does that means to us? Well, in terms of performance, optimizing text is a distant priority to optimizing images and other media. If delivery speed was a High School Track Meet, images would get LAPPED by text in the 800m !!!

 

So we know we should focus on images to increase the speed of our pages – is there anything else? In the hopes that you now trust me, I’ll spare you a similar buildup as the above and just tell you: SSL Secured WebPages are another area where there is considerable overhead to send data. Encrypting all that data before it’s sent over the internet causes only about 67% of the throughput in one study (pdf).

 

What can you EASILY do?

First off, and I mean FIRST, be sure to resize your images to their display size before you upload them. This is an extra step, I know, but it is the BIGGEST contributor to a slow page. Why? Take a look at this example

 

And another “inside” note: In between writing the above two sentences, I looked at my phone messages and saw that my parents, who are traveling out west – just sent me a fantastic picture they took of the ocean. I immediately forwarded to my Blackbaud email, and here it is below for the example. Wow, the luck I’m hitting in stride for this blog…

 

 

600x450 px image RESIZED to 200x150 px

63,077 Bytes

 

 

 

 

 

200x150 px image displayed without resizing

8,369 Bytes

 

 

Can you believe that? To send the image on the left takes almost 8 times the bandwidth, but to the user they visually look exactly the same. Page load times are unnecessarily slower, and bandwidth is wasted for no gain to your constituents.

 

And once again – this is only a relatively small picture. Most of the time, that 200x150 pixel picture is uploaded straight from a 5.2 mega-pixel camera, taking the image at 1600x1200 pixels!!! The bandwidth needed to download the image is exponentially larger.

 

“But wait”, you say… “We never resize our camera-images before we upload them, and our pages load fast every time!”

 

I know it seems that way, my new blog-reading amigo, but you are being tricked by a common performance enhancement of your web browser called a cache. Put simply: The first time an image is downloaded from a website – your web browser stores the image away on your hard drive, and checks the hard drive for a copy of the image before each page request thereafter. But trust me on this – your online constituents are getting to your site, and on their first visit – they are waiting for several precious additional seconds…

 

So this is a big one: Resize your images to their display size before you upload them.

 

Typically, when working on a web page image – I use a fake or “placeholder” image and resize it until it flows with the text the way I want it to. Then I resize the actual image before uploading it, and replace the place holder.

 

True, it is an extra couple steps, but IT IS WORTH IT!!

 

There are a lot of image-editing programs I use to resize an image. But the one of the best in terms quick, easy, and free is probably PixResizer.

 

So, that’s the best thing you can do for now. Next month, we’ll look a few slightly more advanced techniques for optimizing your pages and improving performance. These might be a little more complex, but it shouldn’t be too tough once you get them started. 

 

Until next time – keep doing good work :-)

 

Get free updates of the the blog articles sent to your inbox by entering your email address:

Make sure to check out our Social Media for Nonprofits resources section or brows by topic ...

Popular Posts

Recent Posts


Nonprofit Tech Featured Blog