Nginx ·

Nginx搭配google之pagespeed加速你的网站

Page Speed是谷歌提供的一个Web优化工具,它可以对网站的Web服务器配置和前端代码执行若干测试,并提供优化建议。

主要特性包括
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

在此工具的基础上,谷歌针对Apache、nginx服务器提供了一个傻瓜式的优化工具mod_pagespeed、 ngx_pagespeed,这些工具可以自动执行网页优化,比如对网络传输的HTML字节、图像、CSS、JavaScript进行压缩优化等。

Page Speed的项目地址为:https://github.com/pagespeed/ngx_pagespeed

Nginx下载地址: http://nginx.org/download/nginx-1.4.4.tar.gz 当前为稳定版本

如何安装

因为nginx不像apache可以进行动态模块加载,所以必须重新编译才行.但是如果你使用的是Tenginx,则不需要重新编译,直接安装就好了.

1.Install dependencies:

# These are for RedHat, CentOS, and Fedora.
$ sudo yum install gcc-c++ pcre-dev pcre-devel zlib-devel make

# These are for Debian. Ubuntu will be similar.
$ sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev

2.Download ngx_pagespeed:

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

3.Download and build nginx:

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

注意: Nginx目前不支持Windows和MacOS.

如何使用:

1. 打开nginx.conf文件,添加如下信息到http结点中

pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;

2. 在server结点结尾处加上:

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_global_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
location /pagespeed_console { allow 127.0.0.1; deny all; }

3. 启动nginx,打开浏览器访问你的网站看看是不是速度快多了?网站访问的第一次会生成缓存文件至/var/ngx_pagespeed_cache目录,第二次再访问会直接读取缓存文件,所以速度比较快。

4. 告诉一个小窍门,不使用浏览器,直接查看是否生效:
在shell窗口中输入如下命令(网站换成自己的),看看,结果对不对, 如果出现X-Page-Speed,表示安装成功

$ curl -I 'https://www.tojsp.com' | grep X-Page-Speed
X-Page-Speed: 1.7.30.1-...

5. 再告诉你一个更实用的办法,安装pagespeed浏览器插件,直接集成到浏览器中,这样我们在边开发的时候就可以直接进行调整了,真的太方便了,如图所示:

20131223213703

最后分享下本站的配置

pagespeed on;
pagespeed FileCachePath /xdata/server/nginx/pagespeed_cache;
pagespeed RewriteLevel  CoreFilters;
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;
pagespeed EnableFilters rewrite_style_attributes;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters convert_meta_tags;

大家也可以参考下本站的配置,如有不明白的地方,请在下面留言。

参与评论