利用pagespeed插件优化网站css层叠样式文件

"不务正业"的google最近发布了pagespeed插件和apache 2专有的mod_pagespeed页面优化模块；pagespeed插件目前仅有firefox版的，该插件要求预安装有Firebug页面debugger插件，你可以通过Tools->Add-ons->Get Add-ons菜单添加Firebug插件，之后 登陆pagespeed在code.google.com的官方页面安装pagespeed插件。 pagespeed插件的使用十分简单，只要在打开你希望优化的页面后，点选Firefox工具栏上的Tools->FireBug->Open Firebug in New Window选项；如我在我的www.oracledatabase12g.com页面上打开Open Firebug in New Window就会出现以窗口: 窗口中显示了pagespeed插件扫描指定页面后发现的有待优化的几个环节，以我的www.oracledatabase12g.com的首页为例，pagespeed认为页面夹带的CSS层叠样式文件存在优化的余地:

Minifying the following CSS resources could reduce their size by 1.8KiB (27% reduction). * Minifying http://www.oracledatabase12g.com/wp-content/themes/openark-blog/style.css could save 1.7KiB (26% reduction). See optimized version or Save as. * Minifying http://www.oracledatabase12g.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70 could save 126B (33% reduction). See optimized version or Save as.

pagespeed发现了一个wordpress主题风格所用的style.css和一个wp-pagenavi插件所用的pagenavi-css.css文件，并发现style.css层叠样式文件通过精简可以减少1.7K的身材，同时它居然还给出了一个优化版本的style.css文件:

