如果你要旅行,你想去哪里?

博客优化—— nginx

PageSpeed Insights 测了一下结果惨不忍睹

在 PageSpeed Insights 的推荐下使用 ngx_pagespeed 模块加速、优化博客。

安装 ngx_pagespeed 模块

方法一:脚本大法一键自动安装 nginx 和 ngx_pagespeed 模块

bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
     --nginx-version latest

方法二:手动编译安装

安装前先安装依赖
RedHat, CentOS, or Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev

下载模块
这里查看最新版本

NPS_VERSION=1.13.35.2-stable #模块版本号
cd
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}.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/

下载 nginx
这里查看最新版本

NGINX_VERSION=nginx-1.14.0  # nginx 版本号
cd
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz

编译安装

cd nginx-${NGINX_VERSION}/
./configure --add-module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS}
make
sudo make install

以上是 PageSpeed 的官方教程,我用的是 lnmp.org 的脚本安装,故借助脚本重新编译安装。
打开目录 lnmp1.5 ,编辑 lnmp.confNginx_Modules_Options 后添加模块路径,如

Nginx_Modules_Options='--add-module=nginx_mod/incubator-pagespeed-ngx-1.13.35.2-stable'

执行 ./upgrade.sh nginx 便开始编译安装了。

配置 ngx_pagespeed

在站点配置 server 段里添加:

# on 启用,off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
pagespeed DisableRewriteOnNoTransform off;
# 相对URL
pagespeed PreserveUrlRelativity on;
# X-Header 值,用于判断是否生效
pagespeed XHeaderValue "Powered By MF8.BIZ";

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/data/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;

# 过滤WordPress的后台(可选配置,可参考使用)
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;
# 压缩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;

# 将 meta 转换为 header 
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; }

更多的设置文档请翻看:https://modpagespeed.com/doc/
重启 nginx 生效

service nginx restart   或  systemctl restart nginx

效果很明显,但还有提升空间,找个时间再继续优化。

2018/06/06