How can I use Cloudflare with Webflow to optimize and proxy all content, including Webflow files such as images, for improved site speed and performance?

To use Cloudflare with Webflow and optimize/proxy all content—including images and assets from Webflow’s CDN—you’ll need to configure Cloudflare as a reverse proxy with full caching and performance settings.

1. Enable Custom Domain on Webflow

• Add your custom domain (e.g., yourdomain.com) under Project Settings > Hosting in Webflow.
• Webflow will provide two A records: (a) 75.2.70.75 and (b) 99.83.190.102.
• Webflow will also suggest setting a CNAME for www to proxy-ssl.webflow.com.

2. Set Up Cloudflare DNS

• Create a Cloudflare account and add your domain.
• When asked to scan DNS records, ensure these two A records (from Webflow) are included.
• Proxy status should be "Proxied" (orange cloud) to enable caching and performance features.
• Cloudflare will replace your domain’s nameservers with its own—update these at your domain registrar.

3. Configure Page Rules or Cache Rules on Cloudflare

• Webflow assets (like images, CSS, JS) are served from assets.website-files.com, which is outside your domain and not proxied by default.

• To proxy all assets, including Webflow’s static files, you need to set up Cloudflare Workers (see next step).

• For your domain (yourdomain.com/*), create or modify Cache Rules instead of older “Page Rules”.

  Suggested cache settings:

• Cache Level: Cache Everything

• Edge Cache TTL: 1 month (adjust per needs)

• Origin Cache Control: Respect origin (or ignore, if needed)

4. Use Cloudflare Workers to Proxy Webflow’s Asset Domain

• Webflow uses https://assets.website-files.com for static sites.

• Use a Cloudflare Worker to fetch and cache these assets through your domain (e.g., cdn.yourdomain.com proxies them).

• This allows full control of caching, HTTP response headers, and route-specific optimization.

  Worker Tasks:

• Intercept requests to cdn.yourdomain.com

• Rewrite and fetch from https://assets.website-files.com

• Apply custom caching rules

• Serve assets via Cloudflare from your own subdomain

5. Optimize Performance via Cloudflare Settings

• Enable Auto Minify for JS, CSS, HTML.
• Enable Brotli compression.
• Turn on Rocket Loader to prioritize script execution (optional – test with Webflow interactions).
• Use Argo for smart routing (paid).
• Use Image Resizing or Polish (on Business plan) for image optimization if using Cloudflare for all assets.

6. (Optional) Serve Site via www with Always Use HTTPS

• Under Webflow Hosting, be sure “SSL” is enabled.
• In Cloudflare, turn on “Always Use HTTPS” and “Automatic HTTPS Rewrites”.
• Use Page Rules (or Redirect Rules) to force non-www to www or vice versa to avoid duplicate content.

Summary

To fully optimize a Webflow site with Cloudflare, point your domain to Cloudflare, proxy traffic (orange cloud), and use Cloudflare Workers to cache and serve Webflow-hosted assets. Set aggressive cache rules for improved performance while using Cloudflare’s optimization tools like image compression and minification.