Would you have thought that a brand new WordPress website with only a few plugins would not have amassed too much overhead and would have a pretty good PageSpeed right out of the box? It’s probably a reasonable assumption on the face of it, but in reality it wasn’t the case. Well at least not for our website here at wpconsult.ie. (This was our initial website with a .ie domain extension for Ireland. This site is no longer available as it is now re-directed to wpconsult.co. It is still a good example of how even a new website needs to WordPress Speed Optimization )
Let’s see what the results were when we put it to the test on gtmetrix.com when the site was only less than a week old.
Speed Up WordPress Site
I have highlighted the main areas that will be of concern such as the Performance scores from Google PageSpeed and Yahoo YSlow. We will just concentrate on the recommendation from PageSpeed and carry them out first. These recommendations will be similar to that of YSlow anyway, and we will see both numbers rise together as we make the improvements.
The Page details numbers will fall with the improvement actions and these improvement actions will be based upon the recommendations from PageSpeed. I have highlighted the first five in the screenshot as it lists them in order lowest to high grade. There are more below, but I’m sure you get the idea. Finally, another thing to note from the screenshot is that I have circled where it says “Looks like you might not be using a CDN” , however we won’t look at that today as part of this case study.
If you are reading this post it is probably safe to say that you are aware that the page speed of your WordPress website is important, and these are the main reasons why.
- A fast website will increase your conversion rate
- Google will look on your site more favourably
- A better customer experience and a lower visitor bounce rate
- It reflects positively on your brand if your site loads faster
In this post I will point out and carry out the specific actions required to increase the speed of your WordPress website. There are some obvious places we could start, such as looking at your hosting or the plugins you are using, but here I will just follow the recommendations from the GTmetrix report.
I should also point out that you will need access to CPanel for some of these actions. You can contact your hosting provider for details on this, if they have not already given you access. In some cases depending on your hosting company, they may be willing to help you along. We host our sites on a Siteground cloud server and find it really good. Siteground in general are really helpful and just as important, they really know their stuff.
Enable gzip compression for your pages to improve website speed
The first recommendation is to enable gzip compression. Access to CPanel is required here as you will need to edit the .htaccess file in File Manger in CPanel. This is usually located within the public_html folder, however it you may not be able to see it and may be required to show hidden files in File Manager Settings. See the gallery of screenshots below for help with finding your .htaccess file.
gzip code to paste into your .htaccess file
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule>
Straight away after enabling GZIP compression for our text, html, JavaScript, CSS and XML, we can see an improvement in Performance Scores, and Total page Size
Ok, so now that we can clearly see that the first recommendation affected the speed of our website positively, let’s get on with making it even faster. I probably should say now that you shouldn’t really get obsessed with trying to reach 100% because it’s all relative to what your site’s functional role is and it’s not always possible. If it’s mainly an information site with just text and images then it’s likely you can achieve 100%, but if you have advanced plugins or advanced functionality then it might not be. However I do suggest that you strive for as close to the optimum as possible, whatever that may be for your site, but don’t get hung up on it.
Defer parsing of Javascript
What we want to do here is to defer Javascript from loading until after the page content has loaded. Javascript loading at the same time as the page content slows down the delivery of the content, affecting pagespeed.
In our case we are using the WordPress theme Enfold, so I needed to insert the code below into the theme’s functions.php file. It makes sure the Javascript only loads when it is being used and not all the Javascript at once.
/**
* Defer parsing of javascript.
*/
if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
// return "$url' defer ";
return "$url' defer onload='";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
Here is the before deferring parsing of Javascript
After deferring parsing of Javascript, we can see further improvements in the screenshot below, going from a score of 87% to 93%.
The importance and impact of your web hosting company on PageSpeed
Make your site faster with Siteground SuperCacher
We use Siteground and find it to be a terrific hosting platform with great support and we highly recommend it. They have a fantastic caching plugin called the SG Optimizer plugin. It’s designed to link WordPress with the SiteGround Performance services, and does so very well. However you should note that it will not work on any other hosting provider, other than Siteground.
It’s main function is to purge your dynamic cache whenever your content updates. For example, when you create a new post, someone comments on your articles, etc. In addition to that, if you have a working Memcached service on your server, the plugin will allow you to easily configure and enable WordPress to use it.
You need to switch on the service from your cPanel, and then switch on the service in the SuperCacher Config section of the SG Optimizer plugin. To learn more refer to the Siteground SuperCacher tutorial.
The plugin does more than just look after the caching issues on WordPress, but for case study on PageSpeed we are only looking at the caching element of it.
Image Optimisation for WordPress
While it is always better to do your image optimisation outside of WordPress and before you upload your images, I do understand that software such as Photoshop is not available to everyone as it can be costly if you are not getting enough use from it. There are other options such as GIMP, JPEGMini, TinyPNG etc. that can achieve great results, but again they may not be your chosen direction, and you may be looking for a plugin that can do this for you.
We used WP Smush in this case but there are alternatives. Here you can see a comparison of 3 differnent image optimisation plugins over on WPMU Dev that gives a pretty good comparison.
Other things to consider
When using plugins to optimise your website for speed it’s a good idea to start with a backup plugin (we didn’t need to because we have our own daily backups and if anything went wrong we could roll back)
Keep testing your website as you go because some new plugins installed may not be compatible with previously installed plugins and could cause problems. For example, I was working on another website recently to optimise it and used the Fast Velocity Minify plugin, but when I tested the website, I could see that it had interfered with the homepage slider, causing the images in the slider to only load on refresh, but not on initial load. So, I tried a different minifier plugin called Autoptimize and it worked for me without breaking the slider.
In general, only use plugins that are absolutely necessary as they can add overhead and slow load times. An example here is that we are using a Live Chat plugin on WPConsult.ie and the screenshots below show the affect it has on load time. We deactivated the plugin and then reactivated it to show you the difference with and without.
Before de-activating live chat plugin
After de-activating Live Chat plugin
Managing page speed will be an ongoing challenge for website owners, particularly on a website that is regularly updated with images, content, new products, extra functionality requirements via new plugins etc. and it is important to keep a handle on it by checking it on the various tools available such as https://developers.google.com/speed/pagespeed/insights/ , https://gtmetrix.com/ and https://tools.pingdom.com/
