Nginx安装配置ngx_pagespeed模块丨优化加速整站网页代码

pagespeed是谷歌开发的网站环境的插件 它支持Apache和Nginx环境 它可以自动优化网站代码 适合懒人和小白使用 合理使用 对网页加快效果很明显

Apache的模块为mod_pagespeed Nginx的模块为ngx_pagespeed  博主用的是Nginx网站环境 这篇文章来写ngx_pagespeed的配置和使用

谷歌官方地址 https://www.modpagespeed.com/

github地址 https://github.com/apache/incubator-pagespeed-ngx

下载ngx_pagespeed

NPS_VERSION=1.13.35.1-beta
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/
cd
mv $nps_dir ngx_pagespeed #修改文件夹名 以便后面操作

写这篇文章时 最新版本为 1.13.35.1-beta 如果你要求更新的版本 需在版本说明中查看最新版本号 将第一行代码NPS_VERSION=后面改为最新版本号

安装ngx_pagespeed

本文章写两种方式 一、直接编译 二、宝塔面板安装

一、编译安装

1、安装需要C++编译依赖

安装前请检查 有没有该依赖

CentOS

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

2、查看当前Nginx版本

nginx -V

会显示 例如下

--user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6

3、编译

cd /usr/local/nginx

将上面显示的编译复制下后面添加 --add-module=../ngx_pagespeed

譬如

./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6 --add-module=../ngx_pagespeed

输入并回车 接下来进行编译

make

只需编译 而不是make install 否则会覆盖安装

4、备份

备份原文件

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

替换二进制文件

cp /usr/local/src/nginx-1.8.1/objs/nginx /usr/local/nginx/sbin/nginx

5、检查

在检查使用nginx -V 如果后面显示了  --add-module=../ngx_pagespeed 即代表安装成功

二、宝塔面板安装

宝塔面板安装 就比较方便容易些了 为了照顾小白 我会详细写这种安装方法

这里就不需要检查依赖了 宝塔面板在建站时默认安装依赖了

1、移动模块文件夹

将root目录下的ngx_pagespeed文件夹到 /www/server目录下 可以手动在宝塔面板中操作 也可以在shell中操作 shell指令如下

mv ./ngx_pagespeed /www/server

2、手动修改宝塔Nginx脚本

编辑 /www/server/panel/install/nginx.sh

找到脚本编译的地方 你可以直接用Ctrl+F搜索 ./configure --user=www

在你需要安装的版本后面添加

--add-module=/www/server/ngx_pagespeed

譬如这样譬如我想编译安装1.17版本的Nginx 就这样

3、重新编译nginx

在shell中输入

sh /www/server/panel/install/nginx.sh install 1.17

后面版本号改为你想编译的版本

安装好后输入 Nginx -V 检查是否有安装成功

开启pagespeed功能设置

mkdir -p /tmp/cache/ngx_pagespeed_cache

这个模块给的功能实在是太多了 而且版本还在不断更新 详细的各种使用说明看官方文档 点这里

编译安装 请手动 修改nginx.conf配置文件 注！！ 添加在server {  }中

宝塔面板安装 在网站-你的网站-设置-配置文件 中添加如下

下面为我所使用的一些功能 这里考虑到我博客为了速度优化太多了 所以有些功能我不能开 会产生错误 详细看上面的文档

pagespeed on;    #启用ngx_pagespeed
#设置缓存目录和清理规则
pagespeed FileCachePath "/tmp/cache/ngx_pagespeed_cache/";    
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
#HTTPS支持
pagespeed FetchHttps enable;
#开启memcached优化 可选 没有Memcached不用这个
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";
#优化带宽
pagespeed RewriteLevel OptimizeForBandwidth;
#启用Elide Attributes过滤器
pagespeed EnableFilters elide_attributes;
#重写Vary头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 转换元标记
pagespeed EnableFilters convert_meta_tags;
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;    
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# 更换被导入文件的@import，精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;
# 重写CSS，优先加载关键CSS
pagespeed EnableFilters prioritize_critical_css; 
# 压缩CSS
pagespeed EnableFilters rewrite_css;
# 压缩JS
pagespeed EnableFilters rewrite_javascript;
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 优化内嵌样式属性
pagespeed EnableFilters rewrite_style_attributes;
# 消除冗余图像URL
pagespeed EnableFilters dedup_inlined_images;
# 启用图片优化机制    
pagespeed EnableFilters rewrite_images;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;
# Example 禁止pagespeed 处理/wp-admin/目录 可选
pagespeed RewriteLevel PassThrough;
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";

#下面的 是我没打开的功能 但感觉对你们有些帮助的功能
# 合并CSS
pagespeed EnableFilters combine_css;
# 合并js
pagespeed EnableFilters combine_javascript;
#图片懒加载 即不加载显示区域外的图片
pagespeed EnableFilters lazyload_images;
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
#激活本地缓存
pagespeed EnableFilters local_storage_cache;

总之呢 功能很全面 还有些我没写 需要详细的话 去谷歌官方的说明文档中查看

测试

确认无误后 打开网站 刷新几次 就会产生缓存

F12在源码中搜索 pagespeed

如果出现很多pageseed的关键词 即代表开启成功！