Table of Contents

CDN Setup

How to configure a CDN to accelerate and protect your website

A CDN (Content Delivery Network) places copies of your static assets — images, stylesheets, scripts, fonts, documents — on edge servers distributed around the world. When a visitor requests your page, those assets are served from the nearest edge location instead of from the origin server. The result is faster load times, lower server load, and a better experience for your users, no matter where they are.

Two separate CDN hosts can be configured in DynamicWeb:

  • CDN Host — used for static files under /Files/ (stylesheets, scripts, images, documents, etc.)
  • CDN Host (GetImage) — used specifically for image transformation requests via /Admin/Public/GetImage.ashx

To set up one of both of these, go to the Settings > System > Web & HTTP > CDN node.

DynamicWeb CDN packages

Dynamicweb offers two CDN packages for hosted solutions. Both are powered by Cloudflare's global edge network.

Package What you get Best for
Accelerate (Static CDN) Global edge delivery of all static assets (images, CSS, JS, documents, video). Every hosted solution gets its own endpoint: https://{siteid}.cdn.dynamicweb.cloud Every hosted solution — the default performance layer
Accelerate + Protect (Secure CDN) Everything from Accelerate, plus a Web Application Firewall (WAF), DDoS and bot protection, rate limiting, threat filtering, and custom security rules at the edge High-traffic, regulated, or security-sensitive solutions — finance, government, healthcare, B2B portals
Note

The Accelerate package is covered in detail below. To learn more about the Accelerate + Protect package, contact Dynamicweb.

How CDN works in Dynamicweb

When CDN is enabled, Dynamicweb automatically scans the rendered HTML output and prepends the CDN host URL to static asset paths. This happens after page rendering — no template changes are needed for standard usage.

Two separate CDN hosts can be configured:

  • CDN Host — used for static files under /Files/ (stylesheets, scripts, images, documents, etc.)
  • CDN Host (GetImage) — used specifically for image transformation requests via /Admin/Public/GetImage.ashx

You can use the same URL for both, or separate them if your setup requires it.

What gets rewritten automatically

HTML element Attribute Path pattern CDN host used
<img> src /Files/... CDN Host
<link> href /Files/... CDN Host
<script> src /Files/... CDN Host
<img> src /Admin/Public/GetImage.ashx?... CDN Host (GetImage)

Before CDN:

<img src="/Files/Images/hero.jpg" />
<link href="/Files/Templates/Designs/mysite/css/style.css" rel="stylesheet" />
<script src="/Files/Templates/Designs/mysite/js/app.js"></script>

