如何壓縮 HTML 和其他網站代碼

已發表: 2022-02-25

頁面速度是您網站的關鍵性能指標。 如果您壓縮 HTML 和其他類型的代碼，您可以獲得 40-70% 的收益。 就是這樣…

網站用戶希望內容質量高且可快速訪問。 這對於優化用戶體驗很重要。 好消息是，通過幾行代碼和一些小技巧，完全可以將 HTML 和其他網站代碼壓縮 40% 到 70%（在某些情況下甚至更多）。 在本文中，我將向您展示如何做到這一點。

>> 頁面速度優化：如何提高加載時間 <<

為什麼要壓縮網站代碼？

現在你可以問自己一個問題：我為什麼要壓縮我網站的源代碼？ 畢竟，未壓縮的大小只有幾百千字節。

答案很簡單：因為更快的加載網站提供了更好的用戶體驗，這反過來又對轉化率、在頁面上花費的時間、網頁瀏覽量和跳出率產生了積極影響。 轉化率尤為重要，因為這直接影響到電子商務等領域的成功。

例如，對於電子商務巨頭亞馬遜來說，100 毫秒的加載時間延遲會使他們損失大約 1% 的銷售額。 預計在一個完整的財政年度內，這將導致大約 2.45 億美元的成本。 這些數字顯示了網站加載速度可能產生的巨大影響。

您還應該考慮使用移動設備上網的用戶比例。 LTE 和 4G 無線網絡的覆蓋率在這方面仍有很大提升空間。 這意味著移動互聯網通常很慢，這使得更快的頁面速度變得更加重要。

例如，通過使用 Gzip 或 Deflate 壓縮技術，可以顯著縮短加載時間。 這可以節省資金和帶寬。

是否可以壓縮 HTML、CSS 和 JavaScript？

壓縮將請求的數據壓縮到客戶端，以減少傳輸時間。 網絡上最常見的兩種壓縮方法是 Gzip 和 Deflate。 壓縮過程在文檔中定位相似的字符串，並將它們替換為具有相同佔位符的臨時字符串。

因此，這兩種方法非常適合壓縮 HTML、CSS 和 JavaScript 文件，因為它們通常包含許多相同的字符串，並且通常包含許多空白行和空格。 這兩種方法都可以用相對較少的努力來實施或激活。

網站代碼壓縮的工作原理

對於要傳輸的壓縮數據，客戶端的瀏覽器必須首先請求數據的壓縮傳輸。 這是通過帶有規範“Accept-Encoding: gzip, deflate”的 HTTP 請求完成的。 可以指定一種或幾種壓縮方法，並且該示例接受 gzip 和 deflate 壓縮數據。

重要的是，這只是一個請求，而不是一個需求——因此，服務器不必回复壓縮數據。 如果數據不是以壓縮形式提供的，它將簡單地以未壓縮的形式發送給請求的客戶端。

大約 90% 的瀏覽器支持壓縮。 通常不存在對“Accept-Encoding”設置或瀏覽器允許的壓縮方法的影響。 瀏覽器要么支持數據壓縮，要么不支持。

服務器使用所謂的“HTTP 響應”響應客戶端的 HTTP 請求。 如果服務器支持壓縮，則數據會被壓縮傳輸到客戶端。 然後，在 HTTP 響應的標頭中，服務器會報告例如“Content-Encoding: gzip”。 否則，請求的資源會以未壓縮的形式發送給客戶端。

如何激活網站代碼壓縮？

根據服務器，可以使用適當的配置文件激活代碼壓縮。

Blogbeitrag

圖 1： Gzip 壓縮示意圖

使用 .htaccess 激活代碼壓縮

在符合 NCSA 的 Web 服務器（例如，使用最廣泛的 Web 服務器 Apache）上，可以使用 .htaccess 配置文件安裝 Gzip 壓縮。 為此，必須將以下代碼插入到 .htaccess 文件中：

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</文件匹配>
</IfModule>

首先，使用“<IfModule mod_deflate.c>”運行測試以查看是否安裝了擴展模塊 mod_deflate。 如果是這樣，使用“<FilesMatch”\\.(js|css|html|xml)$”>”將確定過濾器應該應用於哪些文件類型。

JavaScript、CSS、HTML 和 XML 文件的示例過濾器。 使用“SetOutputFilter DEFLATE”，然後確定與先前指定的模式匹配的所有文件都使用 DEFLATE 過濾器發送出去。 隨後，再次關閉該模塊的匹配和查詢。

理論上，此過濾器也可以應用於其他數據類型（例如 .jpg、.gif 或 .png 圖像文件）。 文件匹配必須進行如下調整：

“<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

但是，這裡需要注意的是，這些格式通常已經被壓縮，並且重新壓縮通常會導致圖像文件質量下降。 因此，建議在上傳二進製文件（例如圖像）之前對其進行壓縮，並避免使用 gzip 對其進行壓縮。 JPEGmini 或 TinyPNG 等工具可用於此目的。

使用 PHP 激活代碼壓縮

如果您無權訪問服務器的 .htaccess 文件，或者您只想傳輸單個 gzip 壓縮文件，您可以選擇使用以下代碼啟用壓縮：

<?php ob_start("ob_gzhandler"); ?>

如果可能，這個函數應該放在第一個 HTML 代碼之前。

例子：

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<正文>
<p>這應該是一個壓縮頁面。</p>
</正文>
</html>

壓縮網站代碼的 5 個陷阱

壓縮 HTML 和其他網站代碼也可能導致錯誤或風險。 你應該考慮以下幾點：

