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头 阿里云