So many of our clients don’t realize how important a fast loading website is to their SEO ranking. Fortunately, improving site speed doesn’t have to be difficult. Here is a step-by-step guide on how to get up and running with a Content Delivery Network (CDN) in order to drastically improve your site speed.
Page Speed – The Silent Killer
At Onsharp, we build 50–60 new websites each year on WordPress for our small business clients. We get to talk to hard working business owners and marketers on a daily basis, many of which don’t understand why their old site never ranked well in search. Most of them didn’t realize that slow load times were killing any chance they had at ranking well. Making matters worse, the recent Google Speed Update, released July 9, 2019, made page speed a major ranking factor for mobile searches.
Don’t think that we’re only talking about how fast your homepage loads. That’s the other mistake we see being made all the time. The person in charge of the website runs a speed test on their homepage, and if everything looks good, they check off site performance from their list and move on to other things.
Introducing the Content Delivery Network
Assuming you want every page of your site to rank in some form or fashion, you need to benchmark the speed of every single page of your site. After all, if you’re trying to get your fancy new blog post to rank well, how fast your homepage loads is not going to help move the needle.
While there are many, many factors that contribute to a fast loading website, the one we are going to focus on today is using a CDN to make your site load faster. It’s a very quick and easy feature to add to a WordPress site that can result in a major improvement in page speed.
What is a CDN?
In simple speak, a CDN is a service that delivers your website faster to your visitors by placing the files physically closer to them. It shortens the distance that information has to travel. When you go to a store, you go the one closest to you because it’s faster, right? Target, for example, has thousands of stores across the country in order to make shopping more convenient (faster) for its customers.
Similarly, a CDN uses a network of computers that are geographically spread out so that the one that is closest to you can provide the content you are looking for. If someone in Florida is requesting a page on your website, a server in Florida will deliver the site to them more quickly than a server in California. The CDN uses logic to decide which of their servers is closest to you to deliver the page you are looking for.
Configuring a CDN on Your WordPress Site
This probably sounds quite complicated, but the great thing is that we don’t have to worry about the complexity of how a CDN does all of this magic. All we have to do is pick a CDN provider, set up an account and connect it to our websites. In this article we will be using StackPath. This is the CDN we provide with our Website Essentials Program at Onsharp for our hosting clients, and it works great.
Create a StackPath Account
The first thing you need to do is head over to StackPath’s website and create a new account by clicking on the Get Started button in the top right corner of their homepage.
On the following page, you can either create an account by filling in your email address and a password or by using an account that you already have, such as GitHub, Google, or Facebook. In my example here, I am creating an account using my email address and a password.
Since StackPath provides more services than just CDN, the first thing it will ask you to do is to choose a service. For our use case, we will select Website & Application Services.
On step 2 of 4, select CDN from the list of specific services displayed.
On step 3 of 4, you will need to provide your payment information (credit card or PayPal). StackPath’s CDN service is only $10 per month and provides CDN services for an unlimited number of websites as long as you stay within their 1TB of traffic per month. 1TB is a ton of traffic, so you should be able to use this account for several websites.
Once you have entered your payment information, click Continue.
Once your payment information has been submitted, StackPath will display a progress bar showing you that it is configuring your account and creating your stack.
Once your stack has been created, you need to provide StackPath with some information about your website. Since you can host many websites under one account, StackPath creates a “stack” for each site you are hosting. All you need to worry about here is keying in your domain name. The CDN checkbox will be selected by default, which is what we want. Don’t worry about the Available Upgrades (Serverless Scripting and WAF). They are beyond the scope of this article.
One you have entered the URL of your website, click Continue.
On the following screen, StackPath will ask you to enter the IP address of the server that your website is hosted on. StackPath automatically figures this out and fills it in for you, therefore you should be able to leave this as is.
For Origin Authentication, leave that set to None. Click Continue.
You now have StackPath configured to serve up content for your site. This concludes the setup work within StackPath for your website, but we have one last thing to do here. We need to create some StackPath security credentials that we’ll need when we set up WordPress, so let’s keep going.
Create API Keys
To ensure security between your website and your StackPath account, we need to create API keys within StackPath that we will use when we set up the CDN in WordPress.
In StackPath, up in the top right corner, click on the icon for your account, and in the drop-down menu, click on API Management.
I recommend setting up separate API keys for each site you host within your StackPath account. Since this is your first site, by default there will be no API keys in the list.
To create your first set of API keys, click the Generate Credentials button.
A modal window will appear asking you for a name for your credentials. I recommend using your website address as the name. Once you enter the name, click the Save button.
Copy the Client ID and Secret Key as you will need these two pieces of information when we set up the CDN in WordPress. When you are done, click Close.
Connect Your WordPress Site to StackPath
Now that we have a CDN selected and set up for your website, we need to tell WordPress to use it to serve up content for your users.
First, go ahead and log into your WordPress back-end. For example, for my www.posterboard.com site, I’ll log into https://www.posterboard.com/wp-admin.
Once logged in, go to Plugins, and then click on Add New at the top of the Plugins page.
We are going to use a common and well-known plugin called W3 Total Cache to allow our WordPress website to use our CDN. Type w3 total cache into the search box. The search results will display automatically. Click on Install Now for the W3 Total Cache plugin. Once installed, the Install Now button will change to Activate. Click the Activate button to activate the plugin.
Now that we have the W3 Total Cache plugin installed, we need to give it some security credentials and turn on the CDN feature.
First, let’s give it your credentials. You will notice now that you have a Performance menu item in the left-hand navigation in WordPress with a long list of sub-menu items underneath it. Under Performance, click on the sub-menu item called CDN.
On the next page, scroll down to Configuration: Objects and click on the Authorize button.
A dialogue window will display. Copy and paste your API Client ID and API Client Secret into the boxes provided and click Next.
You will now be asked to select a site in StackPath. Select the site that you created earlier and click Apply.
If everything worked, it will tell you that the site has been successfully configured. Click Done.
Go back to the Plugins page in WordPress. You will see a list of all your installed plugins. Scroll down until you see the W3 Total Cache plugin. Click on the Settings link.
If you see the following box pop up, you can either join their newsletter and click Save & Close, or click Cancel to skip over it.
On the next screen, you will see a row of links that are shortcuts to the different settings that you can configure for the plugin. The one we care about here is called CDN. Click on the CDN link.
This is where we turn on the CDN feature to allow your WordPress website to use your StackPath CDN account. Check the box next to Enable to turn on the CDN feature. Then, select StackPath (recommended) from the drop-down list next to CDN Type. Then click Save Settings & Purge Cache.
Congrats, you’re done! Now, let’s test to make sure things are working as expected.
Confirm CDN Connection
To confirm that your site is using your new CDN, open a new browser window or tab in Google Chrome and go to your website. After your homepage loads, right click on the page and select View Source.
Do a Ctrl + F and search for the word “stackpath”. You will notice references to a StackPath URL, which confirms that your resources are loading from the StackPath CDN rather than directly from your website’s server. Mission accomplished!
Before and After Results
Before starting this process, I went out to GTmetrix, a popular and free website testing tool, and ran a speed test on the homepage for www.posterboard.com. Below are the results. As you can see, it took an eternity (9.6 seconds to be exact) to load the homepage.
Now, let’s take a look at the results after adding a CDN to the equation. As you can see, the site is loading in less than half the time, coming in at 4.3 seconds.
You will also notice on the YSlow tab that our score has improved from a D to a C because it has recognized we are using a CDN, which is known to be good practice for websites. While there are many additional performance improvements to make on this example website, this shows you how much a CDN can help move the needle, both from a raw speed perspective as well as the overall website grade that tools like GTMetrix or Google Page Speed will calculate.
As you can see, hooking a CDN up to your website is easy and it definitely doesn’t take long. It took me about 6 or 7 minutes from start to finish. That’s a pretty minimal time investment for such a huge performance gain. In our example, the performance gain was an astonishing 223%.
Not only will a CDN improve your SEO score, it will also help you avoid losing website visitors due to site slowness. We recommend setting a goal of 2 seconds or less for every page on your website. If you want to push yourself even further, go for a second or less.
Remember, the faster your site loads, the more likely you are to keep your visitors on your site and turn them into customers!