Webflow sync, pageviews & more.
NEW

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?

TL;DR
  • Point your custom domain to Cloudflare, proxy traffic via "orange cloud" DNS settings, and set up cache rules for your site.
  • Use Cloudflare Workers to proxy and cache Webflow-hosted assets (e.g., from assets.website-files.com) through your own subdomain.
  • Enable performance features like Auto Minify, Brotli compression, Rocket Loader, and optional image optimization for full site acceleration.

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a Webflow navbar with a transparent background that changes to black after scrolling, similar to a specific website? Additionally, how can I achieve the same background video effect?
How can I create a fully-functional lightbox with Webflow and CMS collection integration?
What is the best practice for keeping images in the same area within a hero section in Webflow? Should I create a large image with all the images in it and use that as the background, or should I create a grid with each section having a relative position instead of the body?
Is it possible to have a smaller image icon in Webflow that opens a Lightbox gallery with multiple images?
How can I resolve the recurring 500 error when reloading one of my two websites on Webflow while the other one does not encounter this issue?
Why is one of the images on my Webflow site appearing rotated after publishing, even though it displays correctly in the Webflow Editor and Preview?
Is it possible to integrate a booking app on a website that connects with a Google Calendar to show available time slots and allows the client to approve appointments before adding them to the calendar? What are the preferred web apps or tools to achieve this with Webflow?
What am I missing in Webflow when the black background appears on the button after clicking it in the top nav menu, even though I am on the current page and trying to change the menu's current state?
Why is the third text element in my Webflow hero section cut off at the bottom of the div, even though I have checked all the settings to ensure the size of the div is not too small?
How can I achieve a blurred border effect on one side of a DIV using Webflow without using inner box shadow or affecting transparency?
I'm trying to add a script to my Webflow website, but it's not working. I added it to the header, but nothing happens when I test it with my IP address. Any solution? I'm not very familiar with JavaScript, so I'm not sure what's wrong.
How can I add Google AdSense to my Webflow site?
How can I use a read-only share link in Webflow?
Can a parallax scrolling effect, where the page scrolls over a background image or different images in different sections, be achieved in Webflow without coding? If not, can the background images stay static while the page scrolls over them?
Can I display a real-time count of items from different databases on my Webflow homepage?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?