不够用的ngx_pagespeed的配置教程
in Tutorial with 27 comments
不够用的ngx_pagespeed的配置教程
in Tutorial with 27 comments

从上一篇中,我们知道了如何给自己的nginx装上ngx_pagespeed,那么这篇将会告诉你如何配置使用ngx_pagespeed来加速你站点的前端资源。其中一些配置需要根据自己的站点情况进行筛选使用,例如你的站点的css会保持一直更新的情况下,就不要配置使用CSS的压缩、合并、级联、内联。

创建缓存文件夹

mkdir /var/ngx_pagespeed/
chown www.www /var/ngx_pagespeed/

配置conf文件

打开你站点的conf配置文件

假设我的配置文件是在 /usr/local/nginx/conf/vhost 的目录

vim /usr/local/nginx/conf/vhost/www.linpx.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;
pagespeed XHeaderValue "Powered By LiNPX";

# 开启 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; }

优化配置

pagespeed on; 下添加memcached的配置(得先有memcached)

pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";

重启Nginx

配置完后请记得重启Nginx!

CentOS 6.x:

service nginx restart

CentOS 7.x:

systemctl restart nginx

更新

修改配置文件,更详细,这次应该够用了。

最后结语:因为工作需要给公司其他站点用上ngx_pagespeed,所以才有了这个教程,但我拖了很久才写,可能会有错漏,欢迎补充完善。

Responses
  1. 分享的不错,谢谢

    Reply
    1. @凯哥自媒体

      谢谢 :)

      Reply
  2. 感觉pagespeed非常好用,之前看张戈那里配置了下,博主这里刚好多加了个memcache的配置部分,偷偷拿回去用了.. 2333333

    Reply
    1. @雨落无声

      你再仔细看那份配置,还会发现不一样的东西 /逃

      Reply
  3. Din

    大赞
    不过想问下博主。 你的配图是从哪儿来的呢...
    一直想找个好的配图网站

    Reply
    1. @Din

      图基本来自优秀网页设计的某篇文章的教程,建议尝试一下搜索引擎的以图识图的功能。/逃

      Reply
  4. 礼貌回访,赞

    Reply
    1. @TimeM

      谢谢 :)

      Reply
  5. 开启后发现在wordpress下的后台主题编辑functions.php会打不开 直接无法显示网页 其他无影响

    Reply
    1. @小残

      发现问题了
      pagespeed Disallow "/wp-admin/";
      pagespeed Disallow "/admin/";
      删除以上二行就解决了。

      Reply
      1. @小残博客

        可以的,大兄弟 :)

        Reply
  6. 好东西,正是需要的,楼主的这套配置方案适用性如何?适大多数网站吗?

    Reply
    1. @Xavier 启用压缩空白过滤器把多个CSS文件合并成一个CSS文件把多个JavaScript文件合并成一个JavaScript文件删除带默认属性的标签改善资源的可缓存性更换被导入文件的@import,精简CSS文件延时加载客户端看不见的图片启用JavaScript缩小机制启用图片优化机制预解析DNS查询重写CSS,首先加载渲染页面的CSS规则

      以上需要自己去调试。主要影响网站多为JavaScript和css,尤其是js,ngx_pagespeed最棒的就是图片懒加载和压缩转换为webp格式

      Reply