1.通過 https 使用 Gzip 時，任何安全漏洞都可以被利用。 這可能會導致包含敏感信息的文件出現問題。 因此，不建議使用 Gzip 壓縮包含敏感信息的文件類型。

2.壓縮只能應用於文件類型或尚未壓縮的文件。 圖像文件通常已經按比例縮小，因此不應通過 gzip 額外壓縮。 重新壓縮甚至會產生相反的效果，您最終可能會得到更大的文件大小，或者壓縮過程會佔用太多內存。

3.壓縮只能應用於大小合適的文件。 對於只有幾個字節大小的文件，壓縮會導致文件變得比原始文件更大。

4.在壓縮階段，注意不要壓縮太多。 通常，弱壓縮文件、正常壓縮文件和高度壓縮文件之間的文件大小差異很小。 然而，中等或重度壓縮需要更多的計算能力。

5.由於壓縮過程會替換相同或重複的字符串，因此使用變量和類名（例如，在 CSS 和 HTML 文件中）會比所有變量和類都命名不同的情況下獲得更高的壓縮成功率，因此幾乎沒有可能提供壓縮。

細碼的進一步優化措施

縮小 HTML 和其他策略

為了保持源代碼清晰簡潔，開發人員通常使用換行符、空格、縮進和其他使源代碼易於閱讀的字符。 為了以後更好地維護源代碼，通常在註釋的幫助下記錄特別複雜的結構和部分。

搜索引擎爬蟲不需要對開發人員非常有幫助的內容，因此應將其刪除。 刪除不必要的字符被稱為“縮小”，它有助於節省寶貴的字節。 在下面使用免費的 JavaScript 庫 jQuery 的示例中，通過縮小節省的字節數量令人印象深刻。

雖然版本 2.1.4 中框架的原始文件大小約為 242kb（jQuery 2.1.4.js（未壓縮）），但刪除不必要的字符和註釋後減小的文件大小僅為約 82kb（jQuery 2.1.4. min.js（壓縮））。 只有通過縮小——換句話說，通過減少不必要的字符——文件大小才能減少大約 66%。 一個了不起的結果。

komprimierung-e1438673459868

縮小過程前後的源代碼

縮小適用於 HTML、CSS 和 JavaScript 文件的工作。

最重要的是，使用 Gzip 壓縮可以將縮小的 jQuery 文件進一步縮小 65%。 從最初的 242kb，到最後只有不可思議的 29.5kb。

減少 CSS 和 JavaScript 代碼的工具

為了減少 CSS 代碼，您可以使用例如 YUI Compressor 或 cssmin.js。 還有一些工具可用於減少 JavaScript 代碼。 Google PageSpeed Insights 推薦使用 Closure Compiler、JSMin 或 YUI Compressor。

提示：由於使用的換行符、空格和註釋對於開發人員和快速、簡單的維護非常重要，因此建議將文件保持在原始狀態（帶有不必要的字符）和優化/縮減狀態的文件. 因此代碼可以很容易地維護，但對於爬蟲來說，它的下載速度也相當快。

結合 CSS 和 JavaScript 文件

通常情況下，網站的 HTML 標頭中加載了多個 CSS 和 JavaScript 文件。 每次調用這些，這是一個需要瀏覽器處理的 HTTP 請求。 現代瀏覽器只能同時處理來自同一域的 2-8 個 HTTP 請求——所有其他請求都必須等待。

由於單個網站可能需要多達數百個 HTTP 請求，這造成了巨大的瓶頸。 例如，可以通過將所有 CSS 文件合併到一個文件中來防止這種情況，從而只表示一個 HTTP 請求。

這同樣適用於通過 <script> 元素加載的 JavaScript 文件。 在這裡，您還應確保如果技術上可行，則將所有 JavaScript 文件合併為一個文件。

應該注意的是，通常每種頁麵類型（例如雜誌底部與產品詳細信息頁面）需要不同的 JavaScript 函數，因此需要不同的 JavaScript 文件。 在這種情況下，只加載每個頁麵類型實際需要的 JavaScript 和 CSS 文件是有意義的。 在這種情況下，將所有 JavaScript 文件組合成一個文件可能會帶來不利影響。

此外，使用子域或內容交付網絡 (CDN) 可能是有意義的。 不需要立即使用的腳本和資源可以使用 AJAX 重新加載。

壓縮網站代碼總結

通過使用 Gzip 或 Deflate 交付網站數據，可以顯著縮短加載時間。 這兩種方法都非常適合壓縮 HTML、CSS 和 JavaScript 文件。 此外，縮小是另一種保持代碼精簡的有用方法。

由於搜索引擎爬蟲在源代碼中不需要開發者有用的換行、縮進等，因此可以減少這些不必要的字符。 還有一些有用的工具可以減少 CSS 和 JavaScript 代碼。 這也可以節省很多字節。

為了防止網站需要過多的 HTTP 請求，可以將 CSS 和 JavaScript 文件組合在一起。 這些只構成一個 HTTP 請求，從而節省了額外的資源。

因此，即使在網站上只需幾行代碼和少量干預，也可以實現代碼的最佳精簡。 由於網站的加載時間是一個重要的 SEO 和排名因素，每個網站管理員都應該隨著時間的推移處理這個問題。

網站代碼的壓縮可確保改善用戶體驗，從而對其他指標產生積極影響，例如轉化率或停留時間。 這反過來又代表了整個公司成功的一個重要方面，並帶來了滿意的用戶。

使用 10 天免費 Ryte 試用版分析和優化您的頁面速度

現在開始！