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

 


Your Organization in Eight Words or Less – Go!

License and Registration, Please

Reach Out or Round Up: Which Social Networking Strategy Should Your Organization Pursue?

Social Media Strategy: Pancreatic Cancer Action Network

Is Facebook Right for your Nonprofit's Community?

5 Tips for Writing Effective Web Content

Content Inventory: Never Fun, Always Needed

Go Beyond the Typical To Reach Your Base

Continuing the Conversation with Custom Confirmations

A Guide to Facebook Social Plugins for Nonprofits

Get More Twitter Followers Today [Ethically]

Twitter Hits 15 Billion

FIRST

Increasing Website Traffic with Search Engine Optimization (SEO)

7 Tips for Successful Online Fundraising

Video Interview with Andre Blackman of Pulse + Signal

10 Volunteering Sites to Help You Do Some Good

OPEN CALL: Do Nonprofits Make Films? We Say Yes!

Stacey Monk talks Epic Change, Tweetsgiving and more …

When In Doubt, Hit Something!

American Idol’s Help Me Give Back Program Rocks Team Fundraising

Chris Brogan Talks Nonprofits and Trust Agents

Chris Noble on Check in for Charity, Pepsi Refresh and Social Media for Nonprofits

10 Steps to Building a Successful Social Media Strategy

Measuring Matters

Video Rules!

Do You Know Your Supporters?

Heading to NTEN’s Nonprofit Technology Conference? Don’t miss these sessions!

Building a Facebook Fanpage – Part 3 – Adding Photos

Video Interview: NetSquared with Amy Sample Ward

Building a Facebook Fanpage – Part 2 – Configuring the Homepage

Video Interview: Facebook for Nonprofits by Randi Zuckerberg

SXSW Do-gooding, Inspirations and Nonprofit Takeaways

Spotlight on We Can End This with Scott Henderson

Turn Your Success into New Opportunities!

What to Watch For at SXSW 2010 - The Nonprofit Edition

Building a Facebook Fanpage – Part 1 – The Background Info

Blackbaud Announces March Web Seminars for Nonprofits

Learning is Everything!

Building a Facebook Fanpage – Part 0 – The prelude

Online Giving and Rapid Response Trends

Why Would I Use Social Media?

Independent Fundraising Event Trends

Connecting Advocacy to Fundraising: Free Nonprofit Webinar

It’s Kind to Give In Kind

Nothing But Net - Aid for Haiti Gets Webby

Make it Visible

Unlocking the Power of Online Forms in Sphere- Part I

Support Disaster Relief in Haiti

Getting Started with Twitter

Give your 2010 Strategy a Jumpstart with these Free Nonprofit Webinars – Starting Tomorrow!

The Power of One

Email Communication in 2010

The Science Behind the Art - Broadway Cares / Equity Fights AIDS - Part II

Foursquare: 8 Ideas for Nonprofits

Using Social Media to Improve Your Nonprofit's Efforts

How to Choose a Website Vendor- The Solution

2009 in Review

How to Choose a Website Vendor- The Partnership

Use Your Year End Giving as a Starting Point

The Science Behind the Art - Broadway Cares / Equity Fights AIDS - Part 1

The Science Behind the Art - Nonprofit Website Case Studies

Your Network Matters: Fatcyclist Raises Over 135K in 8 Days

Black December?

Obama, Then and Now: Lessons Learned in Online Advocacy and Fundraising (Part I)

Are Nonprofits Ready to Play Foursquare?

A Facebook Success Story: Charleston Animal Society

NetWits Know-How Event Fundraising Webinar Series

#Tweetsgiving Rocks

Watch for Roadblocks: The Road to More Successful Online Fundraising

13 Twitter Search Examples for Nonprofits

50 Social Media Tactics for Nonprofits

10 Ways to Make Your Website Fundraising Friendly

10 Tips for Online Challenge Event Fundraising

Social Media Strategy: A Small Nonprofit's Experience

7 Webby Sessions Not to Miss at BBCon

2009 State of the Not-For-Profit Industry UK Survey Results

How to Leverage Your Newsletter Subscriber List to Solicit Online Donations

Cause Marketing and Social Media go Hand in Hand

How Independent Schools Can Embrace Online and Offline Worlds

Creating a Social Networking Strategy (Part 1)

Jumpstart Year-End Giving with eCards

NTEN Webinar - The State of Online Fundraising

Branding Your Nonprofit: Part 2 of 2

What is Google Search Doing for You?

Generation Thumb

Social Media Strategy: National Association of Dental Plans

4 Internet Competencies You Need for a Career in Nonprofit

Turning "Brochureware" into a Fun and Interactive Website

Help Inspire Your Fundraisers!

16 Starter Tips for Nonprofit Blogging

Dive into the Flickr Pool!

Supporting Independent Event Fundraisers Using Online Tools - LIVESTRONG Day 2009

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

How “Intelligent” is Your Nonprofit?

Using the Social Web to Make Local Impact

Mixing Traditional Media with Social Media

New England Province of Jesuits Wins Award for Faith-Based Standard of Excellence

Index of National Fundraising Performance- Q2 2009

11 Quick Tips to Enhance Your Facebook Fan Page

The Answer to Nearly Every Online Fundraising Question Is...

