Nginx 編譯安裝 ngx_pagespeed 模組實現網站自動優化加速

什麼是 ngx_pagespeed

ngx_pagespeed 是 Google PageSpeed 優化技術的 Nginx 移植版，作為 Nginx 模組運行，自動重寫網頁資源實現前端性能優化，無需修改應用代碼。

核心優化功能

編譯安裝完整流程

1. 環境準備與依賴安裝

# CentOS/RHEL
yum install -y gcc gcc-c++ make automake autoconf libtool pcre-devel zlib-devel openssl-devel

# Ubuntu/Debian
apt-get install -y build-essential libpcre3-dev zlib1g-dev libssl-dev

2. 下載源碼與 PSOL 庫

NPS_VERSION=1.15.0.0
cd /usr/local/src
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.tar.gz
tar -xzf v${NPS_VERSION}.tar.gz
cd incubator-pagespeed-ngx-${NPS_VERSION}/
# 下載預編譯優化庫（PSOL）
wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}-x64.tar.gz
tar -xzf ${NPS_VERSION}-x64.tar.gz

3. 獲取 Nginx 當前編譯參數

nginx -V 2>&1 | grep --color=never 'configure arguments:'
# 輸出示例：
# --prefix=/usr/local/nginx --user=www --group=www --with-http_ssl_module --with-http_v2_module --with-http_stub_status_module

4. 重新編譯 Nginx 並加入 pagespeed

NGINX_VERSION=1.24.0
wget https://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/

./configure \
  --prefix=/usr/local/nginx \
  --user=www --group=www \
  --with-http_ssl_module --with-http_v2_module --with-http_stub_status_module \
  --with-http_gzip_static_module --with-http_realip_module \
  --add-module=../incubator-pagespeed-ngx-${NPS_VERSION}

make -j$(nproc)
# 注意：只 make，不要 make install

5. 32 位系統編譯錯誤解決

若遇到 undefined reference to `__sync_add_and_fetch_4'：

make clean
./configure ...(原參數) \
  --with-cc-opt='-DLINUX=2 -D_REENTRANT -D_LARGEFILE64_SOURCE -march=i686 -pthread'
make -j$(nproc)

6. 熱替換 Nginx 二進制（零停機）

# 備份舊二進制
mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.$(date +%Y%m%d)

# 替換新二進制
cp objs/nginx /usr/local/nginx/sbin/nginx

# 語法檢查
/usr/local/nginx/sbin/nginx -t

# 平滑升級
kill -USR2 $(cat /usr/local/nginx/logs/nginx.pid)
sleep 3
kill -QUIT $(cat /usr/local/nginx/logs/nginx.pid.oldbin)

配置啟用 pagespeed

創建緩存目錄

mkdir -p /var/ngx_pagespeed_cache
chown www:www /var/ngx_pagespeed_cache

nginx.conf 核心配置

http {
    # 全局啟用
    pagespeed on;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    pagespeed FileCacheSizeKb 1048576;  # 1GB 緩存上限
    pagespeed FileCacheCleanIntervalMs 3600000;  # 1 小時清理間隔
    pagespeed LRUCacheKbPerProcess 1024;
    pagespeed LRUCacheByteLimit 16384;

    # 重寫級別：CoreFilters 為推薦基線
    pagespeed RewriteLevel CoreFilters;

    # 額外啟用的過濾器
    pagespeed EnableFilters collapse_whitespace,remove_comments;
    pagespeed EnableFilters combine_css,combine_javascript;
    pagespeed EnableFilters rewrite_css,rewrite_javascript;
    pagespeed EnableFilters prioritize_critical_css,defer_javascript;
    pagespeed EnableFilters sprite_images,convert_png_to_jpeg,convert_jpeg_to_webp;
    pagespeed EnableFilters resize_images,recompress_images;
    pagespeed EnableFilters lazyload_images,insert_image_dimensions;
    pagespeed EnableFilters local_storage_cache;

    # 統計與管理介面（僅內網訪問）
    location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
    location /ngx_pagespeed_message { allow 127.0.0.0/8; deny all; }
    location /ngx_pagespeed_beacon { }
    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
    location ~ "^/ngx_pagespeed_static/" { }
}

Discuz! 偽靜態兼容性修正

Discuz! 某些版本偽靜態規則與 pagespeed 衝突，需註釋：

# 原規則
if (!-e $request_filename) {
    return 404;
}
# 改為
# if (!-e $request_filename) {
#     return 404;
# }

驗證優化效果

curl -I 'https://www.example.com/' | grep X-Page-Speed
# 輸出：X-Page-Speed: 1.15.0.0-xxxx  表示生效

瀏覽器開發者工具 Network 面板觀察：

• HTML 響應頭含 X-Page-Speed
• CSS/JS 合併為 *.pagespeed.*.css/js
• 圖片轉為 WebP 或帶尺寸屬性
• HTML 註釋移除、空白壓縮

性能影響與調優建議

常見問題排查

• 頁面樣式錯亂：關閉 rewrite_css、move_css_to_head 測試定位
• JS 報錯：關閉 combine_javascript、defer_javascript
• 圖片不顯示：檢查 resize_images 源圖權限、關閉 sprite_images
• 緩存不生效：確認 FileCachePath 權限、檢查 pagespeed_statistics 狀態

總結

ngx_pagespeed 以「零代碼侵入」實現企業級前端優化，適合歷史項目快速提速、內容型站點降本增效。生產部署建議：灰度發布 → 核心頁面驗證 → 全量開啟 → 持續監控統計介面，根據業務特點微調過濾器組合，實現性能與穩定的平衡。