EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

Engineering: apache mod_pagespeed試玩心得分享

四月 20 2011 Published by under Engineering

上次曾經與大家分享過apache mod_pagespeed這個好用的模組,最近抽空玩了一下,簡單記錄一下實驗過程與心得。
mod_pagespeed主要的設定檔放在/etc/httpd/conf.d/pagespeed.conf (for CentOS/Fedora),有兩種rewrite level:

  • CoreFilters(安裝後預設會啟動此level)

這是mod_pagespeed團隊認為較安全的設定,適用於大多數網站。

  • PassThrough(可自行微調所需啟動的filters)

如果你自認為武功高強有實驗的精神,則可以改用PassThrough模式,並逐一微調你想啟動的filters與其參數。

方法很簡單,只要將pagespeed.conf中ModPagespeedRewriteLevel PassThrough這一行的註解拿掉,並且restart apache即可。

當然,我們自認為武功高強富有實驗精神,就用PassThrough來做一個簡單的實驗。
這是一個測試用的網頁,在啟動mod_pagespeed之前,其原始碼如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<!–
this is comment
YOYOYO~~
–>
<p>test for apache mod_pagespeed</p>
<img src="dog.jpg“/>
</body>
</html>

 

可以看到,其中有很多不必要的空白行,也有對使用者而言沒有意義的註解文字。另外有link了一個external css檔,還有一張圖片(dog.jpg,原始大小為416KB)。

現在,讓我們啟動mod_pagespeed,並使用下列幾個filters:

  • ModPagespeedEnableFilters inline_css

=>mod_pagespeed會自行判斷,若external css的file size太小,會自動將其寫為inline_css,以減少額外建立http connection的overhead。

  • ModPagespeedEnableFilters rewrite_images

=>在不破壞原有圖片的品質之下進行縮圖,以減少所需傳輸的資料量。

  • ModPagespeedEnableFilters remove_comments

=>將網頁中的註解拿掉,減少所需傳輸的資料量。(因為註解對一般使用者而言是沒有用的)

  • ModPagespeedEnableFilters collapse_whitespace

=>將網頁中的空白行拿掉,減少所需傳輸的資料量。

好,接著讓我們來看一下被mod_pagespeed修改過後的網頁原始碼:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script type=’text/javascript’>window.mod_pagespeed_start = Number(new Date());</script>
<style>hr{color:#a0522d}p{margin-left:20px}body{background-image:url(images/back40.gif)}</style>
</head>
<body>
<p>test for apache mod_pagespeed</p>
<img src="http://192.168.11.31/xdog.jpg.pagespeed.ic.viJ57dY33_.jpg" width="800″ height="532″/>
<script type=’text/javascript’>function g(){new Image().src=’/mod_pagespeed_beacon?ets=load:’+(Number(new Date())-window.mod_pagespeed_start);};var f=window.addEventListener;if(f){f(‘load’,g,false);}else{f=window.attachEvent;if(f){f(‘onload’,g);}}</script></body>
</html>

 

可以看到,原來的external css被改寫成inline css,註解的部份和空白行都被拿掉了,原來的dog.jpg被重新縮圖成xdog.jpg.pagespeed.ic.viJ57dY33_.jpg,檔案大小由416KB減少為412KB。

Great, mod_pagespeed works! 🙂

還有更多的filters可以玩,日後有機會再與大家分享喔。

by TingHan Chao

Web Developer, Customer Development

Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響