---
title: Self-host with Cloudflare
slug: web-experimentation/docs/self-hosting-with-cloudflare
docTags: 
createdAt: 2026-07-23T11:40:25.532Z
---

Self-hosting is ideal for customers who are using both HTTP/2 to serve their website and a [CDN](docId\:B6R0NKfiWX27X63SX0pmx). By self-hosting, you can eliminate an SSL connection to Optimizely Web Experimentation while using multiplexing to request the snippet faster.

While self-hosting with an HTTP/1 connection may eliminate an additional DNS lookup and the SSL handshake, there is no guarantee the script will download earlier than if it was downloaded directly from Optimizely.

## Use the standard snippet

See [Implement the one-line JavaScript snippet](docId\:Eynqg8Z-62r76dvDho6dx) to find your snippet path.

### Build a Cloudflare worker

Build a Cloudflare worker to point to the original request back to your Optimizely snippet.

Click the **Workers** icon to create the Cloudflare script and route.

**Script**

You need a script that listens for requests from the `/optimizelyjs/` route and replaces it with the one for your snippet.

You can use the script below by adding your snippet ID, or you can write your own. The following script uses an example snippet ID of *123456*.

```javascript
async function handleRequest(request { 
   const url = "https://cdn.optimizely.com/js/123456.js";
   return fetch(url))
}

addEventListener('fetch', event => {
   event.respondWith(handleRequest(event.request))
})
```

Give your script a descriptive name, such as *optimizelyjs*, and save it in your worker.

**Routes**

Specify a route for the worker. Add the following path:

```javascript
*<your_website_url_here>/optimizelyjs/123456.js
```

Do not forget to associate your script with this new route.

### Add the self-hosted snippet

If the Optimizely snippet is installed on your page, you must remove it and replace it with the new script tag that references your self-hosting path. [Add this new script tag](docId\:a3nBqUV00EHS6YncVXkrD) inside the `<head>` tag on your page.

The snippet format should be the following:

```javascript
<script src="/optimizelyjs/<your_snippet_id>.js"></script>
```

Replace `<your_snippet_id>` with the snippet ID for your project.

**Example**

```javascript
<script src="https://cdn.optimizely.com/js/123456.js"></script>
```

```javascript
<script src="/optimizelyjs/123456.js"></script>
```

Repeat this step for any additional basic snippets you may have across your site.

## Use a custom snippet

You can create a copy of the original snippet with a custom snippet. Follow [Manage custom snippets](docId\:YzAGyKckn2KeFZjE8TTRW) with these configurations:

- Select **Create a new snippet** for a single project for **Type**.
- Select **Include all pages from the selected project (default)** to mirror your original snippet under **Sources > Pages**.
- Select the **Settings** you chose for your original snippet.

If you already use custom snippets, you do not have to create one. Note your snippet key, as you need it later in the process.

:::hint{type="info"}
**Note**

Custom snippets are required due to the additional security they provide. When using a custom snippet, your snippet URL includes your Optimizely account ID. On your CDN, this verifies that all content is being served from your Optimizely account.
:::

While in Optimizely, go to **Account Settings > Plan**. Find your account ID and note it, as you are going to use it later in the configuration.

### Build a Cloudflare worker

Build a Cloudflare worker to point to the original request back to your Optimizely snippet.

Click the **Workers** icon to create the Cloudflare script and route.

**Script**

You need a script that listens for requests from the `/optimizelyjs/` route and replaces it with the one for your custom snippet.

You can use the script below by adding your account ID, or you can write your own.

```javascript
const accountId = "xxxxxxxxxx";
const scriptRoute = "/optimizelyjs/";

async function handleRequest(request) {
 const parsedUrl = new URL(request.url)
 let path = parsedUrl.pathname.replace(scriptRoute,"")
 const url = "https://cdn.optimizely.com/public/"+ accountId + "/" + path;
 return fetch(url)
}

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})
```

Give your script a descriptive name, such as *optimizelyjs*, and save it in your worker.

**Routes**

Specify a route for the worker. Add the following path:

```javascript
*<your_website_url_here>/optimizelyjs/*
```

Do not forget to associate your script with this new route.

### Add the self-hosted snippet

If the Optimizely snippet is installed on your page, you must remove it and replace it with the new script tag that references your self-hosting path. [Add this new script tag](docId\:a3nBqUV00EHS6YncVXkrD) inside the `<head>` tag on your page.

The snippet format should be the following:

```javascript
<script src="/optimizelyjs/s/<your_snippet_key>.js"></script>
```

Replace `<your_snippet_key>`  with the snippet key for your custom snippet.

**Example**

```javascript
<script src="https://cdn.optimizely.com/public/123456/s/custom.js"></script>
```

```javascript
<script src="/optimizelyjs/s/custom.js"></script>
```

Repeat this step for any additional custom snippets you may have across your site.