Nginx安装配置ngx_pagespeed模块丨优化加速整站网页代码-小林博客

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

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

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;

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