Hey! I’m Alex Denning and seven years ago I founded WPShout. I passed the site to Fred and David when I started university, who have done wonderful work since. I’m now freelancing full time and producing a course for WordPress users to become WordPress masters. Today’s post is an excerpt from the course. Enjoy!
A fast website is important. 47% of people expect a site to load in less than two seconds and 4/10 of your visitors will abandon your site if it takes more than three seconds to load. One usability study (that is dated, but the theory remains legitimate) suggests users will tolerate a small delay, but will be equally unsatisfied with a medium delay as a long delay.
You might not think of your site as “slow”, but even if it takes a bit of time to load visitors may perceive it the same way as they would an exceptionally slow site.
There’s a way of avoiding visitors leaving because your site is slow: have a really fast site.
One of the biggest hurdles you’ll face when trying to make your site faster is images and other static files such as JS and CSS. Images especially can be large files and slow to load (especially on cheap shared servers). To improve this you can use a CDN.
What’s a CDN?
CDN stands for Content Delivery Network. A CDN is made up from collection of servers that are spread around the world. They are generally optimised for serving static content quickly.
The way they work is for there to be an ‘origin’ server that stores your static content (images, JavaScript, CSS, etc) and distribution servers that give the content to the users. The origin server is the parent server that stores the master copy of the images (in our case it will be the server that is running WordPress).
When an image is requested from the CDN it first calculates the server that is geographically closest to you and that server checks to see if it has the requested image. If it doesn’t it loads it from the origin server. If it does it displays it.
The benefit of this are twofold:
- The servers are optimized purely for serving static content (or in some cases just images) and so can load content faster.
- The servers are located as close to the user as possible. This means the image does not have far to travel, so can get to your users quickly.
This all sounds quite complex – and to be fair it is.
Thankfully, you don’t have to deal with the technical aspects of CDNs – you can just take the benefits. There are a number of services which handle everything for you and make it easy to get a speed boost from CDNs on your site.
First we’ll look at what is by some distance the best WordPress CDN solution.
Photon makes your life really easy
Photon is a CDN that’s really good. It’s also free, which is handy. There are a few reasons Jetpack’s Photon service is good and we’ve separated it from the other CDN plugins:
- It’s part of the Jetpack plugin. Jetpack has a host of really useful features and chances are you’re using it anyway. Just setup Jetpack (install from Plugins ? Add New; search for Jetpack) and enable Photon and you’re CDN ready. No more work needed. This process is by far the simplest to set up. Many of the other CDNs need some sort of technical changes to your server setup, but not so here.
- Photon will automagically optimize the images for you. Most CDNs will simply serve the images you give them, but Photon makes those images smaller. To do this Jetpack uses a file format called webp. Developed by Google, webp is the best compression algorithm around. Currently it’s supported by Chrome and Opera web browsers – and Photon knows this, so it only serves webp images to Chrome and Opera users. That accounts for nearly half of all browser usage, though, so it’s not to be snubbed.
- A further, more advanced function of Photon is that you can apply filters to images, and crop and resize them. The cropping and resizing Photon does by default (just use the standard WordPress
add_image_size()functions), and for more technical users you can add filters to change how the images look.
To set Photon up is the same as with any other Jetpack module. With the main plugin installed, head to Jetpack ? Settings, scroll to find Photon and press “Activate”. That’s literally it (told you it was easy).
There’s information about Photon here and API documentation here.
Alternative CDN options
So why would you want to use a CDN when Photon is so great? Three possible reasons:
- Privacy. Photon is run by Automattic (the company that owns wordpress.com) and some users are suspicious of them. A bit tin foil hat? Maybe, but Automattic is a commercial company offering a free service and it’s presumably not exclusively out of the goodness of the hearts.
- The cache does not invalidate. This means you can’t delete an image. If you want to replace an image you have to upload it with a new name.
- Photon only supports images, so if you want to serve your JavaScript and CSS from a CDN then you would need to use a separate service.
Unfortunately, try as we might, we’ve yet to find a CDN that is as easy to set up as Photon.
This isn’t necessarily reason to fret, however. Loading images from Photon is going to do the majority of the work on your site’s loading speed. The gains from loading other static files from a CDN are marginal, and unless your site is really popular it’s unlikely make a difference such that it’s worth the effort.
If you still want to go ahead with your CDN setup then below are the best commercial options for you to choose from.
The best option: Cloudflare
Cloudflare are a very good option. They do a lot more than work as a CDN, including enhancing security, so are well worth a look. Cloudflare are listed first as their generous free plan will be sufficient for most users (if you need more, pro plans start from $20/site/month).
If you want to chase those marginal gains and pair Jetpack with another CDN service, Cloudflare is the one to go with.
The only downside is the setup is nowhere near as simple as Jetpack’s. You’ll need to sign up for an account and follow the instructions to update your DNS records. These may take a couple of hours upto a day to propagate across the web. Once that’s done you can choose the free account and you’ll be setup. WPBeginner has a full tutorial on the process.
Other Commercial Options
- Incapsula provides a similar service to Cloudflare, giving you both security and speed benefits. Their free tier is quite generous and it’s one of the easier services to set up (they have a WordPress plugin to ease integration – however it’s been a while since it has been updated). The down side to Incapsula is that its premium plans are more expensive that Cloudflare’s, so if you should want to get some of the more advanced features then you’d have to pay quite a lot more. Pro plans start from $59/site/month.
- KeyCDN is a relatively cost effective solution for powering a WordPress site, and they have a WordPress plugin that they have developed and maintain, so they may be worth a try. There’s a free trial but no free plan. Paid plans start at $0.04 per Gigabyte, so you would need a very popular site to pay more than $1/month.
- MaxCDN is probably the best known. It’s well used by some of the top blogging sites and frequently mentioned when you speak to other WordPress developers. You can add support for MaxCDN through plugins like W3 Total Cache (see documentation here). Prices start from $9/month.
- Fastly is a CDN service used by some of the bigger names in news media such as the UK’s Guardian newspaper. They recommend the use of the Purgely plugin, which is developed by Conde Naste, for integrating with their service. They are not the cheapest CDN around but they have a trial option that gives you $50 credit. If you’re serious about speed they may be worth trying out.
The high end options
If you want more control – or really know your stuff – then it may be worth considering using Amazon Cloudfront or Google’s Cloud CDN. They offer a lot more fine grained control and more precise pricing – however they also need a lot more technical knowledge.
It’s probably worth paying a little more to have someone take care of all the technical challenges for you.
The best CDNs for the fastest site
The best free option is to use Jetpack’s Photon for images and Cloudflare for everything else. They are relatively easy to setup and combined will deliver a significant speed boost for your site. A faster site means happier visitors and much happier search engines 🙂
If you have a large site you’ll want to opt for premium service which offers more control. The services we looked at offer a wide range of features for all budgets and site sizes.
The whole point of a CDN is to serve your content to your users more quickly. These are set-and-forget services, so it’s well worth taking the time to make use of them and get your site loading faster.
A CDN is just one part of the puzzle in making your site quick. Installing a caching plugin, optimizing content, choosing a fast theme and selecting a good web host all contribute. For more or this – and all you need to do everything you want with WordPress, yourself – check out Become a WordPress Master. The course will give you the skills and confidence to make things happen with WordPress.
