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

标签：PageSpeed nginx pagespeed Nginx JavaScript 服务器 ngx CSS

网站加载速度越快，访客互动性、留住率和转换率就越高，这早已不是什么秘密。网站每延迟 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

在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

下载预构建的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          {         }          \         ;

从http://nginx.org/en/download.html，下载Nginx的最新稳定版。

$ 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

你应该确认，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          .          .          .          .

配置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过滤器。    


}

说到指定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         ;


}

想了解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         ;


}

另外的配置步骤：

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



$          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

最后，启动Nginx。

$ sudo /etc/init.d/nginx start

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

标签：PageSpeed,nginx,pagespeed,Nginx,JavaScript,服务器,ngx,CSS
From： https://blog.51cto.com/u_6186189/7048491

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

相关文章

赞助商

阅读排行