In previous posts we’ve discussed the importance of design and user experience. We’ve looked at on-site SEO and content marketing. And we’ve talked about why you need a content management system (CMS). All of these things have an impact on the success of your website.

Is that it? Nope. If your website is slow, the user will leave before they see the great design or read any of your awesome content.

If a website is slow or clunky, it’s not easy to use. And let’s face it…

Website performance can affect usability and conversion. According to KISSMetrics, 40% of site visitors will abandon a website if it takes more than 3 seconds to load. 54% are likely to tell their friends about a bad time on a slow website.

Website performance, according to the usability experts at Portent, is affected by three potential bottlenecks:

1. Serving – the speed of the server where the site is hosted
2. Transmission – the time it takes for the page data to get to the browser
3. Rendering – the time it takes the browser to render the data it’s been delivered

Of these three, transmission is where you can easily make a difference. The bottlenecking culprits for a slow transmission are almost always the following:

1. Images – larger images will slow transmission speeds
2. JavaScript – bloated script can slow transmission
3. CSS – bloated or poorly written CSS will also affect transmission

The last two depend on the quality of your code which depends on the quality of your developer. If your developer doesn’t understand these issues, chances are they will not get you quick loading code.

Optimizing Images

You can make a big dent in transmission speed by simply optimizing your images.

Using large images, even at 300 KB, will slow your load time dramatically. For example, I took this picture of my daughter, which was originally 2400px (pixels) by 2400px and 1.3 MG, and started the optimization process in Photoshop.

First I trimmed the image size down to about 500px x 500px. At that size the image is 219 KB…

Now, of course, I’m breaking the rules by placing this un-optimized image on a post. But, it’s important to show you the difference. You can dramatically lower the file size of an image by optimizing it.

I’m using Photoshop which can be pricey. There are tons of free tools online. Just Google “pic optimizer.”

I still recommend something like Photoshop because you’ll get more control for cropping and editing. Plus you’ll be able to see different optimization options.

But, back to the point. I’ve used the feature in Photoshop called “save for web and devices” to optimize this image of my daughter.

Here it is at an 80 quality…

That’s a huge difference in file size, more than half! Notice any difference in quality? I don’t. You can take it even further (and you should).

Here is that same image optimized at a 60 quality…

About half the size of the 80 quality. Notice any difference in quality? I still don’t.

And here it is at 30 quality…

You can barely see some loss in quality with this one but it’s minimal. And at a 30 quality, we’ve cut the image size almost in half, again.

27 KB is almost one tenth of the cropped image (1st pic above) and MUCH smaller than the original 1.3 MG image. This is a jump from 1,300 KB to 27 KB. That’s a big savings in terms of data transmission.

Do you see the importance of optimizing your images. In theory a page with the 30 quality image will be 48 times faster than one with the original 1.3 MG image. You’ll notice the difference and so will Google!

With their recent mobilegeddon update as well as all the various algorithm updates, Google is making no secret of the importance of performance.

Now you may be thinking, “well, I just use WordPress to edit my images, so I’m good.” Not so fast! The images you edit in WordPress still load at full size. WordPress just tells the browser to load the image at a reduced pixel size.

So, optimization before placing an image on your website makes a huge difference.

Additional Performance Tips

Hosting

There are other ways to improve a website’s performance. We’ve already mentioned serving, your site’s host. Make sure that your website is hosted on a business class provider.

You will also want to consider getting your own virtual server. A shared host means that your website is on a box that shares resources with other sites.

If you’re using one of those hosting providers with celebrity spokespeople, chances are you’re on a shared server and it’s loaded with junk websites.

The speed on that server is at the mercy of the worst website it hosts. So, your website might be super optimized but if it shares resources with a hog, it will serve like a hog. No good.

Not all shared servers are bad. It’s best to use a host where you can actually speak to someone who can help you get the most out of your server. If you need recommendations, just let us know.

Testing

One surefire way to know if your site is optimized is to test it. If you’re using the Yoast Google Analytics Plugin for WordPress, you already have a powerful resource at your fingertips.

With this plugin you can easily find out…

1. Which landing pages are slowest?
2. How does page load time vary across geographies?
3. Does your site load faster or slower for different browsers?

You can then take this information back to your developer to start a plan for optimization. If you don’t have Yoast (you should get it) or are not on WordPress, you can also check your site speed using Page Speed Tools from Google.

This tool is going to give you some great results. It will show you results for both mobile and desktop as Google is now ranking sites differently on each. With that said, the terminology they use can get somewhat technical. You’ll want to review this information with your developer to determine:

1. The impact of the findings – do they matter enough to make changes?
2. The optimization plan – if the findings warrant a change, what is the plan? Cost?
3. Is it a fix or replace? Does it make sense to optimize your current site or would you be better off (and are you due) to develop a new website?

I could go on and on as there are plenty of coding changes you can make to improve site performance. But, if you focus on these three, you should see a big difference:

1. Optimize your images
2. Host on a virtual dedicated server with a business class hosting provider
3. Assess and correct issues where appropriate

Remember, speed matters. It will draw, keep, and convert more visitors. And isn’t that the goal of any website?