Brotli壓縮:GZIP壓縮替代方案

Brotli壓縮:GZIP壓縮替代方案

速度對於任何網站都很重要。在網路追求快速載入時間的過程中,我們有許多不同的技術可以幫助我們。一種方法是在不影響其功能的情況下最小化您的站點將使用的底層程式碼。GZIP壓縮是執行此操作的一種方法,但Brotli壓縮是另一種引起注意的新興方法。

這是一個由Google開發的解決方案,看起來比GZIP壓縮(以及替代)提供了許多好處。本文中的詳細資訊將準確介紹該技術所提供的功能,但Brotli壓縮快速且高效——它滿足了您研究它所需的所有條件。

在本教學中,我們將研究Brotli壓縮並向您展示如何檢查您的站點是否使用它,以及如何在需要時啟用它。首先,我們將把Brotli放在壓縮演算法空間中,並討論為什麼要使用它而不是其他解決方案。

  1. 網路資料壓縮
  2. Brotli壓縮
  3. Brotli壓縮與GZIP壓縮
  4. 如何檢查您的網站是否使用Brotli壓縮
  5. 如何為您的站點啟用Brotli壓縮

網路資料壓縮

在最基本的形式中,資料壓縮採用網站或應用程式的程式碼,並最小化檔案大小。這使您可以在網路上移動更輕的檔案,並減少載入和呈現網站所需的時間。您會發現有很多方法可以根據您使用的檔案型別來壓縮資料。

一種常見的方法是“縮小”。這是一種演算法去除您網站程式碼中一些多餘元素的地方。這個想法是縮排、註釋、空格等方面會增加檔案大小,從而增加載入時間。

在大多數情況下,刪除這些元素不會影響使用者體驗 (UX)。但是,對於必須編譯和渲染程式碼的計算機來說,它確實使事情變得更加簡單。例如,以這組程式碼為例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
define( 'WP_INSTALLING', true );
/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );
define( 'WP_INSTALLING', true );
/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );

上面的程式碼使用空格和回車等元素使其易於閱讀,但計算機不需要這些元素來理解核心程式碼。更重要的是,這些批次的空格和換行符將佔用寶貴的空間,刪除這些空間可以提高效能。

如果你最小化這段程式碼,它看起來完全不同:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );

但是,此程式碼的基本功能仍然相同。

您會發現其他檔案型別也有壓縮資料的方法。例如,影象通常需要大量壓縮來減小尺寸,而不會降低影象本身的質量:

優化影象的示例

優化影象的示例

GZIP壓縮是最小化檔案包大小的標準方法——想想ZIP或Linux包等.tar包。但到目前為止,還沒有真正的替代品。稍後我們將更多地討論為什麼應該存在替代方案,但首先讓我們向您介紹GZIP的“競爭對手”。

Brotli壓縮

簡而言之,Broti是一種資料壓縮演算法。但是,如果這就是我們不得不說的全部內容,那麼就沒有理由對其進行調查。

它提供“無損”壓縮,由Google在MIT許可下開發。該公司通常處於網路推進技術的最前沿,因此,Brotli希望採用GZIP的做法並對其進行改進,併為使用者和網站提供增強的體驗也就不足為奇了。

Brotli壓縮使用與GZIP壓縮相同的核心基礎技術,即:

事實上,如果您將這兩種技術結合起來,您將獲得DEFLATE作為GZIP和Brotli壓縮基礎的格式。這是我們在關於GZIP壓縮的帖子中深入探討的內容。

簡而言之,未壓縮檔案通過LZ77和Huffman演算法執行,作為將它們壓縮為Brotli格式的DEFLATE過程的一部分。從那裡,一個INFLATE程序將在必要時再次解壓縮檔案。

儘管Brotli目前是GZIP的主要競爭者,但還有其他類似的技術也使用DEFLATE. 在下一節中,我們將討論是什麼讓Brotli脫穎而出。

Brotli壓縮與GZIP壓縮

