如何借助PageSpeed，為Nginx網(wǎng)站服務(wù)器提速？
譯文【2014年2月11日 51CTO外電頭條】網(wǎng)站加載速度越快，訪客互動性、留住率和轉(zhuǎn)換率就越高，這早已不是什么秘密。網(wǎng)站每延遲100毫秒，亞馬遜的銷售額就會減少1%；延遲增加500毫秒，這意味著谷歌的流量和收入就會減少20%。要是有一個辦法可以為你的網(wǎng)站服務(wù)器提速，又不必升級到功能更強大的服務(wù)器，就沒有理由不試一試這個辦法。
我在本教程中將介紹如何優(yōu)化Nginx網(wǎng)站服務(wù)器，以提升其性能。雖然Nginx網(wǎng)站服務(wù)器本身已儼然成為運行速度最快、可擴展性***的網(wǎng)站服務(wù)器之一，但是仍有眾多方法可以調(diào)整優(yōu)化其常規(guī)安裝系統(tǒng)的性能。
舉例說，有一個由谷歌開發(fā)的網(wǎng)站服務(wù)器模塊，名為PageSpeed模塊（https://developers.google.com/speed/pagespeed/module）。PageSpeed旨在縮短網(wǎng)頁加載的時間，減少網(wǎng)站服務(wù)器的帶寬使用量。最近，已發(fā)布了Nginx版本的PageSpeed模塊（ngx_pagespeed）。作為一種有望為Nginx網(wǎng)站服務(wù)器提速的可行方法，我將演示如何在Nginx中啟用并配置ngx_pagespeed模塊。
PageSpeed的功能特性
PageSpeed模塊可以使用數(shù)量眾多的重寫"過濾器"，每個過濾器都可以選擇性地開啟/關(guān)閉，從而自動進行各種優(yōu)化（比如，減小文檔大小、減少HTTP請求數(shù)據(jù)、減少HTTP往返次數(shù)以及縮短DNS解析時間）。
下面是ngx_pagespeed支持的其中一些過濾器。想了解支持的全部過濾器，請參閱官方文檔。
- Collapse Whitespace（壓縮空白）：通過把HTML網(wǎng)頁中的多處連續(xù)空白換成一處空白，減少帶寬使用量。
- Canonicalize JavaScript Libraries（規(guī)范化轉(zhuǎn)換JavaScript庫）：通過自動把流行的JavaScript庫換成免費托管的JavaScript庫（比如由谷歌托管），減少帶寬使用量。
- Combine CSS（合并CSS）：通過把多個CSS文件合并成一個CSS文件，減少HTTP請求數(shù)量。
- Combine JavaScript（合并JavaScript）：通過把多個JavaScript文件合并成一個JavaScript文件，減少HTTP請求數(shù)量。
- Elide Attributes（省略屬性）：通過刪除由默認屬性指定的標(biāo)簽，縮小文檔大小。
- Extend Cache（擴展緩存）：通過優(yōu)化網(wǎng)頁資源的可緩存性，減少帶寬使用量。
- Flatten CSS Imports（精簡CSS導(dǎo)入）：通過刪除CSS文件中的@import，減少HTTP請求往返次數(shù)。
- Lazyload Images（延時加載圖片）：延時加載在客戶端瀏覽器上看不見的圖片。
- Minify JavaScript（縮小JavaScript）：通過縮小JavaScript，減少帶寬使用量。
- Optimize Images（優(yōu)化圖片）：通過引入更多的內(nèi)嵌圖片、壓縮圖片，或者將GIF圖片轉(zhuǎn)換成PNG圖片，優(yōu)化圖片分發(fā)。
- Pre-Resolve DNS（預(yù)解析DNS）：通過預(yù)解析DNS，縮短DNS解析時間。
- Prioritize Critical CSS（優(yōu)化加載關(guān)鍵CSS規(guī)則）：重寫CSS文件，以便首先加載渲染頁面的CSS規(guī)則。
與Apache網(wǎng)站服務(wù)器不一樣，Nginx模塊無法在運行時動態(tài)加載，而是必須在編譯時加載。截至本文截稿時，ngx_pagespeed模塊并未內(nèi)置在隨主要Linux發(fā)行版（比如Fedora 19）發(fā)布的Nginx程序包中。因而，想使用Nginx中的PageSpeed，你需要利用源代碼來構(gòu)建Nginx。
借助ngx_pagespeed，構(gòu)建和安裝Nginx
安裝用于構(gòu)建nginx和ngx_pagespeed的必備要素。
在Debian、Ubuntu或Linux Mint上：
- $ sudo apt-get install build-essential zlib1g-dev libpcre3-dev
在Fedora、CentOS或RHEL上：
- $ sudo yum install gcc-c++ pcre-devel zlib-devel make wget
下載并安裝ngx_pagespeed源代碼，如下所示。ngx_pagespeed會被解壓縮到/usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta
- $ sudo mkdir -p /usr/local/nginx/modules
- $ wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.7.30.3-beta.tar.gz
- $ sudo tar xvfvz v1.7.30.3-beta.tar.gz -C /usr/local/nginx/modules --no-same-owner
下載預(yù)構(gòu)建的PSOL（PageSpeed優(yōu)化庫，https://developers.google.com/speed/pagespeed/psol），并將它安裝到ngx_pagespeed目錄下：
- $ wget https://dl.google.com/dl/page-speed/psol/1.7.30.3.tar.gz
- $ sudo tar xvfvz 1.7.30.3.tar.gz -C /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta --no-same-owner
- $ sudo find /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta/ -type d -exec chmod +rx {} \;
- $ sudo find /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta/ -type f -exec chmod +r {} \;
從http://nginx.org/en/download.html，下載Nginx的***穩(wěn)定版。
- $ wget http://nginx.org/download/nginx-1.4.4.tar.gz
***，在ngx_pagespeed模塊啟用的情況下，編譯Nginx，并安裝它，如下所示。
- $ tar xvfvz nginx-1.4.4.tar.gz
- $ cd nginx-1.4.4
- $ ./configure --add-module=/usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta --prefix=/usr/local/nginx --sbin-path=/usr/local/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/run/nginx.pid --lock-path=/run/lock/subsys/nginx --user=nginx --group=nginx
- $ make
- $ sudo make install
你應(yīng)該確認，ngx_pagespeed模塊已添加到安裝的Nginx系統(tǒng)上，如下所示。
- $ /usr/local/nginx/sbin/nginx -V
- nginx version: nginx/1.4.4
- built by gcc 4.8.2 20131212 (Red Hat 4.8.2-7) (GCC)
- configure arguments: --add-module=/usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta . . . .
配置Nginx中的ngx_pagespeed模塊
想啟用并配置ngx_pagespeed，就要編輯Nginx配置的server部分。nginx.conf的下面這個示例表明了如何指定一個或多個PageSpeed過濾器。
- $ sudo vi /etc/nginx/nginx.conf
- server {
- # 偵聽的端口
- listen 80;
- # 服務(wù)器名稱
- server_name xmodulo.com www.xmodulo.com;
- # 記下根目錄
- root /usr/local/nginx/html;
- # 訪問日志
- access_log /var/log/nginx/access.log main;
- # 啟用ngx_pagespeed
- pagespeed on;
- # 在此放置一個或多個pagespeed過濾器。
- }
說到指定PageSpeed過濾器，有兩種不同的級別可供你選擇：CoreFilters和PassThrough。除非有所指定，否則默認情況下使用CoreFilters。
對新手用戶而言：使用CoreFilters
CoreFilters含有一系列PageSpeed過濾器，谷歌認為這些過濾器對大多數(shù)網(wǎng)站來說是安全的。如果啟用CoreFilters，你就自動啟用了一系列"安全"規(guī)則。所以，推薦新手用戶采用這種方法。如果你愿意，也可以禁用CoreFilters中的某個或某些過濾器，或者選擇性地啟用額外的過濾器。下面這個例子表明了使用CoreFilters的ngx_pagespeed配置。
- server {
- # 偵聽的端口
- listen 80;
- # 服務(wù)器名稱
- server_name xmodulo.com www.xmodulo.com;
- # 記下根目錄
- root /usr/local/nginx/html;
- # 訪問日志
- access_log /var/log/nginx/access.log main;
- # 啟用ngx_pagespeed
- pagespeed on;
- pagespeed FileCachePath /var/ngx_pagespeed_cache;
- # 啟用CoreFilters
- pagespeed RewriteLevel CoreFilters;
- # 禁用CoreFilters中的某些過濾器
- pagespeed DisableFilters rewrite_images;
- # 選擇性地啟用額外的過濾器
- pagespeed EnableFilters collapse_whitespace;
- pagespeed EnableFilters lazyload_images;
- pagespeed EnableFilters insert_dns_prefetch;
- }
想了解CoreFilters中的全部過濾器，請參閱官方文檔。
對高級用戶而言：使用PassThrough
如果是高級用戶，你可以使用PageThrough級別，你可以手動啟用個別過濾器。
- server {
- # 偵聽的端口
- listen 80;
- # 服務(wù)器名稱
- server_name xmodulo.com www.xmodulo.com;
- # 記下根目錄
- root /usr/local/nginx/html;
- # 訪問日志
- access_log /var/log/nginx/access.log main;
- # 啟用ngx_pagespeed
- pagespeed on;
- pagespeed FileCachePath /var/ngx_pagespeed_cache;
- # 禁用CoreFilters
- pagespeed RewriteLevel PassThrough;
- # 啟用壓縮空白過濾器
- pagespeed EnableFilters collapse_whitespace;
- # 啟用JavaScript庫卸載
- pagespeed EnableFilters canonicalize_javascript_libraries;
- # 把多個CSS文件合并成一個CSS文件
- pagespeed EnableFilters combine_css;
- # 把多個JavaScript文件合并成一個JavaScript文件
- pagespeed EnableFilters combine_javascript;
- # 刪除帶默認屬性的標(biāo)簽
- pagespeed EnableFilters elide_attributes;
- # 改善資源的可緩存性
- pagespeed EnableFilters extend_cache;
- # 更換被導(dǎo)入文件的@import，精簡CSS文件
- pagespeed EnableFilters flatten_css_imports;
- pagespeed CssFlattenMaxBytes 5120;
- # 延時加載客戶端看不見的圖片
- pagespeed EnableFilters lazyload_images;
- # 啟用JavaScript縮小機制
- pagespeed EnableFilters rewrite_javascript;
- # 啟用圖片優(yōu)化機制
- pagespeed EnableFilters rewrite_images;
- # 預(yù)解析DNS查詢
- pagespeed EnableFilters insert_dns_prefetch;
- # 重寫CSS，首先加載渲染頁面的CSS規(guī)則
- pagespeed EnableFilters prioritize_critical_css;
- }
另外的配置步驟：
創(chuàng)建將由Nginx寫入的一個文件緩存目錄。
- $ sudo mkdir /var/ngx_pagespeed_cache
- $ sudo chown nginx:nginx /var/ngx_pagespeed_cache
為了方便起見，為Nginx創(chuàng)建一個初始化腳本。
- $ wget https://github.com/MovLib/www/raw/master/bin/init-nginx.sh
- $ sudo mv init-nginx.sh /etc/init.d/nginx
- $ sudo chmod 0755 /etc/init.d/nginx
***，啟動Nginx。
- $ sudo /etc/init.d/nginx start
注意：除了ngx_pagespeed外，你可能還需要定義額外的Nginx模塊（比如HTTPS/SSL支持等），具體視需求而定。這種情況下，你需要在Nginx編譯這個環(huán)節(jié)來添加這些模塊。請參閱這篇教程（http://xmodulo.com/2014/01/compile-install-nginx-web-server.html），了解如何啟用額外的Nginx模塊。
原文鏈接：http://xmodulo.com/2014/01/speed-nginx-web-server-pagespeed.html
