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-betacdwget https://github.com/apache/incubator-pagespeed-ngx/archive/v${ NPS_VERSION}.zipunzip v${ NPS_VERSION}.zipnps_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/cdmv $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功能设置
首先你需要创建一个用来放缓存的文件夹
宝塔可以手动在面板中创建 譬如我使用的/tmp/cache/ngx_pagespeed_cache目录
shell如下
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,优先加载关键CSSpagespeed EnableFilters prioritize_critical_css; # 压缩CSSpagespeed EnableFilters rewrite_css;# 压缩JSpagespeed EnableFilters rewrite_javascript;# 删除带默认属性的标签 pagespeed EnableFilters elide_attributes; # 优化内嵌样式属性pagespeed EnableFilters rewrite_style_attributes;# 消除冗余图像URLpagespeed 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*";#下面的 是我没打开的功能 但感觉对你们有些帮助的功能# 合并CSSpagespeed EnableFilters combine_css;# 合并jspagespeed EnableFilters combine_javascript;#图片懒加载 即不加载显示区域外的图片pagespeed EnableFilters lazyload_images;pagespeed LazyloadImagesAfterOnload off;# 图片预加载pagespeed EnableFilters inline_preview_images;#激活本地缓存pagespeed EnableFilters local_storage_cache;
总之呢 功能很全面 还有些我没写 需要详细的话 去谷歌官方的说明文档中查看
测试
确认无误后 打开网站 刷新几次 就会产生缓存
F12在源码中搜索 pagespeed
如果出现很多pageseed的关键词 即代表开启成功!