Ngx_Pagespeed + Brotli 搭配 Nginx 優化服務

第一次從我同事聽到此套件可以優化 web 服務模組，這是由 google 團隊開發的套件來搭配目前兩大主流 web 服務器使用。

Ngx_pagespeed是一個免費的開源 Nginx 模組，用於提高網站的速度以及縮小頁面加載時間。它顯著減少了用戶查看和與您的網站內容交換所需的時間。

Ngx_pagespeed 特點：

支持HTTPS和URL控制。
圖像優化：剝離元數據，動態調整大小，重新壓縮。
CSS和JavaScript的縮小，連接，內網和大綱。
小資源內聯。
延速圖像和JavaScript加載。
HTML重寫
緩存生存期延長。
允許配置多個服務器和許多其他服務器。

在本教程中，我们將展示如何使用 ngx_pagespeed 安装 Nginx 並在 RHEL / CentOS 7 上測試整個安裝。

Nginx 安裝

本工作室已經有寫一篇如何安裝 Nginx 服務，可以直接參考該篇操作，最後編譯請不要編譯等等還要加入兩個模組來搭配使用。

Brotli 安裝

下載 ngx_Brotli 原始碼，ngx_brotli 是 Brotli 的 Nginx 模組，請從 ngx_brotli 的 GitHub 網站下載其原始碼：

cd ~
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init --recursive

ngx_pagespeed 安裝

下載 ngx_pagespeed 源碼，並且解壓縮官方載點

下載
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz

解壓檔案
tar -zxvf v1.13.35.2-stable.tar.gz

修改目錄名稱
mv  incubator-pagespeed-ngx-1.13.35.2-stable/ ngx-pagespeed/

在編譯之前先確認是否有安裝 ngx_pagespeed 必要套件，這是由官方說明以下這些套件是必需安裝的

yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel

開始編譯 Nginx 加入以上兩個模組

auto/configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --add-module=../nginx-ct/ --with-openssl=../openssl/ --with-openssl-opt=enable-tls1_3 --add-module=../ngx-pagespeed/ --add-module=../ngx_brotli/

那在編譯過程中會出錯，原因是 ngx_pagespeed 還有套件沒有加入，畫面會顯示如何決解此錯誤問題

You need to separately download the pagespeed library:
     $ cd ../ngx-pagespeed/
     $ wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
     $ tar -xzvf 1.13.35.2-x64.tar.gz # expands to psol/

剛剛下載的套件一定要放在 pagespeed 目錄下不然會有問題，下載好之後在重新開始編譯，編譯完成之後

備份剛剛安裝好的 Nginx 版本，改成編譯版本：

之前目錄改修當時日期
mv /usr/sbin/nginx /usr/sbin/nginx.20190309.official.mainline

將編譯的版本複製剛剛備份的目錄
cp ./objs/nginx /usr/sbin/

重啟 web 服務
systemctl restart nginx

Nginx 主要設定檔

nginx.conf

#開啟Brotli壓縮
brotli on;
#壓縮等級，0 到 11，默認值是 6，過大會額外消耗服務器CPU
brotli_comp_level 6;
#設置需要進行壓縮的最小響應大小，單位為字節
brotli_min_length   512;
#指定哪些MIME類型進行壓縮
brotli_types text/plain text/javascript text/css text/xml text/x-component application/javascript application/x-javascript application/xml application/json application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype;
#是否允許查找預處好的、以 .br 结尾的壓缩文件。可選值為 on、off、always
brotli_static       always;

服務 .conf

# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
  location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
    add_header "" "";
  }
  location ~ "^/pagespeed_static/" { }
  location ~ "^/ngx_pagespeed_beacon$" { }

最後二行的大括號別用掉，不然重啟服務會一直報錯


# 啟用 PageSpeed
    pagespeed on;
# 設定 PageSpeed 快取目錄(要給這個目錄 web 服務的權限不然會有問題哦)
    pagespeed FileCachePath /usr/share/nginx/html/ngx_pagespeed_cache;
# 禁用CoreFilters    
    pagespeed RewriteLevel PassThrough;
# 啟用壓縮空白過濾    
    pagespeed EnableFilters collapse_whitespace;
# 啟用 JavaScript 卸載
    pagespeed EnableFilters canonicalize_javascript_libraries;
# 刪除默認屬性的標籤
    pagespeed EnableFilters elide_attributes;
# 改善資源的可緩存性
    pagespeed EnableFilters extend_cache;
# 更換被導入文件的 @import，精簡 CSS 檔案
    pagespeed EnableFilters flatten_css_imports;
    pagespeed CssFlattenMaxBytes 5120;
# 延遲加載客户端看不見的圖片
    pagespeed EnableFilters lazyload_images;
# 預解析 DNS 查詢
    pagespeed EnableFilters insert_dns_prefetch;
