You know the feeling. You and your partner have just decided on a weekend getaway together. You know where you're going, you just need to book a room and it's done.

There are lots of choices: Maybe a dozen hotels that are in your price range and meet your quality standards.

You visit the first site and, man, you can tell that it's got some a-maaaa-zing images that sure do look like the place you're going to visit. WOW - yep, you can just see them beginning to reveal themselves, and YEP (!) sure does seem to look like a nice, high resolution image.

But that's fiction. Because you know that in reality, there's no way you would have waited that long.

In real life, you wait 2 seconds, realize kind of intuitively that if they can't even care enough about your time now, before you've booked, how are they going to take care of you through your stay.

And you click back to your search results to your second choice.

Why do you think your customers are any different? You have 2 seconds before they realize you clearly are an ego-maniac who cares nothing for their time. You want a shiny cool website with lots of beautiful images, tons of plug ins, fancy fonts and of course about 10 style sheets.

And you want it done fast and cheap, so, well, there you go. You've got a website that you can sit and admire all day long to your heart's content.

But perhaps you also wanted traffic? Perhaps you actually might also want visitors...and dare I ask...conversions?

If so, optimize.

Another benefit to a fast site is that Google considers load time in its ranking factors. It has done so for years now. Why? Because it's what people want. (If you haven't figured out that SEO is all about giving you a great search experience, then please learn that now.)

Our own Robert Valcourt wrote a great post on this subject in 2012 and it is still relevant at the end of 2015.

The only difference is that in the last three years, we've collectively decided to bloat our websites. According to site-speed specialist Tammy Everts, "the average site has more than doubled in the past four years, topping out at 2219 KB."

This adds weight and complexity to our sites, making them easy to break, potentially clunky, slow messes. Unless you take steps to optimize.

Weight Isn't Everything

Sites have more than doubled in size, and are increasing at an almost alarming rate. But weight isn't the focus: speed is. Think of some of the fastest running backs. They likely weigh more than you but run a heck of a lot faster. Why? They are efficient, optimized machines.

Focus on getting your site's efficiency where it should be and test for speed, not size.

Speaking of testing for speed and performance, check out SOASTA. I'm impressed.

Start Optimizing Photos

Start with your images. They make up 64% of your site's weight (on average) and they're pretty easy to optimize.

Ben Groulx, in his blog post entitled "12 Best Productivity Tools for Web Developers", recommends ImageOptim for Mac as a free tool that has drag and drop capabilities and will compress all your images for web use quickly and easily. Download it and start using it today on all your images.

Neatness Counts!

As many have noted, it's not as much the weight of your site as it is the efficiency. Modern websites rely on lots of bits and pieces: css style sheets, java script, webfonts - lots of messages are being sent and received as the page loads. 

Robert does an excellent job of explaining how to neatly bundle all the http requests your site needs to make so that fewer messages get sent and received and things run faster.

I always picture this part of the website loading process as an old-fashioned bucket brigade. Back before we had modern fire departments, villages would enlist citizens to stand in a line and hand off full buckets of water to douse the flames. Empty buckets would be handed back again down the line, and so forth. Simple, neat and efficient.

Now. Imagine if you had some yahoo in the line who threw in a bucket of marbles, or handed off five buckets at a time instead of one, or changed the size of the bucket suddenly and handed you one that was 3 times the size? 

You'd be pissed off. Now, servers don't have feelings, but if they did, they'd be mad. And they'd go on strike. They might, if they were frustrated enough, stop working...

So follow Robert's advice: keep images in neat bundles, load scripts at the bottom and stylesheets at the top, and in general, be neat and tidy with your requests. It will be appreciated.

Don't Ditch Your Fonts, But Optimize Them!

Web fonts have come a long way, and no one wants to go back to the days of websafe fonts. Beautiful typography, always a key part of good design, is essential to a solid UX and performance. If you have not yet been converted to the value of typography, please read Ben Groulx's excellent article entitled "Understanding and Using Proper Typography". 

But you've got to know how to optimize them. Take a look at this super in-depth article by Ilya Grigorik (h/t Tammy Everts). The basic message is that fonts need to be compressed, they can sometimes be further compressed by removing unnecessary stuff (like kerning); you can use font-face to access external font resources; further optimization can happen with FontLoading API and other tools.

In short, though (because man, that article has a lot of detailed, technical information in it!) take the time to be neat and tidy with your fonts.

• Choose just the fonts you need. Not too many, just enough. (Maybe 2 total)
• Choose just the variants you need. Not every weight. Not every style. Just what you need.
• Offer fonts in these formats: WOFF2, WOFF, TTF, and EOF. That way every browser will be happy.
• Get a max-age timestamp. (How much I want one of those for my own life!) 
• Use Font Loading API or use CSS inlining to keep things even more streamlined.

Finally, Third Party Nightmare Monster Party

We all use third party scripts. Disqus, which is awesome, helps us comment and connect with people. You add Facebook "like" buttons to your website, you might have ads on your website.

Basically,

"Third-party JavaScript is independent client code executing on a publisher's website, but served from a remote web address. It's used in the creation of highly distributed web applications, from social widgets, to analytics trackers, to full-featured embedded applications."

You need to handle these puppies as if they were the Tasmanian Devil. They can be placated, but you need to know how what to do.

Here is a very funny and also super helpful guide to third party scripts, written by Alex Sexton.

If you are not an intermediate or higher JavaScript developer, check out this helpful (free download!) e-book by Soasta. It's got lots of good, helpful action-oriented advice.

Bottom Line: Test & Optimize

The bottom line is that your site cannot load too fast. There is always room for improvement. If you can get your site to load in under 2 seconds, you've made most of your visitors happy. And instantaneous experience? They are yours for life (as long as the content that loaded is awesome and what they expected...)

So test, using Google developer tools. Find out how fast or slow your site is and then make an action plan to improve it.

Good Luck!

Need some help improving your Website optimization or need a new Website? Contact Custom Fit Online, a Whistler web design and SEO agency.

Filed in // Websites, Website Optimization