闲着写点简单的分享

不够用的ngx_pagespeed的配置教程

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

创建ngx_pagespeed缓存文件夹

mkdir /tmp/cache/ngx_pagespeed_cache
chown www.www /tmp/cache/ngx_pagespeed_cache

打开你站点的conf配置文件

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

vim /usr/local/nginx/conf/vhost/www.linpx.com.conf

server {}内添加下面配置代码

# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;
# 把多个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; 
# 禁止pagespeed 处理WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
# 禁止pagespeed 处理typecho的/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; }

优化ngx_pagespeed的配置

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,所以才有了这个教程,但我拖了很久才写,可能会有错漏,欢迎补充完善。

已有 24 条评论
  1. 雨宫千鹤

    这个pagespeed的注释好详细~赞一个

    雨宫千鹤 回复
    1. Chakhsu Lau

      谢谢 :)

      Chakhsu Lau 回复
  2. 木瓜园

    我是从主题链接进来的,ngx_pagespeed 很有用

    木瓜园 回复
    1. Chakhsu Lau

      pagespeed个人感觉,对那些臃肿,多图,多js的网站 特别有用。

      Chakhsu Lau 回复
  3. 凯哥自媒体

    分享的不错,谢谢

    凯哥自媒体 回复
    1. Chakhsu Lau

      谢谢凯哥的回访 :)

      Chakhsu Lau 回复
  4. ZeroClover

    最近cPanel搞完了,里面的cPnginx正好也有pagespeed的模块,搞来玩玩

    ZeroClover 回复
    1. Chakhsu Lau

      谢谢大神来访 :)

      Chakhsu Lau 回复
  5. 凯哥自媒体

    分享的不错,谢谢

    凯哥自媒体 回复
    1. Chakhsu Lau

      谢谢 :)

      Chakhsu Lau 回复
  6. 雨落无声

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

    雨落无声 回复
    1. Chakhsu Lau

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

      Chakhsu Lau 回复
  7. Din

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

    Din 回复
    1. Chakhsu Lau

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

      Chakhsu Lau 回复
  8. TimeM

    礼貌回访,赞

    TimeM 回复
    1. Chakhsu Lau

      谢谢 :)

      Chakhsu Lau 回复
  9. 小残

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

    小残 回复
    1. 小残博客

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

      小残博客 回复
      1. Chakhsu Lau

        可以的,大兄弟 :)

        Chakhsu Lau 回复
  10. Xavier

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

    Xavier 回复
    1. Chakhsu Lau

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

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

      Chakhsu Lau 回复
发表新评论