How Blogging and Tweets Generate Support for a Family

Measuring Success Online- Is This Internet Thing Worth the Effort?

Nonprofits and Social Media: Seth Godin, Beth Kanter and The Chronicle of Philanthropy All Chime In

Inside a Website Redesign: Plan Canada

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

Twitter 101 for Nonprofits

Branding Your Nonprofit: Part 1 of 2

Are you Ready for the Next Facebook?

What is Google Doing for You?

6 Characteristics of a Nonprofit Trust Agent

(INSERT POST TITLE HERE)

What Not to Do on a Fundraising Call

Tips to Strengthen Your Email Campaigns

Listening Dashboard via Email?

On-site and Online Fundraising Best Practices

The Power of a Thank You

Abundant Options & Opting In

Why Twitter Matters

5 Questions Nonprofits Should Ask Before Sending an Email

Help Your Nonprofit Listen Like Starbucks and Dell

5 Mistakes Nonprofit Websites Make

Peer to Peer Fundraising- Painting a Better Picture with Video

Networking at a Grassroots Level

Thank You for Your Permission

Sign Up for NetWits Summer Camp!

A Challenging Economy = More Donations

Have a Contest to Increase Web Traffic

I’m Listening, Now What? 5 Tips to Make Your Listening Worth It

Are Twitter and Facebook Important for Event Fundraising?

Start a Movement!

Set up Your Social Media Listening Dashboard in 30 Minutes or Less

An eCard Experience

Sink or Swim? Nonprofits in 2010

Social Media Strategy: ChildFund International

How to Boost Event Fundraising with Facebook

The Web 2.0 Rummage Sale!

Summer Festivals: Where Music & Philanthropy Collide

Can Social Media Help Your Search Engine Optimization (SEO) Efforts?

Design for Good: 4 (More) Nonprofit Design Principles - Part 2 of 2

A Recipe for Search Engine Visibility: Part II

Payment Processing- You Raised the Dollars, Keep Your Cents

Nonprofit Blogging: Goals, Strategy and Tactics to Crush it

Recurring Gifts: Are You Missing Out on Easy Money?

Members Only!

We Need Facebook (?)

The Healthcare Industry is Stuck – 5 Strategies to Overcome and Resources to Assist

4 Tips to Keep Your Recurring Gifts Recurring

Social Media Strategy: LIVESTRONG and the Summer of Social Good

Social Media Strategy: United Methodist Church and 10THOUSANDDOORS

Design for Good: 4 Nonprofit Design Principles - Part 1 of 2

Social Media Strategy: 12for12k Challenge with Danny Brown

Tangible Love

A Recipe for Search Engine Visibility

Social Media Strategy: Children’s Hospital of Los Angeles

5 Email Sins to Avoid

Are Your Alumni Bored with You?

How One Multi-Chapter Organization is Succeeding with Virtual Accounts

6 Ways to Build Your Email Subscriber List through Social Media

Power to Your Peeps! Why Real-time Fundraising with Twitter Works

Giving Credit Where Credit is Due...

4 Facebook Tips for Nonprofit Success – See What Others are Doing

Reach Your Audience Where Your Audience Already Is!

Is Twitter Important for Thon Participants?

Mastering "The Google"

What's Really Going on with Events this Season?

Podcasting, Podcasting, Podcasting

Social Media Strategy: Athletes for a Cure

Does Your Website Further Your Mission?

Is Mobile Fundraising the Next Big Thing?

Help a Nonprofit This Mother's Day

4 Keys to Building a Successful Nonprofit Web Site

To Tweet or Not to Tweet is No Longer the Question

Expanded Functions in Sphere Connect API

Are Your Recipients Tired? Look No Further Than List Fatigue: Part II

15 Clay Shirky Quotes That Blew My Mind at NTC

Facebook Launches New API

Facebook to Open a World of Possibilities

Stewardship Isn’t Just a Thank You Letter

Connect Usage Goes BOOM!

4 Ways to Jump Into ‘Fundraising 2.0’

A Good Fundraising Appeal- By My Standards

Design for Good: The Hidden Potential of Footers

Website Omnipotence

When Social Networking Worlds Collide– The Facebook-Extended Personal Fundraising Page

2009 Target User Forum- Day 2

YouTube Video, $10,000 Dollars and Your Nonprofit

The Social Media Nonprofit Event Planner

Facebook & “Old People*”

Are Your Recipients Tired? Look No Further Than List Fatigue.

Don’t Fall Behind, Fundraising is Moving On!

SXSW Recap

Things I liked from SXSW Interactive

Five Things I Saw at SXSW

2008 donorCentrics Internet Giving Benchmarking Analysis

Why should you get your event participants to send more emails?

To Moderate or Not to Moderate? That is the Question.

Skittles and Your Nonprofit

Takeaways from the Run Walk Ride Conference

Taking Five Website Staples to the Next Level

Assigned Affinity

Don’t Dump – Learn to Listen

Twitter: Time Waster or Valuable Tool?

Using Twitter for the First Time

Bigfoot Sighting

RSS: Best thing since sliced bread

One Life is Enough!

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 browse by topic ...

Popular Posts

Recent Posts


Nonprofit Tech Featured Blog