Blog

Blog

PHODAL

Nginx ngx_pagespeed nginx前端优化模块编译

偶然间在网上发现这样一个扩展,用于对前端页面而进行服务器端的优化。

Ngx_pagespeed 简介

关于Nginx Pagespeed

ngx_pagespeed speeds up your site and reduces page load time by automatically applying web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring you to modify your existing content or workflow. Features include:

  • Image optimization: stripping meta-data, dynamic resizing, recompression
  • CSS & JavaScript minification, concatenation, inlining, and outlining
  • Small resource inlining
  • Deferring image and JavaScript loading
  • HTML rewriting
  • Cache lifetime extension
  • and more

ngx_pagespeed 是 Nginx 的一个扩展模块,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。

主要功能包含:

  • 图像优化:剥离元数据、动态调整,重新压缩
  • CSS和JavaScript压缩、合并、级联、内联
  • 小资源内联
  • 推迟图像和JavaScript加载
  • 对HTML重写、压缩空格、去除注释等
  • 提升缓存周期
  • 以及其他config_filters

Ngx_pagespeed编译

默认的CentOS似乎包含了某些依赖。没有的话。。

一、 安装Ngx_pagespeed依赖

对于CentOS来说

 sudo yum install gcc-c++ pcre-dev pcre-devel zlib-devel make

pcre和必须的,如果没有装的话,你可能会在编译的时候遇到问题,参见下面的编译选项

Ubuntu的话应该是

  sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev

二、编译Ngx_pagespeed

下载Ngx_pagespeed

一开始没按照官方写的文档,于是就报错了。

ngx_pagespeed: pagespeed optimization library not found:

 You need to separately download the pagespeed library:

 $ cd /path/to/ngx_pagespeed
 $ wget https://dl.google.com/dl/page-speed/psol/1.7.30.3.tar.gz
 $ tar -xzvf 1.7.30.3.tar.gz # expands to psol/

Or see the installation instructions: https://github.com/pagespeed/ngx_pagespeed#how-to-build

正确的步骤应该是


    $ cd ~
    $ wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.7.30.4-beta.zip
    $ unzip v1.7.30.4-beta.zip # or unzip v1.7.30.4-beta
    $ cd ngx_pagespeed-1.7.30.4-beta/
    $ wget https://dl.google.com/dl/page-speed/psol/1.7.30.4.tar.gz
    $ tar -xzvf 1.7.30.4.tar.gz # expands to psol/

编译Nginx

官方的步骤如下:

$ cd ~
$ # check http://nginx.org/en/download.html for the latest version
$ wget http://nginx.org/download/nginx-1.6.0.tar.gz
$ tar -xvzf nginx-1.6.0.tar.gz
$ cd nginx-1.6.0/
$ ./configure --add-module=$HOME/ngx_pagespeed-1.7.30.4-beta
$ make
$ sudo make install

但是这个是我的步骤及编译选项

$ cd ~
$ wget http://nginx.org/download/nginx-1.7.0.tar.gz
$ tar -xvzf nginx-1.7.0.tar.gz
$ cd nginx-1.7.0/
$./configure --user=www --group=www --add-module=../nginx-static-etags --add-module=../ngx_pagespeed-1.7.30.4-beta --prefix=/usr/local/nginx --with-pcre --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6
$ make
$ sudo make install

感觉似乎添加的选项比较多,然后我们可以用nginx -V来查看是否编译成功。

查看nginx详细配置

[root@CentOS62 conf]# nginx -V
nginx version: nginx/1.7.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC)
TLS SNI support enabled
configure arguments: --user=www --group=www --add-module=../nginx-static-etags --add-module=../ngx_pagespeed-1.7.30.3-beta --prefix=/usr/local/nginx --with-pcre --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6

查看是否编译成功

直接打开网站看js和css是否有类似于下面带有pagespeed之类的。

jquery.js,qver=1.11.0.pagespeed.jm.ocognCjcS2.js

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

InfoQ社区编辑,CSDN前端博客专家

毕业于西安文理学院电子信息工程专业

长期活跃于开源软件社区 GitHub,专注于物联网和前端领域。

著有《自己动手设计物联网》(电子工业出版社)、曾作为技术专家审阅英国 Packt 出版社的物联网书籍《Learning IoT》、《Smart IoT》等书。

在 GitHub 开源有《Growth:全栈增长工程师指南》等六本电子书,并译有《物联网实战指南》。

联系我: h@phodal.com

标签

最近的一些事