Webflow 使用 AWS，雖然它足夠好，但我們發現對於大型專案，特別是圖像繁重的專案，Cloudflare 為我們提供了顯著的速度提升、更好的正常運行時間以及許多優化選項。但與其他平台不同，只需將您的 DNS 切換到 Cloudflare 並不容易。Webflow 和 Cloudflare 在代理您的網站並通過 Cloudflare 進行優化時並不完美結合。在這篇文章中，我們將討論這些限制，並向您展示如何快速且輕鬆地克服它們。
關於 Cloudflare 有一些問題，我們將從這裡列出，然後進一步探討如何修復它們，以及您可能應該啟用的一些更高級選項。但首先，我們先列舉幾個我們喜歡 Cloudflare 的原因。
- 增強的安全選項。
- CNAME 扁平化，這意味著您的 Webflow 專案可以是 tenten.co 而不是 www.tenten.co
- Cloudflare 數據中心的出色緩存。
- CloudFlare 邊緣的緩存。
- 先進的瀏覽器緩存設定。
- 一直在線，並將您的網站版本保存到互聯網檔案館。
- Argo，查找可能已關閉的網絡節點並優化網絡流量路由，從而增加速度。
- 通過壓縮、圖像優化等進行的出色速度優化。
- 機器人保護。
- Cloudflare CDN。
- Zaraz 是 Google Tag Manager 的替代品，我們已經嘗試過，雖然它不如 Tag Manager 那麼強大，但如果您不需要非常複雜的設置，它還是可以的，對，在我們的測試中速度確實提高了。我們將確保我們的下一篇文章是關於 Zaraz 的，所以請繼續關注。
- 頁面規則。
Cloudflare 功能 實在有太多了，我們不打算全部列出。那麼，如果這麼棒，為什麼這麼少的 Webflow 用戶使用 Cloudflare 呢？這就是問題所在。如果您查看 Webflow 上的 Cloudflare DNS 設置指南，您會立即注意到一件事，他們希望您禁用 Cloudflare Proxy。
這意味著基本上 Cloudflare 只會管理您的 DNS，就像 Godaddy 或其他任何人一樣。不太好，Cloudflare 有最快的 DNS，但那就是它，您將無法利用任何性能增強功能。據我們所知，“禁用代理問題”與 Webflow 的 SSL 證書續訂有關。如果 Cloudflare 正在代理內容，用戶就不會連接到 Webflow 上的原始網站，Webflow 的 SSL 更新機制將停止工作，所以事情可能會進行一個月，然後就會開始出現 Letsencrypt SSL 的驗證錯誤。為此，我們有一個快速而簡單的解決方案，我們將稍後討論。無論如何，使用我們的解決方案，我們幾個月來都沒有遇到任何問題。
第二個問題，Webflow CDN。Webflow 使用 AWS 來托管他們的內容，但正如您所想像的，他們不會為在 Webflow 上創建的每個專案提供 CDN。所以每個人都分享一個存儲桶。如果您檢查您的網站，您會注意到從您的 css 到圖像和視頻的所有重要內容都位於 website-files.com 上，而不是您的域。對於日常使用來說並不真正成問題，但當您使用 Cloudflare 時，Cloudflare 需要優化的內容需要位於您的域上。因此，如果我們有一個針對 tenten.co 的 CloudFlare 帳戶，但每個圖像和 CSS 文件都放在 website-files.com 上的一個文件夾中，Cloudflare 只能對您的 HTML 文件進行優化和緩存，除此之外沒有其他優化。
讓我們討論如何解決在 Webflow 上使用 Cloudflare 的問題。
Webflow Cloudflare DNS設置
您可能會傾向於按照兩組指示操作：當您在項目設置中啟用了Webflow的托管標籤中的SSL後，Webflow給您的2個A記錄和CNAME記錄，以及按照Webflow的指示關閉Cloudflare的代理（禁用橙色雲圖標）。我們建議您忽略這兩組指示。
當您開啟SSL時，您會得到如下所示的指令：
保存非SSL設置：
- 再次開啟SSL勾選框並保存，您會看到設置再次恢復到初始SSL設置，別擔心，忽略它們。（您可以保持非SSL設置，Cloudflare將處理SSL證書並正確重定向所有內容，但會有一個問題，您的sitemap.xml文件會使用http而不是https，Cloudflare仍然會正確重定向，但Google Search Console會有投訴）。
- 轉到Cloudflare並添加非SSL DNS設置。它應該看起來像這樣：
- 確保這些條目已開啟代理，與Webflow Cloudflare的指示相反。
- 轉到Cloudflare的SSL/TLS設置標籤，開啟Full：
- 到 Webflow 發佈您的網址，這時候會出現一些錯誤訊息，忽略他們並發布網站。
- 轉到您的實際網站並點擊鎖圖標檢查SSL設置：
現在，我們已經讓Webflow通過Cloudflare運行，但哦不，我們忘記了內容需要位於您的網域上，Cloudflare才能應用性能增強。目前，所有內容都通過 tenten.co 提供。
第2問題，通過Cloudflare的域名運行Webflow CDN，以便您可以使用所有巧妙的Cloudflare性能增強功能
有兩種方法來解決這個問題。如果您知道自己在做什麼，您可以寫一個Cloudflare工作程序 (Cloudflare Worker)，監視Webflow的CDN，獲取內容，將其存儲在Cloudflare上，然後進行優化等。我們不知道如何做到這一點，而且這是一項巨大的工作。選擇2，找人為您做這件事。幸運的是，有人已經為我們做了，然後他們建立了一個Cloudflare應用，您只需在Cloudflare上安裝並使用。
- 在您的域名上創建一個子域，Cassette應將Website-Files.com的文件放在這裡，只需在這裡輸入它，Cassette在應用設置時會要求獲得創建此子域的權限。請確保子域名不存在，Cassette需要管理此部分。
- 告訴Cassette Webflow存放文件的位置。
就是這樣，每次您的網站上的頁面被加載時，Cassette都會檢查website-files.com並保留這些文件，如果在子域上找到新文件。但這裡的問題是，這可能需要一些時間，但現在它在瀏覽器中加載的文件都在您的域名上，您可以將任何Cloudflare設置和規則應用於這些文件。
我們不打算深入討論您可以在Cloudflare中創建的所有性能增強和頁面規則，隨您喜歡。但有一點我們想說的是，如果您決定創建大量緩存的規則，則應為您的sitemap.xml文件創建一個完全繞過緩存的頁面規則，這樣，如果您例如創建了一個新的博客文章，最新版本的網站地圖將始終為Google提供，而不是某個3周前的過時網站地圖文件，如果您有一些重緩存設置。您會希望網站地圖頁面規則位於其他具有重緩存的頁面規則之上，因為規則是級聯的。如果您啟用了RSS訂閱，請在訂閱網址上繞過緩存。
正如我們所說，Cassette應用程序可能需要一些時間在您的新子域上緩存所有內容，偶爾可能會遺漏一些文件，我們猜您可以加快速度並多次重新加載所有頁面。我們只是要等待幾天，然後運行Lighthouse測試來檢查網站速度。
好的，2秒鐘後... 我們建造了一台時光機，等了3天，然後進行了Lighthouse測試，然後回到了過去，然後上傳了測試結果：
看起來很不錯，為什麼是98％，好吧，我們認為這很好，但是，我們查看了Lighthouse中的不正確大小的圖像錯誤，我們懶得修復它只是為了顯示結果。Google Search Console 將會非常喜歡你。
如果想了解更多關於 Webflow 與 SEO 優化。更多操作方法，請查看這些帖子
更新
最後更新。當使用 DrFlare Chrome 插件並詳細瀏覽某些網站時，我們注意到有時圖像不會在Cloudflare上緩存，而仍然轉到外部的Webflow CDN。檢查代碼後，我們意識到這是因為Webflow生成了響應式圖像。在這種情況下，某些斷點的圖像在某些上被緩存，而其他的則轉到Webflow CDN。如果您看到這種情況並希望繞過它，只需禁用有問題的響應式圖像生成即可。
您需要做的是：
- 在Webflow畫布上選擇圖像
- 輸入 Command + Shift + O (在Mac上) 或 Control + Shift + O (在Windows上)
- 打開 設置面板 > 圖像設置
- 取消選中 響應式圖像 選框
這裡的隱患是Webflow不再生成響應式圖像，所以您可以使用Cloudflare的圖像調整功能即時進行調整，或者如果Cloudflare和Cassette不緩存圖像，且您希望在移動設備上有一個非常小的版本，並且認為非響應式版本太大或在PageSpeed上測試得不好，則可以在頁面上創建桌面和移動設備版本。
