Using a CDN to speed up your WordPress site

Speed up your site with WordPress

Loading speed is an important factor in the success of your website, and a speedy website can boost user conversion and retention. WordPress offers are large collection of very useful plugins that can help you speed up your website. We’ll look at using a CDN with WordPress and image optimisation tools.

It takes a few minutes and even fewer mouse clicks, but these tweaks will make a huge difference in your site’s performance – read more about it below.

Web page speed testing

To get an idea of the ‘before’ and ‘after’ state of a website, we recommend website speed test tools such as Webpagetest or Pingdom’s. A mixture of HTML and CSS, Javascript, fonts and pictures are loaded in, and the tools report how long it takes for the site to start and finish loading. Depending on your performance tweaks (if any!), certain elements can really push that page completion time forward.

We’re fixing that today.

CDN for WordPress

What is a Content Delivery Network (CDN)?

A Content Delivery Network is a network of distributed servers in various locations around the globe. We call these locations points-of-presence (PoPs). Web content is retrieved from the host server and cached on the PoPs, increasing the amount of server locations where the content is available.

In a situation without a CDN, the file will always be served from the host server (the ‘origin’) – a process that can take a while if a server is in Amsterdam, but the user is in New York!

In a situation with a CDN, content is delivered from a location ostensibly nearer to the web user than the origin, cutting down the ‘travelling time’ of the data.

Mind that while a CDN can speed up delivery, it does not optimise the content itself. Large files will remain large files, and inevitably take longer to load – even when cached on a PoP. Content optimisation and CDNs are in a symbiotic relationship: they reinforce each other’s effectiveness. Therefore, it’s always important to look at both.

Using a CDN with WordPress

One of our favourite WordPress plugins is W3 Total Cache, which comes with a fully equipped web optimisation toolbox. It also packs CDN support, and setting it up is super easy.

Step 1

In the General section of the W3 Total Cache plugin, and under CDN, select the CDN provider you’re using. Some providers are partnered with W3 and are listed in the drop-down menu. In case your CDN provider is not listed, select Generic Mirror.

W3 Total Cache Generic Mirror CDN selection

Selecting ‘Generic Mirror’ in the General Settings of the W3 Total Cache plugin

Hit save and go to Step 2.

Step 2

In the CDN section of W3, scroll down to Configuration. Enter your CNAME in the field after ‘Replace site’s hostname with’ and click the save button. In case you’re with one of the CDN partners of W3, you may also need to fill in your API credentials. Click save and you’re done, it’s that simple!

W3 Total Cache CDN configuration

Entering your CNAME in the CDN settings of W3 Total Cache

You can select the types of WordPress content you want to use with your CDN in the same menu, and also change the SSL configuration.

For a more detailed, step-by-step guide on how to set up your CDN with WordPress and W3 Total Cache click here. W3 is free to use, with optional paid plans that include support, configuration and optimisation help.

Image optimisation

Images are often the culprit behind slow loading sites, and using a CDN only gets you halfway there. With a bit of WordPress fine-tuning images can easily be slimmed down, and the exercise makes your site a whole lot lighter. Smaller files will take less time to load, and often times a web user won’t notice the difference in quality!

We use EWWW Image Optimizer, a free-to-use WordPress plugin that automatically optimises newly uploaded images. With a few clicks your current library can also be optimised:

EWWW WP plugin image optimisation

Optimising your existing library

The plugin allows WordPress users to also apply lossy reductions, which can further reduce the filesize but may result in a visual quality loss. The default is set to lossless optimisation. On our site we’ve used the lossy file reduction – can you tell?

Another great tool for image optimisation is Kraken.io, whose web interface is free to use. Users can select between lossless or lossy reduction, and resize the image if needed. Kraken.io has a WordPress plugin, which is part of their paid plan.

Reducing the file size of images catches two birds with one stone: your images load in faster and your overall bandwidth usage decreases, making your CDN even more cost-effective.

Using a CDN and cutting down on image bloat with a file optimisation tool are great first steps to speed up your WordPress site. With these quick and easy steps your WordPress website will be lighter, faster and more user-friendly.

 

About the Author

Thijs de Zoete

Technical guy at Warpcache