借助PageSpeed,为Nginx网站服务器提速

网站加载速度越快，访客互动性、留住率和转换率就越高，这早已不是什么秘密。网站每延迟 100毫秒，亚马逊的销售额就会减少1%；延迟增加500毫秒，这意味着谷歌的流量和收入就会减少20%。要是有一个办法可以为你的网站服务器提速，又不 必升级到功能更强大的服务器，就没有理由不试一试这个办法。

 

 

我在本教程中将介绍如何优化Nginx网站服务器，以提升其性能。虽然Nginx网站服务器本身已俨然成为运行速度最快、可扩展性最佳的网站服务器之一，但是仍有众多方法可以调整优化其常规安装系统的性能。

 

举例说，有一个由谷歌开发的网站服务器模块，名为PageSpeed模块（https://developers.google.com/speed/pagespeed/module）。 PageSpeed旨在缩短网页加载的时间，减少网站服务器的带宽使用量。最近，已发布了Nginx版本的PageSpeed模块 （ngx_pagespeed）。作为一种有望为Nginx网站服务器提速的可行方法，我将演示如何在Nginx中启用并配置ngx_pagespeed 模块。

 

PageSpeed的功能特性

 

PageSpeed模块可以使用数量众多的重写"过滤器"，每个过滤器都可以选择性地开启/关闭，从而自动进行各种优化（比如，减小文档大小、减少HTTP请求数据、减少HTTP往返次数以及缩短DNS解析时间）。

 

下面是ngx_pagespeed支持的其中一些过滤器。想了解支持的全部过滤器，请参阅官方文档。

 

• Collapse Whitespace（压缩空白）：通过把HTML网页中的多处连续空白换成一处空白，减少带宽使用量。
• Canonicalize JavaScript Libraries（规范化转换JavaScript库）：通过自动把流行的JavaScript库换成免费托管的JavaScript库（比如由谷歌托管），减少带宽使用量。
• Combine CSS（合并CSS）：通过把多个CSS文件合并成一个CSS文件，减少HTTP请求数量。
• Combine JavaScript（合并JavaScript）：通过把多个JavaScript文件合并成一个JavaScript文件，减少HTTP请求数量。
• Elide Attributes（省略属性）：通过删除由默认属性指定的标签，缩小文档大小。
• Extend Cache（扩展缓存）：通过优化网页资源的可缓存性，减少带宽使用量。
• Flatten CSS Imports（精简CSS导入）：通过删除CSS文件中的@import，减少HTTP请求往返次数。
• Lazyload Images（延时加载图片）：延时加载在客户端浏览器上看不见的图片。
• Minify JavaScript（缩小JavaScript）：通过缩小JavaScript，减少带宽使用量。
• Optimize Images（优化图片）：通过引入更多的内嵌图片、压缩图片，或者将GIF图片转换成PNG图片，优化图片分发。
• Pre-Resolve DNS（预解析DNS）：通过预解析DNS，缩短DNS解析时间。
• Prioritize Critical CSS（优化加载关键CSS规则）：重写CSS文件，以便首先加载渲染页面的CSS规则。

 

与Apache网站服务器不一样，Nginx模块无法在运行时动态加载，而是必须在编译时加载。截至本文截稿时，ngx_pagespeed模块并 未内置在随主要Linux发行版（比如Fedora 19）发布的Nginx程序包中。因而，想使用Nginx中的PageSpeed，你需要利用源代码来构建Nginx。

 

借助ngx_pagespeed，构建和安装Nginx

 

安装用于构建nginx和ngx_pagespeed的必备要素。

 

在Debian、Ubuntu或Linux Mint上：

 

$ sudo apt-get install build-essential zlib1g-dev libpcre3-dev

1	$  sudo  apt - get  install  build - essential  zlib1g - dev  libpcre3 - dev

在Fedora、CentOS或RHEL上：

 

