使用 PageSpeed 优化博客

后来换了主题,再测试快接近满分了,当然我还启用了 brotli 压缩。


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;

    pagespeed XHeaderValue "Powered By FEAUI.COM";

    # 开启 https
    pagespeed FetchHttps enable;

    # 配置服务器缓存位置和自动清除触发条件,缓存文件夹如果不存在则需要自行创建,建议放在内存中
    pagespeed FileCachePath "/dev/shm/ngx_pagespeed/";
    pagespeed FileCacheSizeKb 2048000;
    pagespeed FileCacheCleanIntervalMs 43200000;
    pagespeed FileCacheInodeLimit 500000;

    # 过滤规则
    pagespeed RewriteLevel PassThrough;

    # 过滤/admin/目录(可选配置,可参考使用)
    pagespeed Disallow "*/admin/*";

    # 移除 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;

    # 压缩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 extend_cache;

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

service nginx restart   或  systemctl restart nginx

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

评 论