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

[教程]OpenResty 设置 ngx_PageSpeed

级别: 论坛版主
发帖
9194
云币
13322
— 本帖被 不靠谱贝贝 设置为精华(2017-08-18) —
uiPfAPZ  
WENPS*0oS]  
介绍 'k{pWfn=<  
A"2k,{d  
1|q$Wn:*  
像 WP 的 W3TC 插件,除了缓存功能外,还有 js、css 的优化功能,但与其通过 PHP 到 WordPress 再到插件还不如直接在 Web 服务阶段就完成对 js、css 还有图片的处理,这里就介绍一下神器 PageSpeed。 NoV)}fX$X8  
主要特性:
R'uM7,7  
图像优化:剥离元数据、动态调整,重新压缩 G= !Gy.  
CSS和JavaScript压缩、合并、级联、内联 J-au{eP^  
小资源内联 w|O MT>.  
推迟图像和JavaScript加载 B|/=E470G  
对HTML重写、压缩空格、去除注释等 9EIHcUXe  
提升缓存周期 Y?{L:4cRX  
更多
`lRZQ:27X  
此页面 可以查看一些重点功能的优化先后表现  ?; ZTJ  
Rjqeuyj:  
设置 2E9Cp  
`$ql>k-6C  
BlF>TI%2  
我们在安装 OpenResty 的时候就已经把 ngx-pagespeed 搞进去了,所以直接开始这几即可~ kXFgvIpg<  
Jlj=FA`  
缓存文件夹 A36dj  
@{ _[bKg  
sk5h_[tK  
用户存放 PageSpeed 优化图片、JS、CSS等文件后的临时文件,很多教程都选择挂载在 /var目录下,如果是一些云服务器,我倒是建议放在挂载磁盘的目录下。 p-POg%|&<  
例如我的服务器将云盘挂载在 /data 目录下,那么,创建缓存文件,chown —R 给予的权限和 Nginx 的用户一致: 6}qp;mR E]  
  1. mkdir /data/ngx_pagespeed/
  2. chown -R www-data /data/ngx_pagespeed/
ODyK/Q3  
R4.$9_ ui  
配置文件 E:a_f!  
   8J-$+ ;  
创建一份配置文件,这里放在 vhost 目录下: rvgArFf}]  
  1. cd /usr/local/openresty/nginx/conf/vhost/
t :B~P,r  
创建 pagespeed.conf 文件,内容如下: oJE~dY$Q  
  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; }
9+k7x,  
Q x}\[  
se(ZiyHp  
有些选项可能并不适合你的网站,或许会导致网站样式错误能,需要在不必要的配置前面加 # 来关闭功能。 DgQw`D)+  
vPz$jeA  
`O4Ysk72x9  
然后再虚拟子主机配置文件中添加配置文件,以作用于虚拟主机,这里以 /usr/local/openresty/nginx/conf/vhost/www.mf8.biz.conf 为例 Wnm?a!j5  
8h  
:y^0]In  
在 root /data/wwwroot/mf8; 上面添加:   96x$Xl;  
  1. include /usr/local/openresty/nginx/conf/vhost/pagespeed.conf;
@0H}U$l  
SEu1M}+E  
n]c6nX:'  
小片段例子: Gw%P5 r}Y  
  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;
s$Z zS2d  
然后重启 OpenResty: {=};<;_F  
nQm7At  
  1. nginx -s reload
jYE<d&Cq  
再看看网站源代码,是不是大变样了~ mhU ?N  
fl%X>\i/7  
发表主题 回复主题
« 返回列表上一主题下一主题

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