设为首页 收藏本站
查看: 837|回复: 0

[经验分享] 散尽浮华

[复制链接]

尚未签到

发表于 2017-12-22 18:39:28 | 显示全部楼层 |阅读模式
  ngx_pagespeed是Nginx的一个扩展模块,借助pagespeed,为Nginx网站服务器提速。主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。
  ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。
  ngx_pagespeed模块的主要功能大致有:
  1)图像优化:剥离元数据、动态调整,重新压缩
  2)CSS和JavaScript压缩、合并、级联、内联
  3)小资源内联
  4)推迟图像和JavaScript加载
  5)对HTML重写、压缩空格、去除注释等
  6)提升缓存周期
  作为Nginx组件,ngx_pagespeed将重写你的网页,让用户以更快的速度进行访问。重写的工作包括压缩图片、缩减CSS和JavaScript、扩展缓存时间,同样还包括其它一些最佳实践:
  1)优化缓存----整合应用程序的数据和逻辑
  2)最小化round-trip次数----削减连续的请求/响应周期数
  3)最小化请求开销----削减上传大小
  4)最小化负载大小----削减响应、下载及缓存页面大小
  5)优化浏览器渲染----改善浏览器页面布局
  6)移动方面的优化----优化站点移动网络和设备方面的相关特性
  温馨小提示:
  ngx_pagespeed环境安装:模块是一个开源模块,功能上与mod_pagespeed(Apache前端加速模块)相比稍有欠缺。Github上针对ngx_pagespeed Bugs的反馈更新很频繁,基本上都能很快得到解决,要是部署在生产环境需要谨慎。
  另,系统内GCC版本必须大于4.2。ngx_pagespeed更新频率较高,建议及时更新到最新版本,而且最好先部署在本地环境中,经过一番测试稳定后再上线生产环境。
  PageSpeed旨在缩短网页加载的时间,减少网站服务器的带宽使用量。
  PageSpeed模块可以使用数量众多的重写"过滤器",每个过滤器都可以选择性地开启/关闭,从而自动进行各种优化(比如,减小文档大小、减少HTTP请求数据、减少HTTP往返次数以及缩短DNS解析时间)。
  下面是ngx_pagespeed支持的其中一些过滤器,想了解支持的全部过滤器,请参阅官方文档。
  

1)Collapse Whitespace(压缩空白):通过把HTML网页中的多处连续空白换成一处空白,减少带宽使用量。  
2)Canonicalize JavaScript Libraries(规范化转换JavaScript库):通过自动把流行的JavaScript库换成免费托管的JavaScript库(比如由谷歌托管),减少带宽使用量。
  
3)Combine CSS(合并CSS):通过把多个CSS文件合并成一个CSS文件,减少HTTP请求数量。
  
4)Combine JavaScript(合并JavaScript):通过把多个JavaScript文件合并成一个JavaScript文件,减少HTTP请求数量。
  
5)Elide Attributes(省略属性):通过删除由默认属性指定的标签,缩小文档大小。
  
6)Extend Cache(扩展缓存):通过优化网页资源的可缓存性,减少带宽使用量。
  
7)Flatten CSS Imports(精简CSS导入):通过删除CSS文件中的@import,减少HTTP请求往返次数。
  
8)Lazyload Images(延时加载图片):延时加载在客户端浏览器上看不见的图片。
  
9)Minify JavaScript(缩小JavaScript):通过缩小JavaScript,减少带宽使用量。
  
10)Optimize Images(优化图片):通过引入更多的内嵌图片、压缩图片,或者将GIF图片转换成PNG图片,优化图片分发。
  
11)Pre-Resolve DNS(预解析DNS):通过预解析DNS,缩短DNS解析时间。
  
12)Prioritize Critical CSS(优化加载关键CSS规则):重写CSS文件,以便首先加载渲染页面的CSS规则。
  

  

  与Apache网站服务器不一样,Nginx模块无法在运行时动态加载,而是必须在编译时加载。ngx_pagespeed模块并未内置在随主要Linux发行版(比如Fedora 19)发布的Nginx程序包中,所以说想使用Nginx中的PageSpeed,必须利用源代码来构建Nginx。
  ngx_pagespeed环境安装:(提前yum install gcc-c++ pcre-devel zlib-devel make wget )
  相关包下载地址:https://pan.baidu.com/s/1dFCCleL
  提取密码:h7ku
  

[iyunv@bastion-IDC ~]# cd /usr/local/src/  
[iyunv@bastion-IDC src]# wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.6.29.5-beta.zip

  
[iyunv@bastion-IDC src]# unzip>  
[iyunv@bastion-IDC src]# cd ngx_pagespeed-release-1.6.29.5-beta/
  
[iyunv@bastion-IDC ngx_pagespeed-release-1.6.29.5-beta]# wget https://dl.google.com/dl/page-speed/psol/1.6.29.5.tar.gz
  
[iyunv@bastion-IDC ngx_pagespeed-release-1.6.29.5-beta]# tar -zvxf 1.6.29.5.tar.gz
  

  

  然后重新编译nginx,编译时跟上--add-module= /usr/local/src/ngx_pagespeed-release-1.6.29.5-beta模块参数
  

cd nginx-1.9.7  
./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_ssl_module --with-http_flv_module --with-http_stub_status_module --with-http_gzip_static_module --with-pcre --add-module= /usr/local/src/ngx_pagespeed-release-1.6.29.5-beta
  
make && make install
  

  

  使用ngx_pagespeed
  

# mkdir /var/ngx_pagespeed_cache  
# chown www.www /var/ngx_pagespeed_cache                         //www是nginx服务启动用户
  
# cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.bak
  
# vim  /usr/local/nginx/conf/nginx.conf
  
........
  
server {
  
........
  
# 启用ngx_pagespeed
  
pagespeed on;
  
pagespeed FileCachePath /var/ngx_pagespeed_cache;
  
# 启用CoreFilters
  
pagespeed RewriteLevel CoreFilters;
  
# 禁用CoreFilters中的某些过滤器
  
pagespeed DisableFilters rewrite_images;
  
# 选择性地启用额外的过滤器
  
pagespeed EnableFilters local_storage_cache;
  
pagespeed EnableFilters collapse_whitespace,remove_comments;
  
pagespeed EnableFilters outline_css;
  
pagespeed EnableFilters flatten_css_imports;
  
pagespeed EnableFilters move_css_above_scripts;
  
pagespeed EnableFilters move_css_to_head;
  
pagespeed EnableFilters outline_javascript;
  
pagespeed EnableFilters combine_javascript;
  
pagespeed EnableFilters combine_css;
  
pagespeed EnableFilters rewrite_javascript;
  
pagespeed EnableFilters rewrite_css,sprite_images;
  
pagespeed EnableFilters rewrite_style_attributes;
  
pagespeed EnableFilters recompress_images;
  
pagespeed EnableFilters resize_images;
  
pagespeed EnableFilters convert_meta_tags;
  
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
  
location ~ "^/ngx_pagespeed_static/" { }
  
location ~ "^/ngx_pagespeed_beacon$" { }
  
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
  
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
  
.......
  
}
  
# /usr/local/nginx/sbin/nginx -t
  
# /usr/local/nginx/sbin/nginx
  

  

  可以参阅官方文档CoreFilters中的过滤器。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.iyunv.com/thread-426934-1-1.html 上篇帖子: Nginx的安装(笔记) 下篇帖子: Nginx配置之负载均衡、限流、缓存、黑名单和灰度发布
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表