After CDN (with https://mysite.cdn.dynamicweb.cloud):

<img src="https://mysite.cdn.dynamicweb.cloud/Files/Images/hero.jpg" />
<link href="https://mysite.cdn.dynamicweb.cloud/Files/Templates/Designs/mysite/css/style.css" rel="stylesheet" />
<script src="https://mysite.cdn.dynamicweb.cloud/Files/Templates/Designs/mysite/js/app.js"></script>

What is NOT rewritten automatically

The automatic replacement only works on HTML attributes in the rendered page output. It does not cover:

  • URLs inside CSS files — e.g. background-image: url(/Files/Images/bg.jpg)
  • URLs inside JavaScript files — e.g. dynamically constructed image paths
  • Non-standard attributes — e.g. data-src, srcset, or custom attributes used by lazy-loading libraries
  • URLs that already include a domain — external resources are left untouched

See Manually referencing the CDN host in templates and Handling assets inside CSS and JavaScript below for how to handle these cases.

Manually referencing the CDN host in templates

In some cases, you may need to reference the CDN host directly in your Razor templates — for example, when using data-src for lazy-loading, srcset for responsive images, or inline style attributes.

Dynamicweb exposes the configured CDN hostnames through the Pageview object:

  • Pageview.Current().CdnHostName — the general CDN host (includes a trailing slash)
  • Pageview.Current().CdnHostNameForImage — the GetImage-specific CDN host (includes a trailing slash)

Both return null if CDN is not enabled.

Examples

Lazy-loaded image with data-src:

@{
    var cdnHost = Pageview.Current().CdnHostName ?? "/";
}
<img data-src="@(cdnHost)Files/Images/hero.jpg" class="lazyload" alt="Hero image" />

Inline background image:

@{
    var cdnHost = Pageview.Current().CdnHostName ?? "/";
}
<div style="background-image: url('@(cdnHost)Files/Images/background.jpg')"></div>

Responsive image with srcset:

@{
    var cdnImageHost = Pageview.Current().CdnHostNameForImage ?? "/";
}
<img
    src="@(cdnImageHost)Admin/Public/GetImage.ashx?Image=/Files/Images/photo.jpg&Width=800"
    srcset="@(cdnImageHost)Admin/Public/GetImage.ashx?Image=/Files/Images/photo.jpg&Width=400 400w,
            @(cdnImageHost)Admin/Public/GetImage.ashx?Image=/Files/Images/photo.jpg&Width=800 800w,
            @(cdnImageHost)Admin/Public/GetImage.ashx?Image=/Files/Images/photo.jpg&Width=1200 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    alt="Photo" />

Handling assets inside CSS and JavaScript

Since CDN replacement operates on the HTML output, URLs inside CSS or JavaScript files are not rewritten. This is a common source of errors — for example, a background-image in your stylesheet or a font @font-face URL will still point to the origin server.

Here are practical ways to handle this:

1. Use relative URLs in CSS files

If your CSS file is served from /Files/ (and therefore itself delivered via CDN), you can use relative paths inside it. Since the browser resolves relative URLs against the CSS file's own location, they will automatically point to the CDN:

/* style.css is at /Files/Templates/Designs/mysite/css/style.css */
/* This will resolve relative to the CDN host, since style.css itself is served from CDN */

.hero {
    background-image: url(../images/hero.jpg);
}

@font-face {
    font-family: 'MyFont';
    src: url(../fonts/myfont.woff2) format('woff2');
}
Tip

This is the recommended approach. As long as the CSS file and the referenced assets are both under /Files/, relative URLs will "just work" through the CDN — no extra configuration needed.

2. Use inline styles in the HTML template

For critical background images that need CDN delivery, you can move them into inline style attributes in the HTML template. HTML-level attributes are processed by the CDN replacement:

<div style="background-image: url(/Files/Images/hero.jpg)"></div>

This will not be rewritten automatically (the regex only targets src and href on img, link, and script tags). Instead, use the Razor approach:

@{
    var cdnHost = Pageview.Current().CdnHostName ?? "/";
}
<div style="background-image: url('@(cdnHost)Files/Images/hero.jpg')"></div>

3. Set a CSS custom property from the template

You can set a CSS custom property in the <head> of your template and reference it in your external stylesheet:

In your Razor template:

@{
    var cdnHost = Pageview.Current().CdnHostName ?? "/";
}
<style>
    :root {
        --cdn-host: '@(cdnHost)';
    }
</style>

In your CSS file:

/* Note: CSS custom properties cannot be used inside url() directly.
   Use this approach with JavaScript, or combine with approach 1 or 2. */
Note

CSS url() does not support var() natively. This approach works well for JavaScript-driven scenarios, but for pure CSS, the relative URL approach (option 1) is usually the simplest solution.

Troubleshooting

Symptom Possible cause Fix
CDN replacement not working CDN host URL does not start with https:// or http:// Correct the URL format — it must include the protocol prefix
Some images not served from CDN Images use data-src or srcset instead of src Use Pageview.Current().CdnHostName in your template to manually prepend the CDN host
Background images still loading from origin CSS url() references are not rewritten Use relative URLs in your CSS file, or set the CDN host via Razor (see above)
Mixed content warnings in the browser CDN host uses http:// but the website uses https:// Change the CDN host URL to use https://
External resources being rewritten This should not happen — external URLs with a domain are left untouched If you encounter this, verify the src/href in your template does not start with /Files/ by mistake
Improve this doc
To top