阿里云
发表主题 回复主题
  • 2005阅读
  • 0回复

[教程]OpenResty 设置 ngx_PageSpeed

级别: 论坛版主
发帖
9333
云币
14095
— 本帖被 不靠谱贝贝 设置为精华(2017-08-18) —
IRa*}MJe  
.*"IJD9  
介绍 _Hk`e}}  
w2L)f,X  
H'.eqZM  
像 WP 的 W3TC 插件,除了缓存功能外,还有 js、css 的优化功能,但与其通过 PHP 到 WordPress 再到插件还不如直接在 Web 服务阶段就完成对 js、css 还有图片的处理,这里就介绍一下神器 PageSpeed。 H l@rS  
主要特性:
!ZW0yCwLQ  
图像优化:剥离元数据、动态调整,重新压缩 1S:H!h3  
CSS和JavaScript压缩、合并、级联、内联 B#yyO>0k]  
小资源内联 U"]i.J1  
推迟图像和JavaScript加载 04t_  
对HTML重写、压缩空格、去除注释等 FC#Q tu~J  
提升缓存周期 w5Xdq_e3  
更多
@gOgs  
此页面 可以查看一些重点功能的优化先后表现 /xzL!~g`6<  
OH w6#N$\  
设置 edQ><lz  
VbYapPu4b!  
zqkmsFH{  
我们在安装 OpenResty 的时候就已经把 ngx-pagespeed 搞进去了,所以直接开始这几即可~ t JP(eaqZ  
hCgNS1%4  
缓存文件夹 K0]Wb=v  
<PxEl4  
KVCS(oN  
用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。 N.?Wev{  
例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致: ra1hdf0"  
  1. mkdir /data/ngx_pagespeed/
  2. chown -R www-data /data/ngx_pagespeed/
m 78PQx H  
?0x;L/d])  
配置文件 z$NLFJvy_-  
   'zaB5d~l  
创建一份配置文件,这里放在 vhost 目录下: G r)+O  
  1. cd /usr/local/openresty/nginx/conf/vhost/
!FO)||'[  
创建 pagespeed.conf 文件,内容如下: VWi-)  
  1. # on 启用,off 关闭
  2. pagespeed on;
  3. # 重置 http Vary 头
  4. pagespeed RespectVary on;
  5. # html字符转小写
  6. pagespeed LowercaseHtmlNames on;
  7. # 压缩带 Cache-Control: no-transform 标记的资源
  8. pagespeed DisableRewriteOnNoTransform off;
  9. # 相对URL
  10. pagespeed PreserveUrlRelativity on;
  11. # X-Header 值,用于判断是否生效
  12. pagespeed XHeaderValue "Powered By MF8.BIZ";
  13. # 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
  14. pagespeed FileCachePath "/data/ngx_pagespeed/";
  15. pagespeed FileCacheSizeKb 2048000;
  16. pagespeed FileCacheCleanIntervalMs 43200000;
  17. pagespeed FileCacheInodeLimit 500000;
  18. # 过滤规则
  19. pagespeed RewriteLevel PassThrough;
  20. # 过滤WordPress的后台(可选配置,可参考使用)
  21. pagespeed Disallow "*/wp-admin/*";
  22. pagespeed Disallow "*/wp-login.php*";
  23. # 移除不必要的url前缀,开启可能会导致某些自动加载功能失效
  24. #pagespeed EnableFilters trim_urls;
  25. # 移除 html 空白
  26. pagespeed EnableFilters collapse_whitespace;
  27. # 移除 html 注释
  28. pagespeed EnableFilters remove_comments;
  29. # DNS 预加载
  30. pagespeed EnableFilters insert_dns_prefetch;
  31. # 压缩CSS
  32. pagespeed EnableFilters rewrite_css;
  33. # 合并CSS
  34. pagespeed EnableFilters combine_css;
  35. # 重写CSS,优化加载渲染页面的CSS规则
  36. pagespeed EnableFilters prioritize_critical_css;
  37. # google字体直接写入html 目的是减少浏览器请求和DNS查询
  38. pagespeed EnableFilters inline_google_font_css;
  39. # 压缩js
  40. pagespeed EnableFilters rewrite_javascript;
  41. # 合并js
  42. pagespeed EnableFilters combine_javascript;
  43. # 优化内嵌样式属性
  44. pagespeed EnableFilters rewrite_style_attributes;
  45. # 压缩图片
  46. pagespeed EnableFilters rewrite_images;
  47. # 不加载显示区域以外的图片
  48. pagespeed LazyloadImagesAfterOnload off;
  49. # 图片预加载
  50. pagespeed EnableFilters inline_preview_images;
  51. # 移动端图片自适应重置
  52. pagespeed EnableFilters resize_mobile_images;
  53. # 图片延迟加载
  54. pagespeed EnableFilters lazyload_images;
  55. # 雪碧图片,图标很多的时候很有用
  56. pagespeed EnableFilters sprite_images;
  57. # 扩展缓存 改善页面资源的可缓存性
  58. pagespeed EnableFilters extend_cache;
  59. # 将 meta 转换为 header
  60. location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
  61. location ~ "^/ngx_pagespeed_static/" { }
  62. location ~ "^/ngx_pagespeed_beacon$" { }
  63. location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
  64. location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
qA30G~S  
0U<9=[~q7@  
dj=n1f+;[  
有些选项可能并不适合你的网站,或许会导致网站样式错误能,需要在不必要的配置前面加 # 来关闭功能。 .JqIAC~  
.1@5*xQ5O  
Z& %61jGK  
然后再虚拟子主机配置文件中添加配置文件,以作用于虚拟主机,这里以 /usr/local/openresty/nginx/conf/vhost/www.mf8.biz.conf 为例 +vP1DXtj(  
qv:WC TAn  
}\W3a_,v)  
在 root /data/wwwroot/mf8; 上面添加:   i=ba=-"Mt  
  1. include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
sYz:(hZS  
=k'dbcfO$9  
7Q`4*H6  
小片段例子: Lv_>cFJ}[  
  1. index index.html index.htm index.php;
  2.   include /usr/local/openresty/nginx/conf/rewrite/wordpress.conf;
  3.   include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
  4.   root /data/wwwroot/mf8;
w*+rBp,f  
然后重启 OpenResty: C8?/$1|RL  
mUjA9[@   
  1. nginx -s reload
<AVpFy  
再看看网站源代码,是不是大变样了~ ZA!vxQ?P,  
&~j"3G;e  
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个