如何通過GZIP來優化你的網站

如果你想節省帶寬提高網站速度,壓縮是一種簡單有效的方法。當我打算提高JavaScript的傳輸速率來開啓GZIP壓縮的時候,我猶豫了因爲有舊版本瀏覽器的存在(IE6)。

然而在二十一世紀,我們大部分的流量來自於現代瀏覽器,坦白的講,我們大部分的用戶都是很懂技術的。我們不想讓任何一個人在訪問我們網站的時候卡頓,哪怕是他在用IE4.0和Wdinows95.谷歌和雅虎都開啓了gzip壓縮。一個現代的瀏覽器要想不僅要享受到現代網絡信息還要享受到現代互聯網的速度,就必須開啓gzip壓縮。以下是如何設置。

等等,爲什麼我們要開啓gzip壓縮

在此之前,我有必要解釋一下什麼編碼。當你在互聯網上想請求一個文件時,比如http://www.yahoo.com/index.html,你的瀏覽器會和服務器有一個會話,大概如下如所示。

  1. 瀏覽器:嘿,給我來一個 index.html文件
  2. 服務器:好的,讓我去找找它是不是在~
  3. 服務器:找到它了,我會返回一個成功的狀態碼(200 ok),我正在發送文件……
  4. 瀏覽器:100kb? 我滴天……等啊……等啊,好的,下載下來了

當然,實際的請求頭和協議會更加正規一點。

但是,它生效了,我拿到了index.html文件。

那現在問題在哪呢?

好吧,這系統是正常的,但是太低效了,坦白講100kb是一大段的文字,HTML是冗餘的,每一個,

,
都有一個幾乎相同的閉合標籤。雖然通篇文字都有重複,但是隻要你砍掉任何的內容,html(以及它的一奶同胞xml)都不會正常顯示。

當文件太大的時候有什麼好辦法呢,就是gzip壓縮它。

如果我們傳輸一個替代原始大文件的zip的壓縮文件給瀏覽器,就會節省帶寬和下載時間。當瀏覽器可以下載zip文件,解壓,並且渲染給用戶。下載很快,頁面加載也很快,用戶心情就會very good。這個瀏覽器–服務器的會話大概是醬紫的:

1. 瀏覽器:嘿,給我來一個index.html,如果要有,給我來一個壓縮版的可以嗎
2. 服務器:容我找找……好,滿足你,如果找到了給你壓縮以下,gzip格式的哦
3. 服務器:yep,找到了,正在壓縮,馬上傳給你。
4. 瀏覽器:太棒了,只有10kb,我來解壓,並且渲染給用戶。

情況很簡單:文件越小,下載更快,用戶感受更好。

不相信我?雅虎主頁的html部分通過壓縮從101kb直接壓到了15kb:

殘(淡)酷(定)的現實

變化的部分在於瀏覽器和服務器,它成功的發送過去一個壓縮文件。對於gzip壓縮的要點有兩點:

  • 瀏覽器發送一個請求頭,告訴服務器接受壓縮版本的文件(gzip和deflate是兩種壓縮算法)Accept-Encoding:gzip,deflate
  • 如果文件壓縮了,服務器返回一個頭信息:Content-Encoding:gzip

如果服務器沒有返回Content-Encoding的頭信息,意味着這文件是沒壓縮的(瀏覽器可以直接解析的)。請求頭Accept-Encoding只是瀏覽器的一個請求,而不是命令。如果服務器不返回壓縮文件,瀏覽器就不得不處理那龐大的源文件。

服務器設置

“好消息”是我們沒辦法控制瀏覽器。他發“Accept-encoding: gzip, deflat”或者不發,請求頭就在那裏,不增不減。

我們需要做的只是給服務器配置,讓它返回壓縮版本。如果瀏覽器控制,我們可以爲每一個人節省帶寬。

對於IIS服務器,啓動壓縮在“設置”裏。

如果你像我一樣用nodejs來搭建服務器,那你中獎了,nodejs開啓gzip非常的簡單,只需增加兩行代碼搞定。

const express = require('express');
const app = express();

//express框架,前邊肯定都是必要的,也就是隻需安裝compression組件,然後添加一下兩句代碼就好
const compression = require('compression');
app.use(compression());

對於Apache服務器,我們可以啓動壓縮輸出也很簡單直接。在你的.htaccess文件裏增加如下代碼:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Apache服務器有兩個壓縮選擇:

  • mod_deflate 更簡單設置更加標準。
  • mod_gzip 看起來更加強大,可以預預縮文件。

Deflate更快,所以我用的它;當然如果想更爽,用mod_gzip。無論你選那種,Apache會檢查瀏覽器是否發送“Accept-encoding”請求頭來判斷是返回壓縮文件還是源文件。然而,一些舊版本瀏覽器會帶來麻煩,需要一些特別的指令來糾正它。

如果你不能改你的.htaccess 文件,你可以用PHP來返回壓縮的內容,給你的HTML文件一個.php 文件,把下邊文件加在文件的最上邊。
IN PHP :

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

我們會檢查“Accept-encoding”頭,返回gzip壓縮版本的文件(不然就返回源文件)。這簡直像是在建設你自己的web服務器。如果你確實在搭建服務器,請用Apache來壓縮你的文件。你肯定不想下載你的文件 just like bearing。

這有點給apache打廣告的意思啊

驗證壓縮的效果

一旦你配置好了你的服務器,檢查他是不是生效了。
- 在線查看:用online gzip test來檢查你的網頁是不是確實壓縮了。
- 瀏覽器查看:在chrome谷歌瀏覽器,F12打開 開發者工具–> network頁籤(火狐和IE瀏覽器也是相似的)。刷新你的頁面,點擊這network航信息來查看。這“Content-encoding: gzip” 的頭信息意味着內容壓縮了傳過來的。

image

點擊“use large rows”表情來查看更多信息。包含了壓縮以後的大小和源文件的大小。

image

奇蹟般的,主頁從187kb壓縮到了59kb。

試試幾個小栗子

我做了個幾個頁和一個下載demo:
- index.html —— 默認壓縮
- index.htm —— 通過在Apache上的.htaccess文件 增加 *.htm規則來壓縮
- index.php —— 通過php的頭信息來壓縮

隨意下載這些文件,放到你的服務器,調整你的服務器設置。

警告

gzip壓縮的出現如此的令人振奮,但是還有以下三個注意點:
- 低版本瀏覽器:一些瀏覽器接受壓縮文件還是有問題(他們說他們可以但是他們並不行),如果你的站點必須在window95的網景1.0瀏覽器上,你可能不想要壓縮文件。Apache mod_deflate設置了一些忽略規則來專門爲舊瀏覽器。
- 已經壓縮過的文件:大多數的圖片,音樂和視頻都已經壓縮過了,不要浪費時間來壓縮他們了。事實上,你可以只壓縮那三巨頭(HTML,CSS AND JAVARSCRIPT)。
- CPU負載:在傳輸過程中壓縮文件耗費CPU但是節省帶寬(用空間換時間)。通常壓縮速率的選擇需要權衡利弊。也存在一些預壓縮靜態文件的方法,但這要求更多的資源。考慮了cpu的耗費,壓縮文件也是利大於弊。通過壓縮實現更好的用戶體驗,更短的留白時間,值!


開啓gzip壓縮是優化網站最快的方法之一。大膽的用吧,讓你的用戶體驗更棒。

本文爲翻譯文章,欲瞭解原文請點擊原文鏈接github地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章