Webflow 使用 AWS，雖然它足夠了，但我們發現對於大型項目，尤其是圖像繁重的項目，Cloudflare 為我們提供了顯著的速度提升、更好的正常運行時間和大量優化選項。但與其他一些平台不同的是，它不像簡單地將 DNS 切換到 Cloudflare 那樣簡單。在代理您的網站並通過 Cloudflare 對其進行優化時，Webflow 和 Cloudflare 不能很好地融合。在這篇文章中，我們將討論限制並向您展示如何快速輕鬆地克服這些限制。
有關分步指南以及有關優化和頁面規則等的更多信息，請查看視頻。
Cloudflare 存在一些問題，我們將首先在此處列出它們，然後介紹如何修復它們以及您可能應該啟用的一些更高級的選項。但首先，讓我們列出我們喜歡 Cloudflare 的一些原因。
- 大大增強了安全選項。
- CNAME 扁平化，意味著您的 Webflow 項目可以是 tenten.co 而不是 www.tenten.co
- Cloudflare 數據中心的出色緩存。
- 在 CloudFlare 邊緣緩存。
- 高級瀏覽器緩存設置。
- 始終在線並將您網站的版本保存到互聯網檔案館。
- Argo，它尋找可能出現故障的網絡節點並優化網絡流量路由以提高速度。
- 通過縮小、壓縮、圖像優化等方式實現極快的速度優化。
- 機器人保護。
- Cloudflare CDN。
- Zaraz 作為 Google 跟踪代碼管理器的替代品，我們已經嘗試過了，雖然它不如跟踪代碼管理器那麼強大，但如果您不需要非常複雜的設置，您可以管理它，是的，在我們的測試中，速度有明顯的提升。我們將確保我們的下一篇文章是關於 Zaraz 的，敬請期待。
- 頁面規則。
我們可以繼續下去，有太多的功能，我們不會一一列舉。所以，如果這太棒了，為什麼很少有 Webflow 用戶使用 Cloudflare，這就是問題所在。如果您查看 Webflow 上 Cloudflare 的 DNS 設置說明，您會立即註意到一件事，他們希望您禁用 Cloudflare 代理。這意味著 Cloudflare 基本上只會管理您的 DNS，就像 Godaddy 或其他人一樣。不太好，Cloudflare 擁有最快的 DNS，但僅此而已，您將無法利用任何性能增強功能。據我們所知，“禁用代理問題”與 Webflow 的 SSL 證書更新有關。如果 Cloudflare 正在代理內容，則用戶未連接 Webflow 和 Webflow 上的源站點” s SSL 續訂機制停止工作，所以一個月內一切正常，然後每個人和他們的母親都會開始收到 SSL 錯誤。為此，我們有一個快速簡單的修復方法，我們將進行修復。無論如何，通過我們的解決方法，我們幾個月來一直沒有出現任何問題。
第 2 期，Webflow CDN。Webflow 使用 AWS 來託管他們的內容，但您可以想像，他們不會為在 Webflow 上創建的每個項目提供 CDN。所以每個人共享一個桶。如果您檢查您的網站，您會注意到所有重要的東西，從您的 css 到您的圖像和視頻都位於 website-files.com 而不是您的域。對於日常使用來說，這並不是真正的問題，但是當您使用 Cloudflare 時，Cloudflare 需要優化的內容需要位於您的域中。因此，如果我們有一個 milkmoonstudio.com 的 CloudFlare 帳戶，但每個圖像和 CSS 文件都位於 website-files.com 上的一個文件夾中，Cloudflare 只能對您的 HTML 文件應用優化和緩存，而不能應用其他任何東西。所以，再次沒有優化。
讓我們談談如何解決這些問題。
Webflow Cloudflare DNS 設置
您將傾向於遵循此處的兩組說明，當您在項目設置的 Webflow 託管選項卡中啟用 SSL 時，Webflow 為您提供的 2 A 記錄和 CNAME 記錄，以及打開代理的說明Cloudflare（禁用橙色雲圖標）按照 Webflow 的說明。我們將要求您忽略這兩個。
當您打開 SSL 時，您會收到如下所示的說明：
忽略這些！
- 設置 1，而不是使用 SSL 說明，關閉託管選項卡底部的 SSL。點擊保存。
- 複製新的 A 記錄地址和 CNAME 設置：
保存非 SSL 設置
- 再次打開 SSL 勾選框並保存，您會看到設置再次恢復為初始 SSL 設置，不用擔心，忽略這些即可。（您可以保留非 SSL 設置，Cloudflare 將處理 SSL 證書並正確重定向所有內容，但有一件事會中斷，您的 sitemap.xml 文件將使用 http 而不是 https，Cloudflare 仍會正確重定向，但 Google 搜索控制台會抱怨）。
- 前往 Cloudflare 並添加非 SSL DNS 設置。它應該看起來像這樣：
- 確保條目已打開代理，這與 Webflow Cloudflare 說明相反。
- 前往 Cloudflare 中的 SSL/TLS 設置選項卡，打開 Full：
- 現在，我們要清除 DNS 設置，以便您的 Webflow 設置立即傳播。首先訪問https://1.1.1.1/purge-cache/，然後訪問https://developers.google.com/speed/public-dns/cache以防萬一：https ://cachecheck.opendns.com/
- 在這些網站的每個網站上，輸入您的裸域，清除 A 記錄，然後清除 CNAME 記錄。如果您使用的是 www 子域，請同時使用完整域，例如 www.milkmoonstudio.com 並清除其記錄。
- 大清洗後，再次前往 Webflow 的託管選項卡。
不好了！
- 這麼多問題，誰在乎，忽略並發布該站點。
- 前往您的實時站點並通過單擊掛鎖檢查 SSL 設置：
繁榮，一切都很好。
因此，我們讓 Webflow 通過 Cloudflare 運行，代理，但哦不，我們忘記了內容需要位於您的域上以便 Cloudflare 應用性能增強這一事實。目前一切都來自 website-files.com
如果您需要更多幫助來設置性能增強、頁面規則等。請觀看操作方法視頻以詳細了解您可以應用的內容。
第 2 期，讓 Webflow CDN 在 Cloudflare 中通過您的域運行，這樣您就可以使用所有漂亮的 Cloudflare 性能增強功能
因此，有兩種方法可以解決這個問題，如果您知道自己在做什麼，您可以編寫一個 Cloudflare worker 來監視 Webflow 的 CDN，抓取內容，將其存儲在 Cloudflare 上，然後對其進行潤色等等。我們不知道該怎麼做，而且需要做很多工作。選項 2，找人為你做。對我們來說幸運的是，有人擁有，然後他們構建了一個 Cloudflare 應用程序，您只需在 Cloudflare 上安裝並使用即可。
**更新** 我們對 Cassette 在無法創建 CNAME 記錄時給出的錯誤發表了評論。我們剛剛為這篇文章錄製了 How-To 視頻，也遇到了這個錯誤。我們已經聯繫了 Cloudflare 支持和 Cassette 開發人員，並會在問題修復後發布，但您可以在視頻中關註一個簡單的解決方法，或者只需查看帖子中本節的末尾部分即可。
- 前往 Cloudflare 中的 Apps 選項卡並蒐索 Cassette，這是一個免費的，只要你使用一個桶，這就是我們將要做的，所以它很好。是這個人：
- 在應用程序中應用以下設置：
- 在您的域上創建一個子域，Cassette 應該在其中放置來自 Website-Files.com 的文件，只需在此處鍵入它，當您應用設置時，Cassette 將請求創建它的權限。確保子域不存在，Cassette 需要管理這個位。
- 告訴 Cassette Webflow 將文件存儲在哪裡。
就是這樣，每次加載您網站上的頁面時，Cassette 都會檢查 website-files.com 並保留這些文件，如果它在子域上找到新文件的話。這裡需要注意的是，它可能需要一點時間，但現在它在瀏覽器中加載的文件位於您的域中，您可以將您創建的任何 Cloudflare 設置和規則應用於這些文件。
我們不會深入探討您可以在 Cloudflare 中創建的所有性能增強和頁面規則，盡情發揮吧。我們要說的一件事是，如果您決定創建對站點進行大量緩存的規則，請為您的 sitemap.xml 文件創建一個完全繞過緩存的頁面規則，這樣，例如，如果您創建一個新的博客文章最新版本的如果您有一些繁重的緩存設置，站點地圖將始終存在於 Google 而不是 3 週前的一些過時的站點地圖文件。當規則向下級聯時，您會希望站點地圖頁面規則高於其他具有大量緩存的頁面規則。如果您啟用了 RSS 提要，則同樣適用，繞過提要 url 上的緩存。
正如我們所說，Cassette 應用程序需要一段時間才能將所有內容緩存到您的新子域中，並且可能會在這里和那裡丟失一個文件，我們猜想您可以加快速度並根據需要多次重新加載所有頁面（我們’我們已在頁面底部更新了這篇文章，以幫助您確保將那些丟失的圖像緩存在 Cloudflare 上。我們將等待幾天並運行 Lighthouse 測試以檢查站點速度。
好的，2 秒後……我們已經建立了一個時間機器並等待了 3 天，我們已經運行了 Lighthouse 測試，並及時返回，然後上傳了測試結果：
看起來非常好，為什麼是 98%，我們認為它非常好，但是，是的，我們查看了 Lighthouse 中存在尺寸不當的圖像錯誤，我們懶得修復它只是為了炫耀結果。Google Search Console 會愛上你。
更新 – 修復 Cassette 無法創建所需的子域
如果您遇到上述錯誤，即 Cassette 表示無法創建您在 Cassette 中設置的子域，請按照以下步驟操作或觀看操作視頻。
- 當您收到錯誤時，請忽略它並手動創建子域。
- 盒式磁帶仍在添加工人。您不會看到工作人員，甚至可能看不到安裝的 Cassette 應用程序。
- 前往 DNS，為您在 Cassette 設置中的子域添加 CNAME。
- 在我們的例子中，CNAME 是資產。
- CNAME 的值是上面 Webflow 託管您的內容的 Webflow CDN 域名。
- 在我們的例子中，值為 assets-global.website-files.com
- 確保只使用裸域名。
- 即使您看不到應用程序，磁帶問題現在也應該得到解決。請查看視頻以獲取視覺指南。
更新 – 強制 Cloudflare 緩存任何丟失的圖像
最後一次更新。在使用 DrFlare 並詳細瀏覽一些站點時，我們注意到有時圖像沒有緩存在 Cloudflare 上，仍然會轉到外部 Webflow CDN。檢查代碼後，我們意識到這是由於 Webflow 生成響應圖像所致。在這種情況下，一些斷點的圖像被緩存在一些去了 Webflow CDN 的地方。如果您看到這種情況並想繞過它，只需在罪魁禍首上禁用響應式圖像生成即可。
您需要做的就是：
- 選擇 Webflow 畫布上的圖像
- 鍵入Command + Shift + O（在 Mac 上）或Control + Shift + O（在 Windows 上）
- 打開設置面板>圖像設置
- 取消選中響應圖像複選框
這裡需要注意的是，Webflow 不再生成響應圖像，因此您可以使用 Cloudflare 的圖像調整大小即時執行此操作，或者如果 Cloudflare 和 Cassette 未緩存圖像，則可以在頁面上創建桌面和移動版本的資產並且您想要在移動設備上使用非常小的版本，但感覺無響應版本太大或在 PageSpeed 上測試不佳。如果您對 Cassette、Page Rules 和 Polish 等優化功能感到滿意，請不要擔心 Cloudflare Image Resizing。
使用 Cloudflare 圖像調整大小
為此，您必須在 Cloudflare 的速度選項卡下啟用圖像調整大小，請注意可能會產生額外費用。根據您的操作，您可以打開或關閉從 Origin 調整圖像大小。如果它打開，您將能夠調整圖像大小並直接從 Webflow CDN 應用 WebP 和 Avif 轉換等內容，上傳 url，而無需先使用 Cassette 通過 Cloudflare 運行它。
對於圖像大小調整，您可以編寫一個 worker（更難）或僅使用帶有 HTML 嵌入元素的 Webflow 中的嵌入圖像。您仍然會在嵌入式元素中看到設計器中的圖像，並且它允許對每個圖像進行一系列格式設置和優化選項。您必須使用的 URL 結構看起來像
這樣
https:///cdn-cgi/image//
最後一個在創建 Avif 文件時的效果將取決於您作為緩存設置的頁面規則和您的規則順序。因此，如果您緩存了所有內容並在該子域上進行了優化，則可能已經創建了一個 WebP 圖像，並且它可能不會使用 Avif，但您可以進行試驗。
對於上面糟糕的格式並簡化了很多事情，我們深表歉意。調整大小最重要的部分是嵌入中的 URL 結構以您在 Cloudfale 中擁有的域開頭，然後是 /cdn-cgi/image/ 您的格式和優化選項 / 然後是圖像的 url。隨便玩玩，記住，如果您對 Cassette 和 Polish 選項等為您所做的感到滿意，則不需要這樣做。