如前所述,Brotli和GZIP都使用DEFLATE方法來壓縮(和解壓縮)資料。這可能會使許多人感到困惑,因為僅此一項並不能保證轉換。

然而,谷歌正在DEFLATE的基礎上提供增強的技術,並將資料壓縮到更高、更快的標準。

Brotli如何使用字典改進資料壓縮

資料壓縮格式的一個技術方面是Brotli壓縮使用資料字典中現有的已知語言和文字來使用其演算法的方式。

開發人員將使用鍵值對字典來儲存資料,因為它高效、靈活且可擴充套件。下面是PHP字典(稱為“陣列”)的樣子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);
$cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);

雖然GZIP不使用字典,但Brotli使用兩個.

Brotli的靜態詞典

第一個是作為HTML、CSS和JavaScript文字參考的常用程式碼術語的靜態(即預定義)字典。

有六種不同語言的13,000多個單詞,Brotli將使用這些作為程式碼中點的引用。這不是一個精確的類比,但它類似於WordPress鉤子引用更大的程式碼套件的方式。

因此,編碼器不必逐位元組篩選程式碼。相反,它可以作用於引用,從字典中提取定義,然後繼續下一個。

您還會發現字典中有真實世界的短語以及不會經常看到壓縮的程式碼。這有助於一些標籤(例如<HTML>type="text/javascript"引數)進行一些壓縮,併為您帶來更大的收益。

字典中也有一些“轉換”:部分、不完整和其他型別的短語,帶有新的字首、字尾或大小寫成為一個全新的詞——例如,“Work”轉換為“Working”或“html” 轉換為“HTML”。

Brotli的動態詞典

動態字典從源頭解析內容和程式碼,這對較小的裝置有好處,但對較大的檔案不太好。它也稱為“滑動視窗”,大小可達16MB。這是壓縮演算法“快取”一些最新資料以引用它的地方。它是超動態的,因為它不斷變化。

如果將此與大約32KB的GZIP滑動視窗進行比較,您會發現實時解析和壓縮的範圍非常大。事實上,最典型的做法是使用大約4MB的Brotli滑動視窗,與競爭演算法相比,這仍然是巨大的。

Brotli壓縮與GZIP壓縮:效能和支援

談到純使用者數,GZIP壓縮仍然是第一位的。然而,Brotli壓縮每天都有更多的使用。這部分是由於主要瀏覽器採取了更廣泛的採用措施;基於Chromium的瀏覽器的興起也有幫助。

Can I Use…網站記錄了瀏覽器採用的技術,並提供了各種歷史記錄。該網站指出,超過95%的瀏覽器在當前寫作時使用Brotli壓縮,包括所有主要版本。

Brotli相容情況

The Can I Use…檢視Brotli相容情況。

在我們的GZIP壓縮文章中,我們注意到一個基準測試,與競爭演算法相比,Brotli具有更好的壓縮比,但在壓縮和解壓縮時間方面落後:

多種不同演算法之間的壓縮效能比較

多種不同演算法之間的壓縮效能比較(來源:OpenCPU)。

然而,Squash基準測試顯示了一個不同的故事——一個更微妙的故事。真正的收穫是,總體而言,Brotli比GZIP更靈活,壓縮比普遍更高。

以下是Squash Benchmarks調查結果的摘要:

  • Brotli在每個壓縮級別都有更好的壓縮比(即它產生更小的壓縮檔案)。
  • 雖然GZIP在大多數情況下確實在速度上擊敗了Brotli,但您壓縮的級別會影響您將看到的結果。

Paul Calvano的細分提供了更多細節,但關鍵是Brotli需要更多CPU能力來提供更大的檔案壓縮係數。這顯示在最高和最低壓縮級別。Cloudflare的基準測試支援這一點:檔案更小,壓縮速度數字更接近。

此外,請考慮一些測試工具,如Pingdom和一些內容交付網路 (CDN)尚不支援Brotli。這可能會歪曲其他人收集的有關 Brotli 運作方式的資料。如果您確實執行測試,您可能會看到“假陰性”:更高的頁面速度數字忽略了您使用的檔案壓縮。

