借助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

在 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 模块。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏freesan44

加载RAM磁盘编译Xcode项目

每次对Xcode iOS项目进行clean、build或者在iOS虚拟机上launch,Xcode都会在DeriveData文件夹中进行读写操作。换句话说,就是...

11920
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

52110
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

50340
来自专栏建站达人秀

如何搭建 Express 网站

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。nenggou 使用您提议的各...

50620
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【8.网页中的css/js/image处理】

通常情况下,网页开发时,页面中的样式是通过外部css样式进行处理的,外部的css文件加载在Django中,需要进行简单的处理

9020
来自专栏极客编程

Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

22120
来自专栏FreeBuf

CIA机密文档追踪工具Scribbles详细分析

2017年4月28日,维基解密发布了CIA“涂鸦”(Scribbles)项目的文档和源代码(参考地址1)。这是一个文档预处理系统,用于给涉密文档打上“Web b...

29770
来自专栏前端达人

在 React 应用中获取数据

可以说 React 是构建 web 应用最流行的库。然而,它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。

29420
来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

17910
来自专栏黑白安全

WordPress 4.9.6任意文件删除漏洞利用

WordPress是目前网络上最受欢迎的CMS。约有30%的网站都在使用它。这种广泛的采用,也使其成为了网络犯罪分子非常感兴趣的一个目标.RIPS团队在7个月前...

27750

扫码关注云+社区

领取腾讯云代金券