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
Why does my Collection List Pagination in Webflow refresh to the top of the page?
Does Webflow have an integration or feature available for website commenting?
How can I resolve the "The operation failed with an error. [400] ValidationError: Invalid request body" issue when trying to update a multi-reference item field in a CMS collection using Integromat with Webflow?
Can I limit the width of a row in Webflow flexbox so that additional divs move to a second row?
How can I add inline text on hover in Webflow?
Can I place an order on Webflow without purchasing a plan by using a sandbox account?
How can I make the navbar div wider in Webflow when changing the width using vw or percentage values is not working?
How can I create a dropdown menu from a tab component in Webflow that improves user experience and reduces scrolling on mobile views?
Does Webflow have a built-in photo gallery tool, or is there an alternative service available to create photo galleries without additional expenses for hosting or integration with Adobe Lightroom?
Is it possible to upload pictures and information onto a Webflow website, display them, have a payment system for buying services, a notification/chat system, and a search system to find specific services? If so, how can this be done using Webflow's standard e-commerce plan or a third party tool?
Why does the font change when viewing the published state of my SVG image imported into Webflow? It is supposed to be an image, not an actual font. Any suggestions?
How do I center a third party affiliate code widget in my Webflow page?
How can I optimize my website using Webflow and other third-party tools or integrations?
What is a reliable way to randomize the hero header content in Webflow's CMS collection so that it displays a different collection each time the page is reloaded, and is easily updatable by the client in the future?
How can I use Webflow's e-commerce features to create a booking system for a retreat/event website, where accommodations depend on specific event dates?
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?