WordPress performance

Practical tips on how to improve WordPress performance

by

How to improve the performance of your WordPress blog is an often asked and discussed question. Depending on your exact circumstances, there are hundreds of right answers. In this post, I’ll describe what I have done to improve the performance of my blog and point out areas that still need improvement. I’ll start with the basic but then drill down into specific plugins and settings I use for michaelkummer.com.

Hosting

As I have written in a previous article, one of the most important factors on performance is your hosting provider. If your host your blog on a server that shares its memory and CPU cycles with 10,000 others websites, don’t expect great results. That was one of the reasons, why I moved my blog from Bluehost to Flywheel. Of course, you have to balance income vs. expenses. I don’t blog for a living, and my goal is to not spend more money on it than what I earn through ads and affiliate programs. As you can see in the screenshot below, I’m already over the soft-limit of what my Flywheel plan offers, regarding visitor count and storage utilization. By moving up to a bigger plan, which comes with more resources (CPU cycles, memory), my blog would probably perform better, but it would cost much more than what I’m currently paying.

WordPress performance
Flywheel statistics

WordPress Theme

The choice of theme, how it’s coded and how it uses JavaScript and CSS are also important factors. In many cases, the simpler the theme, the better it performs. I have been working with Pageslines for the past couple of years, and I’m genuinely impressed by its latest offering Pagelines Platform 5.

Platform 5 was built for web professionals and their clients. It is extremely fast, bloat-free, and fun to work with. Designers do what they love, clients get the control they need.

Platform 5 is free, but there is a Pro subscription that unlocks many of the features you will probably want if you are a serious blogger. I have a “Personal Pro” subscription for $99 a year. The advantage of Platform 5 is that it enables you to make design changes through a frontend editor that would require CSS and JavaScript knowledge.

Caching

Caching is a crucial factor in your blog’s performance, and there are various types of it. I use Cloudflare to cache and to protect my website from malicious attacks. Cloudflare is more than a Content Delivery Network (CDN), it handles DNS, optimizes traffic and resources and protects the sites it manages against attacks. The best part of it is that most of its features don’t cost you a dime. So it’s a no-brainer, and I highly recommend to sign up if you haven’t already done so.

Flywheel WordPress Hosting

It’s important to point out, that Flywheel also caches certain content to improve performance, making some caching plugins partly obsolete. I’ll talk more about plugins below but note that Flywheel and Cloudflare work nicely together and they don’t overlap or create any conflicts.

Cloudflare settings

For my blog, I use the following Speed and Caching settings:

  • Auto Minify: JavaScript, CSS, HTML
  • Polish: Lossless + WebP
  • Enable Accelerated Mobile Links (AMP): Off
  • Mirage: On
  • Caching Level: Standard
  • Browser Cache Expiration: 8 Days
  • Always On: On

Cloudflare Page Rules

WordPress performance
Cloudflare Page Rules

Jetpack from WordPress

The makers of WordPress also develop a massive and feature-rich plugin called Jetpack. Not everyone likes Jetpack because it has so many features that some consider it bloated. Indeed, the larger the size and functionality of a plugin, the more likely it is, to slow your blog down. On the other hand, Jetpack replaces dozens of individual plugins that you may need otherwise to get the same functionality. All of Jetpack’s features share a common and robust code base, so I would argue Jetpack is less of a drag than 5 or 10 separate plugins. I use Jetpack on my blog mostly because of Photon, a CDN for images. Cloudflare also offers some image optimization through what they call Mirage and Polish. I’m still debating if I should use Cloudflare over Photon but I will have to do more testing to see how each affects my Google PageSpeed score.

Plugins

To help improve the performance of my blog, I use the following plugins and settings:

Accelerated Mobile Pages and AMP

AMP is Google-backed open source project that attempts to make web pages load faster by limiting HTML, JavaScript and CSS code and by caching the pages on Google’s servers. You can read more about AMP here and decide if it is for you. Most of the ads that support my blog don’t work with AMP, except for Google AdSense of course. I decided to use AMP anyway because I heavily rely on Google for traffic to my blog and I want to ensure they keep sending visitors my way. If you’re interested in setting up AMP for your blog, Yoast has good instructions here and here.

Autoptimize

One of the main challenges of improving WordPress performance is reducing the need for render-blocking JavaScript and CSS.

Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.

That just means that the user should see your page load as quickly as possible instead of having to stare at a white screen. Non-render-blocking scripts and CSS can load in the background while above-the-fold content is already visible for the visitor. The problem is that many themes and plugins only work with render-blocking scripts and break if you try to remove them. I use Autoptimize to selectively and carefully optimize JavaScript and CSS code used by plugins of my blog. Here are my settings:

  • Optimize HTML Code: On
  • Keep HTML comments: On
  • Optimize JavaScript Code: On
  • Force JavaScript in <head>: Off
  • Also aggregate inline JS: Off
  • Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js, vimeography-utilities.js, vimeography-pagination.js, utilities.js, pagination.js, photon.js, devicepx-jetpack.js
  • Add try-catch wrapping: Off
  • Optimize CSS Code: On
  • Generate data: URIs for images: On
  • Remove Google Fonts: Off
  • Also aggregate inline CSS: On
  • Inline and Defer CSS: Off
  • Inline all CSS: Off
  • Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css

I figured out the proper settings through trial and error, which is not always easy with all the caching going on. So make sure you disable caching everywhere before testing, or you may get misleading results.

Heartbeat Control

I used to have issues with certain plugins that would spend a lot of time on communicating with WordPress’s heartbeat API. This plugin restricts heartbeat to the edit pages of posts, which allows WordPress to save drafts while you are writing automatically.

Lazy Load for Comments

Some of my posts have a lot of comments, and I don’t want them to cause a delay in loading the page. Lazy Load for Comments does what the name implies; it delays loading comments until the visitor reaches the bottom of the page.

Optimized images

Google PageSpeed puts a lot of focus on images. So it is important to use images that are appropriately sized. In other words, it doesn’t make sense to upload a 2000 x 1000 pixel image, if the maximum width of your container is 800 pixels. I used to do that so that the pictures would look sharp but I since changed my mind about that. I usually resize all images before uploading them to a maximum width/height of 1024 pixels. You can do that manually or use a plugin like lmsanity to do it for you automatically. For the rest, I rely either on Jetpack’s Photon or Cloudflare’s Mirage and Polish.

WordPress performance
Cloudflare Polish image optimization

Room for improvement

There are still many areas where I struggle, including but not limited to:

  • Remove more render-blocking JavaScript and CSS without breaking the page: While it’s a little easier to deal with CSS, there is only so much I can do with JavaScript, other than not using certain plugins or functionality.
  • Cloudflare’s Rocket Loader is meant to defer JavaScripts and load them in a non-render-blocking manner. Unfortunately, it seems to break Pagelines, resulting in an entirely blank page. I haven’t yet figured out how to make Rocket Loader work. I recently stumbled across a potential solution, but I haven’t had a chance to test it yet.
  • Optimize images so that Google PageSpeed stops complaining: I have come to a conclusion, that I would have to dramatically simplify the design and functionality of my blog and remove all ads to please Google PageSpeed. Unfortunately, that doesn’t make much sense from an economic perspective.

But overall, I’m happy with the performance of my blog, but I would love to hear from you, my readers if you feel pages load too slow. So please leave a comment and share your experience!

Michael Kummer

🇦🇹 Austrian 📜 Blogger 👨‍👩‍👧‍👦 Father of a princess and a preemie 🥑 Fan of Paleo lifestyle 💻 Technologist ✈️ Frequent flyer 📱Amateur photographer