Updated on September 8, 2016
Updated on September 8, 2016
As a graphic designer, I feel embarrassed that my blog has had a very mediocre design for the last years. To be honest, it’s kind of like the interior designer whose house is a clutter of unintentional and mis-matched furniture, or the chef who opts for a mac n cheese dinner over risotto when cooking for themselves.
The truth is, my blog is mostly a recreational endeavor, so it doesn’t get the intentionality a good design requires.
But last week I finally invested an evening redesigning this blog. And in doing so, I unearthed a vice that’s effecting probably every travel blogger out there.
Before you bounce off this post or send it to your graphic designer, know that everything I’m talking about here can be done by any blogger. You don’t have to download plugins or dig around in your code or anything. The fix I’m discussing in this post is pretty specific, and pretty manageable for anyone, so stick with me.
Why is this a common problem for travel bloggers?
In the book 100 things every designer needs to know about people, the behavioral scientist Susan Weinschenk explains that photographs trigger the emotional part of a person’s brain- a generally positive thing when you’re hoping to grab someone’s attention or commitment. She says this is especially true for photographs of people.
Well if there’s one resource that I have in plenty, it’s photos. Not just thousands of photos…terabytes of photos. And I know this is true for many of you travel bloggers out there.
Why not? It’s a powerful way to get people enthusiastic about the subject of our content.
What is “load time” and why does it matter?
But herein lies a problem.
I just spent over an hour examining 100 different travel blogs and almost all of them have horrible load times. Yes they have gorgeous and enticing photos but you only get to see them if you’re willing to wait, in some cases, 60 seconds!!!!! Can you remember the last time you sat in front of a computer to let something take that long to load? The last time I waited that long for something to load I was in a tiny village in Bali, or logging onto AOL instant messenger on a dial up computer.
Load time is very simply the amount of time it takes for a website to fully load. And it’s very important given that, according to this inforgraphic by KISSmetrics, most people only wait 6-10 seconds for a website to load before abandoning the page all-together.
So to put it simply, the longer it takes for your website to load, the more traffic you lose. And even if you don’t have a travel blog that you monetize, I imagine you want people to actually read what you’re taking the time and effort to publish.
How can I test my load time?
The tool I’ve been using to test my load time is tools.pingdom.com. Simply plug in your web address and a location you’re curious about testing.
In my experience, this isn’t a 100% accurate tool and is better seen as an approximation, effected by your own internet speed. But it can be a good way to test the effect of certain changes, for instance, testing the difference between “optimizing” your photos, and uploading them straight from your camera. (We’ll talk about that in a second.)
Here’s an example of how my load time changed after I resized and optimized my header photo.
Even if it’s not exact, it definitely indicates improvement.
What is optimizing:
For the most part, no one can tell the difference between a photo that’s uploaded at its highest quality and one that’s compressed or “optimized” into a smaller file that loads more easily on the web.Can you tell which of these photos I compressed and which one I didn’t?
One of these photos is more than 4 times larger than the other, and yet I’d argue it’s not 4 times better. So practically speaking, optimizing your photo simply shrinks the file to a size that loads more quickly, but still looks just about as good.
Here you can see an example of how the file size of my header image changed with each step, starting with the original header photo, then the resized photo, and then the photo that was both resized and optimized/ compressed.
How to optimize:
If you don’t have a photo editor, here’s how you can optimize your photos:
If you don’t have a photo editor, there are several free online tools that help you. When choosing which tool to use, make sure the tool is actually resizing the file, and not just the pixels. Do this by paying attention to the before and after file size, which the tool will provide.
When I tested Jpeg-Optimizer, it did just as good a job as my Photoshop.
Using Photoshop to optimize your photos:
If you have Photoshop, all you have to do is save your photo by selecting “save for web” instead of the usual “save” or “save as”. This will give you a screen where you can make all kinds of decisions. The only decision I worry about however, is the file type option.
Generally Jpeg will be a good option for maintaining a reasonable quality as well as a reasonable file size. Otherwise, leave the other settings as they are.
The easiest method- adjust the quality in the “save as” screen of any generic photo editor:
Most generic photo editors include a “quality” slider when you hit “save as” for a photo file. This includes the “Image Preview” program on the Mac. Again, Jpeg is a good option for maintaining good quality while simultaneously not having a huge file. So in your photo viewing software, save your image as a Jpeg and slide the slider down so that it’s not all the way to the highest maximum quality.
If you are looking for the simplest solution, do this.
Try testing the load time of your website and see if you’re consistently coming in under 10 seconds.
If nothing else, start by optimizing the images that are part of your design like header images and widget images by simply opening your photos up in a generic photo viewer, resizing to a <2000px size, saving as a Jpeg, and adjusting your quality slider somewhere lower than the “best” option.
My hunch is that this will reveal the greatest change in load time for those of you who have full-width photographic headers, or photographic backgrounds to certain sections of your site. Especially any of you who are shooting photos with a DSLR of some kind.
Let me know if any of these changes helped your load time!