Nginx 專注於 CDN 的 PageSpeed module

引前之前文章所提到的 Google PageSpeed，而 Google 也有提供 nginx 用的 ngx pagespeed module，當然也有屬於 Apache 的，但是小弟本身偏好 nginx，所以此篇會以介紹 ngx_pagespeed 設定為主

 

要安裝 ngx_pagespeed 必須在 nginx 原始碼就進行編譯，如果不想要自行編譯可以到 nginxauto 這個專案自動安裝 nginx



 

Nginx 編譯 ngx_pagespeed

Step.1 首先準備編譯工具

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

 

Step.2 Download ngx_pagespeed and nginx

小弟在寫文章的最新版本是 1.11.33.4，詳細可以參考 PageSpeed 官方的 release notes

# 先預設執行路徑，以下編譯會比較清楚 
 cd /tmp 
  
 # Nginx 原始碼 
 $ wget http://nginx.org/download/nginx-1.11.6.tar.gz 
 $ tar zxf nginx-1.11.6.tar.gz 
  
 # Pagespeed 原始碼 
 $ wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.11.33.4-beta.zip 
 $ tar zxf release-1.11.33.4-beta.zip 
  
 # PageSpeed的psol優化設定，請注意要解壓縮到pagespeed原始碼包裡面才有用 
 $ wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz 
 $ tar zxf 1.11.33.4.tar.gz -C /tmp/ngx_pagespeed-release-1.11.33.4-beta

 

(Option) Step.3 如果你使用的是預設 CentOS 6 的 gcc 4.4.7 版本會無法編譯 ngx_pagespeed，至少必須 gcc 4.8+ 以上，那你就必須進行這個步驟

使用 Devtoolset-2 來安裝 gcc 4.8 +

 

Step.4 編譯 nginx with ngx_pagespeed

$ cd /tmp/nginx-1.11.6 
 $ ./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-http_ssl_module \ 
   --with-http_realip_module \ 
   --with-http_addition_module \ 
   --with-http_sub_module \ 
   --with-http_dav_module \ 
   --with-http_flv_module \ 
   --with-http_mp4_module \ 
   --with-http_gunzip_module \ 
   --with-http_gzip_static_module \ 
   --with-http_random_index_module \ 
   --with-http_secure_link_module \ 
   --with-http_stub_status_module \ 
   --with-http_auth_request_module \ 
   --with-http_xslt_module=dynamic \ 
   --with-http_image_filter_module=dynamic \ 
   --with-http_geoip_module=dynamic \ 
   --with-http_perl_module=dynamic \ 
   --with-threads \ 
   --with-stream \ 
   --with-stream_ssl_module \ 
   --with-http_slice_module \ 
   --with-file-aio \ 
   --with-http_v2_module \ 
   --add-module=/tmp/ngx_pagespeed-release-1.11.33.4-beta --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc 
 

在這邊我是按照 Linux 的檔案系統去分類，也就是 yum 安裝起來的路徑，注意 add-module，指定的是 ngx_pagespeed 的原始碼目錄，並且使用 Step.3 的 gcc 4.8+ 以上的版本進行編譯

 

Step.5 在終於編譯好 ngx_pagespeed module 後就要到 nginx 去啟用並設定 pagespeed !!

在這邊我直接設定在 server {} 裡面，但在 nginxauto 裡面我是使用另一個 ngx_pagespeed.conf 去引入，需要的時候再拿出來用。

$ vim /etc/nginx/conf.d/server.conf 
  
 server { 
 ... 
   pagespeed on; #啟動支援pagespeed 
   pagespeed FileCachePath /var/cache/nginx/ngx_pagespeed_cache; #pagespeed的cache目錄,必須要可寫 
  
   # 以下是將需求轉入pagespeed執行 
   location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { 
     add_header "" ""; 
   } 
   location ~ "^/pagespeed_static/" { } 
   location ~ "^/ngx_pagespeed_beacon$" { } 
 ... 
 }

以上只是啟動 PageSpeed 的這個 module

 

Step.6 更詳細的設定 PageSpeed 參數

參數一樣可以寫在 server or http，在進行設定之前可以先參考官方網站的設定 Configuring PageSpeed Filters

# 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; 
 

 

• RewriteLevel：PageSpeed 預設提供三種模式提供不同情況設定
  
  
  
  • PassThrough：等於就是停用PageSpeed
  
  
  • CoreFilters：PageSpeed 對於此等級號稱是一般狀況下多數網站所採用的過濾及加速。(預設)
  
  
  • OptimizeForBandwidth：PageSpeed 將此級別區分為三個級別中最為安全的保證。
  
  
  • 詳細三種模式所啟用的項目: pagespeed_config_filters
  
  
  
  

如果你不了解 PageSpeed，Google 建議可以使用 OptimizeForBandwidth 級別來提升你的網站

 

• EnableFilters：和 RewriteLevel 搭配使用，可以在 EnableFilters 加入你想要的 filter


• DisableFilters：相同的你也可以將 filter 停用掉你不需要的項目


• Tuning the Filters：針對每種類型控制其大小；如：CssInlineMaxBytes、JsInlineMaxBytes ..... etc

 

Step.7 重啟 nginx 生效

$ service nginx restart

 

Step.8 驗證 pagespeed

打開你網站的原始碼，可以搜尋 pagespeed，正常狀況下可以看到許多的 js, css 的 url 已經被 rewrite，而一般比較小的圖檔會採用 base64 的方式呈現

 

 

結論：

PageSpeed 是一個簡單、不必花費太多心思就可以優化網站效能的模組，但是並不能套用在所有的網站，如動態、或是一些設計比較特殊的網站，其實可以發現 PageSpeed 並無法真實優化所有的項目，畢竟 PageSpeed 也是採用判斷式的處理，真正的網站加速還是必須建立在開發者對於網站的要求與規範。

 

 

 

---

Orignal From: Nginx 專注於 CDN 的 PageSpeed module