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