Tech Tuesday: Improving Load Times

10 May

While most photographers’ websites are often built with fewer images per page and are formatted to load quickly, blogs are a different animal. We upload many photos to a post – sometimes dozens, and if those files are large, it can take web browsers several seconds to load them all, resulting in a less-than-impressive user experience, and often times, sending bored/frustrated/unhappy visitors off to another site.

Loading is time. And time is money.

The best way to keep visitors on your blog, checking out your lovely photos, reading your witty posts and getting to know you better, is to make their experience fast, easy and enjoyable.

Kissmetrics just posted a fantastic infographic on the topic: How Loading Time Effects Your Bottom Line, and found that “a one-second delay in page response can result in a 7% reduction in conversions.”

How fast are you?

Industry standard varies, but many web developers recommend that load times not exceed 5 seconds. Obviously pages with rich content (ie. photos and video) take slightly longer and visitors will be a bit more patient on those types of websites. If you’re wondering how fast your own page loads, check out loads.in, a nifty site that offers a free test drive! Enter your URL and you’ll get:

  • The load time of your webpage
  • Snapshots of the webpage as users experience it at different intervals of the load process
  • Errors or warnings if they occur
  • A complete timing break down of all elements of your page in a waterfall chart
  • Downloadable timing results in the Http Archive (HAR) format
  • Go ahead, give it a try. It only take a few seconds. See what you get!

    How’d you do? Our site was 6.4 seconds. Not bad!

    If your numbers were a bit high or in the double digits, talk to your web developer and see what they can do on the back end to improve things.

    Roll up your sleeves!

    There’s one thing you can do on your own that won’t cost any money, and will take just a few minutes: Optimize the photos you’re uploading to your blog.

    Even correctly sized and exported at a lower setting they may not seem big, but they’re often larger than they need to be. Your best bet is to optimize them to reduce the file size while retaining quality – making the files quicker to load – and the experience even sweeter.

    There’s a few ways to go about optimizing your photos, but Photoshop is my tool of choice since I can preview each image and see exactly what I’m getting, rather than batching the whole group at one standard setting.

    Why take the extra time?

    Well, a close-up portrait of a bride and photo of the reception venue will have completely different color, information and details. And I’d rather take the time to make sure each image is fine-tuned and lovely, since they will live forever on my online portfolio. It’s a matter of a few minutes, and super simple:

    1. Open your photo(s) in Photoshop.

    2. Select File>Save for Web & Devices.

    3. Once the dialogue box opens, choose your preferred file type (mine is JPG) and adjust the Quality slider at right to make the file size smaller.

    The image window will automatically preview for you – and you’ll want to make sure to find that delicate balance of smaller size and good quality. This always depends on the image content, detail, and number of colors, so there’s no hard rule. Try 60%-80% quality, depending on the dynamic range of the image, and see what works best for each.

    If you’d like to compare different quality settings, click on the 2-Up or 4-Up tab in the top left corner to preview one or several options alongside your original. You can click each section which will highlight with an outline, and then change that specific version’s pixel preview and file size.

    4. Once you’re happy with your selection, click the Save button and rename the file (so you don’t overwrite your original).

    The image I started with (at 700 pixels wide, 72 dpi) was 512K, and once optimized, it was 183K. We’re not talking a huge difference, but it adds up quickly when you have dozens of images loading on your page!

    There are hundreds of other articles and tips for shrinking page load times; if you have any helpful ones to share please leave a comment!

    PS: One last reason to care about load speed: Google search results.
    Google wants to promote pleasing user experiences, and therefore takes site speed into account with their search rankings. The faster your load time, the better chance they will send people your way!

    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: