我發布這篇文章是因為我收到了很多關於 Cloudflare Image Resizing 和我的 WordPress 插件的請求。

由於 WordPress 的設計方式，不可能使我的插件與現有的所有插件兼容，因此在本文中，我們通過 Cloudflare Workers 探索另一種方法。

請注意，我故意省略了太多技術性的東西，以便每個人都能理解； 讓我們面對現實吧，並不是每個人都是開發人員。 我喜歡讓文章簡短、簡單、切題。

在本文的結尾，您將能夠簡單地複制、粘貼並單擊一下，為您的 WordPress 正確完成 Cloudflare Image Resizing。

什麼是 Cloudflare 圖像調整大小

提醒一下，使用 Cloudflare Image Resizing，您可以在 Cloudflare 的邊緣平台上轉換圖像。 您可以根據需要調整大小、調整質量並將圖像轉換為 WebP 或 AVIF 格式。

Cloudflare 會自動在邊緣緩存每張派生圖像，因此您只需在源站存儲一張原始圖像。

對於像 WordPress 這樣的繁忙博客來說，這確實是必不可少的服務，尤其是當您將它用作擁有許多圖片的商店時。

閱讀更多關於它的信息 官方郵寄 .

為什麼使用 Cloudflare Image Resizing

主要原因是速度。 例如，假設您的網站有 5 個頁面，每個頁面有 10 張圖像，大小從 1 Mb 到 5 不等，甚至每張圖像 10 MB。

當有人第一次瀏覽您的頁面時，所有這些圖像都會由您的瀏覽器下載。 例如，一頁有 10 張圖片，每張圖片大小為 1 Mb； 僅下載圖片需要 10 Mb。

這對低帶寬用戶，尤其是移動用戶來說是非常不利的。 即使對於帶寬很大的 PC 用戶來說，它也很糟糕。 沒有人希望看到加載緩慢且不符合網絡標準的網站。

我很確定你每天都會看到很多這樣的網站，永遠加載。 主要原因是媒體資產（如 css、js、圖像）以及網絡託管速度慢等其他因素。

您可能會想：“但我使用 CDN？！”，這不一樣。 Cloudflare Image Resizing 不僅僅是一個 CDN，它可以改變您的圖像以使其變得更好。

使用 Cloudflare Image Resizing，您的圖像會即時縮小，因此 1 Mb 的圖像將變成大約 100/200 kb。 它們還將以 Webp 和 AVIF 等下一代格式提供。

所以簡而言之：

  • 增強圖像
  • 加快您的網站
  • 改善您的搜索引擎優化
  • 節省帶寬

WordPress插件

你可能知道我為 WordPress 製作的插件 Github / WordPress Plugins 目錄.

它收到了很多反饋，許多人大大加快了他們網站的速度，但也有很多人遇到了很多根本無法解決的問題。

儘管我嘗試盡一切可能調整所有圖像的大小，但由於 WordPress 插件和主題的設計方式，無法調整所有圖像的大小。

更不用說css處理之類的都談不上了。

Cloudflare Worker

在查看發布的所有問題後，我決定走另一條路，使用 Cloudflare Worker 重寫 Cloudflare Image Resizing 的最終 HTML 輸出。

這是在 WordPress 上使用 Cloudflare Image Resizing 的最終解決方案，因為工作人員將獲取 WordPress 生成的最終響應，包括來自插件、主題、CSS 等的任何修改。

因為 Cloudflare Worker 位於您的 WordPress 和用戶之間，所以您幾乎可以即時更改任何內容； 這意味著我們甚至可以替換內聯 CSS 甚至 CSS 文件中的圖像。

從理論上講，這聽起來簡單明了，但在實踐中要困難得多，也更耗時。

儘管如此，我還是花了很多時間和精力來弄清楚如何實現這個目標。

WordPress Plugin vs Cloudflare Worker

