Call +1 (872) 256-1610 or fill out this easy Contact Form for a free SEO scope of work estimate.

Speed Up WordPress: a 2019 performance guide (2 of 2)

/ 1 comments leave a reply

Ok, so you’ve done everything you think you have to do to make your website load fast on all devices… particularly on mobile. You’ve chosen a fast, reliable host for your website, picked a lightweight theme, compressed images, enabled caching, and removed unneeded apps/plugins.

But your site’s still not loading blazingly fast. And you’ve still got that nagging “poor” mobile score on PageSpeed Insights. Dn’t fret: this guide is here to help you evaluate what actually will make a difference for your users, with some specific recommendations for WordPress.

Table of Contents

How to Use Speed Testing Tools

page speed insights poor score
Especially if you’re a business owner who relies on your website to make an important brand impression on customers, you’ve likely invested some time and money in web hosting and development already to ensure your site loads fast… yet you can still wind up with an “average” or “poor” score on speed tests.

Why is that?

Well, first of all, take Google’s own PageSpeed Insights tool with a grain of salt: it doesn’t actually measure speed, can be incorrect, and is most appropriately used I think for ‘low hanging fruit’ optimizations. Use GTMetrix or Pingdom for more telling reports on page loading time, which actually impacts your users.

Since we’re on the topic of speed testing tools (I like to use GTMetrix in combination with PageSpeed Insights) — and site speed in 2019 is an increasingly important ranking factor for SEO — it’s important to keep in mind that these tools are measuring not just how fast your site loads, but overall performance.

Site Speed vs. Performance

Ok, site speed is easy to grasp: it’s loading time (both initial load and the loading experience page-to-page), after all, that keeps us as internet searchers and shoppers engaged and on a path to purchase. In this often-cited study by Akamai, about half of web users expect a site to load in 2 seconds or less.

So for e-commerce especially, it’s critical that you be at least on par with your competitors. And as a performance metric that’s very apparent to your customers, speed is something you’ve likely already looked at for ways to improve.

Site performance I would define as the broader umbrella that includes all aspects of your website that cause it to be crawled, rendered, loaded, and displayed effectively (or ineffectively) in search engines. So in other words, you can look at site performance as being about accessibility, not just speed.

I think it’s important to make a distinction like this for SEO — since you should care not just about the humans browsing your site, but how easily/effectively the content they want to view is made indexable by search bots.

Examples of common performance issues:

For optimal site performance and speed, let’s start with what we can do with the flexibility of the WordPress platform.

3 Advanced WordPress Tips for Optimal Performance

If you haven’t checked out the first post in this series yet, I’d suggest to start there first. (Even if you’re not on WordPress, there are some speed tips there that could end up helping you.)

Now, here are some more “advanced level” tactics that any WP user can try, really; there’s just more of an investment of your time and some testing involved. Run a backup first.

1) Defer Javascript/CSS

Let’s get this out of the way as far as deferring JS/CSS goes: if you don’t know what you’re doing, changing default behavior of Javascript or CSS files – whether they’re core files, theme-related or plugin/app resources – can royally mess up your website. BUT, it is directly important for performance (as GTMetrix and Google PageSpeed Insights emphasize, as do other speed testing tools), and indirectly important for SEO, to remove ‘render blocking’ resources that shouldn’t be loading before the page’s main <body> content.

The reason is that if you have a lot of plugins on your site, chances are it’s not just an increased plugin load that’s slowing your site down — but where the associated CSS or JS files are loading. Render-blocking JS/CSS can most certainly affect how the URL you want to be indexed effectively is fetched, displayed, crawled and… thus indexed. Interestingly enough, Google’s Maps and Analytics code will slow your site down this way.

render blocking javascript google maps
Check which resources are slowing your site down the most in GTMetrix’s Waterfall View.

See this example in GTMetrix’s ‘Waterfall’ view. Considering I only use Google Maps on one page, I can just remove it altogether and replace with a static image. Done.

For render blocking 3rd-party resources that your site relies on, sometimes there’s not a lot you can do — fortunately, with WordPress, you can typically try one of these plugin solutions (again, run a backup of your site before configuring either).

WP Scripts & Styles Optimizer: this plugin hasn’t been updated in a little while. That’s ok. Not all plugins need to be updated that frequently. With certain WP installations the install may fail due to a conflict; otherwise, it’s straightforward and easy to use. (Note: ANY plugin like this has the potential to break things. Doing this work for a client? Test on a staging environment with WP Staging first, which is super easy to install/set up.)

