Our Space

Your WordPress website can load faster than you think. Find out how we improved the speed of SoldierOn.org.au.

Posted on October 16th, 2017

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.

What causes a website to be slow?

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:

  • End Users Computer – The performance of the end user’s computer affects how fast the page can be rendered in the browser. Again, a number of factors here such as browser choice, age of system, operating system etc.
  • Internet Connection Speed – The more bandwidth you have the faster you can receive data, meaning websites will load faster for you. A 1MB website will load a lot slower on a 33kbps dial up Internet Connection when compared to a 100Mb NBN connection.
  • Location of the Server – Latency is a big factor in web performance, latency is the time it takes to reach the server from your computer. If you’re in Australia, accessing content on Australian Servers will be faster than overseas Servers purely because of the distance.
  • Server Performance – Obviously if the server is lacking performance or is overly congested, it will serve content slower. Generally dedicated servers will serve content faster than shared environments due to the lack of congestion and the server can be tuned specifically for the content it is serving.
  • Quality of the Code and Content Type – static content will serve faster than dynamic content. Dynamic content such as PHP is generated on the server, the page is built and then served to the browser. Poor code can cause dynamic content to take a long time to generate.

Using tools to identify slow points in a website

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.

Identifying the problems

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.

Serve scaled images

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.

Leverage browser caching

  • Browser caching stores webpage resource files on a local computer when a user visits a webpage.
  • “Leveraging” browser caching is when a webmaster has instructed browsers how their resources should be dealt with.

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:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

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.

Caching your content

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.

Defer Parsing of JavaScript

From the GTMetrix page:

“In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.”

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.

Auto Optimize

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:

Using quality hosting infrastructure

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!