Apache 自動優化前端頁面的模組 - mod_pagespeed

Google 發佈的自動優化前端頁面的 Module, 原文可見: Make your websites run faster, automatically -- try mod_pagespeed for Apache

這個套件主要是解決下述幾點:

• JavaScript、CSS 壓縮，合併
• 圖片的壓縮、Resize
• HTML 移除空白
• 圖片的 Expire time 設長
• 取消 ETag.. 等等的問題, 會於頁面輸出時, 自動幫你完成.
• 更多說明可見: mod_pagespeed Examples Directory 和 mod_pagepeed Filters

此篇主要是將此 Module 安裝於 Debian Linux 上.

mod_pagespeed 官方文件

• 官方首頁: PageSpeed Module - Make the Web Faster
• 下載位置: Installing From Packages - PageSpeed Module
• Open Source 專案位置: modpagespeed - Project Hosting on Google Code

於 Debian Linux 安裝 mod_pagespeed 的步驟

1. 於上述下載頁, 抓取 mod_pagespeed 64-bit .deb (Debian/Ubuntu)
2. sudo dpkg -i mod-pagespeed-beta_current_amd64.deb # 安裝
3. sudo a2enmod pagespeed # 預設就有啟用了, a2dismod pagespeed 可以關閉, 這樣子可以比較差別
4. sudo /etc/init.d/apache2 restart
5. 註: 不過, 這個模組啟用後, 我的 LifeType Html 編輯器就爛掉了(出現此錯誤: realTinyMCE is not defined), 若要使用的話, 可能要注意一下. XD

mod_pagespeed 的設定檔參考

• vim /etc/apache2/mods-available/pagespeed.conf # 這邊是預設於 Linux 安裝後的設定檔
• 更多相關設定, 建議參考原始開發文件的: http://code.google.com/p/modpagespeed/source/browse/trunk/src/install/pagespeed.conf.template # 下述取自此文件
  

  # This sample config file also turns on "gzip" for html, css, and javascript, which is generally best practice.

  ModPagespeedUrlPrefix                "http://HOSTNAME/mod_pagespeed/"
  ModPagespeedFileCachePath            "MOD_PAGESPEED_FILE_ROOT/cache/"
  ModPagespeedGeneratedFilePrefix      "MOD_PAGESPEED_FILE_ROOT/files/"

  <FilesMatch "\.(html|htm)$">
  Header unset Etag
  Header set Cache-control "max-age=0, no-cache, no-store"
  </FilesMatch>

  <FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
  Header unset Etag
  Header set Cache-control "public, max-age=600"
  </FilesMatch>

• 或者參照此篇來增加、修改設定: mod_pagepeed Filters, 下述是將此篇的所有參數都加總起來(下述於我的機器無法使用的參數, 先註解起來)
  

  ModPagespeedEnableFilters add_head
  ModPagespeedEnableFilters add_instrumentation
  <Location /mod_pagespeed_beacon>
  SetHandler mod_pagespeed_beacon
  </Location>
  ModPagespeedEnableFilters collapse_whitespace
  ModPagespeedEnableFilters combine_css
  ModPagespeedEnableFilters combine_heads
  ModPagespeedEnableFilters elide_attributes
  ModPagespeedEnableFilters extend_cache
  ModPagespeedEnableFilters inline_css
  #ModPagespeedCssInlineMaxBytes bytes
  ModPagespeedEnableFilters inline_javascript
  #ModPagespeedJsInlineMaxBytes bytes
  ModPagespeedEnableFilters rewrite_javascript
  ModPagespeedEnableFilters move_css_to_head
  ModPagespeedEnableFilters rewrite_images
  ModPagespeedEnableFilters insert_img_dimensions
  #ModPagespeedImgInlineMaxBytes MaxBytes
  ModPagespeedEnableFilters outline_css
  #ModPagespeedCssOutlineMinBytes         3000
  ModPagespeedEnableFilters outline_javascript
  #ModPagespeedJsOutlineMinBytes         3000
  ModPagespeedEnableFilters remove_comments
  ModPagespeedEnableFilters remove_quotes
  ModPagespeedEnableFilters rewrite_css

mod_pagespeed 相關說明

下述摘錄自: Google 發佈 Apache 自動優化模組 mod_pagespeed - riku

• 不需要對網站 CMS 系統進行改變即可應用
• 加速模組可以自行對網路傳輸的 html 位元組優化及對圖象 、css 進入壓縮優化傳輸
• 智能緩存是一大亮點，它可以自動智能緩存，加速下載

下述是此篇文章的重點摘要: mod_pagespeed：傻瓜式前端優化 - hutuworm

• 原始內容1
  

  HTML tag   : <img src="images/logo.gif" />
  HTTP header: Cache-Control:public, max-age=300

• 處理完成的內容1
  

  HTML tag   : <img src="images/ce.c17941127d34679357baa1b36fb4ecc5.logo,g" />
  HTTP header: Cache-Control:public, max-age=31536000

• 原始內容2
  

  <img src="images/Puzzle.jpg" width="256" height="192" />

• 處理完成的內容2
  

  <img src="images/ic.HASH.256x192xPuzzle,j.jpg" />

下述摘錄自: Google Page Speed Module for Apache - othree

• 實際佈署的時候還有一些小地方需要注意，像是要合併的 CSS 檔案要在同一個路徑下，不然不會合併
• JS 如果要用closure compiler的進階壓縮模式，那還是要自己處理
• mod _ pagespeed 裡面用來 minify JS 檔案用的是JSMin

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章