壓縮網頁大小

雖然現在大家普遍都是用寬頻來上網了，不會再如同過去用電話撥接的時代，等個網頁出現會等到睡著，
但也不能因為大家的頻寬都大就可以不必考慮網頁的大小問題，
畢竟你的網站主機輸出的頻寬再大也拼不過一堆人的需求呀！


所以就有必要去調整一下輸出網頁產生的大小，也就是利用壓縮的技術讓網頁原始檔可以再小一些，
先撇開程式上面所需要做的事情，就.NET的環境而言，首先還是要對IIS做些必要的調整，
關於IIS的調整，可以參考下面的文章：
Will保哥的 調整 IIS 將輸出的內容全部壓縮
gipi大的 [ASP.NET]使用IIS的網頁壓縮
LittleSix的 [ASP.NET] IIS6.0網頁壓縮設定

 接下來就是說明有關程式上面的作法，在點部落中有搜尋到一篇文章，其實作法上是大同小異

seanyhkao的 [小筆記]用gzip壓縮Page
雖然說現在的瀏覽器多半都已經支援Client的GZip解壓縮
而且為了要達到更為嚴謹的程式作法以及減少程式的重複性
所以我的做法如下：
Step1
Global.asax

void Application_PreRequestHandlerExecute(object sender, EventArgs e)

{

CompressUtils.CompressPage(sender as HttpApplication);

}

Step2

CompressUtils.cs

#region -- CompressPage --

/// <summary>

/// Compresses the page.

/// </summary>

/// <param name="app">The app.</param>

public static void CompressPage(HttpApplication app)

{

string acceptEncoding = app.Request.Headers["Accept-Encoding"];

Stream prevUncompressedStream = app.Response.Filter;

if (!(app.Context.CurrentHandler is Page

|| app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler")

|| app.Request["HTTP_X_MICROSOFTAJAX"] != null)

{

return;

}

if (acceptEncoding == null || acceptEncoding.Length == 0) return;

acceptEncoding = acceptEncoding.ToLower();

if (acceptEncoding.Contains("gzip"))

{

app.Response.Filter = new GZipStream(prevUncompressedStream, CompressionMode.Compress);

app.Response.AppendHeader("Content-Encoding", "gzip");

}

else if (acceptEncoding.Contains("deflate") || acceptEncoding == "*")

{

app.Response.Filter = new DeflateStream(prevUncompressedStream, CompressionMode.Compress);

app.Response.AppendHeader("Content-Encoding", "deflate");

}

}

#endregion

這邊增加判斷需求端是否支援解壓縮，有支援才進行下去，

另外還需要考量發出的需求是否為Page，還有就是如果頁面有處理AJAX時，也不進行壓縮，這麼做是要確保輸出正確與安全。

在程式中也看到另一種壓縮格式「deflate」，因為YSlow與PageSpeed域社會去判斷是否使用GZip壓縮頁面來評分，所以原則上還是使用GZip


先來看看沒有進行頁面壓縮前的資料大小


上圖可以看到沒有經過壓縮的輸出大小為15.3KB


再來看看經過頁面壓縮的資料大小


上圖可以看到輸出有啟用gzip進行壓縮，壓縮過後的大小也減少為7.9KB，減少了將近一半。


經由上面的介紹就可以看出壓縮頁面會有多大的變化，但是壓縮也不是絕對的必要，還是要看專案的需求來決定，

畢竟多處理壓縮的程序也就是增加主機系統的負擔，

另外還有一點必須要說明，如果網站中有使用FCKEditor，並且有開啟圖片檔案上傳功能，則此壓縮程序將會使上傳功能出現問題

gzip壓縮造成Xoops下的Fckeditor不能瀏覽服務器，這篇文章雖然說的是Xoop下使用gzip壓縮對FCKEditor的影響，但是錯誤的原因是相同的

應該就是gzip壓縮會造成FCKEditor的部分必要XML產生破壞。


最後貼出幾個有關YSlow的介紹以及有關YSlow Gzip相關的文章連結：

Yahoo YSlow
YSlow User Guide

YSlow使用指南_最新2.0使用指南中文版
Yahoo!網站性能最佳體驗的34條黃金守則——伺服器 之 13、Gzip壓縮檔內容

本篇文章的程式參考出處
Enabling Gzip and Deflate HTTP Compression in ASP.NET pages


下一篇再來說說如何在Runtime時去對CSS與JS檔案進行Gzip壓縮輸出

---

---