.clear{clear:both;height:1px;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignleft{float:left;}
.alignright{float:right;}
body{background:#ffffff;font-size:9pt;line-height:1.5;color:#505050;font-family:Verdana, Arial, Helvetica, sans-serif;}
img{border:0px;}
form{display:inline;}
#wrapper{width:90%;text-align:left;}
table{font-family:Arial, Helvetica, sans-serif !important;font-size:10pt !important;}
table.mos{border-bottom-width:1px;border-left-width:1px;border-bottom-style:solid;border-left-style:solid;border-bottom-color:#c4d1e6;border-left-color:#c4d1e6;}
td.mos{font-family:Arial, Helvetica, sans-serif;font-size:90%;border-right-width:1px;border-top-width:1px;border-right-style:solid;border-top-style:solid;border-right-color:#c4d1e6;border-top-color:#c4d1e6;padding:4px;vertical-align:top}
td.mos_lite{font-family:Arial, Helvetica, sans-serif;font-size:90%;border-right-width:1px;border-right-style:solid;border-right-color:#c4d1e6;padding:4px;vertical-align:top}
th.mos{font-family:Arial, Helvetica, sans-serif;font-size:90%;border-right-width:1px;border-top-width:1px;border-right-style:solid;border-top-style:solid;border-right-color:#c4d1e6;border-top-color:#c4d1e6;padding:2px;background-color:#dee6ef;font-weight:bold;text-align:left;vertical-align:top}
hd{padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid #e0e0e0;}
#blogtitle h1{display:inline;}
#blogtitle h1 a{color:#f26522;font-size:16pt;text-decoration:none;font-weight:normal;vertical-align:bottom;}
#menu{margin-top:10px;display:inline;float:left;}
#menu ul{list-style:none outside;margin:0px;padding:0px;}
#menu ul li{float:left;}
#menu ul li a{font-size:10pt;padding-left:15px;font-weight:bold;text-decoration:none;color:#505050;margin-left:15px;border-left:1px solid #e0e0e0;}
#menu ul li a:hover{color:#f26522;}
#blogdescription{font-family:"Courier New", Courier, monospace;font-size:10pt;color:#0000FF;font-weight:bold;}
#sitemeta{float:right;font-size:10px;}
#sitemeta ul{list-style:none;display:inline;}
#sitemeta li{float:left;margin:0 0 0 10px;}
#sitemeta a{color:#252525;}
#sitemeta a:hover{color:#f26522;}
#meta li.rss{padding:0 0 0 15px;background:url(images/rss-icon.gif) no-repeat left center;}
#newsflash{float:right;margin:0px 20px 0px 20px;}
#newsflash a{color:#f26522;}
#bd{margin:0px 230px 0px 0px;color:#505050;}
#sidebar{font-size:8pt;width:200px;float:right;color:#606060;padding-left:10px;border-left:1px solid #e0e0e0;}
#sidebar ul{list-style:none outside;margin:0px;padding:0px;}
#sidebar ul li{display:inline;}
#sidebar ul li ul{list-style:none outside;margin-top:4px;margin-bottom:10px;margin-left:5px;}
li.vategories ul{list-style:none outside;margin-top:10px;margin-bottom:10px;}
#sidebar ul li ul li{margin-top:4px;display:block;}
#sidebar a{color:#505050;text-decoration:none;}
#sidebar a:hover{color:#f26522;}
#sidebar h2{font-size:12pt;font-weight:bold;text-decoration:none;display:inline;}
#aboutme a{color:#f26522;text-decoration:none;}
.post-wrap{margin-left:0px;padding-bottom:10px;border-bottom:1px solid #e0e0e0;margin-bottom:20px;}
#commentwrap{margin-left:0px;}
#respond{padding-top:10px;}
#yui-main a{color:#f26522;text-decoration:none;}
#yui-main h1{display:inline;color:#f26522;font-size:14pt;text-decoration:none;font-weight:normal;}
#yui-main h1 a{color:#505050;text-decoration:none;}
#yui-main h1 a:hover{color:#f26522;}
#yui-main h2{display:inline;color:#f26522;font-size:14pt;text-decoration:none;font-weight:normal;}
#yui-main h2 a{color:#505050;font-size:14pt;}
#yui-main h2 a:hover{color:#f26522;}
blockquote{font-family:Arial, Helvetica, sans-serif;font-size:100%;background-color:#FEFCEE;border:2px solid #c1a90d;padding:10px;}
blockquote p{padding:0px;margin:0px;}
pre{font-family:"Courier New",Courier,monospace;background-color:#EEF3F7;overflow:auto;border-width:1px;border-style:solid;border-color:#C4D1E6;padding:0.5em;margin:0px;margin-top:5px;}
cite{font-weight:bold;font-style:normal;margin-left:4px;}
#author, #email, #url, #comment, .s{border:1px solid #bdc1a3;padding:5px;font-size:8pt;background:#ffffff;color:#363636;font-family:Verdana, Arial, Helvetica, sans-serif;}
#author, #email, #url, #comment{padding:5px;}
.authorpost{background:#f0f0f0;padding:10px;margin-bottom:10px;}
.s{padding:3px;}
#submit, #searchsubmit{font-size:8pt;background:#f26522;color:#ffffff;border:1px solid #a0a0a0;}
.searchresults ul{list-style:none;display:inline;}
.categories ul{list-style:none;display:inline;}
.archives ul{list-style:none;display:inline;}
dl, dd, dt{margin:0px;}
#footnote a{color:#f26522;text-decoration:none;}

点选Save as保存该优化过的css样式文件，并上传到服务器上就可以完成对该style.css的优化了。此外pagespeed还建议尽可能将外部css文件合并以获得更佳的性能:

There are 2 CSS files served from www.oracledatabase12g.com. They should be combined into as few files as possible. * http://www.oracledatabase12g.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70 * http://www.oracledatabase12g.com/wp-content/themes/openark-blog/style.css

这对wordpress这类博客软件意义不大，显然上述的2个css文件分属openark-blog主题和pagenavi插件，把他们合并会增大用户定制化的程度，导致后续的更改或升级难以实施。 总的来说pagespeed是一个很不错的页面优化建议插件，实现了一定程度的自动化，有一点Oracle中SQL advisor的味道！