Speed up WordPress Website

You know how crucial speed is. As long as you want to exist in the Internet world you’ll be in constant pursuit of faster website. According to unmerciful statistics about 40% of visitors will abandon whatever you may be offering to them if the content takes more than 3 seconds to load.

You can get quite comprehensive report on how your website is doing in terms of speed and optimization if you run a test using the following online tools:

 

WP Fastest Cache

Let’s get straight to the point. The quickest way to reduce loading time of your WordPress website is to install a plugin called WP Fastest Cache. It’s as easy as pie and the best part is that there’s relatively low likelihood of messing something up.

The most optimal settings will vary but you can start with ticking pretty much all the boxes under the “Settings” tab, except for just a few of them – check out the screenshot below. (There will pop up an additional dialog with the “Preload” option, just tick everything and go with the default value.) Hit “Submit”, switch to the “Delete Cache” tab and hit “Delete Cache and Minified CSS/JS”.

Note: You might get better results if you turn off Browser Caching but you should play a bit with the settings and see what works best for you.

 

W3 Total Cache

If you feel bored during long winter nights and want to delve deeper into the caching science and perhaps find out about how to selectively minify JavaScript and CSS files then you can install W3 Total Cache. Once you have activated the plugin go to Performance –> General Settings1 and try to tick the following boxes:

  1. Page Cache: Check Enable and leave the rest as it is.
  2. Minify: Leave it unchecked for now ’cause you could mess things up if you can’t be bothered to look into this further. If interested, see the Minify setup* in the blue box below.
  3. Database Cache: Check Enable
  4. Object Cache: Try to check this box but make sure it won’t slow down anything, especially your WordPress administration. It should not since the problem has presumably been fixed with the latest update but I suggest that you try accessing your website from more than one IP before you decide to leave this on.
  5. Browser Cache: Check Enable

Compare the test results and see what has happened.

*Minify setup – optional

(Skip this if you decided to leave the Minify box unchecked.)

Go to Performance –> Minify and in the top part click on the small ‘help’ button. A wizard window will appear.

