Website Management Tools | Part 3: Speed Optimization

In part 3 of our series on website management, we’re going to talk about speed optimization tools.

Part 1 covered CMS options and Part 2 covered Analytics tools. Now that you have your CMS and Analytics covered, let’s talk about, arguably, the most important part of a website (aside from how it looks): its speed.

If your site is loading slow, visitors won’t stick around to wait for it to load. Statistics show that if your page takes more than 3 seconds to load, your visitor will leave.

Getmetrix

There’s few more inclusive and helpful tools when it comes to knowing which part of your site is slow than Gtmetrix.

Running a simple — and free — test on their site will give you conclusive data on which parts of your site is causing the slowness, whether it be server response time, image size, javascript or CSS issues, or a plethora of other details.

At the conclusion of the test, you’ll get an overall score, just like in school. A through F, along with a percentage out of 100, like so:

Here you’ll also find individual breakdowns of things that are slowing your site down.

Chances are, you may not know what these things mean, but Googling will find you a solution to the problems. If you’re using a CMS (like WordPress), there’s a strong possibility there’s a plugin for what you need!

If you sign up for a free account with Gtmetrix, you can track your site reports over time. This will let you compare your results each time you run the report, which will allow you to figure out your improvement over time.

Pingdom

Pingdom is one of the best tools to give you a comprehensive report on the items of your site causing slowness. We use it here multiple times when working on a project to make sure the site’s fast before we go live with it.

Here’s the type of report you’ll see on Pingdom:

There’s so much data available for free here, though there is a paid version which offers even more insights.

Pingdom is incredible and will help you pinpoint many (many many many) things to improve on your site, not just asset slowdowns, things like DNS queries, Expires headers, caching, etc.

WordPress Caching Plugins

CMSs are wonderful. They allow people with no programming knowledge to handle the day to day management of a website that they normally wouldn’t be able to do.

The downside is they’re expensive when it comes to how they work. Without getting too technical, a CMS will do a number of things when you visit a site powered by one: query the database for navigation menus, query the database for updated content, query the database for new comments, output the HTML of the page you’re landing on, and countless more.

On average, a CMS will query the database about 70 times for each page that’s loaded. Which can slow things down significantly when someone’s waiting to visit your site.

The solution to that is caching. A method of reducing all of the work that goes into loading a page of your site through a CMS. The “cache” is an HTML version of your page, which loads infinite amounts faster than the CMS itself can load.

The result is almost night and day. A site without caching will load about 5x slower than a site with caching. It’s a no brainer, even though there are some minor side effects as a result.

For WordPress

  • WP Rocket – though expensive, it’s one of the best
  • W3 Total Cache – incredibly thorough caching solution. Might be a bit overwhelming if you’ve never set it up before.
  • WP Super Cache – one of the original caching solutions for WordPress
  • WP Fastest Cache

Other CMSs have caching built-in, but it’s not nearly as thorough or complete as you can get with a WordPress plugin, in our experience.

I found a number of test results that show a decrease in page load time upwards of 50% when using a caching plugin. Like I said, it’s an easy decision to cache your site, especially if you’re using WordPress!

A Waterfall Test

There’s a lot of tools that offer a waterfall test. This is just a simple test that will show you a graph of all of the assets (images, files, code, etc.) that are loaded on your site, in the order it gets loaded, and how long each piece took.

If you’re using Chrome or Firefox, it’s already built into your browser, too. Let’s look at Chrome. If you simply press Command+Option+I on Mac or Control+Option+I on Windows, you’ll pop open the Inspector.

Once option, click on the Network tab. Then go to your site and you’ll see the graph appear in real time. The result will look something like this:

This will let you see which things are slow. So, for example, if one of your images takes 10 seconds to load, perhaps you want to look into optimizing that image to reduce load time.

Some things you won’t be able to fix, like third-party scripts (which are usually very fast), but this will give you great insights into which specific thing is slow.

Summary

There are lots of tools you can use (there’s plenty we didn’t even cover here!). The important thing is that you find one you like and use it regularly.

Knowing what’s slowing your site down is incredibly important and should be a priority. Every time you publish new content, run a speed test. Your new super awesome blog post might be too image heavy or might include some new script that is too large for most people to download.

Did we miss your favorite tool? Let us know in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want our weekly tips right in your inbox?

Want our weekly tips right in your inbox?

Get all our tips, tricks, pointers, advice, tools, and more delivered right to your inbox on Fridays!

You've been subscribed! We'll see you in your inbox on Friday!