Deliver your site through Fastly

Delivering your website through a CDN gives your users a faster and more reliable experience. The server hosting your content may be far away from your users, causing latency when they visit your site. Fastly caches your content closer to users and delivers it to them directly, instead having to fetch it from the origin every time you have a visitor. By reducing data transfer from cloud storage services, caching also makes your site more efficient and scalable!

Here's what you'll need:

  • Your origin hostname – this is the address your content is hosted at.
    • Don't have an origin website ready to use yet? No problem, you can use the Glitch demo project.
  • If you're using your own domain, you'll need access to your DNS records.
    • Don't have a domain you're ready to use with Fastly yet? No problem, you can use a test domain.

If you don't have an existing site you want to use Fastly CDN with, remix the Glitch project (make sure you sign up / into Glitch if you want to keep the project).

The instructions are all in the project README, so you can follow the steps in Glitch or here in the tutorial.

Create a CDN service

Sign up for a free Fastly account if you haven't already.

In your new account, click Create service and choose CDN.

  • Give your service a name – choose anything that makes sense to you.
  • Enter your domain.
    • If you have a domain you plan to route through the CDN, you can add it now, for example Users visiting your domain won't be sent through Fastly until you update your DNS records.
    • If you don't have a domain you're ready to use with Fastly, use a test domain instead. It should have the following format, with a unique text string for the first part:
  • Enter your origin host.
    • If you’re using a developer platform like Glitch or Amazon S3, the origin hostname will be at a subdomain for your project or bucket, for example:
    • If you bought a hosting package from a provider who perhaps also sold you your domain, your origin host will be either at the apex domain or at a subdomain you created, for example:
      • (without the www)
  • You can leave the default settings in place unless you know you need something different.

Create your service

Go ahead and Activate your new service!

Fastly will open your service config. Click the Test domain link to open your deployed site – the service might not become available straight away, so if you see an error just wait a minute and try again.

(Optional) Test your site performance

Try out a performance benchmark on your origin website and compare it to your Fastly deployed version. You can use your web browser to carry out performance tests – the available tools will depend on your browser.

In Chrome, with your origin site open (it'll end if you're using the Glitch project), navigate to your developer tools using View, Developer, Developer Tools. Open the Network tab and reload the page – select the site homepage address at the top of the Name list, and open Timing.

Test your performance

With your Fastly domain open (the address will end, carry out the same performance test and compare the time to your origin test. Note that the first time you load your Fastly domain, the site may take longer because the content has not yet been stored in the Fastly cache. Once it's in cache it will hopefully be faster!

HINT: Your site content will stay in the cache until it expires or is evicted – it's most likely to stay in the cache longer if you have frequent visitors.

Route your domain traffic through Fastly

Ready to send visitors to your domain through Fastly? Great, you can do that with free TLS and a couple of updates to your DNS records.

Add your domain to a service

If you haven't added your domain to the service yet you can do that now. Edit your service configuration and in Domains click Create domain. Enter the www version of your domain, or a subdomain you want to send through Fastly. Click Add and Activate your service.

Set up TLS for your domain

In Security, choose TLS Management, Manage TLS Certificates, and Get started or Secure another domain.

  • Enter your domain name and click Add.
  • Select Certainly and click Submit.

Now you'll need to verify your domain ownership by copying some info from Fastly into your DNS records. You'll access these wherever you registered the domain – the flow will vary a little depending on your provider.

  • In your Fastly TLS subscription, click Verification options.
  • Copy the ACME DNS challenge CNAME (_acme-challenge followed by your domain name) and value (a string of characters followed by
  • In your DNS account, add a new CNAME record with the _acme-challenge value you copied as the as the hostname, and the value as the address. Save your new record.
  • Back in Fastly, with any luck you'll soon see your domain being validated and your certificate will be issued.

To send your domain traffic through Fastly, you'll need to get the CNAME record from your new certificate – it will be one character followed by

Certificate CNAME info

  • Back in your DNS settings, add or edit a CNAME record for www (or whichever subdomain you want to use). Enter the value you copied from your certificate and save your record.

DNS example

For more detail on setting up your certificate, refer to the TLS quick start guide and Routing traffic to Fastly.

What happens when users visit your domain

When someone requests the domain, they'll be sent to Fastly, and Fastly will return a response to the visitor based on the service config that includes the domain.

  • If the content is in the cache, Fastly will return it without visiting the origin.
  • If the content is not in cache, Fastly will fetch it from the origin and store it in cache (if it's cacheable content).

What to try next

  • Discover CDN info in your browser
    • With your Fastly site open, use your browser tools Network tab to find Headers like X-Cache and X-Served-By to find out which Fastly POP is delivering the content.
  • Purge the cache
  • Create a synthetic response
    • Synthetic responses give your users a more reliable experience if something goes wrong on your origin server. You can add a response for specific errors, such as 404s your origin returns if the user requests a page that doesn't exist.