You will see a list of your JS and CSS files. On the right side there is a button ‘Verify URI‘ next to each row. Click on it. There are several things that might appear:

  • If you’ll see a nice and neat piece of code written by a human then you’re safe with minifying the script. Firstly, go to the very end of the path to the given script and check whether there’s something like ‘?ver=XXXXXXXX’ there. If so, delete that part so that the name ends with .js only. (Example: …/main.js?ver=20160906 becomes …/main.js). Then just tick the ‘Add‘ box on the left. (Find out more about the query strings in the TIP section below.)
  • If you’ll see a wall of code without paragraphs, ignore it and do not minify such script or CSS! Meaning, leave the box unchecked! It could mess up with your website.
  • Now, let’s make it a little bit more complicated. As you can guess, there has to be some exception to the rule. If you happen to encounter a path referring to a font (will probably look like ‘//fonts.googleapis.com/css?family=…etc.’) do not tick the ‘Add’ box in that case even though the code will look neat. This could mess up with the fonts.

Apply the above procedure to all the JS as well as CSS files in the list. Once you’re done click on ‘Apply & close‘. Then, still being within the Minify section under Performance:

  • Scroll a bit down and tick the ‘Enable‘ box under the ‘JS‘ section and then hit the ‘Save Settings & Purge Caches’ button.
  • Now scroll down to the ‘CSS‘ section and do the same – tick the ‘Enable‘ box and hit the ‘Save Settings & Purge Caches’ button.

Note: The files you have added in the wizard, if any, will be now listed in the lower part of the ‘JS’ and ‘CSS’ sections.

Go back to Performance –> General Settings and make sure that you have ticked the ‘Enable‘ box under the Minify section.

I can’t give you any guarantee that everything will be all right. You might need to go back to Performance –> Minify and click on ’empty cache’ (or to Performance –> General Settings and click on ’empty all caches’) and then start the help wizard again and make sure that you have sorted all the JS and CSS in the list exactly as suggested above. If you experience any issues then just leave the Minify box unchecked in General Settings.

 

Note:

It’s not a good idea to have several caching plugins running simultaneously in the notion that one more plugin might solve what could not be solved by another. The result would most probably be countereffective. I’d advise you to pick just one that works best in your particular case and not to mix it with any other.

 

WP Smush

Unoptimized images may be one of the main culprits of slowdown. It’s worth to investigate what are the optimal sizes for your particular theme and set it up accordingly under Settings –> Media in WordPress administration. (Unfortunately it’s not a matter of course that it is always stated in your theme documentation.) However, if you didn’t have it properly set up from the start or if you have changed the theme then a tool like WP Smush could come in handy.

Install and just click on “Smush Images”. That’s it.

 

TIP | Remove Query Strings

The query strings are those version numbers appended to the JS and CSS names. The thing is that some servers do not cache files if there’s a “?” in the URL so it will affect loading speed of your site. The best way to get rid of them is to use the below piece of code. You can paste it straight to the respective functions.php file but I’d suggest that you install a plugin first, for instance My Custom Functions, that will allow you to easily add any PHP code whenever you need it without affecting your active theme and thus preserving all your tweaks if the theme gets updated.2

/* Remove Query Strings */
function _remove_query_strings_1( $src ){
$rqs = explode( '?v', $src );
return $rqs[0];
}
add_filter( 'script_loader_src', '_remove_query_strings_1', 15, 1 );
add_filter( 'style_loader_src', '_remove_query_strings_1', 15, 1 );

Once you’ve added the above code to your functions.php or, preferably, to the box in My Custom Functions plugin, you should no longer get the messages on the uncached strings in the speed test results.

Note: I’ve made a slight adjustment to the code to make it a bit more aggressive. If you run into trouble just replace the ‘?v‘ part with ‘?ver‘ which is a safer option.

Note: You’ll need to add the code to your functions.php over again every time you have updated your theme unless you’re using a child theme or My Custom Functions plugin.

 

.htaccess File

This topic is really comprehensive and you can well spend your lifetime trying to please those mean testing tools. I, for one, have ended up with none of the aforementioned caching plugins being active in my WordPress. However, a way to achieve the best result depends on countless things and will vary greatly. The more you know and can deal with manually the better chance you have of reaching to all those nice green indicators. Just keep in mind that one of the major factors is your hosting service and if it’s not good enough you might never be able to get there anyway.

What seems to work best for me is when the caching (expire headers – mod_expires) and some compression (mod_deflate) is done by adding a few lines of code to my .htaccess file on the server my website is hosted on (which is Apache) rather than by the plugins. But again, this may vary even if your host is running Apache too so it would be of little use if I state the said code here. For instance, turning off ETags in my case seems to be counterproductive as well as adding cache-control headers (mod_headers). But it may work for you. I’ve got my WordPress installation located in a subfolder that’s why I have adjusted the secondary .htaccess file in there, not the main one in the “www” folder. For me, the additional code works only when added before the “# BEGIN WordPress” part.

 

Fast Velocity Minify (Recommended)

In addition, I’ve got the Fast Velocity Minify running in my WordPress (with not a single one of the boxes ticked in the Settings which means I’m not excluding any of the functions and just letting the plugin do the full job). As opposed to several other methods I’ve tried out, this really merges and minifies everything (CSS and JavaScript) which is the best way to reduce a number of http requests and thus decrease the page load time.

 

Defer Parsing of JavaScript

In an attempt to defer parsing of (render-blocking) JavaScript I have tested out about 5 or more slightly different code snippets. This is the only one that is finally working when appended to my functions.php:

/*function to add defer to all scripts*/
function js_defer_attr($tag){
# Add defer to all remaining scripts
return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'js_defer_attr', 10 );

If that messes up with anything on your website then try to replace all the “defer” parts in the code with “async”. That will load the scripts asynchronously instead of deferring them which is a safer option.

Note: You’ll need to add the code to your functions.php over again every time you have updated your theme unless you’re using a child theme or My Custom Functions plugin.

 

ImageRecycle

Apart from that, I have dragged all the images through ImageRecycle and rewritten them in the /wp-content/uploads folder. This online tool can surprise you how much data you can still save even if you think that you’ve got them all perfectly optimized (especially when it comes to JPEG’s and PNG’s). The optimization is not absolutely lossless but the difference is really negligible and hard to notice.

 

WP-Optimize

The initial server response time can be affected quite significantly if there’s a mess in the database tables which is not at all unusual given the way in which WordPress handles them. For instance, there are all the revisions saved in there, meaning that every time you make a slight amendment to a post or a page, its new version is stored in the table. WordPress is set by default to store unlimited number of revisions so everything is there. You can set your own preferred number of revisions in wp-config.php which is a wise step but it will nonetheless not delete the old ones.

Also, you can go to your WordPress database table in phpMyAdmin –> then check everything –> and choose “Optimize” which might help a lot (do make a backup before!) but again, the old garbage will still remain untouched. A great way to clean and optimize the tables is using a plugin called WP-Optimize which also offers an option to delete the old revisions.

 

Add your website to Cloudflare

Cloudflare free plan costs nothing and can accelerate your website a great deal. It works somewhat like a Content Delivery Network (CDN) but is very easy to set up. All you need to do is sign up and follow a few steps described on their website. Then you need to update the nameserves for your domain in your domain registrar administration with those provided by Cloudflare. The procedure might take up to 72 hours before taking effect.

Note: You can safely ignore the “cookie-free domains” requirement in YSlow test results. By default, Cloudflare already caches static content, so there is no need for cookie-free domains.

 

Conclusion

Now I’m at the score of 91 (for Desktop) on the most strict and annoying Google’s PageSpeed Insights and, at the same time, I made it to 100% (for PageSpeed Score) and 95% (for YSlow Score) on GTmetrix. And I got it down under a half a second on Pingdom (as you can see on the below screenshot). I could possibly get higher scores if I loaded the Google Fonts in a more proper way but enough was enough. I’m not going to fool around anymore with this both intriguing and frustrating science.

 


1. [There will pop up an additional dialog offering you an “Edge mode” when you enter the settings area for the first time. Opt out and just close the window.]

2. [Just be careful not to paste something inappropriate in there ’cause you could break the plugin and then have a hard time restoring it.]

2 Replies to “Speed up WordPress Website

Leave a Reply

Your email address will not be published. Required fields are marked *