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功能设置
首先你需要创建一个用来放缓存的文件夹
宝塔可以手动在面板中创建 譬如我使用的/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,优先加载关键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的关键词 即代表开启成功!