$ sudo yum install gcc-c++ pcre-devel zlib-devel make wget

1	$  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

1 2 3

$  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

下载预构建的PSOL（PageSpeed优化库，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 {} \;

1 2 3

$  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的最新稳定版。

 

$ wget http://nginx.org/download/nginx-1.4.4.tar.gz

1	$  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

1 2 3 4

$  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

你应该确认，ngx_pagespeed模块已添加到安装的Nginx系统上，如下所示。

 

$ /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 . . . .

1	$  / 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;     # 服务器名称     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过滤器。     }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$  sudo  vi  / etc / nginx / nginx .conf    server  {    # 侦听的端口     listen  80 ;    # 服务器名称     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过滤器，谷歌认为这些过滤器对大多数网站来说是安全的。如果启用CoreFilters，你就 自动启用了一系列"安全"规则。所以，推荐新手用户采用这种方法。如果你愿意，也可以禁用CoreFilters中的某个或某些过滤器，或者选择性地启用 额外的过滤器。下面这个例子表明了使用CoreFilters的ngx_pagespeed配置。

 

server {     # 侦听的端口     listen 80;     # 服务器名称     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;     }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

server  {    # 侦听的端口     listen  80 ;    # 服务器名称     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;     # 服务器名称     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;     # 删除带默认属性的标签     pagespeed EnableFilters elide_attributes;     # 改善资源的可缓存性     pagespeed EnableFilters extend_cache;     # 更换被导入文件的@import，精简CSS文件     pagespeed EnableFilters flatten_css_imports;     pagespeed CssFlattenMaxBytes 5120;     # 延时加载客户端看不见的图片     pagespeed EnableFilters lazyload_images;     # 启用JavaScript缩小机制     pagespeed EnableFilters rewrite_javascript;     # 启用图片优化机制     pagespeed EnableFilters rewrite_images;     # 预解析DNS查询     pagespeed EnableFilters insert_dns_prefetch;     # 重写CSS，首先加载渲染页面的CSS规则     pagespeed EnableFilters prioritize_critical_css;     }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

server  {    # 侦听的端口     listen  80 ;    # 服务器名称     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 ;    # 删除带默认属性的标签     pagespeed  EnableFilters  elide_attributes ;    # 改善资源的可缓存性     pagespeed  EnableFilters  extend_cache ;    # 更换被导入文件的@import，精简CSS文件     pagespeed  EnableFilters  flatten_css_imports ;    pagespeed  CssFlattenMaxBytes  5120 ;    # 延时加载客户端看不见的图片     pagespeed  EnableFilters  lazyload_images ;    # 启用JavaScript缩小机制     pagespeed  EnableFilters  rewrite_javascript ;    # 启用图片优化机制     pagespeed  EnableFilters  rewrite_images ;    # 预解析DNS查询     pagespeed  EnableFilters  insert_dns_prefetch ;    # 重写CSS，首先加载渲染页面的CSS规则     pagespeed  EnableFilters  prioritize_critical_css ;    }

另外的配置步骤：

 

创建将由Nginx写入的一个文件缓存目录。

 

$ sudo mkdir /var/ngx_pagespeed_cache     $ sudo chown nginx:nginx /var/ngx_pagespeed_cache

1 2	$  sudo  mkdir  / var / ngx_pagespeed _cache    $  sudo  chown  nginx : nginx  / var / ngx_pagespeed_cache

为了方便起见，为Nginx创建一个初始化脚本。

 

$ 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

1 2 3

$  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

1	$  sudo  / etc / init .d / nginx  start

注意：除了ngx_pagespeed外，你可能还需要定义额外的Nginx模块（比如HTTPS/SSL支持等），具体视需求而 定。这种情况下，你需要在Nginx编译这个环节来添加这些模块。请参阅这篇教程（http://xmodulo.com/2014/01 /compile-install-nginx-web-server.html），了解如何启用额外的Nginx模块。