阿里云
服务器地域选择
发表主题 回复主题
  • 720阅读
  • 0回复

[教程]OpenResty 设置 ngx_PageSpeed

级别: 论坛版主
发帖
9200
云币
13330
— 本帖被 不靠谱贝贝 设置为精华(2017-08-18) —
]s_BOt  
wmv/ ?g  
介绍 $uNYus^vS  
U}`HN*Q.q  
pzBd(d^*  
像 WP 的 W3TC 插件,除了缓存功能外,还有 js、css 的优化功能,但与其通过 PHP 到 WordPress 再到插件还不如直接在 Web 服务阶段就完成对 js、css 还有图片的处理,这里就介绍一下神器 PageSpeed。 g60r m1b  
主要特性:
dJg72?"ka  
图像优化:剥离元数据、动态调整,重新压缩 c/}bx52>u  
CSS和JavaScript压缩、合并、级联、内联 78+PG(Q_M  
小资源内联 [318Q%W&  
推迟图像和JavaScript加载 |N>TPK&Xt  
对HTML重写、压缩空格、去除注释等 C}GOwvAL>  
提升缓存周期 Ih0kd i  
更多
Vz&!N/0i  
此页面 可以查看一些重点功能的优化先后表现 Yf(QU`w_  
rOy-6og  
设置 /e}NZo{)g  
] Vbv64M3  
h=~ TgTv  
我们在安装 OpenResty 的时候就已经把 ngx-pagespeed 搞进去了,所以直接开始这几即可~ ;HeUD5Nt6F  
)W/ mt[;  
缓存文件夹 +K%4jIm  
jsG epi9  
9IC|2w66  
用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。 !8U\GR `  
例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致: 50.cMms  
  1. mkdir /data/ngx_pagespeed/
  2. chown -R www-data /data/ngx_pagespeed/
E(oI0*S.5  
Q=%1@ ,x"  
配置文件 ]I#yS=;  
   ["\Y-6"l  
创建一份配置文件,这里放在 vhost 目录下: bCF"4KXK  
  1. cd /usr/local/openresty/nginx/conf/vhost/
)q\|f_  
创建 pagespeed.conf 文件,内容如下: Z`23z( +  
  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; }
&JM|u ww?1  
;k<g# She  
:Uf\r `a9  
有些选项可能并不适合你的网站,或许会导致网站样式错误能,需要在不必要的配置前面加 # 来关闭功能。 V&E)4KBOs  
bBBW7',[a  
wG4=[d  
然后再虚拟子主机配置文件中添加配置文件,以作用于虚拟主机,这里以 /usr/local/openresty/nginx/conf/vhost/www.mf8.biz.conf 为例 G-[fz  
e`fN+  
#=@( m.k:s  
在 root /data/wwwroot/mf8; 上面添加:   hTZaI*  
  1. include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
8o-*s+EY"&  
6u`E{$  
UUGwXq96i  
小片段例子: rYbb&z!u  
  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;
{%ZD ^YSA  
然后重启 OpenResty: 2XubM+6  
j'#M'W3@  
  1. nginx -s reload
%Ji@\|Zkf  
再看看网站源代码,是不是大变样了~ 8_6\>hW&  
7{ zkqug  
发表主题 回复主题
« 返回列表上一主题下一主题

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