WordPress Caching and Minification - the Right Way – Opensite - Digital Solutions Agency

02 6181 9414 info@opensite.com.au

WordPress Caching and Minification – the Right Way

Website Binary

Last update:

Featured, Tutorials , , ,

Before setting up WordPress caching or undertaking any kind of performance optimisation activities I first measure the “before” performance. This lets you more accurately quantify success and to choose methods which yield the best performance gains. It also feels great to see definite and quantifiable improvement to your website.

My favourite performance measuring tools are:

Running a test with these tools is self explanatory but interpreting the results can be very confusing. Your main observations should be:

  1. Page load time – Improved through page caching, among other things.
  2. Requests – Improved by combining and minifying external requests.

After following the steps provided in this tutorial you might be interested enough to deep dive into the the other performance insights. This tutorial only focuses on the two most important ones.

Page Cache

Page caching might sound intimidating but it’s really a simple concept and best of all, it’s easy to setup.

What is Page Caching

In WordPress when someone visits your page, it is processed by WordPress and database queries are carried out as required. This can take time and waste unnecessary resources. Page caching creates static HTML versions of your webpages, that bypass the need to make complicated requests each time a page is loaded, unless changes are made to the page.

Applying this in WordPress

My plugin of choice for page caching is WP Super Cache, made by the WordPress team of developers.

Here’s how to use it:

  1. Install and activate “WP Super Cache” plugin
  2. Go to: Settings → WP Super Cache
  3. Turn on caching → Update Status
  4. That’s it, you’re done!

Combine and Minify Requests

Why Combine Requests

Webpages are loaded from top to bottom, each element, and each request is processed before moving onto the next (in almost all cases at least). Reaching an external requests mean the page needs to wait for additional files to be loaded and processed.

What is Minification

Minification is the process of removing all unnecessary characters from source code without changing its functionality. The resulting code files take up less space and can be loaded and processed more efficiently. There are freely available online tools to minify and unminify your CSS and JavaScript, however developers tend to use processors that handle this optimisation automatically.

Here’s a simple example of minified CSS.

Before Minification:

</pre>
h1 {
 color: #000;
 font-size: 24px
}

p {
 color: #333;
 font-size: 18px
}
<pre>

After Minification:


h1{color:#000;font-size:24px}p{color:#333;font-size:18px}

Our case is different though, files are being loaded by WordPress seemingly outside of our control. WordPress core, themes and plugins can all require their own CSS and JavaScript files and some of these may not have even been minified. Regardless of minification, each file loaded requires its own HTTP request, which increases page load time.

Apply this to WordPress

This is where my favorite minification and request combining plugin comes in. After testing many options within a wide variety of WordPress configurations, I’ve found that Better WordPress Minify is the most stable and reliable. It’s also very easy to setup and forget about while it works its magic.

Here’s how to use it:

  1. Install and activate “Better WordPress Minify” plugin
  2. That’s it, you’re done!

Summary

Page performance can have a huge impact on user experience and it is a major factor for search engine optimisation success.

This article is part of a series, explaining how to configure WordPress so that it’s search engine and social media ready, “SEO WordPress: The Definitive Guide“.