PageSpeed 開外掛：mod_pagespeed

PageSpeed 開外掛：mod_pagespeed

紅寶鐵軌客

寫程式中、折磨中、享受中 ......

533 0

2021/04/25

4分鐘

☕

Google 搞了一個 PageSpeed Insights 來讓大家練武功，比拼速度，好玩的是，他還自己出了一個外掛：mod_pagespeed，只是，它真的有用嗎？

mod_pagespeed

這個外掛是給 Apache 或是 Nginx 用的，兩個版本不同，安裝的方法也不同，不過好像功能是一樣的，google 自己的官網上寫的有夠難懂，看完還是不懂，不信，自己看：

PageSpeed Module | Google Developers — The PageSpeed modules are open-source server modules that optimize your site automatically.
Google Developers

我在裝之前超怕的，畢竟，如果一啟動網站就掛了，那我也掛了，到底，這玩意是在做什麼呢？我查了半天，猶抱琵琶半遮面，只知道大概功能如下：

合併及 Minifies CSS 跟 JavaScript：很厲害，連變數的名稱都會變短，很瘦身。
優化 http cache，會改變 http header。
管理 CSS and JavaScript 的檔案版本，讓 cache 更新。
Minifies HTML。
壓縮 resize 圖檔。
deferred loading JavaScript 跟圖檔.
全自動！
還有嗎？應該很多，官網上一堆設定選項，但是我查不到了，不過光這樣，就很厲害了。

簡單來說，就是網站自動大瘦身啦，大神出品，果然不同凡響，很強，不過，裝上去後真的沒有副作用嗎？我想了好久，後來決定上了！但是心裡真的還是會怕，啟動時一直唸：阿密陀佛啊⋯⋯

安裝超級簡單，先下載跟安裝，我是用 ubuntu，這是 google 官網的做法，用 Nginx 的讀者，請自己看文件：

sudo wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install

這時，你的 mod-available 裡就會有 pagespeed.conf 及 pagespeed.load 了，實務上，也安裝完成了，可以用了，夠全自動吧，有點嚇人。

如果你真的不放心，或是真有需要改，可以 sudo nano pagespeed.conf，這是整個 server 設定，你也可以改到 vhost，不過，剛開始，就先用預設值吧，這裡是 pagespeed.conf 的預設：

ModPagespeed on
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
ModPagespeedFileCachePath "/var/cache/mod_pagespeed/"
ModPagespeedLogDir "/var/log/pagespeed"
ModPagespeedSslCertDirectory "/etc/ssl/certs"
ModPagespeedFileCacheInodeLimit 500000

<Location /pagespeed_admin>
    Order allow,deny
    Allow from localhost
    Allow from 127.0.0.1
    SetHandler pagespeed_admin
</Location>
<Location /pagespeed_global_admin>
    Order allow,deny
    Allow from localhost
    Allow from 127.0.0.1
    SetHandler pagespeed_global_admin
</Location>

ModPagespeedStatisticsLogging on
ModPagespeedMessageBufferSize 100000

第一行是重點，預設 on，萬一有問題，可以改成 off，其他設定請自行查 google 官網，說真的，有看不一定會有懂啦，開外掛自然有一定的風險。

一定要用 vhost? 很簡單，只要加兩行：

<location />
  ...
  # PageSpeed Settings
  ModPageSpeed on
  ModPagespeedRewriteLevel CoreFilters
</Location>

第四行就是開關，第五行可有可無，CoreFilters 是預設。

再來，就再檢查一下，就可以（大膽）上線了！

sudo apachectl configtest
# Syntax OK
sudo service apache2 restart

怎麼知道 mod_pagespeed 有動沒動？請下指令：curl -D- localhost，如果看到回應中的 cache control header 變成：

Cache-Control: max-age=0, no-cache, must-revalidate
Pragma: no-cache

那就對了，mod_pagespeed 不管你以前的 cache-control 設定是多大，全部取消，變成 0 !

最重要的問題來了：

PageSpeed Insights 分數有變高嗎？

我自己的實際紀錄是：

mobile 有差：變化最大的是分數從超爛的 25 變還是很爛的 29，但是 Reduce initial server response time 有快，最好的是從 3.29s 變成 0.79s，這點有合理，mobile 測試的頻寬很小，壓縮 assets 會變快，有理！
desktop 沒差：測試時的分數有時還會更低，時間也差不多，我想這也合理，我的網站很棒，就是肥了些，但是 desktop 測試的頻寬夠大，胖些沒差。

網站有出問題嗎？

有！用這樣 preload 的：<link rel="preload" as="style" href="/assets/style.css" onload="this.rel='stylesheet'"/>，全掛，css 都沒進來，取消 preload 後就好了，這很尷尬，因為一取消 preload， PageSpeed Insights 的 Eliminate render-blocking resources 又跳出來要你 preload 它了。
目前好像就這樣了，說實話，很厲害的外掛。