壓縮的html是如何工作的以及為什麼需要它

在本文中，我們將討論壓縮HTML的兩種主要方法，為什麼要壓縮HTML檔案，以及如何進行壓縮。...

如果你經營一個網站，你應該已經知道如何使用正確的圖像格式和優化你的圖像為網絡。然而，雖然圖像壓縮是眾所周知的做法，HTML壓縮往往被忽視，這是一個恥辱，因為好處是值得的。

在本文中，我們將討論縮小HTML文件的兩種主要方法，為什麼要縮小HTML文件，以及如何縮小。

壓縮與縮小

至於優化HTML文件，主要有兩種方法：壓縮和縮小。它們表面上聽起來很相似，但實際上是兩種截然不同的技術，所以不要混淆它們。

縮小

您可以將縮小視為刪除源代碼中不必要的字符和行。想想縮進、註釋、空行等等，這些在HTML中都不是必需的——它們的存在是為了使文件更易於閱讀。修剪這些細節可以在不影響任何內容的情況下縮小文件大小。

HTML頁面示例：

<html> <head> <title>Your Title Here</title> </head> <body> <div><img src="clouds.jpg"></div> <h1>This is a Header</h1> <p>Send me mail at <a href="mailto:[email protected]">[email protected]</a>.</p> <p>This is a new paragraph!</p> <p><strong><em>This is a new paragraph in bold and italics.</em></strong></p> </body></html>

示例HTML頁面，縮小：

<title>Your Title Here</title><div><img src=clouds.jpg></div><h1>This is a Header</h1><p>Send me mail at <a href=mailto:[email protected]>[email protected]</a>.<p>This is a new paragraph!<p><strong><em>This is a new paragraph in bold and italics.</em></strong>

原版尺寸：354。縮小尺寸：272。節省：82（23.16%）。

許多web開發人員和網站所有者只保留JS和CSS文件的縮小，但這種過時的做法是錯誤的。HTML縮小也很重要。

早在21世紀，縮小工具就很少見了。每次發生更改時，您都必須手動縮小文件。由於HTML文件比JS和CSS文件更頻繁地更改，所以在那時每次縮小都太單調乏味了。現在，這是一個沒有意義的觀點。

壓縮

當用戶訪問您的網站時，他們使用HTTP協議進行訪問。瀏覽器向web服務器發送特定頁面的請求，web服務器找到該頁面，然後將該頁面的內容發送回訪問者的瀏覽器。

但是由於HTTP協議支持壓縮，因此web服務器可以在將頁面發送給訪問者之前對其進行壓縮（假設在服務器的設置中啟用了壓縮），然後訪問者的瀏覽器可以將頁面解壓縮回其原始狀態。

最常見的壓縮方案是GZIP，它是一種使用稱為DEFLATE的無損壓縮算法的文件格式。

該算法在HTML文件中查找重複出現的文本，然後用對以前出現的文本的引用替換這些重複出現的文本。每個引用只是兩個數字：引用的時間有多遠，引用的字符有多少。

考慮這樣一個文本字符串（示例取自GZIP網站）：

Blah blah blah blah blah.

算法識別以下重複：

B{lah b}{lah b}{lah b}{lah b}lah.

第一次出現是我們的參考，所以請保持：

Blah b{lah b}{lah b}{lah b}lah.

第二次出現是指第一次出現，後面五個字符，長五個字符：

Blah b[5,5]{lah b}{lah b}lah.

但在這種情況下，算法識別出下一次出現的是相同的字符序列，因此它將參考長度再延長五倍：

Blah b[5,10]{lah b}lah.

再說一遍：

Blah b[5,15]lah.

而且該算法非常聰明，可以實現後面三個字符是參考文獻中的前三個字符，因此它擴展了三個字符：

Blah b[5,18].

現在想想一個典型的HTML文件以及其中有多少重複。幾乎每個標籤，例如

<body>

，具有相應的結束標記，如

