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 pagespeedhttp://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_pagespeedpagespeed on;pagespeed FileCachePath /tmp/ngx_pagespeed_cache;# 禁用CoreFilterspagespeed 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头 阿里云