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

Using Cloudflare with Webflow can help optimize performance, improve security, and cache assets like images more effectively. However, since Webflow uses its own CDN for assets, special configuration is needed to ensure Cloudflare properly caches content while maintaining Webflow’s functionality.

1. Set Up Cloudflare for Your Webflow Site

  • Add your domain to Cloudflare: Sign up or log in to Cloudflare, then add your Webflow domain.
  • Update DNS records: Ensure the following A records point to Webflow’s IPs:
  • A record for root domain (@) → (a) 75.2.70.75, (b) 99.83.190.102
  • CNAME record for www → proxy-ssl.webflow.com
  • Enable "Proxied" mode (orange cloud) for these DNS records to route traffic through Cloudflare’s network.

2. Configure Cloudflare SSL Settings

  • Go to Cloudflare Dashboard → SSL/TLS → Overview.
  • Set SSL/TLS Mode to "Full" or "Full (Strict)" to ensure end-to-end encryption.
  • Disable “Always Use HTTPS” in Cloudflare if it conflicts with Webflow’s built-in SSL handling.

3. Optimize Content Caching

  • Go to Cloudflare Dashboard → Caching → Configuration.
  • Set Cache Level to "Standard" so HTML is served dynamically while static assets like images are cached.
  • Create a Page Rule for aggressive caching:
  • Go to Cloudflare Dashboard → Rules → Page Rules → Create Rule.
  • URL: yourdomain.com/*
  • Enable**“Cache Everything”** but be aware that this may cause issues with Webflow’s dynamic content.
  • Set Edge Cache TTL to a reasonable time (e.g., 1 day) to keep assets cached longer.

4. Enable Performance Optimizations

  • Go to Cloudflare Dashboard → Speed.
  • Enable Auto Minify (HTML, CSS, JavaScript) to reduce file sizes.
  • Enable Brotli Compression for faster asset delivery.
  • Under Optimization, turn on Rocket Loader cautiously, as it may affect Webflow’s custom JavaScript execution.

5. Protect Against Excessive Caching Issues

  • Some Webflow updates might not immediately reflect due to aggressive caching. If changes aren’t appearing:
  • Clear Cloudflare’s cache from Dashboard → Caching → Purge Cache → Purge Everything.
  • Disable Caching for Webflow Editor using a Page Rule:
    • URL: yourdomain.com/?edit*
    • Disable Caching and Performance Optimizations.

Summary

To integrate Webflow with Cloudflare, update your DNS settings, configure SSL, tune caching rules, and enable performance optimizations. Use Page Rules to fine-tune behavior, and periodically purge cache when making content updates.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing a pop-up form to be cropped at the top on iPhones and Safari, despite working properly on Chrome Desktop and Mobile?
Will multiple clients hosted on Webflow be seen on the same shared IP address and mixed in with other clients using the same DNS settings, if we offer client billing and host them in our account?
How can I create a slider on mobile where cards turn into slides, using Webflow?
Is there a bug in Webflow causing the backdrop filter to not work on Safari? Others are experiencing the same issue, as shown in the attached images in both Safari and Chrome. The blur effect should apply to the "local-nav_container" div.
Are there any Webflow-compatible booking, calendar, and payment platforms that offer customizable styling options for integrating into a website?
Are there plans to increase the nest limit for nested collection lists in Webflow anytime soon? The current limit heavily restricts the functionality on listing type pages and affects the suitability of Webflow CMS for projects like jobs boards.
How can I ensure that a div element in Webflow has the same height as the entire HTML document, even after exporting the code?
What are the steps to host a site on a domain hosted via Google Domains, considering that Google Domains is not available in Germany and the domain is hosted on enom?
How can I move my Webflow site live and add my old MX records to the hosting panel?
How can I fix the issue with my Webflow custom form where the radio buttons are not being selected when clicked?
How can Webflow Interactions still be triggered and work after using third party integrations like barba.js v2?
How can I integrate my Webflow form with Hubspot without using Zapier?
Why is the entry not appearing on Airtable after submitting the form on my Webflow website?
How can I import external code into Webflow and use it as a starting template for making modifications?
Can I apply the lazyload image attribute in the Webflow Designer using a regular image module instead of the embed module?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I add user input to the end of the redirect URL in Webflow?