WordPress websites can load in a blink of an eye! Sadly most WordPress sites don’t get close to this. In this article we will talk about WordPress and how we can use the popular CMS to build a website without taking a performance hit.
We will be using the examples in this article with our friends at Soldier On. Check out their website at https://soldieron.org.au and find out how they support the community.
Firstly, let’s talk about what makes websites slow? This is a very open-ended pie in the sky question, as there are so many variables.
What constitutes a slow website? Everyone has a different idea, I have heard suggestions it is the TTFB or Time To First Byte, or the complete load time of the whole page. Personally, I think if you browse around a site and your happy with how fast everything is loading, it’s probably fine. Too slow would be at the point where visitors find the site unbearable so they leave and don’t purchase anything. Obviously the faster the better, the more enjoyable it will be for users and the more chance they will buy something from your website.
Now let’s look at the variables that affect speed. The total load time of the page, is from when the browser makes the request until the page is completely rendered in the browser. The process behind this includes:
You can use many tools to see how your page loads and what takes the longest time to load. Developer tools in Google Chrome is a great way to identify this however my favorite is a neat website called GtMetrix. You can find the website here: https://gtmetrix.com
We’ll be using GtMetrix and it’s scores as a case study for this article.
I’ve done a test on the Soldier On website and as we can see the website loads in 4.5s which is better than most websites however we can definitely makes some improvements.
You can find the full analysis break down of the website HERE
We will look at the top 5 priority issues and see if we can get these ratings up.
There are a few images on the website that are blown up absolutely huge and then re-scaled down to a normal size for a website. Instead of getting the website to re-scale these images every time the website loads, we can resize the images and load them that way.
Let’s take a look at our results after re-scaling the images:
Although we haven’t made much impact on the fully loaded time of the website, we have reduced the page size which will make a big difference when there is a lot of traffic to the website.
EDIT – The load time had gone up on this test because used http:// in the URL rather than https://. If we had tested with Https:// the load times would have been lower.
We can do this by enabling it within .htaccess of the website. The following code will tell visitors browsers what to cache and how long for. We’re going to add this to the top of your .htaccess file which is usually located in your public_html folder:
Let’s take a look at our score after leveraging browser caching:
Now we’re getting somewhere! Let’s see how much more we can do.
We looked at browser caching however now we will look at server side caching. When you load a dynamic web page such as WordPress, the web server needs to generate the webpage and load all of the content on the fly. We can enable caching so that it does all of this processing initially and then stores it in a cache for a visitor to view.
Fortunately WordPress has many plugins that can help do this for you. We’re going to look at WP Super Cache in this example.
We’ve just enabled the default and recommended settings within WP Super cache and then pre-loaded the cache so it’s all ready to go. Let’s have a look at our results.
From the GTMetrix page:
“In order to load a page, the browser must parse the contents of all
What this means is that every time the website loads it must run certain scripts which load certain parts of the webpage page. An example of this may be a embedded Youtube video.
What we can do is force all of these scripts to load at the end so that all of the static parts of the website can load first. In turn this makes the user experience of the site a lot better because the images and CSS of the website will load first making the website seem to load faster and all of the heavy duty scripts will load at the end.
Because of the complexity of this we will use a WordPress plugin to help us. I am using one called Async Javascipt which nicely ties in with GTMetrix and does all the work for us.
Unfortunately because setting up ASync and defer broke part of the website we weren’t able to enable it on the website. I would still recommend enabling it for your own website as we were looking at a fully loaded time in the 2 second mark.
To finish off the optimization i’ve enabled the auto optimize plugin which will tidy up bits of code and hopefully squeeze out any last performance we may be able to get out of the website.
Let’s take a look at our final result:
We would not have the same results if this website wasn’t hosted on a hosting solution that was not only fast but also reliable. The server this site is hosted on was built and run on the GoHosting network. We take pride in providing a great solution and work closely with our clients in bringing out the best of their website.
If you are interested in working with GoHosting to launch your new website or bring it up to scratch, contact us today!