Tech Tip: WordPress Speed

Page speed matters. It matters so much that Google is going to penalize your SEO ranking if you have a slowpoke site.

How did our page stack up before we made changes? Well…ummmm…not so good. Time to whip this thing into shape!

This is what we did to improve our page load time from around 8 seconds to well under 3 seconds. We experimented with about a dozen plugins and a couple of Content Delivery Networks (CDNs) to find the right recipe for us. Hopefully this will help you get your site blazing and save you a little time in the process.

Creating a lean, mean WordPress machine

Why do this?

Because speed and user experience matters. Also Google is laying down the page rank hammer on sites that are slow or aren’t mobile optimized (a topic for another day). Also, research has shown that people are easily discouraged by a slow site. They found that a slow site isn’t just inconvenient, but actually results in lost conversions in the corporate space, which means lost donations in our world.

Click to see full infographic from Kissmetrics

You have my attention. Now what?

Excellent! Let’s dive right in. Before we really get started, though, there are some things you need to know and get in order before we lift the hood on your site.

Be prepared for your site to break. It’s okay, you can get through this. Stay calm, know how to disable and delete plugins and all will be okay.
You need to know how to FTP into your site through the host. If you don’t know how to do this most hosting companies will walk you through it. If you’re freaked out at this point then you might want to get some help in your optimization quest.
Experiment. Experiment. Experiment. I can’t say this enough. The right combo for me might not be the right one for you.

OMG A PLUGIN KILLED MY SITE

Invariably a plugin will do something wonky and give you the white screen of death or something equally horrifying. 

Luckily you got your FTP going, right? Just log in, go to <yourdomain>/wp-content/plugins/<plugin to burn with fire> or sometimes it’s located at <yourdomain>/htdocs/wp-content/plugins/<plugin to burn with fire> and delete the folder.  Go back to your site and hit refresh and see that all is well with the world again.

Still with me? Good, let’s get started

1. Tools

GTmetrix – This was our testing tool of choice. The key to any good experiment, as we all learned in 9th grade biology, is to keep your experiments constant. Change your measurements and your scores have no basis. After every change we ran the tool to see if there was any impact on our load time and scores.

Google Page Score – This will sometimes give you different recommendations than GTmetrix and it’s from the big gorilla itself, so don’t ignore Page Score.

SCIENCE!

   Set Your Baseline

gtmetrix scoreRun GTmetrix three or four times and average the results to see where your site is currently at. In addition to the scores the arrows will let you know if you’re doing better or worse than most sites.

For most of us this is when we come face to face with the reality that our site needs a little help. Let’s get it into fighting shape.

2. Plugins Galore

Do a search for “WordPress” and “Optimize,” “Performance,” or “Speed” and you’ll find pages of plugins that all promise to put a little giddy-up in your site. After some research of our own we experimented with around 12 of these plugins.

   Shrink Your Images

The web has been moving toward bigger images—1500 pixels wide isn’t uncommon any longer. Those images take a toll on your site’s speed, though.

If you’re using the “Save for Web” functionality in Photoshop or some other method of saving that’s maximized for web sizing then you’ll see a modest reduction in file size, but if you’re using a normal “save jpg” then there’s a good chance you’ll see significant savings using an image compressor plugin.

You have many options here, but from my research they really come down to EWWW Image Optimizer and Smush.it. Smush.it will give you the most file size savings at the cost of some image quality. EWWW doesn’t save as much, but its compression is lossless which means the images don’t get compression artifacts. In our line of work images are the most important thing so we went with EWWW.

If you use EWWW then it has a bulk conversion tool for images that already exist in your Media. After that everything you upload gets automatically compress, set it and forget it.

The bottom line is this: if image quality is the most important thing and you’re posting large, over 1000px on the long side, images then EWWW is your jam. If you’re using images as insets in your blog posts and they aren’t that big then by all means Smush.it.

Tip: After you make any change, no matter how small, refresh your site to make sure it still looks good. The best time to find out when something breaks is immediately after it’s broken.

Then keep reviewing your GTmetrix score as you make progress to see what’s really having a big impact on your site.

3. All About That Cache

This is where it gets complicated. Once again there are a ton of caching plugins out there but it really comes down to W3 Total Cache and WP Super Cache. We went with W3TC for the variety of options. Know that this flexibility comes with significant technical hurdles. Super Cache is a little simpler, but it’s still not plug-n-play by any means.

If you get confused it’s easy to find tutorials for these very popular caching plugins that use plain language to explain what each setting does.

Here’s some of my settings. Keep in mind that your experience may vary and experimentation is a good thing:

So many 1’s and 0’s

General Settings

  • Page Cache: Enabled, Disk: Enhanced
  • Minify: Enabled, Auto, Disk
  • Database Cache: Enabled, Disk
  • Object Cache: Enabled, Disk
  • Browser Cache: Enabled
  • CDN: Enabled

Page Cache

  • Cache posts page: checked
  • Cache feeds: checked
  • Don’t cache pages for logged in users
  • Cache preload: checked, default settings

Minify

  • Rewrite URL structure: checked
  • HTML minify: Enabled
  • Inline CSS minification: checked
  • Inline JS minification: checked
  • JS minify settings: checked, drop-down = non-blocking “defer”
  • CSS minify: checked

Database Cache – default, did not touch

Object Cache – default, did not touch

Browser Cache – for all

  • Set Last-Modified header: checked
  • Set expires header (if allowed): checked
  • Set cache control header: checked
  • Set entity tag: checked
  • Set W3 Total Cache header: checked
  • Enabled HTTP (gzip) compression: checked

CDN (more below)

  • Host attachments: checked
  • Host wp-includes/ files: checked
  • Host theme files: checked
  • Host custom files: checked
  • Import external media library attachments: checked
  • Add canonical header: checked

4. Content Delivery Networks (CDN)

These are crucial to your success. What they do is spread your content around on several servers instead of just one. The one closest to the user gets served up content. The result is a snappier experience.

We’re currently experimenting with Amazon CloudFront. I would highly recommend CloudFlare for a free option. The best part of CloudFlare is the setup ease.

If you use CloudFlare, make sure you check the CSS, JS, and HTML minimizers in the Cache page. These were able to shrink down the size of my site to be even smaller than what I got from W3 Total Cache.

5. Other Speedups

VPS hosting – we were on a shared host for a long time. It served us well when our site was simple. The fancier we got the more our hosting struggled. I upgraded to VPS and it honestly wasn’t the speed bump that I thought it was going to be. What it did give me, though was consistency. We weren’t seeing the random timeouts and long (15+ second) page load times when the shared server got bogged down.

Plugins that were highly recommended, but didn’t work for me (i.e. worth trying)

Speed Booster Pack (no measurable effect on my scores)

Autoptimize (broke the site, white screen of death)

More information:

Varvy from Patrick Sexton  – beautiful site that breaks down some really complicated web topics and terms. Also has some additional tools for SEO, mobile optimization, etc. Highly recommended.

Resources from GTmetrix – They don’t just provide and score, they help you understand why it’s low and what you can do to improve. There’s not a lot in the way of tutorials, but it helps hone your search for how-to’s to fix the problem.

That’s it. VPS + CDN + Ewww + W3 Total Cache ended up being our perfect combination. How did yours turn out? Have any better solutions?

Author BrianCrawford

More posts by BrianCrawford

Join the discussion One Comment

Leave a Reply