Google uses the speed of a website as a ranking signal. According to them it is a critical factor in providing a good user experience. When users visit a website, they expect it to load fast and without interruption. If a website takes too long to load it impacts the user's experience and causes frustration.
Website speed is an important factor in determining how long users stay on a site. A slow site is likely to have a high bounce rate and a low session time. This decreases engagement and conversions, and impacts a website's rankings.
With mobile device growth and mobile-first indexing, speed optimisation has become vital. Mobile devices have generally slower internet speeds and smaller screens. This means that websites need to load fast and be easy to navigate to provide a good user experience.
Core Web Vitals are a set of performance metrics that measure the user experience of a website. These factors are a part of Google's page experience signals. They help determine the quality of a website and how it ranks in search results.
Google can gain an understanding of the user experience of a website by measuring CWV. If a site performs well in these areas, it is more likely to provide a positive user experience.
In this article I will outline the use of a CDN to boost website performance. I will show how to setup a CDN using Amazon Cloudfront, S3 and Amazon Certificate Manager.
So what is a CDN?
A Content Delivery Network (CDN) is a network of servers distributed across the globe. These servers work together to deliver content to users in a fast and efficient manner. When a user visits a website with a CDN it requests its content from the CDN rather than from your website. CDNs can reduce the load on your website's local server and lower latency (speed of response). This can result in faster page load times and a better user experience. All things that Google is looking for to rank your site.
Getting a CDN setup with Amazon Cloudfront
Amazon CloudFront is a content delivery network (CDN) from Amazon Web Services (AWS).
In this example I am going to setup a CDN for a business called Example.com. The domain for this CDN will be cdn.example.com avoiding issues with crossing domains that can occur. In general if you are going to setup a CDN do so using a sub domain for your main domain.
To get started setting up Cloudfront you first need to have an Amazon AWS account. I will assume you've got one as the sign up process is quick and straightforward.
Once we're logged in we'll see the AWS dashboard. We will be using 3 services for this setup:
- Amazon S3
- Amazon Cloudfront
- Amazon Certificate Manager
I would also suggest having the DNS (name-servers) for your domain on Amazon Route 53. As part of the setup process involves validating your control of the domain you are using for the CDN.
Amazon Route 53 is a scalable and reliable Domain Name System (DNS) web service provided by Amazon. You can make use of Route 53 by changing the name-servers for your domain to point at the addresses they provide.
Route 53 is not mandatory for this setup though. As long as you can add DNS records (CNames) using your existing provider you're good.
So first step...
1. Create a bucket in S3
This is pretty straightforward.
- Click the orange "Create Bucket" button on the S3 bucket list page
- On the form that loads enter the bucket name and choose the region you want your bucket to be in. The bucket name is up-to-you. I tend to go for domain name with dots replaced by dashes so e.g. cdn.example.com would become cdn-example-com.
- DO NOT make the bucket public. Accept all the defaults and click the orange "Create Bucket" button at the bottom of the page.
2. Create an SSL certificate for the domain in Certificate Manager
Little bit more complicated. In the top right of your screen you will see your name with a little down arrow next to it. To the left of this you will see another drop down. This might say "Global", "Europe (London)" etc. This is the region selector.
- Click it and select US East (N.Virginia).
- Click the services button in the top black bar. Its to the left. From the list choose Certificate Manager (you may need to search).
- Click the orange “Request a certificate” button.
- On the first form make sure you select the public certificate option and then click next.
- On the second form enter the domain name you want to use for the CDN into the “Fully qualified domain name” field. This will be the URL you want to use for your CDN. So in the example we are using this would be cdn.example.com. You don’t need https:// etc.
- Click the orange “Request” button.
3. Validation for creation of SSL certificate in Certificate Manager
OK, so we’ve generated the request. We now have to prove to Certificate Manager that we own the domain we’re making the request for.
- Details of your request you’ve made will appear.
- Find the entries CName name and CName value.
- If your domain is using the Amazon Route 53 DNS you can click the button “Create records in Route 53” at this point. If not copy and paste these details into the DNS provider you use and save them.
- You’ll need to wait for certificate manager to issue the certificate. Once available to use it will show in the list of certificates.
4. Create a Response Headers policy
If you want browsers to cache the files they receive from the CDN then you’ll need to add a new "Response Headers"policy.
- Find Cloudfront in the services dropdown (top left of the screen). Click on it.
- You’ll see a sidebar to the left headed CloudFront. If you can’t see it, its because its collapsed. Click the little 3 bar (burger menu) icon.
- Click on policies.
- On the form that appears to the right of the sidebar click the response headers entry in the tab at the top of the form.
- Click the “Create response headers policy” button
- Give the policy a name (no spaces, lowercased with dashes).
- Scroll down the form to the custom headers section. Click the “Add header” button.
- In the form fields that appear enter “cache-control” in the name field. In the value field enter max-age=x where x is the number of seconds you want the item to persist as cached. People generally use the number of seconds in a year, so 31536000. So this value field would be max-age=31536000.
- Click the “Create” orange button at the end of the form.
5. Create the distribution
Time to actually create the distribution (CDN).
- Click the orange “Create distribution” button on the distributions page.
- In the form that appears click the origin domain text box. A drop down will appear. Select the S3 bucket we created earlier.
- Give the origin a name
- Scroll down to response headers policy. Select the response header we created earlier.
- I would suggest changing price class to North America & Europe to save money if you are UK based.
- In the Alternate domain name (CName) field click the “Add item” button and enter your CDN url (e.g. cdn.example.com)
- Click in the Custom SSL certificate dropdown. Choose the certificate you created earlier.
- Give a description if you want to. Otherwise click the “Create distribution” orange button.
All being well you will now (after the CDN has finished provisioning) have a new cloudfront CDN. There is a final step.
6. Add subdomain for CDN
In the list of distributions you have you should see your distribution. It will have a domain name entry that ends with cloudfront.net.
- Copy this domain name
- Go to the DNS provider you use (Amazon Route 53 or other).
- Create a CName entry with name of “cdn” and value of the cloudfront domain
- Save it and wait for resolution.
Done. If you upload a file to your CDN and request it in the browser now you should receive the file via the CDN. If you inspect the response you'll see that it has the header with the max-age set to 1 year from now.
Upload your files to S3 and enjoy faster delivery of static files.
Should you need to upload files again at any point you can do so. You will need to use the invalidate functionality in Cloudfront.