How to increase the speed of a WordPress website

Why does WordPress website speed matter?

In the early days of the internet when dial-up modems were commonplace, websites were extremely small. Even so, some of us will remember going to put the kettle on while a website loaded slowly pixel by pixel!

Now that we have faster internet connections, surely website speed isn’t as much of a concern? Actually, quite the opposite is true. Internet users have become so used to fast load times, that anything that takes more than a few seconds to load causes irritation. More often than not, the potential visitor will simply click onto something else rather than wait for a slow page to load.

As well as the negative impact on the user experience of your website, Google treats page load time as very important in it’s ranking algorithm.

How to measure the speed of your site

The speed at which a website loads on your computer will be dependant on your hardware, software and local internet connection. Therefore, it’s important to run an online test to get a true idea of the website performance across the internet.

There are several tools that you can use to instantly measure the speed of your website. A simple one that we like is the Google Speed Test.

Why WordPress needs specialist hosting

Although the WordPress platform itself is actually one of the lightest CMSs out there, a normal WordPress site will include a theme and several plugins to function. The more plugins that are added, the more resource-hungry the website will become from a hosting point of view.

This means that any server hosting a WordPress site needs to be “tweaked” for it to run efficiently. This usually involves the following:

• Increasing PHP variable limits
• Increasing PHP timeout limits
• Increasing upload size limits

Some hosting providers make this easier to do than others. A lot will depend on the competence of the support staff and their willingness to meet the needs of your particular website.

Having had first-hand experience with most major hosting providers, we have settled on a preferred supplier who we wholeheartedly recommend to our clients – WP Engine. Click on the link below to find out more:

 

 

Here are the reasons for this recommendation:

• Their servers are specially tuned to only run WordPress websites (no technical tweaking necessary)
• Even their entry level account offers huge speed performance gains compared to any other provider we have used (even more expensive ones)
• They offer an advanced “caching” system (which stores images locally to speed up the site)
• Their system runs automatic daily backup/restore points
• Free SSL encryption (https://) that take 5 minutes to setup
• Straightforward website migration plugin for WordPress (to help move your site from your existing provider)
• Their support staff are hugely helpful and very knowledgeable about WordPress

Optimise images

Once you have your hosting sorted out, one further major cause of slow loading websites is the use of uncompressed image content. Modern websites make use of beautiful large, full-bleed images. However, if these are not effectively compressed, the file sizes can be huge which will have a massive impact on the page load time (as well as chewing up a large proportion of your mobile users’ data plans unnecessarily).

The most effective way to solve this is to crop and optimise your images in Photoshop before they are uploaded to the site. For those with this ability, it’s possible to tweak the file size with hardly any visible loss of image quality (which results in a very effective resolution/file size ratio).

However, the majority of WordPress users don’t have this option and therefore a plugin which auto-compresses images would be a better way to handle it.

The Imsanity plugin is incredibly easy to setup and start using straight away. You can set the percentage .jpg quality and the max width/height to reduce uploaded images to. It’s also possible to apply these settings to any images that are already on the website.

Another alternative is WP Smush which has similar options to Imsanity but also includes further information (such as how much total file size reductions have been made).

Disable and remove inactive plugins

A lot of WordPress users will try out multiple plugins on their site before deciding which one to use. However, an inactive plugin still takes up disk space on the hosting server.

More importantly, what a lot of people don’t know is that an out-of-date plugin (even if it’s inactive) can continue to be a potential security risk.

Minify HTML, Javascript and CSS

A WordPress website with a theme and several plugins installed will be loading HTML, Javascript and CSS code from various sources. This all has an effect on the page load time.

Minifying basically combines these multiple files into a single file for the user’s operating system to cache.

The blank spaces between lines of code are also removed which speeds up how quickly it can be processed by the hosting server.

It’s important to take a backup before applying a minification plugin to your site – just in case it has an adverse effect on themes or plugins which don’t support it.

A good example of a minification plugin is Autoptimize.

Caching

Caching involves creating local html files for each website page (generated from the PHP, MySQL data, CSS and Javascript) and storing them on the hosting server hard drive or RAM.

This enables a faster load time because the HTML isn’t being generated every time each page is requested. The server doesn’t have to make repeated requests, execute PHP and make MySQL queries.

WordPress has many popular caching plugins available which are ready to use with minimal technical setup. Some popular ones include:

• W3 Total Cache
• WP Super Cache
• WP Rocket

It’s worth mentioning that WP Engine offers caching as standard, allowing you to automatically benefit from performance gains without the need for any plugin or setup.

Cache-control

Cache-control tells the server how to cache each resource the page loads. Each page should specify a caching policy that answers the following questions:

• Can it be cached?
• Who can it be cached by?
• How long can it be cached for?
• Can it be efficiently revalidated upon expiry?

When the server returns a response, it must state the Cache-Control and ETag headers for each resource.

Cache-Control states how, and for how long the individual response can be cached by the browser and other caching processes.

ETag generates a revalidation token which is automatically sent by the user’s browser to check if the resource has changed since the last time it was requested.

A cache time of at least one week (and preferably anything up to a year) for static resources is recommended.

By using the WP htaccess Control plugin you can define specific cache-control rules for file types.

An example to set a cache-control expiry time for .js and .ico files to 1 year (this has to be set in seconds) would be:

<filesMatch ".(ico|js)$">
Header set Cache-Control "max-age= 31557600, public"

Remove query strings from static resources

It’s worth mentioning that most caching plugins do not cache resources with a “?” parameter in their URL. This is also true even if a cache-control header is present. To enable caching for these resources, remove query strings from static resources using the following plugin.

Remove Query Strings From Static Resources

CDN

A CDN or Content Delivery Networks is a global form of caching. When a website visitor requests specific files, rather than your hosting company serving these to them, a global network of CDN servers deliver the files. This is done by taking a cached copy of your entire site and hosting it on multiple servers located around the world. Users are then served by the nearest geo-located server to them.

All of the previously mentioned caching plugins also support CDN from various suppliers. The popular Jetpack WordPress plugin offers free CDN for images as standard.

WP Engine offer their own CDN with all their packages, optimised for WordPress content and resources.

Prefer asynchronous resources

An asynchronous event is a process that runs outside the application’s primary thread, therefore not adding to the website page load time by loading the scripts separately.

There are plugins that offer asynchronous options as standard – for example when using Google Adsense, you can select the option for the asynchronous embed code rather than the default one. Alternatively you can opt for an asynchronous management plugin such as this one:

Async JavaScript

Avoid bad links

Over the lifetime of a website, page urls and resources will inevitably be moved or deleted. If redirects aren’t setup, the server will issue a 404 “not found” response when a user tries to access them. These are unnecessary requests that waste server resources (and of course create a bad user experience).

It’s worth taking the time to scan your site for these broken links with a link checking tool and fixing them. This can be done through the Google Search Console (formerly Webmaster Tools). A good way to fix these broken links is to redirect them to the relevant results with a redirection plugin like the aptly named Redirection.

This redirection functionality is also built into the WP Engine hosting control panel.

Test, test and test again

It’s important to measure the website speed (through the Google Speed Test for example) after implementing any of the above steps to see what effect it’s having on your website load time.

The idea is to use as few plugins as possible so if one isn’t having a noticeable effect, remove it from your site and keep the ones that do make a difference.

As a side note, our team of WordPress experts offer a range of WordPress Customisation and Technical WordPress Support services. Please do contact us should you require our assistance.