我如何使用brotli以CDN量表獲取更小的CSS和JavaScript文件

HBO系列矽谷幽默地描繪了Pied Piper，這是一個旨在創建革命性壓縮算法的開發團隊。他們的目標？為了過時對高質量流和文件存儲的關注。代表Google的虛構的Hooli試圖獲取其技術。有趣的是，Google實際上擁有強大的壓縮引擎：Brotli。

本文詳細介紹了我在生產環境中使用Brotli使用Brotli的經驗。雖然最初被認為是計算昂貴的，尤其是在較高的壓縮水平下，Brotli在幾個關鍵領域都被證明具有非常成本效益，超過了GZIP和較低的Brotli設置。

Brotli的創世紀

Google於2015年宣布了Brotli，並在Github上發布了其源代碼。 Brotli創作者還在兩年前開發了Google的Zopfli壓縮。與現有技術建立的Zopfli不同，Brotli是從頭開始設計的，優先考慮靜態Web資產的文本壓縮（HTML，CSS，JavaScript，Web Fonts）。

作為當時的自由網絡績效顧問，Brotli承諾比Zopfli的20-26％改善（本身是高效的放氣壓縮機）感到興奮。這代表了對Zlib（本質上是GZIP）的顯著進步。

最初的失望

儘管Brotli在工具，服務和瀏覽器中獲得了快速的吸引力，但預期的26％的壓縮並未在生產中始終實現。一些CDN在內部使用較低的壓縮水平，而另一些CDN則需要手動起源側brotli配置。

服務器端Brotli支持很好，但是實現高壓的高壓定制預壓縮代碼或服務器模塊 - 通常不可用，尤其是在共享託管的情況下。這很令人沮喪；我的目的是為客戶網站提供最大的字節壓縮，但是事實證明，按需預壓以及同時的文件更新是具有挑戰性的。

一個自製的解決方案

我為客戶開發了性能優化服務，將優化分為“內容”，“交付”和“緩存”組。 Brotli被整合到“內容”優化中。

Brotli提供可調節的壓縮水平（最高11級）。 11級提供了大量的文件尺寸減少，但非常慢，不適合由於CPU高開銷而導致按需壓縮。我的基準顯示Brotli：11佔數百毫秒來壓縮一個縮小的jQuery文件。預壓是唯一需要服務器級緩存的可行選擇。

儘管擔心資源消耗，但我還是將Brotli：11作為可配置的服務器選項，使客戶可以權衡計算成本。

漸進的投資回報率

我的服務包含地理內容交付（內置CDN）。我將公共和私人CDN組合在單個主機上，利用共享的瀏覽器庫來獲取公共資源，同時避免了額外的DNS查找和連接成本。此優化的HTTP/2多路復用。

使用Brotli：為所有可壓縮資產（CSS，JavaScript，SVG，TTF等）啟用了11個預壓縮，請提高初始請求開銷，但隨後的請求順利運行。 Brotli的高瀏覽器支持確保了廣泛的利用。

分析顯示，與其他CDN相比，節省了約21％（有些已經在較低級別使用Brotli）。這在經過測試的網站之間是一致的。下圖說明了節省（CSS節省比JavaScript更重要）。

Brotli：11的好處是很大的：

• 減少了TLS開銷：雖然不容易量化，但較小的文件加密速度更快。
• 較低的帶寬成本：一致的21％節省量導致累積成本降低。
• 有效的邊緣服務器緩存：較小的Brotli壓縮文件最大化的內存利用率。
• 改進的用戶體驗：減少了用戶，尤其是移動用戶的數據傳輸，從而可以更好地節省電池壽命和數據。

每次要求節省的成本是適度的，但是公共資源的接近零高速緩存率很快攤銷了初始壓縮成本。長期利益很大。

進一步的增強

我們的服務允許客戶使用較低的壓縮液位來用於經常更改私有CDN資源（自定義CSS/JavaScript），自動切換到公共CDN，以較少更新，預壓縮（Brotli：11）資源。這將高壓比與快速清除/更新之間進行平衡。

我們的集成工具簡化了此過程。公共CDN提供免費的帶寬和出色的性能。

自己嘗試！

積極的壓縮可以顯著減少頁面負載大小。我們的PageCDN服務可訪問免費的公共CDN。以下是常用庫的示例：

<link crossorigin="anonymous" href="https://pagecdn.io/lib/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A KluUYx/3pK c7lYEpqLTlxjYQ=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/ionicons/4.6.3/css/ionicons.min.css" integrity="sha256-UUDuVsOnvDZHzqNIznkKeDGtWZ/Bw9ZlW 26xqKLV7c=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" rel="stylesheet">

我們的PHP庫和WordPress插件與公共CDN無縫集成。 JavaScript，Python和Ruby圖書館即將到來。您還可以使用我們的搜索工具來找到用於您的網站資源的CDN等效物。

未來的前景

我們最初專注於流行的庫來減輕惡意軟件風險。我們根據用戶建議不斷添加新庫。對於尚未在我們的公共CDN上的資源，我們的私人CDN允許鏈接到存儲庫並應用自定義優化。

結論

本文反映了我對Brotli的個人經歷。儘管我們的服務仍然相對較小，但積極的壓縮已被證明是非常有益的。免費的公共CDN提供了與您的網站相似的優勢。歡迎反饋。

以上是我如何使用brotli以CDN量表獲取更小的CSS和JavaScript文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！