Brotli壓縮的好處

到目前為止,有很多關於Brotli壓縮的資訊。但是,我們可以總結一下您為什麼應該選擇Brotli而不是GZIP:

  1. 它採用與GZIP相同的技術,並使用現代方法對其進行增強。
  2. Brotli基於字典的解析意味著它可以將更多檔案壓縮到更深層次。
  3. 雖然與GZIP相比,Brotli需要更多的計算能力,但結果意味著檔案更小。
  4. 在大多數Web主機使用的壓縮級別——諸如四級或五級之類的中等壓縮級別——Brotli的效能比GZIP更好,而且毫不費力。
  5. 你會發現 Brotli 在瀏覽器中幾乎得到了普遍支援,如果不是你習慣的一些基準測試工具的話。
  6. Brotli是免費使用和開源的。如果您使用與Broti相容的CDN,例如Cloudflare ,這是一個優勢。

值得注意的是,Cloudflare在其所有伺服器上都使用Brotli壓縮。事實上,它使用了經過修改和優化的Brotli版本,讓您在速度和檔案傳遞方面獲得更多收益。

如何檢查您的網站是否使用Brotli壓縮

因為Brotli壓縮還不是標準的(雖然它幾乎就在那裡),你可能想知道你的網站是否使用它。有幾種方法可以解決這個問題。

1.使用線上工具

檢查您的網站是否使用Brotli壓縮的最簡單方法是通過線上工具。雖然有一些可供選擇,但您會想要一些快速且易於使用的東西,它還會為您提供大量有關您的設定的資訊。

Gift of Speed是我們檢查Brotli壓縮的選擇。

Gift of Speed網站

Gift of Speed網站

它將確定您的站點是使用GZIP、Brotli還是根本不使用壓縮,並提供一些其他指標來幫助您決定下一步該做什麼。這些指標提供了重要的洞察力,因為您不僅要考慮您網站的伺服器是否使用了正確的壓縮“風格”。

構成網站的元素很多,甚至還有第三方庫和依賴項。您可能會選擇使用CDN為它們提供服務,如果是這樣,這也需要使用Brotli壓縮以獲得最佳效能。

如果您使用Gift Of Speed測試單個資產,您可以檢視Server值以瞭解其服務方式。

Cloudflare資產的Gift Of Speed結果頁面

Cloudflare資產的Gift Of Speed結果頁面

因此,每個站點還將在整個鏈和伺服器架構中使用Brotli壓縮。

2.檢查使用瀏覽器的開發工具

大多數開發人員都知道,瀏覽器提供了一些出色的工具來幫助您進行各種與Web相關的調查和故障排除。您可以快速檢查您的網站(或特定資產)是否使用Brotli壓縮。

對於Brave、Edge、Firefox或Chrome等所有主要瀏覽器,您可以前往Network > All螢幕。

首先,您不會看到任何與內容標題相關的內容——您需要從左側選擇資產或請求。如果您繼續檢視並向下滾動列表,您將看到一個面板開啟,該面板預設為Headers資訊。

在這裡,向下滾動輸出,直到看到content-encoding: br行:

Brave的開發工具,顯示該站點啟用了Brotili壓縮

Brave的開發工具,顯示該站點啟用了Brotili壓縮

簡而言之:如果您看到content-encoding: br,這表明Brotli在該站點上處於活動狀態。

如何為您的站點啟用Brotli壓縮

在最後幾節中,我們將向您展示為您的站點啟用Brotli壓縮的多種不同方法。

1.使用WordPress外掛

幾乎每個WordPress網站都會使用至少一個外掛——通常更多取決於網站需要的功能。快取是外掛的一種用例,周圍有很多。然而,並不是所有的都可以讓你啟用Brotli壓縮,所以你需要明智地選擇並準備好切換你喜歡的解決方案。

在對站點進行任何更改之前,請記住進行完整備份,以防以後需要恢復。對於這種方法,我們將使用W3 Total Cache,因為它很容易找到正確的設定。

