Updated on September 8, 2016
Copyright © 2021 · All Rights Reserved ·
Swell Lite from Organic Themes · RSS Feed · Log in
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.
Before optimizing header photo
Load time after optimizing 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.
Original header photo
Header photo resized to the exact pixel sized recommended by my theme
Header photo after resizing and optimizing (compressing)
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.
Jpeg-Optimizer is the tool I tested out for this post, but this article provides a few other options as well as some other helpful tips.
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!
Now that you are staying in one place, are you going to finish posting your stats from your past travels? Would love to see how well you have been keeping to your budget. Thanks!
Actually all of the stats from two and a half years of nomadic travels are there on the “stats” tab, starting when we first had the idea of travel being cheaper than stationary life in August 2013 and ending when we arrived in Austin TX to look for a place to live in January 2016. The travels before that don’t have stats because we didn’t keep records, and this current Albania trip we’re now on, we’re keeping track of expenses again so that we can post about it- but I’ll probably wait to post on it until we return.
Hope that answers your question!
This post is super helpful! I’ll definitely be returning to it and would love to hear any other site tips that you have as a graphic designer in future posts.
So glad to hear it! I’ll try to post anything else that comes to mind!
Great, my load time sucks and there are a ton of things to fix that I haven’t a clue!
If you used the pingdom site that I referenced to check your load time, then I have to admit that I don’t understand half of the other things they grade on that site either. I did compare my ratings to those of bigger sites like The Guardian and Lonely Planet and felt better when they received some F’s too. (Particularly for redirects, browser cacheing, and minimizing requests, which were the same areas I had low ratings.)
Really helpful post, thanks so much for putting it together!