I like this plugin because it gives you control over individual scripts and files. Take a look first at how your site is performing in GTMetrix (see the “Defer parsing of Javascript” section) as well as PageSpeed Insights (see “Eliminate render-blocking resources”), and then navigate to the Scripts & Styles plugin screen in WordPress once you’ve activated it:

Scripts Styles plugin defer jsIn my case, the circled CSS & JS I know I can defer (move to after the </body>) because they’re 3rd-party plugin resources that I’m either not using or aren’t critical to page load; they are A-OK in the footer.

My rule of thumb, after doing this for a bit, is to leave anything involving jquery alone, and just focus on the 3rd-party (plugin) files that GTMetrix or PageSpeed Insights has identified as the biggest render-blockers, i.e. largest in file size.

Autoptimize: this is another plugin you can use that is easier to simply “turn on” with checkbox options. However you then give up control over individual files. I’ll use this as a backup option depending on my client’s particular situation… it really depends on finding obvious render-blockers that Scripts & Styles can successfully defer. Don’t waste time sweating the small stuff.

Lastly as part of #1, re-test in GTMetrix/PageSpeed Insights to make sure the plugin configuration is doing its job!

2) Fine-tune your CDN

If you’ve read this far, there’s a good chance you’ve already got Cloudflare, StackPath or another CDN set up. The speed benefits of a CDN (among other benefits) are apparent for just about every site situation.

For my site, I was paying for a relatively cheap monthly plan through StackPath (formerly MaxCDN). It’s a good CDN option, and not too pricey – I was paying $9 a month. But the benefits of CloudFlare are comparable, and Cloudflare is free.

Here’s where it gets interesting. You can boost loading times noticeably (and nudge up that mobile score) by starting just with these…

  • Basic WordPress setup for CloudFlare (this can depend on your caching plugin)
  • Cloudflare Page Rules (see below)
  • Cloudflare plugin (this just automatically purges the cache when you make a change to your site, needed for aggressive caching)

So I tested temporarily removing StackPath CDN integration from my WordPress site, and comparing the difference in fully loaded time (GTMetrix):

StackPath (MaxCDN) installed
site speed after maxcdn
Cloudflare w/ Page Rules
site speed after cloudflare
And in mobile score (PageSpeed Insights):

StackPath (MaxCDN) installed
mobile score after maxcdn

Cloudflare w/ Page Rules
mobile score after cloudflare\

The key is to use CloudFlare with Page Rules caching. I’d been comparing StackPath to Cloudflare’s basic setup for my caching plugin, which I why I switched in the first place. (Here’s more information on PageRules and how these configurations can help for WordPress site owners.)

In terms of accessibility for website owners everywhere, it’s great that I can not only improve speed/performance across the board over the paid CDN I was using with a free solution – but that this solution is actually pretty painless to set up.

1.1 seconds is the metric that matters most, but I could improve mobile scores further if I were to…

  • Switch to a more lightweight WordPress theme
  • Change web hosts (I’m considering Siteground)
  • Consider using less plugins (I need all the plugins I use currently, but that could change based on #1-2)

Here’s the Cloudflare configuration I used for my site. (Google “Cloudflare page speed rules WordPress” if you want more information on why to set it up this way; the Page Rules configuration is an aggressive caching level but I have the Cloudflare plugin installed, so cache clears every time my content changes.)

cloudflare page rules

3) Set up AMP

Google likes AMP: this much we know. In the new Search Console dashboard, for example, there’s a shiny new AMP section to tell you how your AMP-enabled pages (accelerated mobile pages) are looking. So for WordPress, I wanted to test what enabling AMP (using the AMP for WP plugin) would do for speed, as well as if/how that would translate to improvements for my site’s presence in mobile search.

While AMP is not a direct rank factor, mobile-friendliness as determined by Google is.

As you’d expect, mobile scores for your AMP pages will be closer to 100 (in my case, 98 when tested). However, the plugin that worked for me — while pretty easy to set up — is naturally a little heavy since it’s adding new functionality across every page in my WP installation… so the jury’s still out on AMP for my site situation.

For larger sites that post article or blog content regularly (like media sites), AMP is becoming a web standard. It’s clear that you should consider using it if you’re a publisher. But what about smaller sites? That’s what I want to explore next. I’ll update this post on what AMP can do for a small site with more infrequent updates. 7/22 UPDATE in comment below.


Leave a Reply

Path Digital Services & Consulting