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

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

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

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

mod_pagespeed 官方文件

於 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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 My_Note-Unix。將永久鏈結加入書籤。

Apache 自動優化前端頁面的模組 - mod_pagespeed 有 9 則回應

  1. erickerich 說道:

    #ModPagespeedEnableFilters elide_atttributes
    #ModPagespeedEnableFilters cache_extend
    這兩行是打錯字所以不能跑?
    正確的是
    ModPagespeedEnableFilters elide_attributes
    ModPagespeedEnableFilters extend_cache

  2. Tsung 說道:

    感謝指點, 馬上修正. Orz.

  3. erickerich 說道:

    你修正了那兩項以後,文內提到的所有設定都不會導致 apache 跑不起來喔~ 不過,有的會導致網頁爛掉倒是真的。比如說,
    ModPagespeedEnableFilters rewrite_javascript 這個造成網頁顯示出問題的可能性很高。
    ModPagespeedEnableFilters remove_quotes 這個也是有會影響到 java script的結構的風險。

  4. Tsung 說道:

    嗯嗯, 感恩, 我試試看~ Orz..

  5. Tsung 說道:

    我的還是一樣, 設下去後, LifeType 的 HTML 編輯器就會爛掉.
    把剛剛提到的參數都拔掉還是一樣. 🙁

  6. 高藥師 說道:

    官方首頁: mod_pagespeed Overview
    下載位置: Page Speed Downloads
    Open Source 專案位置: modpagespeed - Project Hosting on Google Code

    連結好像錯了?

  7. Terry Lin 說道:

    pagespeed 這模組裝在 nginx 好像不大穩, 會掛掉 (雖然頻率不高) 然後網站找不到合併後的檔案 css 風格全失效,掛掉時要重啟 nginx 才行~ 不知道有沒有人遇過相同問題還是那邊參數要調整呢?

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料