Optimize WordPress Websites for Outstanding Performance

Guide Overview:

This guide focuses on ways to optimize WordPress websites for outstanding performance and the guidelines that we follow. We recommend referencing this guide periodically, as things rapidly change in this space.

Content Delivery Network (CDN)
WordPress Website Hosting
WordPress Plugins
Image Optimization
Performance Testing

Content Delivery Network (CDN)

CDNs minimize the distance between website visitors and a website’s server, storing a cached version of a website’s content in multiple geographical locations. Each location contains a number of caching servers responsible for delivering content to visitors within its proximity, providing enhanced end-to-end reachability.

CDNs also provide additional levels of security, via DDoS Protection, Web Application Firewalls (WAF), SSL, etc.

Even if you don’t use the full capabilities of a CDN, consider using a CDN to host DNS services, rather than the domain or website hosting vendor. This may not only speed up DNS resolution, but it makes it easier to migrate websites when/if needed.

Check out our simple tutorial for using Cloudflare’s Free CDN.

WordPress Website Hosting

Our preferred vendor for hosting WordPress websites is Kinsta, due to it’s simplified management dashboard, high-performing technology stack, and a high level of support.

Kinsta also takes the complexity out of caching, handling it all at the server level. No complex caching plugins required.

We offer Free Website Migrations to Kinsta at no-cost, for those that use our affiliate link, so it’s a win-win for all.

WordPress Plugins

There’s an ongoing debate as to whether the number of plugins slows down a website. The simple answer is that it’s not the number of plugins, but rather the quality of plugins that are installed.

We recommend that all website managers do their due diligence before installing plugins. Is there a significant amount of people currently using the plugin? Is the vendor releasing updates at a reasonable interval? Is the vendor responsive in support forums?

After you’ve decided to implement a plugin, it is not a set it and forget it situation. Website managers should always keep an eye on what’s installed, how the site is performing, what other solutions are available, etc.

Recommended Optimization Stack (Shared Hosting)

  • Autoptimize (Compresses and concatenates CSS and JavaScript)
  • Imagify (Lossy image compression and automatic image resizing)
  • WP-Optimize (Cleans up databases safely and easily)
  • WP Super Cache (General caching solution that works well with Autoptimize)

Recommended Optimization Stack (Kinsta Hosting)

This stack simply replaces Autoptimize, WP-Optimize. and WP Super Cache with WP Rocket.

  • Imagify or ShortPixel
  • WP Rocket (Note: Typically not needed, but does work very well with Kinsta to provide extra performance. In short, Kinsta will turn off the page-caching portion of their caching stack, and use WP Rocket’s page caching.)

Image Optimization

When uploading images to your website, upload images with dimensions that are appropriate for the various theme elements. In other words, if a theme element wants to re-size an image to 500 x 500 px, upload an image that is 500 x 500 px.

Before uploading images, we recommend implementing a plugin that will automatically provide lossy compression of images. If you’ve already uploaded images, any quality plugin will allow you bulk-compress images on the fly. For this post, we will be focusing on Imagify and ShortPixel, which do both.

Imagify

Imagify Settings

General
  • Optimization Level: Our recommendation is to start with Aggressive mode. For sites where image crispness is of the utmost importance (e.g. wedding photographer), we recommend Normal mode.
  • Auto-Optimize images on upload: Enable
  • Backup original images: Enable
  • EXIF Data: Enable only if you absolutely need (i.e. photography websites) to retain the specifications (e.g. shutter speed) stored in your images.
Optimization – WEBP Format
  • Create webp versions of images: Enabled
  • Display images in webp format on the site: Enabled
Optimization – Media Library
  • Resize larger images: You want to enable this and you can either leave the default setting or if you know the maximum container size of your theme or page builder, you may want to match that setting here. If you use the Elementor page builder, the default container size is 1140px, so you will want to set your largest image size to 1140px at an absolute minimum. We set the max image size to 1980px for most sites, as you cannot account for all the larger screen resolutions out there.
  • Files optimization: Select All
Optimization – Custom Folders
  1. Click Add Folders
  2. Select each and every folder displayed
  3. Click the Save & Go To Bulk Optimizer button
  4. Click the Imagif’em All button (Note: We have some images, like our logos, that we don’t want to optimize in Aggressive mode, so we’ll go back after the Bulk Optimization is done and re-optimize those images in Normal mode.)

ShortPixel

The ShortPixel Image Optimizer plugin is pretty close to an apples-to-apples competitor to Imagify. You could use either one in a scenario where you need to optimize your images, but your primary audience is such that a CDN may or may not be needed.

In the event a CDN is desirable, that’s where ShortPixel’s Adaptive Images plugin would come into play, over this plugin. While you can have them both running at the same time, it’s recommended to pick one or the other

Please check out our comprehensive guide to optimizing images with ShortPixel.

Performance Testing

This needs to be an ongoing commitment from the website owner. There are so many factors that can impact performance and it’s important to always be testing.

We recommend establishing a performance baseline at the end of every month, that gets revisited on a monthly basis. If performance drops off, we need to figure out where it’s dropping off before we can find out the why.

When it comes to fine-tuning and remediation, there would be too much information to list here and we would still not cover it all. However, we can certainly be a resource for you in this area.

We’re happy to answer most quick questions, but there is a chance we’ll request you hire us for WordPress support.

GTmetrix

We recommend signing up for a Free account, which allows for changing the testing parameters that we cover below.

  1. Sign into GTmetrix
  2. Enter the website address (“Enter URL to analyze’) to be tested (Note: If SSL is implemented, be sure to use the https:// version of the URL)
  3. Click Analysis Options
  4. Choose the server location (“Test URL in”) that is closest to the website’s intended audience
  5. Given the emphasis on mobile devices, it’s best to change the connection speed from “Unthrottled Connection” to LTE Mobile to reflect the speeds that mobile users will experience. (Note: If you’re in a country or region where you know mobile speeds are slow, it may be better to choose a speed such as 3G.)
  6. Click Analyze
  7. After the first analysis completes, run the analysis 2 more times, in order for caching to be reflected in the results. (Note: Consider running the tests up to 5 times and taking an average from tests 3-5.)

The real beauty of GTmetrix lies in the Waterfall tab. Here is a guide from the folks at GTmetrix, to get you started.

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin