nginx使用pagespeed模块给静态文件加速

时间 2019-11-25

标签 nginx 使用 pagespeed 模块静态文件加速栏目 Nginx 繁體版

原文原文链接

ngx_pagespeed模块的主要功能大体有：
1）图像优化：剥离元数据、动态调整，从新压缩
2）CSS和JavaScript压缩、合并、级联、内联
3）小资源内联
4）推迟图像和JavaScript加载
5）对HTML重写、压缩空格、去除注释等
6）提高缓存周期

做为Nginx组件，ngx_pagespeed将重写你的网页，让用户以更快的速度进行访问。重写的工做包括压缩图片、缩减CSS和JavaScript、扩展缓存时间，一样还包括其它一些最佳实践：
1）优化缓存----整合应用程序的数据和逻辑
2）最小化round-trip次数----削减连续的请求/响应周期数
3）最小化请求开销----削减上传大小
4）最小化负载大小----削减响应、下载及缓存页面大小
5）优化浏览器渲染----改善浏览器页面布局
6）移动方面的优化----优化站点移动网络和设备方面的相关特性 javascript

第一步：下载pagespeed nginx模块php

yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel
wget http://linuxsoft.cern.ch/cern/slc6X/x86_64/RPM-GPG-KEY-cern
wget -O /etc/yum.repos.d/slc6-devtoolset.repo http://linuxsoft.cern.ch/cern/devtoolset/slc6-devtoolset.repo
yum install devtoolset-2
PS_NGX_EXTRA_FLAGS="--with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc"
wget https://github.com/apache/incubator-pagespeed-ngx/archive/latest-stable.tar.gz
tar -xvf latest-stable.tar.gz
cd incubator-pagespeed-ngx-latest-stable
psol_url=https://dl.google.com/dl/page-speed/psol/latest-stable.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})

第二步：修改lnmp脚本，安装或更新nginxcss

vi include/nginx.sh在23和25行结尾加上，vi include/upgrade_nginx.sh在50和52行结尾加上：html

--add-module=/root/incubator-pagespeed-ngx-latest-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

/root/incubator-pagespeed-ngx-latest-stable该路径为pagespeed下载的目录。java

第三步：写pagespeed配置文件node

cd /usr/local/nginx/conf/
vi pagespeed.conf
内容
# 启用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/pagespeed/;
# 禁用CoreFilters
pagespeed RewriteLevel PassThrough;
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace;
# 启用JavaScript库卸载
pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多个CSS文件合并成一个CSS文件
pagespeed EnableFilters combine_css;
# 把多个JavaScript文件合并成一个JavaScript文件
pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 改善资源的可缓存性
pagespeed EnableFilters extend_cache;
# 更换被导入文件的@import，精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延时加载客户端看不见的图片
pagespeed EnableFilters lazyload_images;
# 启用JavaScript缩小机制
pagespeed EnableFilters rewrite_javascript;
# 启用图片优化机制
pagespeed EnableFilters rewrite_images;
# 预解析DNS查询
pagespeed EnableFilters insert_dns_prefetch;
# 重写CSS，首先加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# Example 禁止pagespeed 处理/ipython/目录 可选
#pagespeed Disallow"*/ipython/*";

第四步：nginx生效：python

vi nginx.conf
写入
include pagespeed.conf;

nginx -t
nginx -s reload

注意：若是css、js更新请删除/tmp/pagespeed/目录下的文件才会在服务器生效linux

nginx模块下载地址：https://github.com/apache/incubator-pagespeed-ngx/releasesnginx

环境依赖包地址：http://linuxsoft.cern.ch/cern/slc6X/x86_64/c++

环境依赖包地址：http://linux.web.cern.ch/linux/devtoolset/#install

google测试网页速度的工具：https://developers.google.com/speed/pagespeed/insights/

google测试网页速度的工具（pwa）：https://developers.google.com/web/tools/lighthouse/

官方安装教程：https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

本次安装参考：http://www.btfw.org/linux/576.html

另外一个版本的pagespeed.conf

# on 启用，off 关闭
pagespeed on;
# memcached优化,若是没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By JaxsonWang";

# 开启 https
#pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件（空间大小、时限）
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的/wp-admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 过滤typecho的/admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/admin/*";

# 移除没必要要的url前缀，开启可能会致使某些自动加载功能失效
#pagespeed EnableFilters trim_urls;
# 移除 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;
# google字体直接写入html 目的是减小浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_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 sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 不能删
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }