使用Nginx PageSpeed Module来给你的WordPress博客加速吧

晴和君 · 2017年07月31日 · 3.7K次阅读 · 预计需要11分钟

前言

前几天安装完博客后,总感觉速度比较慢,于是就去检测监测,发现不论是移动端还是桌面端,分数都只有惨不忍睹的40多分。。。 :cry:

PageSpeed Insights 工具

在谷歌还没被挡的时候,就已经存在pagespeed这个东西了,相信大家也都听说过或者使用过这个优化网页的利器。

经过昨天的优化之后,现在的分数就很不错了。
首页测试结果:

图1——首页测试结果

文章页测试结果:

图2——文章页测试结果

唯一的扣分项目就是主题的style.css了。但是如果使用异步加载的话,就会先显示没有css的网站内容,真的是惨不忍睹,所以还是先让它加载css算了。
想要看看你的网站的评分?点击这里前往。由于是谷歌的服务,所以请自备工具,不然会自动关闭页面。

Install PageSpeed Module

回到正题,怎么在Nginx上使用PageSpeed Module呢?这个ngx_pagespeed模块可以对网页进行加速,包括但不限于压缩图片、压缩合并CSS和JS,还可以配合mencached来食用,网页加速的效果还是明显的。

下载相关文件

虽然网上有很多的安装教程,但很多都是互相复制来复制去,感觉根本都没有尝试过,要不就是年代久远。。。
我安装的环境是Nginx 1.12.1 Centos 7.3 x64

下载 ngx_pagespeed

cd /usr/local/src
wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.tar.gz
tar -xvzf latest-stable.tar.gz
mv ngx_pagespeed-latest-stable ngx_pagespeed
cd ngx_pagespeed
wget https://dl.google.com/dl/page-speed/psol/1.12.34.2-x64.tar.gz
tar -xzvf 1.12.34.2-x64.tar.gz && rm -rf 1.12.34.2-x64.tar.gz
./scripts/pagespeed_libraries_generator.sh > /usr/local/nginx/conf/pagespeed_libraries.conf

下载 Nginx

cd /usr/local/src
wget http://nginx.org/download/nginx-1.12.1.tar.gz
tar -xvzf nginx-1.12.1.tar.gz && rm -rf nginx-1.12.1.tar.gz

下载 OpenSSL

cd /usr/local/src
wget https://www.openssl.org/source/openssl-1.0.2-latest.tar.gz
tar -xzvf openssl-1.0.2-latest.tar.gz && rm -rf openssl-1.0.2-latest.tar.gz

然后为了获取 OpenSSL 的版本号,输入

ls

会显示类似openssl-1.0.2l这样的。

下载 PCRE

wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.41.tar.gz
tar -xzvf pcre-8.41.tar.gz && rm -rf pcre-8.41.tar.gz

编译和安装

获取 configure arguments

nginx -V

得到

./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2l --with-pcre=/usr/local/src/pcre-8.41 --with-pcre-jit --with-ld-opt=-ljemalloc

注意查看路径是否正确,如果是相对路径的话,最后改成绝对路径,例如,刚刚下载的OpenSSL的目录位置为/usr/local/src/openssl-1.0.2l就对应上面./configure ......内容中的--with-openssl=/usr/local/src/openssl-1.0.2l
然后再加上

--add-module=/usr/local/src/ngx_pagespeed

所以最后的结果是

./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2l --with-pcre=/usr/local/src/pcre-8.41 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

最后进行编译和安装

cd /usr/local/src/nginx-1.12.1
./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2l --with-pcre=/usr/local/src/pcre-8.41 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed
make && make install

验证安装

如果一切顺利,在完成之后输入

nginx -V

会显示

nginx version: nginx/1.12.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC)
built with OpenSSL 1.0.2l  25 May 2017
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2l --with-pcre=/usr/local/src/pcre-8.41 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

然后输入

nginx -t

如果验证通过,会显示

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

启用PageSpeed Module

编辑网站的nginx配置文件,比如 www.xinxuan.me.conf,在server模块里面加入如下代码:

# on 启用,off 关闭
pagespeed on;
# memcached优化,如果没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By JaxsonWang";

# 开启 https
#pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 过滤typecho的/admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";

# 移除不必要的url前缀,开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 压缩CSS
pagespeed EnableFilters rewrite_css;
# 合并CSS
pagespeed EnableFilters combine_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_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片,图标很多的时候很有用
#pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_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_message { allow 127.0.0.1; deny all; }

如果不知道加到哪,可以加入到 root /home/wwwroot/yourdomain.com; 的后面即可。

最后重启下Nginx服务来生效:

service nginx restart

查看你的网站的源码,就会出现带有pagespeed字样的css、js文件了。

NaN分
null
腐朽的文章
  • 前言
  • PageSpeed Insights 工具
  • Install PageSpeed Module
  • 下载相关文件
  • 编译和安装
  • 验证安装
  • 启用PageSpeed Module