Supercharge Your Site With a CDN

As a web designer, you already know that great design is essential for a website—it’s the concept of design you trust, unless a website looks absolutely amazing, it’s going to be hard for new visitors to trust that site. That’s how essential great design is to a website.

However, there’s another essential part of having a trustworthy website, the positive UX which comes with a fast, snappy website.

After great design, speed is one of the most important factors which contribute to the success of a website.

But Why is Speed so Important?

The importance of a fast website has been researched over and over again.

Sites which are not fast enough create a negative perception, with the actual loading time of a site significantly affecting the conversion rates of websites.

As the loading time gets higher and higher, the conversion rate goes down significantly, with the optimum conversion rate happening at a page load time of 2.4 seconds.

What is a CDN and How Can it Help Speed Up My Sites?

Whilst there are many benefits to using a CDN which we will discuss shortly, there is one basic premise of how a CDN makes your site faster.

Simply put, a CDN is much better equipped as a network to handle the traffic of a website than most hosting services.

Shared hosting is typically optimized towards delivering a stable environment where your website can run PHP or other popular hosting environments.

It’s not geared towards optimizing for speed most times.

On the other hand, a CDN’s primary aim, and actual infrastructure setup is geared towards helping deliver a lightning fast website.

But how does a CDN actually speed up my site?

How a CDN’s Infrastructure Speeds Up Your Site

There are a few reasons why your website could be slow:

• your shared hosting server is overwhelmed and responds slowly;
• the images and content of your site are large and take a lot of time to download;
• your website is using too many different scripts and images which are not optimized for a fast loading website;
• the server location of your site is in a geographically different region than the visitors of your website.

There are other reasons, but these are the major ones.

You can address each and every one of these individually, we’ll focus mostly on the latter two here…

Your Shared Hosting Server is Overwhelmed and Responds Slowly

Shared hosting servers are not meant to be fast. They are meant to be affordable.

The economics of shared hosting means that to drive down the costs, the number of different websites hosted on the same server is significantly high.

That means, each time somebody visits your website, the hosting server is competing for resources with ALL of the websites hosted on the site, which means it typically takes more than a second to start serving your website.

Now, when we’re talking about making a website, a penalty of a second before we start doing any optimizations is a terrible way to start.

So a couple of recommendations:

1. If your website is hosted with WordPress, you need to find a reliable WordPress hosting company, with great reviews, which is not cheap.
2. Opt for a higher payment plan, ideally a VPS, such that your site will have enough resources and won’t be competing with hundreds of other sites

The Images of Your Site are Large

One of the largest impacts your site can have in terms of loading time, typically comes from the images hosted on your site.

You’ll find plenty of blogs touting the value of using images in your website and blog, and of course, this is excellent advice.

Images are necessary to break up large chunks of text and make for better readability.

Who also hasn’t heard of the phrase: “An image is worth a thousand words”

Yes, images are vital to the success of your site.

Yet, they have a drawback.

Unoptimized images can kill the loading time of your site.

Now, in an ideal world, we’d take the recommended approach of saving each file in a web-friendly format, optimizing large images and compressing them to a size which is acceptable without losing any of the quality.

Yet in reality, we simply don’t have the time or the inclination to go through an optimization process for each and every image.

But, there is a solution. Automation.

Once, again, CDNs come to the rescue. Image compression and optimization is typically a built-in feature of a CDN.

In essence, you go about your business of creating a great-looking website with awesome imagery, the CDN will handle the compression and optimization of the images.

Your Website Uses a Lot of Scripts

This is another speed killer.

When we are just starting out as web designers, we enjoy discovering new plugins and testing them out and installing them on our website, never realising what the impact of the plugins will be.

Even established web designers tend to fall into this trap. Using tens of plugins to make sure the functionality required by the customer is delivered has its side effects.

In reality, each plugin you install on your site adds Javascript files, CSS files and requires more performance from your site.

