Speed Up Your WordPress Site with WP Super Cache and Autoptimize

Speed Up Your WordPress Site with WP Super Cache and Autoptimize

There are many different ways to improve the speed of your WordPress blog. Some of them might break your theme, though. Let’s take a look at the safest method to implement caching and optimization with just two plugins, WP Super Cache and Autoptimize.

Important: If you’re just starting and don’t have your blog yet, stop right here and read How to Build a WordPress Blog with SSL & 2FA where I explain exactly what to do to get you up and running. Don’t worry, this article will wait here for you 🙂

When it comes to WordPress plugins, it’s really important to make sure that you don’t break anything by installing something new. WP Super Cache is considered to be one of the safest and most stable caching plugins on the market while Autoptimize is probably the best choice for HTML, CSS and Javascript optimization.

Let’s install and properly set up these two plugins together, so you’ll get the most out of their potential.

WP Super Cache

Created by the authors of WordPress, this plugin generates static html files from your blog. It’s generally faster and less demanding on resources to serve static html instead of processing PHP scripts.

Even though there are many different caching plugins, WP Super Cache has proven time and time again to be the safest choice when it comes to compatibility.

So, let’s start by installing and activating the WP Super Cache plugin. Installing WP Super Cache plugin

Activating WP Super Cache plugin

You can safely dismiss the warning because this doesn’t apply to you since you’ve just installed the plugin. Dismiss the warning

Click the link to go to the plugin admin page. Go to plugin admin page

Turn the caching on and click the Update Status button.

Turn on the caching

Next, select the Advanced tab and scroll down to the Miscellaneous section. Selecting the Advanced tab

Make sure you have the options selected as shown in the screenshot below.

We want to “Enable caching for all visitors” as it will greatly improve the Dashboard performance, and we also want to “Cache HTTP headers with page content”.

Also, make sure that “Make known users anonymous so they’re served supercached static files” is unchecked as it’s known to break Dashboard functionality on some themes. Settings for optimal performace

Scroll down to the Advanced section and set the options as seen in the screenshot below, namely check “Clear all cache files when a post or page is published or updated” as this will prevent breaking functionality of some themes. Clear all cache files upon update

Finally, scroll all the way down and hit the Update Status button. Update status

That’s it! If you’ve done it correctly, you can forget about this plugin as this configuration is guaranteed to work nicely with any theme you’ll decide to use in the future without having to touch a thing afterward.

Autoptimize

Autoptimize is a very powerful tool, but it’s definitely not for beginners. Make sure to follow me step by step here and set the options strictly to avoid any problems.

In case you turned the Image Performance during the installation of Jetpack, turn it off. We will use Autoptimize instead and these two don’t like each other. Turn off Jetpack Image Performance Make sure that Image Performance is turned off

Again, start with installing and activating the plugin. Install and activate Autoptimize plugin

Next, go to Settings. Autoptimize settings

Turn Optimize JavaScript Code? on, but leave everything else unchecked. We don’t want to “Aggregate JS-files” or “Force JavaScript in <head>” as these two options can cause big problems with several themes. Optimize JavaScript code

Scroll down to CSS Options section and check “Optimize CSS Code?” while leaving the rest unchecked as well. Even though the performance of your blog might slightly improve if you aggregate and inline CSS, the risk of breaking things is too high. In my opinion, it’s not worth the small push in performance you can get.

Optimize CSS code

Next, scroll to the HTML Options section and check the “Optimize HTML Code?” option. Optimize HTML code

Finally, scroll down to the Misc Options section and make sure that both options are checked. Converting these scripts into static files will make your site faster without any negative effects or compatibility issues.

Save the changes and empty the cache. Save Changes and Empty Cache

Now, select the Extra tab and check options as shown below. It’s a good idea to combine fonts with webfont.js as it reduces queries and makes your site load faster. Removing emojis and query strings will improve performance as well. Remove Google Fonts and emojis

Scroll down and this the Save Changes button. Save Changes

That’s it! You’ve optimized your WordPress blog for the best performance while making sure that these settings are compatible with any theme you might decide to use in the future.

Even though it’s tempting to use “combining and inlining” features, it’s better to keep them disabled.

Autoptimize doesn’t delete old static files. This means that over time, you might end up with a lot of static pages especially once your blog gets popular and visited frequently.

Some reports say that the internal cache could grow up to 2GB in less than 24 hours as Autoptimize will create new copies to play safe and not break the site.

Wait! There’s more!

You can do even more to speed up your WordPress blog. I wrote the whole article about SEO where I focused on speed as one of the most important factors of the overall SEO-friendliness. If you don’t feel like going through everything, make sure to read at least this section.

Jan Zavrel

Jan is Biohacker, iOS & Web Developer, Author, Teacher, Lifelong Learner, Evernote Certified Consultant. He’s an author of THE SYSTEM2, a unique methodology for Evernote power users, and THE NEW FITNESS: Forty Years Old Dad in Twenty Years Old Body where he explains how to hack your life to live forever. Learn more about his work at jan.zavrel.net.

<< previous next >>