Nginx PageSpeed 是 Nginx 的一个扩展模块,主要的功能是再服务器端优化网站的前端页面,使前端页面符合 PageSpeed Insights 的指导原则,有了 PageSpeed,网站开发人员就可以在开发前端页面的时候,稍微轻松一点了,把前端优化的任务都交给服务器来处理,虽然这会使服务器负载增加;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的,反正现在服务器也越来越便宜,大不了增加服务器配置就好了,下面我们来看一下安装和使用 Nginx PageSpeed 的方法。
ngx_pagespeed 模块的主要功能如下
ngx_pagespeed 几乎为我们提供了优化网站前端页面所需要的所有功能,下面是一些比较常用和重要的功能,其他功能可以到 ngx_pagespeed 官方文档 查看。
- 图像优化:移除图片元数据、动态调整,重新压缩
- CSS 和 JavaScript 压缩、合并、级联、内联,把当前页面需要的 CSS 直接放在页面中,符合 PageSpeed Insights 提出的 “清除首屏内容中阻止呈现的 JavaScript 和 CSS” 原则。
- 小资源内联,比如比较小的图片,直接转换成 base64 格式的,放在 HTML 中。
- 推迟图像和 JavaScript 加载,只加载当前屏幕显示的图像,异步加载 JavaScript
- 对HTML重写、压缩空格、去除注释等,吧 HTML 页面中不必要的内容都移除了,减少了 HTML 的体积。
- 提升缓存周期,把静态资源的缓存过期时间提高了。
下面是本站使用 ngx_pagespeed 优化过后,通过 PageSpeed Insights 测试出来的分数,不管是移动端、还是桌面端,均达到了100分,这是手工优化前端页面很难达到的高度。当然,优化的过程是动态的,也不是每个页面随时都能达到这个分数,但是整体上来看,使用 ngx_pagespeed 优化后,前端页面的打开速度确实快了许多,用肉眼就能分辨出来。
解决安装 ngx_pagespeed 所需的依赖
安装之前,首先要解决安装或升级 ngx_pagespeed 所需的依赖环境。
RedHat, CentOS, or Fedora
sudo yum install gcc-c++ pcre-devel zlib-devel make unzip
Ubuntu or Debian
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip
如果已经安装了则需要更新依赖(要求 gcc ≥ 4.8 or clang ≥ 3.3)
LNMP 安装 ngx_pagespeed 的方法
由于我使用的是军哥的 LNMP 一键安装脚本,直接编辑升级 Nginx 的脚本,加上编译 ngx_pagespeed 的参数,升级 Nginx 就可以了,当然,如果不想升级,直接输入当前的 Nginx 版本号,相当于重新安装了一遍。
1、首先,根据官方教程下载 Page Speed,把下面的命令保存成 download_pagespeed.sh
文件,然后运行 chmod +x download_pagespeed.sh
赋予该文件可执行权限,然后运行 ./download_pagespeed.sh
即可自动下载并解压 ngx_pagespeed 模块的源代码。
#[check the release notes for the latest version]
NPS_VERSION=1.13.35.2-stable
cd /opt
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}x64.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url}) # extracts to psol/
从 1.12.34 版本开始,按照官方的教程进行的时候,可能会遇到无法下载 PSOL 的情况,这时候,按照下面的地址下载对应版本的 PSOL 就可以了。
https://dl.google.com/dl/page-speed/psol/[PageSpeed版本]-x[系统位数].tar.gz
2、然后编辑 Nginx 升级脚本
我用的是 LNMP 1.3,其他版本更换安装路径即可。
cd /lnmp1.3-full/include
vi upgrade_nginx.sh
找到 ./configure --user=www --group=www --prefix=/usr/local/nginx
,在这行代码的末尾添加,其中 ngx_pagespeed-1.13.35.2-stable
是第一步下载的 PageSpeed 模块的目录名称,根据实际情况替换即可。
--add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable
接着更新 Nginx,可以根据需要,选择 Nginx 版本升级,一般选择最新的稳定版本即可。
./upgrade_nginx.sh
十几分钟之后,如果没有提示其他错误,Nginx 升级到指定版本的同时,ngx_pagespeed 就安装好了。
宝塔面板安装ngx_pagespeed 模块
宝塔面板虽然是图形界面,但最终执行的还是命令行的操作,所以我们一样可以给Nginx添加ngx_pagespeed 模块,宝塔面板安装Nginx的脚本文件路径为:/www/server/panel/install/nginx.sh
,我们修改这个文件,添加编译配置,然后在后台重新安装Nginx,安装的时候选择编译安装就可以了。
安装完成后,直接在站点设置的网站配置或伪静态里面添加 Pagespeed 配置就可以了。
Centos 6 安装 ngx_pagespeed 很容易出现的错误及解决办法
有些朋友在安装 ngx_pagespeed 时,出现了以下错误,
build_from_source=false error: module ngx_pagespeed requires the pagespeed optimization library
意思是需要 pagespeed 优化库,也就是上面下载的 psol 文件。明明已经下载了,可是为什么找不到呢?这是因为Centos 6 的 gcc 版本较低,达不到安装 ngx_pagespeed 的要求,这时候,升级一下 gcc 就可以了。
cd /etc/yum.repos.d && wget http://people.centos.org/tru/devtools-2/devtools-2.repo
yum -y install devtoolset-2-gcc devtoolset-2-binutils devtoolset-2-gcc-c++
上面的命令将安装的文件放在了 /opt/rh/devtoolset-2,要使用这个 gcc 来编辑,需要再编辑的时候,指定 gcc 的位置,重新编辑 upgrade_nginx.sh,在文件的末尾加入以下命令。
./configure (中间省略) --add-module=pagespeed代码路径 --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc
最终,upgrade_nginx.sh 编辑 Nginx 的命令应该是这样子的。
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module ${Nginx_With_Openssl} ${NginxMAOpt} ${Nginx_Modules_Options} --add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc
如果系统是 CentOS7,还是提示 “build_from_source=false checking for psol … not found”,可能是 libuuid-devel 没有安装,运行下面命令安装即可。
yum install -y libuuid-devel
配置 Nginx PageSpeed 为我们的 WordPress 加速
安装之后,ngx_pagespeed 已自动启用,通过 Nginx 配置文件启用 pagespeed 后,PageSpeed 就可以我们的网站服务了。下面是我使用的 ngx_pagespeed 配置文件,供大家参考。大家可以根据自己的需要启用或禁用某些模块,更多ngx_pagespeed配置青岛到 ngx_pagespeed 官方文档 查看。
# on 启用,off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By ngx_pagespeed";
# 开启 https
pagespeed FetchHttps enable;
# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
# pagespeed RewriteLevel PassThrough;
pagespeed RewriteLevel OptimizeForBandwidth;
# 不需过滤的目录或文件
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 移除不必要的url前缀,开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 延迟加载 JavaScript
pagespeed EnableFilters defer_javascript;
# 合并CSS
pagespeed EnableFilters combine_css;
# 压缩CSS
pagespeed EnableFilters rewrite_css;
# 重写CSS,优化加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# google字体直接写入html 目的是减少浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_css;
# 压缩 js
pagespeed EnableFilters rewrite_javascript;
# 合并 js
pagespeed EnableFilters combine_javascript;
# 重写样式属性
pagespeed EnableFilters rewrite_style_attributes;
# 压缩图片
pagespeed EnableFilters rewrite_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 调整图片大小
pagespeed EnableFilters resize_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片,图标很多的时候很有用
#pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;
# 不将规则应用在 wp-admin目录 和 wplogin.php页面
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 风险指数高,不建议开启
#pagespeed EnableFilters local_storage_cache;
# 不能删
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics {
allow 127.0.0.1;
deny all;
}
location /ngx_pagespeed_global_statistics {
allow 127.0.0.1;
deny all;
}
location /ngx_pagespeed_message {
allow 127.0.0.1;
deny all;
}
location ~ ^/pagespeed_global_admin {
allow 127.0.0.1;
deny all;
}
pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
# 控制台 可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
location /pagespeed_console {
allow 127.0.0.1;
deny all;
}
pagespeed AdminPath /ngx_pagespeed_admin;
location ~ ^/pagespeed_admin {
allow 127.0.0.1;
deny all;
}
# 日志限制
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
关于 "使用 ngx_pagespeed 优化前端页面,提高 WordPress 加载速度,使 PageSpeed Insights 轻松达到 100 分 "的一个想法
这个模块貌似是一个神器啊 很受欢迎啊
是的,PageSpeed 确实是一个神器,可以节省很多人力。
小内存的vps还是谨慎尝试,哈哈
在 1G 内存的 VPS 上试过,并没有多大问题,当然,这个跟网站流量有关系,流量大的情况下,加内存即可。
贵站目前就使用了这种方法是吗??真的好快
是的,配合另外一个缓存插件:https://www.wpzhiku.com/cachify/
大神,我想问一下您帮忙优化一下网站的速度,尤其是移动端的,收费是怎样的啊
参见这个页面:https://www.wpzhiku.com/service/performance/