The WordPress Performance Challenge: Revisited

Some six months ago, I wrote a series of seven blog posts called The WordPress Performance Challenge. They described all the steps I took in order to make my blog as fast as possible.
In this follow up post, I’ll share my current thoughts about this important subject.

What made the WordPress Performance Challenge so hard was that I tried to only use plugins. I wanted to see how fast my blog could become without modifying any code. I didn’t want to bother creating a child theme to Twenty fifteen and hack the code. But in real life, I would usually have full control over the code which makes it a lot easier to improve performance.

PageSpeed Insights

I recently improved the PageSpeed Insights score for a site from 56 to 88 on mobile (98 on desktop!). It was actually fairly simple and didn’t take especially many hours.
The steps you’ll need to take in order to make a site fast may of course vary from one site to the other, but I’ve found that there’s three things you can do which will take you a long way.

  1. Use FOUT
  2. Async loading
  3. Use a caching plugin
  4. (Responsive images)

FOUT

FOUT stands for Flash Of Unstyled Content. Custom web fonts is a bottleneck and has a great impact in how fast the site feels.
Most browsers uses FOIT, which stands for Flash Of Invisible Text. This means that they will hide the text until the web font has loaded. If you’ve ever browsed the web on anything else than a fast and stable internet connection, I bet you’ve been waiting quite some time for the fonts to load.
That’s why it’s better to use FOUT, which means that the browser will render text in a default font until the web font has loaded.

Implementation

You can for example load your fonts using a tool called Font Face Observer. Once the font has loaded, add a class to the <html> element called font-loaded or something like that.
The font should only be applied when the class is set. That can be achieved by writing CSS like this:

h1 {
    font-family: sans-serif;
}
.font-loaded h1 {
    font-family: "Open Sans"
}

Async loading

The key to a really fast website is to remove everything that is render blocking. Stylesheets and scripts are render blocking for example. This means that when the browser bumps into a <link> or <script> tag, it won’t render anything more until that CSS or JavaScript file has been loaded.

That’s why it’s a good practice to put all your <script> tags at the bottom of the page.

It’s also the reason to why it’s a good practice to concatenate such files and keep those tags to a minimum.
But if you really wanna increase your PageSpeed Insights score, you should load them asynchronously.

Scripts

autoptimize

Autoptimize is my new favorite plugin for accomplishing this. It adds the defer and async attributes to <script> tags, which makes them load asynchronously.
Autoptimize also takes care of concatenation and minification, which is handy. Less plugins is better!

Stylesheets

Autoptimize makes your stylesheets load asynchronously to! The only thing you have to do yourself is to generate the critical, above the fold CSS.
There’s a bunch of tools out there which can do that. One alternative is to do it online with this site for example. There’s also CLI tools like criticalCSS you can use.
Just remember that you might need to fix relative URLs in the generated CSS.

header {
    background: url('../img/background.jpg');
}

This would result in an 404 since this CSS will be placed in the <head>. The path won’t be relative to the stylesheets location anymore. So you’ll need to replace the relative URL with an absolute one.

header {
    background: url('example.com/wp-content/themes/my-theme/assets/img/background.jpg');
}

This is the most painful step in the process of making your site fast, but you won’t reach a really good score on PageSpeed Insights without it.

Caching

wp_webperf_challenge_wp_super_cache

This is the easy step in the process. Install WP Super Cache, W3 Total Cache or whatever caching plugin you prefer.
One of my habits is to also throw in the .htaccess file from HTML5 Boilerplate.

Responsive images

The <img> tag isn’t render blocking, but we all know how big impact many large images can have on the performance.

Don’t send a 1440px hero image to a small iPhone 4S.

Use responsive images and give the browser the possibility to decide which image size that is the best.
WordPress has native support for responsive images since 4.4, but for additional control, I recommend my very own Responsify WP (shameless plug).

Summary

I’m very glad that my list of performance related plugins is much shorter this time. This is mainly because Autoptimize has become so powerful and takes care of many things.

Thanks for taking the time to read this massive post written in bad english. Here’s the list of tools and plugins I use: