cheetah speed

Random Fact: Did you know, a cheetah can reach speeds of 68 – 75 mph making it the fastest land animal!?

I was recently contacted by a client, who I had worked with to host, build, and maintain their website. The website owner was concerned about a slowing website as she added more content, widgets, and features. I reviewed her website and the latest changes she had implemented, determined the issues via free third party tools, and in a matter of minutes was able to decrease her load time by an average of 30%!

The client wished not to be named, but gladly said I could share the results and WordPress speed up process with you all.

Here are the client's specs:

Hosting

Hosted with WP Engine*

WordPress & Theme

WordPress 4.5.3 running Sapphire WP theme.

Size

Page size: 2.0 MB

Requests

Requests: 111

*WP Engine is my #1 recommended WordPress hosting company. Find out why here.

Utilizing Pingdom’s free website speed test, I noted that the client’s website had a performance grade of D 67 ], but yet averaged a load time of 2.53 seconds. The site had all A 90+ ] scores for caching options (WP Engine is great at this!), but where the website lacked was primarily in its combination of external CSS and JavaScript.

I set out to find an automated solution to combine CSS & JS, and after some research happened upon the plugin Autoptimize. Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML, and was developed by Frank Goossens, turl, and Optimizing Matters. It requires WordPress version 2.7 or higher, and is compatible up to WordPress version 4.5.3 as of the latest release of Autoptimize v2.0.2 in May 2016. There are currently over 100,000+ active installs.

Autoptimize makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head and can move scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are advanced options and an extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.

Again, my client was hosted with WPEngine, so she did not need to leverage a WordPress caching plugin, as WPEngine does this for you. In fact, WP Engine actually bans all caching plugins because, and I quote “we do it better, and we do it automatically”. How’s that for confidence!

The benefits of WP Engine’s cashing includes automatic page caching, object caching, and CDN management and URL rewriting. It’s all automatic, and they manage it for you so you don’t have to do anything. If you dig into the technical documentation for WP Engine, you’ll find that their proprietary page-caching system gets through-puts of 9,000 pages per second! Even the fastest WordPress caching plugins such as WP Super Cache and W3 Total Cache are significantly slower, translating to slower websites and barriers to scalibility.

The WordPress Optimization Process

I tried a variety of configurations within the Autoptimize plugin, but found that coupled with WP Engine’s proprietary caching system, the Autoptimize Settings below yielded the best results.*

Optimize HTML Code
Optimize JavaScript Code
Optimize CSS Code

I left the advanced settings as-is, with Force JavaScript in <head> turned on, as well as Save aggregated script/css as static files turned on under Cache Info.

*Note that these settings may need to differ when on a different web host, or when utilizing a caching plugin. I would, however, recommend you start with these three settings, re-run your speed tests, and then adjust from there.

Before WordPress Optimization
After WordPress Optimization

The results were stunning as the site went from a 2.53 second average to a 1.76 average, across the three testing locations provided by Pingdom. In addition, you’ll note in the above results screen shots that the website went from a an ] grade for JavaScript and CSS combination, to a solid ] score. There were still a few issues presented, such as a significant amount of redirects and extra JS strings, but the majority of these were due to third party widgets and features integrated throughout the client’s website. (when not on her server, there isn’t too much she can do about optimizing their code). Nontheless, we were both happy with a new averaged load time with a solid 1 in front of the numbers, as outlined below.

Before Optimization

Utilizing WP Engine Caching Only

  • Dallas: 2.17 s

  • New York City: 2.84 s

  • San Jose: 2.59 s

  • D 65 ] @ 2.53 second average

After Optimization

Utilizing both WP Engine caching and the Autoptimize plugin

  • Dallas: 1.88 s (13% faster)

  • New York City: 1.78 s (37% faster)

  • San Jose: 1.61 s (38% faster)

  • B 86 ] @ 1.76 second average

My client was ecstatic about the results as well, as she had been looking for a 1.XX second load time, writing me this reply:

“Within an hour of receiving your email I saw an uptick in web sales on my site. It could be an anomaly after the holiday [4th of July], but we’re trending up nearly 20% on the day! Thank you so much!”

Now this certainly isn’t proof of any direct correlation, as the sample size is less than 24-hours old and isn’t proven yet. But the initial verdict is that a 30% increase in speed may in fact correlate to a 20% increase in eCommerce sales. That’s pretty amazing!

Recommendations to Speed Up Your WordPress Website:

  • Get Premium WordPress Hosting

    Consider a premium WordPress hosting company such as WP Engine that is built for speed, with automatic and integrated server-side caching.

  • If You Can't Go Premium, Leverage Caching Plugins

    If your budget doesn’t allow for a premium host like WP Engine, consider someone like SiteGround or Bluehost, and leverage a caching-plugin such as WP Super Cache, W3 Total Cache or HyperCache.

  • Compress All Images & Graphics

    When building your website, pay attention to image size, and compress JPG and PNG accordingly. (always try to shoot for 100kb or less in your image sizes!)

  • Compress All Images & Graphics

    After your caching is configured, images and larger graphics are optimized, install Autoptimize to combine and minimify JS, CSS and HTML.

  • Keep Adjusting Your Plugin Settings

    Keep adjusting your caching and Autoptimize plugins until you see a 1.XX in front of your load times!

I hope this tutorial was helpful. After years of working with WordPress, countless web hosts and caching plugins (both proprietary and open source), and manually optimizing CSS & JS from bulky WordPress themes, Autoptimize comes as a very welcomed free and highly effective plugin. I’ve installed it on many of my own websites, and encourage you to do the same.

Making it work for you

If you’ve made some changes to your WordPress website after reading this post, please comment below to let me know how it turned out. Did you switch to WP Engine and see a drastic bump in your site’s speed? Did you install a caching plugin for the first time? Did you try Autoptimize? Post your before and after load times below!