使用 ngx_pagespeed 优化前端页面,提高 WordPress 加载速度,使 PageSpeed Insights 轻松达到 100 分

使用 ngx_pagespeed 优化前端页面,提高 WordPress 加载速度,使 PageSpeed Insights 轻松达到 100 分

使用 ngx_pagespeed 优化前端页面,提高 WordPress 加载速度,使 PageSpeed Insights 轻松达到 100 分

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

wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.11.33.4-beta.zip
unzip v1.11.33.4-beta.zip
cd ngx_pagespeed-1.11.33.4-beta/
wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz
tar -xzvf 1.11.33.4.tar.gz

从 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,在这行代码的末尾添加

--add-module=$HOME/ngx_pagespeed-1.11.33.4-beta

接着更新一下nginx

./upgrade_nginx.sh

十几分钟之后,如果没有提示其他错误,ngx_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=/root/ngx_pagespeed-1.11.33.4-beta --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

配置 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;

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;

本站提供 WordPress 主题定制开发服务

本站长期承接WordPress主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有7年 WordPress 开发经验, 如果你想用 WordPress 开发网站, 请联系 QQ: 470266798 或邮箱: 4626395@gmail.com 咨询。

2 thoughts on “使用 ngx_pagespeed 优化前端页面,提高 WordPress 加载速度,使 PageSpeed Insights 轻松达到 100 分

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*