如果您能理解 WordPress 插件和 Cloudflare Worker 之間的區別，那將是最有益的。 這樣您就可以決定使用哪一個，並了解我為什麼推薦該 worker。

 WordPress PluginCloudflare Worker
自由是的是的
處理速度快速地非常快
依賴性PHP 7+沒有任何
一般兼容性部分的滿的
主題 兼容性一些全部
插件 兼容性一些全部
處理 CSS不是的
處理所有標籤不是的
優化不是的

正如你在上面看到的，工人贏了。 這只是最好的解決方案，因為無論您對後端 (WordPress) 進行何種更改，工作人員都可以更改圖像鏈接。

設置 Cloudflare Worker

如果您安裝並啟用了 WordPress 插件，您需要做的第一件重要的事情就是禁用它。 如果您跳過這一步，您將看不到 worker 做了很多事情。

第二也是非常重要的事情是前往 Google Pagespeed 並在不調整圖像大小的情況下測試您的網站。 稍後您將需要它來查看區別。

現在轉到您的 Cloudflare 帳戶並轉到 Workers。 從這裡單擊“創建服務”。 隨意命名服務，您也可以保留自動生成的隨機名稱。 將啟動器保留為“HTTP 處理程序”。

創建完成後，點擊服務，點擊右上角的“快速編輯”。 編輯器將出現並簡單地選擇所有現有代碼並將其替換為我的工作人員 Github . 單擊“保存並部署”並離開編輯器。

在您的新服務頁面上，轉到“觸發器”，然後在“路由”下單擊“添加路由”。 在路由內使用匹配所有通配符設置您的網站域，例如這個“example.com/*”。 對於區域，您將選擇您的域，在我的示例中是“example.com”。

就這樣！

故障排除

如果您遇到任何問題，例如沒有調整圖像大小，請檢查以下條件：

  • 圖片是您域的一部分嗎？ 除非您在 Cloudflare 儀表板中專門啟用了此功能，否則您無法調整來自其他域的圖像的大小。
  • 是否重寫了任何圖像？ 啟用“日誌” 在你的新工作人員選項卡上，看看你是否發現任何異常。 如果你這樣做，請在我的 Github 存儲庫中報告它。
  • 圖片鏈接重寫錯了嗎？ 在這種情況下，請在 Github 上報告問題。

獎勵優化

我很確定您注意到您的 WordPress 在 HTML 正文標記之後包含一些空的 SVG 標記。 如果你不知道我在說什麼，看看這個：

WordPress Empty SVG Tags

坦率地說，我無法理解一個有效的用例； 所以我添加了一些額外的代碼來刪除它。 它將使您的 HTML 輸出更小一些，從而帶來少量的額外速度。

當我有時間時，我會添加更多優化。

費用

為了使用 Cloudflare Image Resizing，您需要在撰寫本文時為您的網站訂閱專業版（每月 25 美元）。 圖像大小調整服務起價為每存儲 100,000 張圖像 5 美元，每交付 100,000 張圖像 1 美元 - 沒有出口成本或調整大小和優化的額外費用。

使用 WordPress 插件是完全免費的，不收取任何費用。 worker使用起來也比較自由，但是限制比較小，處理能力也比較小。

我強烈建議您使用帶未綁定選項的付費員工計劃。 您網站上的圖像越多，必須重寫的 HTML 標籤就越多，因此處理時間也就越長（GBs 持續時間）。

請記住，只需 5 美元，您就可以獲得 400,000 GB-s 的工作人員限制，這在我的測試中已經足夠了。

執照

我決定不使用麻省理工學院的許可證，因為我注意到很多人都在搶我的代碼並出售它。 不酷的傢伙。

因此，話雖如此，使用的新許可模型是 Apache License 2.0，所以請不要轉售我的作品。

有用的鏈接

我堅信我的 Cloudflare Worker 會大大改善您的網站。 如果我是對的，請在 Github 上留下一個 star。 如果我錯了，請留下一些反饋。

靜候你的評價。