阿里云
社区时光机
发表主题 回复主题
  • 1424阅读
  • 0回复

[教程]OpenResty 设置 ngx_PageSpeed

级别: 论坛版主
发帖
9289
云币
14032
— 本帖被 不靠谱贝贝 设置为精华(2017-08-18) —
(jRm[7H  
|8l<$J  
介绍 < (fRn`)PT  
7>))D'l57  
($;77fPR  
像 WP 的 W3TC 插件,除了缓存功能外,还有 js、css 的优化功能,但与其通过 PHP 到 WordPress 再到插件还不如直接在 Web 服务阶段就完成对 js、css 还有图片的处理,这里就介绍一下神器 PageSpeed。 &-Gqdnc  
主要特性:
L>aLqQ3  
图像优化:剥离元数据、动态调整,重新压缩 .yqM7U_  
CSS和JavaScript压缩、合并、级联、内联 q=Sgk>NA  
小资源内联 yy i#Mo ,  
推迟图像和JavaScript加载 Q/(K$6]j  
对HTML重写、压缩空格、去除注释等 2q=AEv/  
提升缓存周期 26I_YL,S  
更多
Uyg5i[&X@  
此页面 可以查看一些重点功能的优化先后表现 JP!~,mdS  
2a`o &S  
设置 %\dz m-d(C  
:~tAUy":_*  
H Y&DmE  
我们在安装 OpenResty 的时候就已经把 ngx-pagespeed 搞进去了,所以直接开始这几即可~ 9.gXzP H  
:OhHb #D  
缓存文件夹 qG?Qc (  
7byK{{/z  
i1NY9br  
用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。 g(qJN<R C/  
例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致: 75f"'nJ)  
  1. mkdir /data/ngx_pagespeed/
  2. chown -R www-data /data/ngx_pagespeed/
5HkKurab  
}Qn&^[[miL  
配置文件 )NXmn95  
   S1Wj8P-  
创建一份配置文件,这里放在 vhost 目录下: bpJ(XN}E  
  1. cd /usr/local/openresty/nginx/conf/vhost/
&_dt>.  
创建 pagespeed.conf 文件,内容如下: t{^*6XOcJ  
  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; }
N kb|Fd/s  
>z{d0{\  
B%)%  
有些选项可能并不适合你的网站,或许会导致网站样式错误能,需要在不必要的配置前面加 # 来关闭功能。 m? J0i>H  
|:q=T ~x  
7~^GA.92  
然后再虚拟子主机配置文件中添加配置文件,以作用于虚拟主机,这里以 /usr/local/openresty/nginx/conf/vhost/www.mf8.biz.conf 为例 %Gz0^[+  
R_W+Ylob  
U@_dm/;0&  
在 root /data/wwwroot/mf8; 上面添加:   %GjM(;Tk  
  1. include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
5[k/s}g  
z&#SPH*  
;4R$g5-4X  
小片段例子: vM*-D{  
  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;
]HKQDc'  
然后重启 OpenResty: fHE <(  
C%$edEi  
  1. nginx -s reload
\HxT@UQ)~  
再看看网站源代码,是不是大变样了~ #^l L5=  
>kj`7GA  
发表主题 回复主题
« 返回列表上一主题下一主题

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