2010年8月31日 星期二

壓縮網頁大小

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


所以就有必要去調整一下輸出網頁產生的大小,也就是利用壓縮的技術讓網頁原始檔可以再小一些,
先撇開程式上面所需要做的事情,就.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


先來看看沒有進行頁面壓縮前的資料大小
2010-06-29_205415

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


再來看看經過頁面壓縮的資料大小
2010-06-29_205859

上圖可以看到輸出有啟用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壓縮輸出




沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。