啟用文件壓縮

第一部分 – 第07章

Document

當用戶訪問移動網站頁面時，會向網站服務器發送對該頁面的http請求。 網站服務器將向發送請求的網絡瀏覽器返回http響應（例如頁面數據） 。每個響應都會佔用一定量的文件大小。

當http響應的文件大小（例如你的網站頁面的數據文件大小）被減少時，由於需要從你的網站服務器傳輸到用戶的網絡瀏覽器的數據包更少，響應傳輸的時間就減少了。以這樣的方式，用戶可以更快地通過網絡瀏覽器加載移動網站頁面。

減少數據文件大小

為了減少數據文件大小，你應該啟用文件壓縮。

  • Gzip壓縮是一個經典的文件壓縮方法，它可以將你的HTML和CSS文件壓縮到更小。
  • 已壓縮文件的大小可能會明顯小一些。在某些情況下，已壓縮文件的大小可能比原始大小要小50%。

壓縮是如何運行的

假定你的HTML和CSS文件已經被壓縮了。為了在網絡瀏覽器和你的網站服務器之間文件壓縮得以運行：

  • 你必須通過你的網站服務器配置啟用Gzip壓縮。假設你的移動網站使用的是Apache或者Nginx作為網站服務器。

當網絡瀏覽器（支持Gzip壓縮）從你的移動網站請求頁面時，你的網站服務器將返回壓縮過的文件。

為Apache啟用Gzip壓縮

Apache有兩個選項用於啟用Gzip壓縮：

  • mod_deflate：這是標準方式，且設置簡易。
  • mod_gzip：這種方式更為強大，允許內容預壓縮，但是這種方式設置起來更為複雜。

為了在Apache上啟用Gzip壓縮，應將如下代碼添加至.htaccess文件。 

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  
# Remove browser bugs for really old browsers
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

為Nginx啟用Gzip壓縮

為了在Nginx上啟用Gzip壓縮，應將如下代碼添加至config文件。 

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

移動網站性能技術白皮書在2017年3月正式出版。

英文版：Enable File Compression – 簡體中文版：啟用文件壓縮






移動網站性能技術白皮書上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book