如何在Nginx下 配置 ngx_pagespeed

2018年6月11日07:43:05 1 78 阅读

前言

网页前端优化及测试工具,我们也说了多次,本次讲解Google 开源的软件ngx_pagespeed,是部署在服务器端自动网页优化软件。

ngx_pagespeed是一个 Nginx 的扩展模块,可以加速你的网站,减少页面加载时间,它会自动将一些提升web性能的实践应用到网页和相关的资源(CSS、JS和图片)上,无需你修改内容和流程

如何在Nginx下 配置 ngx_pagespeed

如何在Nginx下 配置 ngx_pagespeed

一、ngx_pagespeed 提供的功能包括

      1、图像优化:剥离元数据、动态调整,重新压缩
      2、CSS 和 JavaScript 压缩、级联、内联
      3、小资源内联
      4、延迟图像和 JavaScript 加载
      5、HTML 重写
      6、缓存周期延长

具体的功能:标准化JavaScript库、删除Css空白、重新组合CSS、结合JavaScript、合并头、转换Meta标签、重复内联图像、推迟JavaScript、Elide属性、扩展缓存、扩展缓存PDF、用于优化图像的过滤器和选项、拼凑CSS @imports、提示资源预加载、包含JavaScript源地图、内联@import链接、内联CSS、内嵌Google Fonts API CSS、内联JavaScript、内联预览图像、插入Google Analytics、懒惰加载图像、本地存储缓存、、图像响应、缩小JavaScript、在脚本上移动CSS、将CSS移到头部、优化图像、雪碧图片、修剪网址

预解析DNS、确定关键CSS的优先级、重写CSS、重写域、重写样式属性。

PageSpeed 的介绍和安装下次我们来说,这次是配合新站的开通,对PageSpeed进行了配置。

缓存文件夹

用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var 目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。

例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致:

mkdir /data/ngx_pagespeed/
chown -R www /data/ngx_pagespeed/

设置

如何在Nginx下 配置 ngx_pagespeed

二、ngx_pagespeed配置说明

PageSpeed 按虚拟主机一个一个配置,例如我的 Nginx 配置文件是在 /usr/local/nginx/conf/vhost 的目录,然后修改 www.ipdrivers.com.conf 的配置文件。

在 server {} 段内添加:

# on 启用,off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
pagespeed DisableRewriteOnNoTransform off;
# 相对URL
pagespeed PreserveUrlRelativity on;
# X-Header 值,用于判断是否生效

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/data/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;

# 过滤WordPress的后台(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";

# 移除不必要的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;

# 将 meta 转换为 header
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; }

更多的设置文档请翻看:https://modpagespeed.com/doc/

外部缓存

PageSpeed 还支持以 Memcached 和 Redis 作为外部缓存,来拓展性能。

Redis 支持

在配置中加入:

pagespeed RedisServer "host:port";

设置连接失败后的等待时间,默认 1s(可选):

pagespeed RedisReconnectionDelayMs timeout_in_milliseconds;

Memcached 支持

在配置中加入:

pagespeed MemcachedServers "host:port";

设置连接失败后的等待时间,默认 1s(可选):

pagespeed MemcachedTimeoutUs timeout_in_microseconds;

重启生效

先判断是否有错误, SSH 中输入如下值后回车:

nginx -t

如果返回:

root@:~# nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

即可,重启以生效 PageSpeed 的设置:

service nginx restart     systemctl restart nginx

清理缓存

开启 PageSpeed 后,如果原来的 CSS 和 JS 发生变动话的,不清理缓存是不会生效的,需要清理缓存的时候:

touch /data/pagespeed/cache.flush

运行上述语句即可, 其中 /var/cache/pagespeed/ 为配置文件中,pagespeed FileCachePath "/var/cache/pagespeed/"; 设置的目录。

三、ngx_pagespeed 配置实例(直接使用)

给一个完整的配置pagespeed.conf,这个是一个支持Wordpress CMS的配置

pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters extend_cache; 
pagespeed EnableFilters flatten_css_imports; 
pagespeed CssFlattenMaxBytes 5120; 
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters insert_dns_prefetch; 
pagespeed EnableFilters prioritize_critical_css;
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/admin/*";
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; }
hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 活在当下 活在当下 0

      网上找了很久的配置都不合适,本文提供的太好,放上去没有出现任何错误。