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.
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.
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.
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.
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.
For my blog, I use the following Speed and Caching settings:
- 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
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.
To help improve the performance of my blog, I use the following plugins and settings:
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.
- Optimize HTML Code: On
- Keep HTML comments: On
- 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.
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.
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.
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.
Did you find the article useful?If so, please share it on Facebook, Twitter, and other social media so others can enjoy it as well. It would mean a lot to me!
Room for improvement
There are still many areas where I struggle, including but not limited to:
- 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!
Latest posts by Michael Kummer (see all)
- Hammo TV: Affordable wireless headphones for TV - March 28, 2017
- How to take a screenshot on macOS and create a Dropbox link - March 21, 2017
- Guest blog: The lifestyle of a digital nomad – Marc Herbrechter - March 14, 2017