# 重寫 CSS，首先加載渲染頁面的 CSS 規則
    pagespeed EnableFilters prioritize_critical_css;
# Rewrite Level
    pagespeed RewriteLevel CoreFilters;
# Minimize and optimize HTTP requests
    pagespeed EnableFilters rewrite_css;
    pagespeed EnableFilters rewrite_javascript;
    pagespeed EnableFilters combine_css;
    pagespeed EnableFilters combine_javascript;
    pagespeed EnableFilters inline_css;
    pagespeed CssInlineMaxBytes 4096;
    pagespeed EnableFilters inline_javascript;
    pagespeed JsInlineMaxBytes 4096;
# Image Optimization and lazy load
    pagespeed EnableFilters rewrite_images;
    pagespeed EnableFilters inline_images;
    pagespeed EnableFilters resize_images;
    pagespeed EnableFilters recompress_images;
# Controlling the use of beacons
    pagespeed AvoidRenamingIntrospectiveJavascript off;
    pagespeed CriticalImagesBeaconEnabled false;

以上都設定完成，重啟服務

systemctl restart nginx

補充說明

以下的內容提供參考，不一定要採用目前還在觀察中

先創建一個資料夾存放 PageSpeed 配置文件

建立一個 main.conf 檔案。

mkdir /etc/nginx/page_speed
vim /etc/nginx/page_speed/main.conf

將下面內容複製貼到 main.conf 存檔。

#main.conf
#PageSpeed 配置
pagespeed on;
#1.12.34.1以上可設置all
pagespeed ProcessScriptVariables all;
#啟用 PageSpeed Gzip 請求資源，此項要求 ng 啟用 gzip
pagespeed FetchWithGzip on;

#配置篩選項默認 CoreFilters
pagespeed RewriteLevel CoreFilters;
#是否尊重原始header
pagespeed RespectVary off;
#是否認 PageSpeed 優化紋存時間（接管緩存控制）
pagespeed DisableRewriteOnNoTransform off;
#重寫 HTML 緩存
pagespeed ModifyCachingHeaders on;
#列出未解決的錯誤
pagespeed ListOutstandingUrlsOnError on;
#限制資洲最大值啟用優化，默認大小 16M
pagespeed MaxCacheableContentLength 16777216;
#配置共享快取緩存
pagespeed CreateSharedMemoryMetadataCache "/usr/share/nginx/html/ngx_pagespeed_cache;/" 51200;
#配置檔案高速緩存
pagespeed FileCachePath /usr/share/nginx/html/ngx_pagespeed_cache;
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
pagespeed LRUCacheKbPerProcess 8192;
pagespeed LRUCacheByteLimit 16384;

#啟用memcached，默認64M，需SELinux enabled
pagespeed MemcachedServers "localhost:11211";
#共享快樂緩存檢查點，5分鍾一次
pagespeed ShmMetadataCacheCheckpointIntervalSec 300;

#緩存清除
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;
#清空緩存臨界值，優化率80%
pagespeed DownstreamCacheRewrittenPercentageThreshold 80;

#PageSpeed管理界面配置
#共享快取統計
pagespeed Statistics on;
#開啟虛擬主機統計資訊
pagespeed UsePerVhostStatistics on;

pagespeed StatisticsLogging on;
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
#消息緩沖區大小，默認為0，不保留資訊
pagespeed MessageBufferSize 100000;
pagespeed LogDir /var/log/pagespeed;
pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed GlobalStatisticsPath /ngx_pagespeed_global_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
pagespeed GlobalAdminPath /pagespeed_global_admin;

建立一個 pagespeed.conf 檔案

vim /etc/nginx/page_speed/pagespeed.conf

將下面內容複制貼到 pagespeed.conf 存檔

#pagespeed.conf
#PageSpeed 優化設置
#直接獲取 HTTPS 資源，允許自簽名證書資源
pagespeed FetchHttps enable,allow_self_signed;

#載入篩選檔案
include /etc/nginx/page_speed/filters_config.conf;

#啟用測量客戶端載入和呈現頁面所花費的時間
pagespeed EnableFilters add_instrumentation;
#預處理DNS
pagespeed EnableFilters insert_dns_prefetch;

#緩存
#相當于同時使用了 extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;

#確保對 pagespeed 優化資訊的請求進入 pagespeed 處理程序並且沒有額外的標頭訊息
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$ps_dollar" { }

#PageSpeed Admin Dashboard
include /etc/nginx/page_speed/dashboard.conf;

立建一個 filters_config.conf 檔案

vim /etc/nginx/page_speed/filters_config.conf

將下午內容複製貼上到 filters_config.conf 存檔

#filters_config.conf
## Text / HTML
pagespeed EnableFilters combine_heads;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters remove_quotes;
#pagespeed EnableFilters trim_urls;

