Google Pagespeed，自动压缩优化JS/CSS/Image

Google Pagespeed，自动压缩优化JS/CSS/Image

 
浏览：257 发布日期：2015/07/05 分类：技术分享 关键字： Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image
这个周末，把服务器的Nginx升级了下，并加入了Google Pagespeed模块
效果很明显：
页面加载的多个JS、CSS会自动合并压缩处理
发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库，如jQuery
发现新版本的lazyload_images处理的很好

注意：CSS代码里含有背景图片这类的，要注意下图片的路径改为绝对路径，否则会导致图片引用部分404错误

具体请参考：https://developers.google.com/speed/pagespeed/

我的安装体验过程记录如下给大家分享：

(1)检查下NGINX是否有modules目录，没有则创建下
# mkdir /usr/local/nginx/modules

(2) 下载和解压缩
# cd /usr/local/src

# NPS_VERSION=1.9.32.4

# wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip
# unzip release-${NPS_VERSION}-beta.zip
# cp -a ngx_pagespeed-release-${NPS_VERSION}-beta /usr/local/nginx/modules/
# rm -rf release-${NPS_VERSION}-beta.zip
# rm -rf ngx_pagespeed-release-${NPS_VERSION}-beta

# cd /usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta/
# wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
# tar -xzvf ${NPS_VERSION}.tar.gz # extracts to psol/

(3)重新编译 Nginx with support for pagespeed
http://nginx.org/en/download.html
注意：如果已安装Nginx请使用升级脚本（修改增加配置选项）来重新升级编译NGINX

# cd /usr/local/src
# NGINX_VERSION=1.8.0

# wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
# tar -xvzf nginx-${NGINX_VERSION}.tar.gz
# cd nginx-${NGINX_VERSION}/
# ./configure --add-module=/usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta
# make
# make install

确认下ngx_pagespeed模块已添加到安装的Nginx系统上
# /usr/local/nginx/sbin/nginx -V

(4)创建将由Nginx写入的一个文件缓存目录

$ mkdir /tmp/ngx_pagespeed_cache
$ chown www:www /tmp/ngx_pagespeed_cache
注意：可以将缓存目录的创建及清除工作交个启动任务脚本

(5)修改配置Nginx中的ngx_pagespeed模块
想启用并配置ngx_pagespeed，就要编辑Nginx配置的server部分。


下面是我网站的配置，请参考
common_pagespeed.conf文件是独立文件，在需要开启pagespeed服务的虚拟主机文件中加载此文件（请加载在php rewrite配置之前）
------------------------------------
conf/common_pagespeed.conf;
------------------------------------
# 启用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/ngx_pagespeed_cache;
# 禁用CoreFilters
pagespeed RewriteLevel PassThrough;
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace;
# 启用JavaScript库卸载
pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多个CSS文件合并成一个CSS文件
pagespeed EnableFilters combine_css;
# 把多个JavaScript文件合并成一个JavaScript文件
pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 改善资源的可缓存性
#pagespeed EnableFilters extend_cache;
# 更换被导入文件的@import，精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延时加载客户端看不见的图片
pagespeed EnableFilters lazyload_images;
# 启用JavaScript缩小机制
pagespeed EnableFilters rewrite_javascript;
# 启用图片优化机制
#pagespeed EnableFilters rewrite_images;
# 预解析DNS查询
pagespeed EnableFilters insert_dns_prefetch;
# 重写CSS，首先加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;

# And no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" "";}
location ~ "^/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; }
location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }
# Add no rewrite if you site set rewrite 
if ($request_uri ~ "(pagespeed_([^.]+)/(.*)?)") { break; }
if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }


注意：ThinkPHP如果启用了rewrite，需要排除下Google Pagespeed 特殊的请求路径
我在测试时，发现开启图片延时加载时，有很多图区启用延迟加载后请求会报404错误，发现请求都被转发交给ThinkPHP处理啦，
解决方式如下在server{rewrite}脚本转发之前添加如下代码，我的一并放入conf/common_pagespeed.conf文件;

if ($request_uri ~ "(pagespeed_([^.]+)/(.*)?)") { break; }
if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }

注意：如果使用了TP官方麦当苗儿Thinkbox这个JQ插件
你会发现，JS报错，请前端工程师排查了下发现是经过pagespeed自动压缩合并后，includeCss这个机制的问题，前端适当重写了下就OK啦
前端还同时改写了他base.js库，注意js中的命名污染及变量范围，我们网站有几个专题页面，启用后发现JS报错，未启用前OK，最后基本都是这个原因



优化效果如下
自动处理页面加载的CSS文件，这个机制很赞，多个重用度高的外联CSS文件都被合并压缩了，重用度很低的文件直接添加到了html的header头



 
阿里云