You’ll see that in the form of a lot of requests on performance testing sites and a very-long loading time.

Again, a few recommendations:

1. Keep your site as lean as possible from plugins, less is more
2. Combine, compress and minify scripts
3. Enable HTTP/2

Whilst a CDN won’t help you decide which plugins to keep and which plugins to dump, a CDN is able to actually perform on-the-fly compression and minification of scripts, to make the total size of the content of your site smaller, and thus faster.

The third and very important recommendation is the setting of HTTP/2 – we’re not going to go into much detail, because we’ve already discussed HTTP/2 extensively, both on this site and elsewhere.

HTTP/2 has been written specifically to optimize the loading time of websites, particularly those websites which have a lot of different resources to serve.

Most CDN services allow you to quickly and easily enable HTTP/2 on your website giving your site an instant speed boost.

Even if you’ve done all of the above optimizations, there’s still one thing which can totally kill the speed of your website.

How do you fix that?

The Location of Your Website Server

Ok, if you’ve followed our advice your website should now be significantly faster than it was before.

But, there is one thing which can kill your website’s loading speed.

If your website is aimed at a local audience, your solution is simple: choose a good hosting service which is as physically close to your target location as possible.

However, this is more difficult if your if your website is catering for an international audience.

You simply can’t chose a server location which is physically close to all of your website visitors.

You can do the next best thing and host in the visitor location which is the most popular, but there’s a 2nd, more effective solution.

A CDN service is aimed specifically is fixing this problem.

A CDN’s infrastructure is designed specifically to fix the problem which we have just described.

CDN’s have a network of hundreds of servers in tens of locations around the globe. These servers called edge or caching servers will replicate your images and static resources such as Javascript and CSS files to these locations.

When a user then hits your site, the heavy resources will get served from a location which is as physically close as possible to your visitor.

This reduces significantly the problem of distance and gives your site a very significant advantage in terms of loading speed.

How to Setup a Free CDN

The great thing about using a CDN, is that you can easily boost the speed of your website without having to pay anything extra, particular if your website is still growing.

Most CDN services offer a free plan, which will provide the essential caching functionality we discussed above. Typically, besides content optimization, you’ll also got a boost in your website’s security too, through the security mechanisms implemented by CDNs.

As your website grows and the needs of the site grow, you’ll then be able to upgrade to a plan which suits your needs better.

There are a couple of ways of setting up a CDN, this mostly depends on the actual CDN you will be using.

Install a CDN Plugin

The first way of setting up a CDN is by using a CDN plugin. When setting up your CDN, you will get a URL which will be the new location of the static images of your site.

The CDN plugin will rewrite the URL of static resources such that they will be served from the CDN.

https://www.example.com/images/logo-default.jpg

is now rewritten as

https://cdn.example.com/images/logo-default.jpg

You’ll need to perform a few slight changes to the DNS entries of your site, such that cdn.example.com will resolve as the URL provided by your CDN.

You can use the CDN Enabler plugin if you’re using URL rewriting service such as KeyCDN (the authors of this plugin), MaxCDN or Incapsula.

Once you’ve installed this plugin, the only thing you’ll need to do is enter the URL provided by your CDN service, and you should be good to go.

Install a CDN as a Reverse Proxy

Another, better way of installing a CDN is using a reverse proxy.

This also requires minor changes to your DNS, which are typically specific to the CDN you will be installing.

This implementation is advantageous because it removes a significant load from hitting your server directly.

Are You Ready to Take Your Website to the Next Speed Level?

As we’ve seen above, installing a CDN is not as prohibitive in terms of price as one may think. Besides that, the performance boost given to your site will be a significant UX improvement.

If you’re looking to speed up your site quickly, a CDN is a must-have.

David Attard

David is an inquisitive web designer who frequently shares his tips and tricks at CollectiveRay. When he's not blogging about web design, some thing he's been into for the last 12 years, he's usually dreaming about his next big thing.