</body>

. 此外，許多標記在整個過程中重複，例如

<p>

<div>

<img>

<li>

屬性也經常重複，包括

class

href

，和

src

. 很容易理解為什麼GZIP壓縮對HTML如此有效。

唯一的缺點是每次請求頁面時，web服務器都需要多一點CPU來執行壓縮。但是，由於CPU現在已經不是一個很重要的問題，所以啟用GZIP幾乎總是比不啟用要好，即使您有入門級的web託管。

為什麼要壓縮和縮小

有兩個主要的好處，這兩個都是至關重要的，在今天的移動重型網絡景觀。

更快的頁面加載

平均而言，一個HTML瀏覽器可以減少大約百分之三的文件大小與基本設置。通過可選的高級設置，一個HTML文件可以再減少3%到7%，最多可能減少10%。這直接轉化為更快的頁面加載時間。

使用的帶寬更少

假設您有10個文件，每個文件從50kb縮小到45kb，總壓縮量為50kb。假設你的網站每天平均接待1000名訪問者，平均每次訪問10頁。僅HTML縮小就可以減少每天50MB的帶寬使用量（每月1.5GB）。

壓縮+縮小

正如您所看到的，HTML縮小本身是很有用的，特別是當您的站點變大、文件變大和流量增加時。請注意，Google的PageSpeed指南建議縮小HTML，所以如果你對此持懷疑態度，就讓它說服你。

但是HTML優化的好處在於，您不必選擇縮小或壓縮。你兩個都可以！事實上，你應該兩個都做。

平均來說，GZIP壓縮可以將HTML文件壓縮70%到90%。使用上面的示例和保守的壓縮估計，縮小的HTML文件將從每個45kb變為13.5kb，總壓縮量為365kb。與未統一/未壓縮相比，您的站點帶寬現在每天減少365 MB（每月11 GB）。

除了節省帶寬之外，每個頁面的加載速度也大大加快，因為最終用戶的瀏覽器只需下載13.5 KB，而每頁只需下載50 KB。

如何壓縮和縮小html

幸運的是，現在這兩種方法都不是很困難，而且您不需要太多的技術知識來設置它們。

wordpress插件

如果你運行一個WordPress站點，你所需要做的就是安裝一個插件，這樣你就可以獲得壓縮和縮小的好處。

大多數緩存插件做的不僅僅是緩存頁面。例如，WP Fastest Cache和W3 Total Cache都有一鍵設置，允許您啟用HTML縮小和GZIP壓縮，以及其他可以進一步加快頁面加載和減少帶寬使用的功能。

如果你只想縮小，我們推薦縮小HTML插件。它很簡單，支持HTML/CSS/JS，並允許您稍微調整縮小方法（例如，是否刪除

http:

和

https:

從URL）。

靜態html縮略器

如果您的HTML文件是靜態的（即不是由CMS或web框架動態生成的），那麼您可以維護兩組HTML文件：一組“源”文件集（未統一以便於編輯），另一組“縮小”文件集，您可以在對源文件進行任何更改時創建。

要縮小，請使用以下工具之一：

HTML壓縮程序
HTML縮小器
HTML縮微器（與上面的不同）

如果你已經遠離像WordPress這樣的cmse，現在使用靜態站點生成器，這是一種可行的技術。

啟用gzip壓縮

啟用GZIP壓縮的步驟可能因您使用的web服務器軟件而異。由於Apache是最流行的選項，我們將介紹如何使用.htaccess啟用它。

使用FTP連接到web服務器，然後創建一個名為

.htaccess

在根目錄中。編輯.htaccess文件以具有以下設置：

<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule><FilesMatch "\.(html?|txt|css|js|php|pl)$"> SetOutputFilter DEFLATE</FilesMatch>

不確定壓縮是否在你的網站上工作？用這個工具測試一下。

為了獲得最高的效率，您還應該學習如何檢查、清理和優化您的CSS。