专栏首页散尽浮华ngx_pagespeed-nginx前端优化模块介绍

ngx_pagespeed-nginx前端优化模块介绍

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

[root@bastion-IDC ~]# cd /usr/local/src/
[root@bastion-IDC src]# wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.6.29.5-beta.zip
[root@bastion-IDC src]# unzip release-1.6.29.5-beta.zip 
[root@bastion-IDC src]# cd ngx_pagespeed-release-1.6.29.5-beta/
[root@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
[root@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中的过滤器。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • linux下sendmail邮件系统安装操作记录

    电子邮件系统的组成: 1)邮件用户代理(Mail User Agent , MUA),MUA是一个邮件系统的客户端程序,它提供了阅读,发送和接受电子邮件的用户接...

    洗尽了浮华
  • Tomcat利用MSM实现Session共享方案解说

    Session共享有多种解决方法,常用的有四种: 1)客户端Cookie保存 2)服务器间Session同步 3)使用集群管理Session(如MSM) 4)...

    洗尽了浮华
  • Redis哨兵模式(sentinel)集群方案部署记录

    洗尽了浮华
  • 实测Nginx服务器开启pagespeed加速效果

    上周有一个站长问到我一个问题,问 fastcgi_cache 和 pagespeed 加速有没有冲突。略微想了下,2 个都是比较原生的主,应该不存在兼容问题。 ...

    张戈
  • 如何在CentOS 7上将ngx_pagespeed添加到Nginx

    ngx_pagespeed,或者pagespeed,是一个Nginx模块,旨在通过精简资源的规模来缩短客户端浏览器加载它所需的时间,从而自动优化您的网站。如果您...

    angel_郁
  • 如何在Ubuntu 14.04上将ngx_pagespeed添加到Nginx

    ngx_pagespeed,或者只是pagespeed,是一个Nginx模块,旨在通过减少资源的大小以及客户端浏览器加载它所需的时间来自动优化您的网站。如果您还...

    挺问中原
  • 应用负载均衡之LVS(一):基本概念和三种模式

    本文目录: 1. LVS简介 2. LVS-ipvs三种模式的工作原理  2.1 VS/NAT模式  2.2 VS/TUN模式  2.3 VS/DR模式  2....

    致码DevOps
  • 仅需两步实现内网端口映射

    昨天做好了https的连接,从智能音箱开发者后台配置了请求地址。一切ok,但是通过服务器调试仍然很麻烦。开发完成部署到服务器。开发者后台测试,失败。反复来搞太麻...

    CainGao
  • PHP 使用 Redis

    开始在 PHP 中使用 Redis 前, 需要确保已经安装了 redis 服务及 PHP redis 驱动,且你的机器上能正常使用 PHP。

    阳光岛主
  • Visual Studio 2008 每日提示(十九)

    #181、按Ctrl+Shift+F12 在错误列表查看下一个错误记录 原文链接:You can use Ctrl+Shift+F12 to view the...

    Jianbo

扫码关注云+社区

领取腾讯云代金券