您需要前往WordPress中的Performance>Browser Cache:

W3 Total Cache“瀏覽器快取:連結

W3 Total Cache“瀏覽器快取:連結

此螢幕顯示兩個設定。您要選擇的是Enable HTTP (brotli) Compression

在W3 Total Cache中啟用Brotli壓縮

在W3 Total Cache中啟用Brotli壓縮

在這些情況下,您需要採用另一種方法。

2. 在伺服器上啟用Brotli

在選擇伺服器型別時,Nginx與Apache是一場長期的戰鬥,(目前)前者正在獲勝。無論如何,這兩種伺服器型別都可以啟用Brotli壓縮,並且每種都有不同的方法。

在研究手動方法之前,您應該瞭解一些先決條件:

  • 您需要了解如何訪問特定伺服器的配置檔案。
  • 命令列知識將是有益的,尤其是在涉及Apache伺服器時。要執行任何命令,您需要成為具有sudo特權的root使用者。
  • 您可能需要一個文字編輯器,但對於這樣的快速更改,您應該沒問題。
  • 在某些情況下,您需要將您的登入憑據作為伺服器本身的安全外殼 (SSH) 使用者。您可以在主機控制面板中找到這些,或聯絡支援人員詢問。

如果您對手動方法有任何疑問,我們建議您考慮另一種選擇,或聯絡您的房東尋求幫助。無論如何,我們將依次簡要概述每個伺服器的過程,從Nginx開始。

Nginx

要在Nginx伺服器上啟用Brotli壓縮,您首先需要找到nginx.conf檔案。它將是幾個位置之一:

  • /usr/local/nginx/conf
  • /etc/nginx
  • /usr/local/etc/nginx

開啟檔案後,在底部新增以下內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
brotli on;
brotli_static on;
brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
brotli on; brotli_static on; brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance. brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
brotli on;
brotli_static on;
brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

該套件將開啟Brotli並使用它來提供靜態檔案。brotli_comp_level設定是您可以根據您的用例和需求更改的設定。較高的數字提供更好的壓縮平衡與較低效能的站點。

Apache

由於Apache在配置方面非常靈活,因此您可以啟用Brotli壓縮而無需大驚小怪。

為此,請按照下列步驟操作:

  1. sudo以root使用者身份使用命令提示符或終端應用程式登入到您的伺服器。
  2. 執行a2enmod brotli命令以開啟壓縮。
  3. 在Apache VirtualHost或您的伺服器配置中,新增AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript行以設定您想要壓縮的正確檔案型別。

雖然Apache不支援靜態壓縮,但您可以使用BrotliCompressionQuality LEVEL-NUMBER 行更改您提供的Brotli壓縮級別。但是,您需要將“LEVEL-NUMBER”佔位符替換為1-11之間的數字。

3. 使用支援的Web主機

為您的站點啟用Brotli壓縮的最直接方法是確保您的主機預設執行此操作。

您需要檢查您選擇的主機是否提供Brotli壓縮,以及您需要將其配置到什麼級別。為了執行效能最高、最穩定、最安全的網站,良好的託管是必不可少的。

小結

資料壓縮是開發和使用現代網路的必要組成部分。由於您將使用豐富而複雜的檔案型別來拼湊一個網站,因此檔案大小可能會飆升。所有這些都需要某種形式的壓縮。

到目前為止,典型的方法一直是GZIP,但現在有一個新的孩子。

Brotli壓縮基於與GZIP相同的技術基礎,但包括一些效能增強優勢。正如我們所討論的,它使用上下文對映來更快地處理壓縮請求,以及使用動態填充的字典。這比GZIP所能提供的要大得多,而且還讓移動使用者也可以從壓縮中受益。

評論留言

脣槍舌劍 (1)

  • 土狼妹妹的頭像

    土狼妹妹

    2024.12.12 13:12

    我的博客已经使用了,效果不错,网页可以缩小70%左右。

    回覆