## JavaScript
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters canonicalize_javascript_libraries;
pagespeed EnableFilters inline_javascript;
#高風險，延遲加載 js
#pagespeed EnableFilters defer_javascript;

## CSS
pagespeed EnableFilters outline_css;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters rewrite_style_attributes_with_url;

## Images
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters dedup_inlined_images;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters convert_gif_to_png;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters recompress_jpeg;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters recompress_webp;
pagespeed EnableFilters strip_image_color_profile;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters jpeg_subsampling;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters insert_image_dimensions;
pagespeed NoTransformOptimizedImages on;
pagespeed EnableFilters sprite_images;

建立一個 dashboard.conf 檔案

vim /etc/nginx/page_speed/dashboard.conf

將下面內容複製貼上到 dashboard.conf 存檔

#管理員控制面板
location /ngx_pagespeed_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_global_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /etc/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_message {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /etc/nginx/page_speed/.htpasswd;
}
location /pagespeed_console {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /etc/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /etc/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_global_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /etc/nginx/page_speed/.htpasswd;
}

配置緩存資料夾權限

mkdir /usr/share/nginx/html/ngx_pagespeed_cache
chown nginx:root /usr/share/nginx/html/ngx_pagespeed_cache
chmod 700 /usr/share/nginx/html/ngx_pagespeed_cache
mkdir /var/log/pagespeed
chown nginx. /var/log/pagespeed

安裝httpd-tools

yum install httpd-tools -y

指定 PageSpeed 管理員界面用戶密碼

htpasswd -d -b -c /etc/nginx/page_speed/.htpasswd sufob Pagespeed

其中 sufob 為帳號，Pagespeed 為密碼，根據情況修改成自己的帳號及密碼

Nginx 設定檔設定

在 nginx.conf 全域設定檔加入下面載入路徑

include /etc/nginx/page_speed/main.conf;

在 服務的 conf 設定檔加入下面載入路徑

include /etc/nginx/page_speed/pagespeed.conf;

重啟 nginx 服務
systemctl restart nginx 

立即生效 nginx 服務
systemctl reload nginx

文中的 conf 配置檔案能滿足大部分速度優化需要，如果要調整配置檔案，只要修改 filters_config.conf 設定檔就可以，根據自己的需求在該行開頭加 # 號註解掉或者添加新功能。

如果遇到 jquer 等特效失效的情況，有可能是 js 合併或者同步、延遲載入邏輯出錯，重新調整 conf 中 js 的篩選或者修改網頁編碼將 jquery 等 js 檔案移到 footer ，手動設置延遲、同步載入。

Nginx 代理服務

啟用Nginx 支援到 OpenSSL TLS1.3 安全協定 - CentOS

Nginx 限制來源 IP

Nginx 與 CloudFlare 修改CDN 位置

Ngx_Pagespeed + Brotli 搭配 Nginx 優化服務

Nginx FastCGI_Cache 加速 WordPress

Nginx 怎麼將記錄檔存放本機及 Log 伺服器

Nginx 設定檔說明

NGINX 504 Gateway Time-out 問題

nginx -t 提示proxy_headers_hash_max_size警告的解决方法

Nginx 地區限制

Nginx 模組擴充 - Debian \ Ubuntu

Nginx 的 Log 檔上時區問題

NGINX PID 異常

NGINX Safari 異常出現 NSURLErrorDomain:-1017

Nginx 排除混用 http / https 問題

Nginx http2 參數問題

NGINX 搭配 ModSecurity - Debian

Nginx 限制用 IP 訪問

Let’s Encrypt 免費 Wildcard 萬用字元憑證 SSL/TLS for CentOS 7

CentOS 7 Let’s Encrypt 免費 SSL/TLS 憑證 HTTPS 設置 for Nginx

acme.sh + Cloudflare 自動更新 Let's Encrypt 服務

acme.sh + Google Cloud DNS 自動更新 Let's Encrypt 服務

設定 DNS CAA 來保護自己的網頁的憑證

SSL PEM 憑證 查詢何時過期

憑證相關指令

Nginx 配置 SSL 後 command line curl出現錯誤 SSL certificate problem: unable to get local issuer certificate

CentOS 7 Apache, PHP 7.2 and MariaDB (LAMP)

Apache支援 TLS1.3

Apache 新增 Port error

Wordpress 架設流程

PHP Opcache 優化加速模組

Wordpress 架設流程-Debian

Ngx_Pagespeed + Brotli 搭配 Nginx 優化服務

Ngx_pagespeed 特點：

Nginx 安裝

Brotli 安裝

ngx_pagespeed 安裝

開始編譯 Nginx 加入以上兩個模組

Nginx 主要設定檔

補充說明

參考相關網頁：

SSL PEM 憑證查詢何時過期