Mike’s Don’t Be a Dick Series, Part 1: Site Speed

Game On image

They say speed kills. In this case, a lack of speed kills.

I’m talking about the speed of your website.

So, what is speed? What exactly is speed relative to? Simply put, website speed refers to the time it takes for your visitors to see your website in their browser, from the moment they click a link or type in your URL.

What does it kill, exactly?

The largest companies online have done more testing on this than you can even imagine, and every single time the result is the same: slower websites make less money. Whether by ecommerce sales falling, user engagement dropping, and bounce rates rising, if your site isn’t loading in well under 3 seconds, it is failing you.

Quick facts:

  • A 100-millisecond delay in website load time can hurt conversion rates by 7 percent
  • 53 percent of mobile site visitors will leave a page that takes longer than three seconds to load

Not convinced? Here’s Google’s take on it:

Google mobile page speed benchmarks

In layman’s terms: if sales and conversions are important to you, this matters. If they don’t, well, you wouldn’t be reading this.

So what can you do about it?

First and foremost, TEST. After all, how can you optimize a site efficiently if you don’t know how well it’s already performing? There are several tools available, for free, that allow you to test the performance of your site. They have several things in common, but the most important rule to note is that these will NOT always give you real world results out of the box, rather a baseline for comparative analysis. I also recommend testing often, even with every optimization you perform, in order to gauge how your load times are affected. My favourite is GTmetrix, so let’s explore that. Sign up for a free account so that you can get a couple extra features.

Enter your URL and select a testing location that’s close to your target audience. Then select LTE speed (why? Because that’s how Google measures your speed, and that’s likely what your audience is using).

gtmetrix

When we get to the results, the first things most people notice are the PageSpeed and YSlow scores, and the load time and page sizes. PageSpeed and YSlow scores are based on best practices from Google and Yahoo, respectively. They are great reference points for improving your site, but sometimes they give recommendations that are far out of the scope of practical performance enhancements. They will also give you suggestions for improving the “scores” they display, but these are just suggestions, and don’t always apply. Don’t take it as gospel, use it to analyse your own site and use your best judgement about the action it’s recommending. When in doubt, Google it!

What I want you to pay attention to are the load time and page size numbers. Then, on the tabs below, focus on the Timings tab. Here you will find 2 important numbers: time to first byte, and first contentful paint. These are the two numbers that have the greatest effect on perceived load time, and the two we largely focus on with WordPress optimizations.

Paraphrased from GTmetrix: “Time to First Byte is the total amount of time spent to receive the first byte of the response once it has been requested. Some ways to improve the TTFB include: optimizing application code, implementing caching, fine-tuning your web server configuration, or upgrading server hardware.” And “First Contentful Paint is triggered when any content is displayed. This could be text, an image or canvas render. This metric gives you an idea of when your user receives consumable information – much more useful for performance assessment.”

So how do we improve these? Generally, I tell people to focus on 3 key things: server performance, code performance, and smart choices with their site content (let’s call that content performance.)

Server Performance & Code Performance

Optimization starts on the ground floor. No matter how much planning and polishing you do on the surface, one of the most critical components in the speed of your website is your host. Here’s the caveat: there is no one size fits all. It’s not always about who has the best TV commercials or the lowest price. And that’s what makes this the hardest step to implement as a DIYer. We like Cloudways and Kinsta; if you need a solid recommendation on a host, email us, k?

Similarly, bloated code can destroy a site. Slow data processing, slow queries, lack of caching, dynamic data. These are all major hurdles to cross when building a site. Sadly, this is really not something the average DIYer can fix. A common culprit we see in winery sites is pre-made (aka non-custom) WordPress themes (not all themes, some are better than others). If you are using a non-custom purchased them and you’re worried about code bloat being the cause, just email us and we can get under the hood and see what’s going on.

But let’s get to the juicy bits: Content Performance.

That’s what you’re here for anyways, isn’t it? Marketing? Conversions? Customer Experience? This is for you.

  • Sliders
  • Image carousels
  • Animations
  • Embedded videos
  • Too many fonts
  • Too many images

What do all these have in common (besides the fact that you’ll rarely find them on 5f sites, that is)?

  1. They’re proven to either directly reduce conversion rates, or they greatly impact loading time, which is proven to reduce conversion rates.
  2. They’re the most commonly requested features by business owners.

How’s that for irony?

In the pursuit of a “pretty site,” businesses destroy their conversion rate, many without even realizing it.

This is why we say you must start all your projects with an in depth discovery session, which gives you the most important part of a site build: your business goals. (ahhh, Winestories readers, you’re getting all the goal stuff this week.) This is critical, and it’s the measure you will use when deciding what goes on a site. Every pixel of your site should be designed with your goals in mind. 

You need to ask yourself, “does adding this feature serve my winery’s goals?”

If the answer is “no”, then my response is “don’t be a dick.” Don’t diminish your own goals, or your users’ experience, simply for vanity.

But what if you really really really need it?

Now, there may come a time where you need to add something to a site that you know can slow it down. The question then becomes “does the benefit of this feature outweigh the potential slow down it may introduce?”

And the only way to answer that is with testing. Use analytical data to make informed decisions about website components. Whether that’s A/B testing, heat maps, user surveys, etc… it just needs to be measured.

When you use this approach to web design, you will quickly find that the decisions you’re making are better, improve your conversion rate, and improve your users’ experience. Doing it any other way is a risk. Are you willing to take it?

And that’s MY goal. A positive user experience that leads into a successful conversion.

Michael Bourne

Michael is our Head of Development, which means he’s in charge of all things tech. He oversees new product development, data discovery and strategy, SEO, analytics, and anything else we throw at him.