阿里云
云栖大会资料下载
发表主题 回复主题
  • 996阅读
  • 0回复

[教程]OpenResty 设置 ngx_PageSpeed

级别: 论坛版主
发帖
9236
云币
13485
— 本帖被 不靠谱贝贝 设置为精华(2017-08-18) —
}k`-n32)|  
3!&PI  
介绍 eplz5%<  
Rr9K1io$)  
,t2yw  
像 WP 的 W3TC 插件,除了缓存功能外,还有 js、css 的优化功能,但与其通过 PHP 到 WordPress 再到插件还不如直接在 Web 服务阶段就完成对 js、css 还有图片的处理,这里就介绍一下神器 PageSpeed。 \o&\r)FX  
主要特性:
e(5 :XHe  
图像优化:剥离元数据、动态调整,重新压缩 2/T4.[`t  
CSS和JavaScript压缩、合并、级联、内联 y4V~fg;  
小资源内联 i42M.M6D$  
推迟图像和JavaScript加载 U #u=9%'  
对HTML重写、压缩空格、去除注释等 a5)<roWQ  
提升缓存周期 JlM0]__v  
更多
MRI`h.  
此页面 可以查看一些重点功能的优化先后表现  1\[En/6  
3@t&5UjwQ  
设置 Ih&rXQ$  
E`"<t:RzF  
Ojh\H  
我们在安装 OpenResty 的时候就已经把 ngx-pagespeed 搞进去了,所以直接开始这几即可~ q_hkI]  
tK|jh  
缓存文件夹 ZFJ qI  
DE$HF*WY  
rt _k }  
用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。 Q^B !^_M  
例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致: _gLj(<^9  
  1. mkdir /data/ngx_pagespeed/
  2. chown -R www-data /data/ngx_pagespeed/
r Ljb'\<*  
l{2Y[&%  
配置文件 bzl-|+!yB  
   qwERy{]Sp;  
创建一份配置文件,这里放在 vhost 目录下: }.L\O]~{  
  1. cd /usr/local/openresty/nginx/conf/vhost/
h@^d Vg  
创建 pagespeed.conf 文件,内容如下: oB$P6   
  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; }
l2&s4ERqSm  
$*KM%M6  
THOXs; k0  
有些选项可能并不适合你的网站,或许会导致网站样式错误能,需要在不必要的配置前面加 # 来关闭功能。 ::lD7@Wg  
77]6_  
LdPA`oI3j  
然后再虚拟子主机配置文件中添加配置文件,以作用于虚拟主机,这里以 /usr/local/openresty/nginx/conf/vhost/www.mf8.biz.conf 为例 Wv4x^nJ  
vg.K-"yQW  
R)>F*GsR  
在 root /data/wwwroot/mf8; 上面添加:   Uyuvmt>  
  1. include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
.#4;em%7  
L] syD n  
$YPU(y  
小片段例子: GY~Q) Z  
  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;
o)M=; !  
然后重启 OpenResty: kf Xg\6uKc  
ag7(nn0!  
  1. nginx -s reload
1p|h\H  
再看看网站源代码,是不是大变样了~ Za>0&Fnf  
z0v|%&IK  
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: 81 - 79 = ?
上一个 下一个