Tag Archives: site speed

Two ways to speed up WordPress

It’s widely held that when you add too many plugins, WordPress gets slow. But what if you need these plugins? Fortunately, you can speed up WordPress on your website, regardless of plugin count.

The fact of the matter is, speed of WordPress sites is almost never a problem with PHP or MySQL, or even Apache. While these can all play their part in slowing a website down, it is generally not the performance killer. The real performance killer? Render-blocking scripts. If you want to speed up WordPress, this is possibly the most important area to tackle.

Check out your Google Page Speed to see what’s happening here. If you’re running a standard WordPress install and have tried plugins that promise faster page speeds with things like concatenation and minification, you’re probably not going to see much difference. That’s because while it will take the browser less time to read these files, and it doesn’t have to read whitespace, it still has to read a lot of the same lines. 50% of a big file, is still a big file.

Think of it this way: It takes you a few milliseconds to load an HTML page – even a PHP rendered one, if it’s well written. Now, imagine loading that same script 20 or 30 times. It will probably take you 20 or 30 times as long. This is especially true on an Apache server because frequently Apache calls these files directly (unless you’re using a caching system – more on that later). JavaScript and CSS files work similarly. Your web page needs to open up these files and process them before being served to the browser. What makes JavaScript a real killer is that the browser needs to parse and execute the JavaScript, loops and all. By default, it does this before the website loads. Additionally, in modern websites, JavaScript operations can be very intensive, so that, taken as a whole, you may have more JavaScript than you do HTML on a given page. This adds a lot of time to your page load.

#1: Asynchronous scripts to the rescue!

It doesn’t take much effort to implement a strategy that can noticeably speed up WordPress. You can do this by making your Javascript asynchronous and/or deferred, which, really simply, means that it can open after your website has loaded. In most cases, the lack of scripts on page load won’t be noticeable, because your scripts will load within a few seconds. What will be noticeable is that your website is suddenly much faster.

There are a few good asynchronous/defer script plugins out there. The two that I’ve used are:

  • Async Javascript – This is a very simple plugin that does what it says it does. It does not defer jQuery by default… Which is good, because that tends to trigger all sorts of errors. You can also exclude files simply by adding the script name, and select between defer and async. I tend to go with async unless I’m getting too many errors, because it guarantees the best page speed. Unfortunately, when a lot of dependencies are required, sometimes it is not feasible. This is also important for any plugins that interfere. In my opinion, this is the easiest plugin to get set up and working the way you want it to work.
  • Fast Velocity Minify – Another great option for plugin developers, this also caches, minifies, and concatenates your files if you so desire. The concatenation is a bit overkill here, but the fact that it has minification makes it a good option to take care of another common Google Page speed gripe.

Important: Make sure you test this out first on a local or staging server.  If you don’t have one, please be aware that this is highly likely to need some fine-tuning, so test your web pages immediately. To see what’s going wrong, in Chrome or Firefox, right click on the page and select Inspector. Then, navigate to the Console tab. You’ll need to track down the specific JavaScript errors. For example, when I received an error for our plugin, Featured Image Pro, that “imagesLoaded” and “masonry” could not be found, I had to create an exception for these two files, which exist in /wp-includes/js/. If this doesn’t make sense to you, STOP and get a developer to help you.

#2 Leverage Browser Caching

Another great way to speed up WordPress is to utilize browser caching. This is something I’m frequently guilty of skipping, but can help you speed up WordPress on your site, because your server isn’t hit when your browser notices that a file it needs is already stored locally. If you have control over your server and you have more than one website, you can do this universally or in your Virtual Host configuration.

Otherwise, put it in your .htaccess file.


<IfModule expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"
    ExpiresByType audio/ogg "access plus 1 month"
    ExpiresByType image/bmp "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    ExpiresByType image/webp "access plus 1 month"
    ExpiresByType video/mp4 "access plus 1 month"
    ExpiresByType video/ogg "access plus 1 month"
    ExpiresByType video/webm "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    ExpiresByType font/eot "access plus 1 month"
    ExpiresByType font/opentype "access plus 1 month"
    ExpiresByType application/x-font-ttf "access plus 1 month"
    ExpiresByType application/font-woff "access plus 1 month"
    ExpiresByType application/x-font-woff "access plus 1 month"
    ExpiresByType font/woff "access plus 1 month"
    ExpiresByType application/font-woff2 "access plus 1 month"
</IfModule>
<IfModule !expires.c>
    <IfModule headers.c>
        <filesMatch ".(css|jpg|jpeg|png|gif|js|ico|woff)(\?.*)?$">
        # cache 30 days
        Header set Cache-Control "max-age=2592000, public"
        </filesMatch>
    </IfModule>
</IfModule>

This will cache (non third-party) javascript as it appears in WordPress. If you have control over your server, it is probably easier to have mod_expires on, so type in:

a2enmod expires
service apache2 reload

Many servers will have this enabled by default. If not, hopefully they have headers enabled by default.

You can test your cache results using this tool.

There are few more advanced features, like gzip compression, and more advanced server setups, like Varnish/Apache, or Nginx/PHP-FPM. that you may want to implement. However, while these will speed up your site, they don’t offer you nearly the same bang for your buck in terms of obvious performance increase compared to time spent.