Google Pagespeed 分數攻略，懶人大法

4 min readOct 27, 2019

Google PageSpeed Insights 是Google 公司提供開發者用來檢測「網頁加載速度」的工具，是個不錯的工具，但也不需要完全把其視為聖經，曾經看過一個完全沒有RWD的網頁分數高達96分，但其實他所有的資料還要再另外點進去，而且過於古老，沒有ajax 、所有資料都要經過點擊才能切換看到新的資料，以下就是我接前面開發者丟下的包，再次優化

我們先來看看，優化前的分數

如圖慘不忍睹的分數，初次載入的時間非常久

第一步有看到提供next-gen格式的圖片嗎？詳細這是什麼我就不解釋各位可以自行Google

懶人外掛開起來！！！

Google 有提供一個Module 讓開發者可以在apache 或者 nginx上面來使用，傳統的作法就是按照他官網提供的方法去編譯nginx 的模塊，但是主機上還有跑其他的資源，實在是不想動nginx(怕一個失手就炸惹

所以我直接去找有沒有人好的Docker Image，果然是有大神已經做好了，剩下的我只需要把nginx 反向代理到docker container上面就算完成第一階段的優化

先看結果，同樣一份靜態網頁，在同一台主機上，測試出來的分數直接翻倍

實作

安裝docker 這部分不再贅述，我使用的是這個docker image

它相對簡單，可配置的參數比較多，使用說明比較完整

由於主機上面已經有一個nginx 所以80 port已經被佔用，所以必須使用反向代理，這邊使用8060 port

Step1 設定反向代理

cd /etc/nginx/conf.d
touch example.conf    // 這邊檔名自己取
nano example.conf     // 編輯這份設定檔

貼上設定檔

server {
    listen 80;
    server_name example.com;
    server_name_in_redirect off;
    access_log /var/log/nginx.access.log;
    error_log /var/log/nginx.error.log;
    index index.html index.htm;
    location / {
        proxy_pass http://0.0.0.0:8060/;
        proxy_pass_header       Authorization;
        proxy_pass_header       WWW-Authenticate;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }}

存檔後，重新載入設定檔

nginx -s reload

接下來就是關鍵的步驟，pull image 還有啟動他

docker pull pagespeed/nginx-pagespeed// 如果需要在背景執行請加入-d
docker run -v /static_file_path:/usr/share/nginx/html:ro -p 8060:80 pagespeed/nginx-pagespeed

這樣就大功告成拉！

後記:其實這份專案還有很多地方可以去優化，但是本文的技巧是在不需要更動任何程式碼的狀況下，就能做到優化，他會去自動處理圖片檔格式等一系列優化手段，感謝您的收看～

你知道拍手不止可以拍一下嗎？若對您有幫助請幫我拍手哦^^

Google Pagespeed 分數攻略，懶人大法

懶人外掛開起來！！！

實作

Written by ShiLu Chang

No responses yet