借助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上:
1 | $ sudo apt-get install build-essential zlib1g-dev libpcre3-dev |
在Fedora、CentOS或RHEL上:
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
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目录下:
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的最新稳定版。
1 | $ wget http://nginx.org/download/nginx-1.4.4.tar.gz |
最后,在ngx_pagespeed模块启用的情况下,编译Nginx,并安装它,如下所示。
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系统上,如下所示。
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过滤器。
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配置。
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级别,你可以手动启用个别过滤器。
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写入的一个文件缓存目录。
1 2 | $ sudo mkdir /var/ngx_pagespeed_cache $ sudo chown nginx:nginx /var/ngx_pagespeed_cache |
为了方便起见,为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。
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模块。