Site icon Mr. 沙先生

Nginx 專注於 CDN 的 PageSpeed module

shazi7804

引前之前文章所提到的 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;

 

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

 

 

Step.7 重啟 nginx 生效

$ service nginx restart

 

Step.8 驗證 pagespeed

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

 

 

結論：

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

 

 

 

Exit mobile version