banner
herman

herman

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

在Cloudflare設定快取規則全站加速WordPress部落格

首先!

特别感谢!

老头左右天地极限三位大佬的帮助。

此博客大部分抄袭左右大佬(传送门在此)hiahia~

前提準備#

・你的网站域名需要在 Cloudflare 上解析,并且开启代理这是必要条件

・关闭 Wordpress 上的各种缓存插件,并清空缓存,这是建议

設置 Page Rules(頁面規則)#

Cloudflare 免費計劃,每個域名可以免費添加 3 條頁面規則,對於 Wordpress 來說正好夠用,如果你是其他建站程序切勿直接照抄,要根據你的程序鏈接規則去設置。

第一步、 從 Cloudflare 主頁選擇你的域名,進入到域名功能界面#

第二步, 菜單 —— 規則 —— 頁面規則,進入頁面規則設置頁面#

1701442967859.png

第三步、 點擊創建頁面規則按鈕,一共添加 3 條規則,如下#

設置管理後台規則#

1701442967860.png

| 規則名稱 | 值 |

| ---------------- | ------------------------------------------------------------ |

| URL | pup.0521.uk/wp-admin/*
注意:這個網址要改成你自己的 |

| 瀏覽器完整性檢查 | 開啟 |

| 安全級別 | 高 |

| 緩存級別 | 繞過 |

| IP 地理位置表頭 | 開啟 |

| 電子郵件混淆技術 | 開啟

重點是,緩存級別一定要設置繞過,緩存級別一定要設置繞過,緩存級別一定要設置繞過,否則就麻煩大了! |

設置其他動態頁面規則 例如評論、搜索等等。#

1701442967860.png

| 規則名稱 | 值 |

| ---------------- | ------------------------------------------------------------ |

| URL | pup.0521.uk/*.php
注意:這個網址要改成你自己的 |

| 瀏覽器完整性檢查 | 開啟 |

| 安全級別 | 高 |

| 緩存級別 | 繞過 |

| IP 地理位置表頭 | 開啟 |

| 電子郵件混淆技術 | 開啟 |

重點也是緩存級別一定要設置繞過,不過設置錯了不想管理後台規則那麼嚴重。

設置首頁、分類、頁面及文章頁規則#

1701442967860.png

| 規則名稱 | 值 |

| ---------------- | ---------------------------------------------- |

| URL | pup.0521.uk/*
注意:這個網址要改成你自己的 |

| 瀏覽器完整性檢查 | 開啟 |

| 安全級別 | 高 |

| 緩存級別 | 緩存所有內容 |

| 邊緣緩存 TTL | 2 小時 |

| IP 地理位置表頭 | 開啟 |

| 電子郵件混淆技術 | 開啟 |

第四步、 檢查順序#

創建完成後確認一下順序!!!

創建完成後確認一下順序!!!

創建完成後確認一下順序!!!

1701442967860.png

以上我們就設置好了基本的網站頁面規則,這時候可以保證網站的首頁、分類、文章等頁面都可以走 CDN。

這地方有個小技巧,設置完成以後自己到網站上把頁面都點一遍,以觸發頁面緩存到 CDN,等到真正的訪客瀏覽網站時,就能秒開了!

設置 Cache Rules 由於 Cloudflare 免費計劃最多只能設置 3 條頁面規則,我們設置了 1 個靜態頁面和 2 個動態頁面規則之後,就用完了。

但是,網站除了以上頁面外,還有很多靜態資源,比如圖片、JS、CSS、字體等等,如果這些每次都從源站加載,還是會佔用大量帶寬,這時候 Cache Rules(緩存規則) 就排上用場了。

Cloudflare 免費計劃每個域名可以創建 10 條緩存規則,綽綽有餘!下面我們就將靜態資源加入到緩存中。

設置 Cache Rules(緩存規則)#

第一步、從 Cloudflare 主頁選擇你的域名,進入到域名功能界面#

第二步,展開左側菜單,點擊緩存 ——Cache Rules,進入緩存規則設置頁面#

1701442967860.png

第三步、 點擊創建規則按鈕#

博客首頁和文章頁緩存#

1701442967861.png

靜態資源緩存 (css/is/woff/html)#

直接點擊編輯表達式,把下面的內容直接粘貼進去即可


(http.request.uri contains ".css") or (http.request.uri contains ".js") or (http.request.uri contains ".woff") or (http.request.uri contains ".jpg") or (http.request.uri contains ".png") or (http.request.uri contains ".svg") or (http.request.uri contains ".gif") or (http.request.uri contains ".bmp") or (http.request.uri contains ".ico") or (http.request.uri contains ".jpeg")

1701442967861.png

lsky 圖床 - 圖片緩存#

如果有自建圖床,則為圖床圖片添加緩存。時間設置最長即可。

1701442967861.png

以上我們就設置好了靜態資源的緩存規則,這時候並不是馬上就能生效了,而是會隨著你的网站被訪問逐漸被緩存到 CDN。與頁面規則同樣的小技巧,設置完成以後自己到網站上把頁面都點一遍,以觸發頁面緩存到 CDN,等到真正的訪客瀏覽網站時,靜態資源就能秒加載了!

其他設置#

Crawler Hints#

當使用 Cloudflare 的站點更改內容時,Crawler Hints 會為搜索引擎和其他爬網程序提供高質量的數據。這樣,爬網程序可以精確地抓取,避免浪費,同時可以普遍減少源伺服器及其他 Internet 基礎結構的資源消耗。

操作路徑:緩存 —— 配置 ——Crawler Hints

Always Online™#

源伺服器不可用時讓訪問者仍可訪問您的網站。Cloudflare 可通過 Internet Archive 的 Wayback Machine 提供有限的網頁副本。

操作路徑:緩存 —— 配置 ——Always Online™

Tiered Cache Topology#

通過選擇緩存拓撲,您可以控制源伺服器與 Cloudflare 數據中心的連接方式,以確保緩存命中率更高、源伺服器連接數更少,並且 Internet 延遲更短。

操作路徑:緩存 ——Tiered Cache——Tiered Cache Topology™,選擇 Smart Tiered Caching Topology

清理緩存#

最後,如果你修改了網站的主題或安裝了新的插件或修改了代碼等等,強烈建議你馬上清理 Cloudflare 的 CDN 緩存,否則網站可能不能正常顯示,或者各種錯誤。

操作路徑:緩存 —— 配置,最頂上就有清除緩存的操作按鈕,支持自定義路徑清除和清除所有內容,可按自己實際情況使用。

如何判斷緩存生效#

按 f12 調出開發者工具,查看 cf-cache-status 狀態,這就是當前網頁 or 文件的 CF 緩存狀態,出現 HIT,表示緩存成功。首次打開博客頁面會出現 MISS,按 f5 刷新後會變成 HIT。

微信圖片_20231202225323.png

cf-cache-status 狀態常見的有以下幾種:

  • cf-cache-status——HIT:

    你的文件已經命中 CF 緩存。這表示用戶獲取文件的方式途徑為從 CF 緩存伺服器中獲取而非你的源伺服器,不消耗你的伺服器資源。

  • cf-cache-status——MISS:

    CF 已經在緩存伺服器中查找了你所請求的文件,但是並沒有找到,CF 的緩存伺服器將會回源至你的伺服器中獲取該文件,當下次請求時該文件就會顯示 HIT

  • cf-cache-status——BYPASS:

    CF 已經被要求不緩存該文件,用戶將直接從網站源伺服器中獲取文件,這個通常是因為請求的文件響應了 NO-Cache header

  • cf-cache-status——EXPIRED:

    自上次緩存之後,文件的緩存期限已經過期,CF 將會再度回源至網站源伺服器進行獲取文件,當下次請求時該文件就會顯示 HIT

  • cf-cache-status——DYNAMIC:

    這個文件默認不會緩存,也沒有對應的緩存配置,用戶將從網站源伺服器獲取該文件。

注意事項#

因為設置了緩存規則,比如設置兩小時,更新博客後,兩小時後別人才會看到最新文章。即別人打開你的博客看到的是兩個小時前的內容。

所以當你自定義主題,更新或者發布博文的時候,需要關閉以下三個規則並清理瀏覽器緩存。否則你打開博客頁面會有更新延遲。關閉後再修改無延遲,這樣就可以實時查看修改後的狀態。

調整完再打開即可。

  • Page Rules(頁面規則)

  • Cache Rules(緩存規則)

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。