"不务正业"的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的味道!

转载于:https://www.cnblogs.com/macleanoracle/archive/2010/11/05/2967580.html

利用pagespeed插件优化网站css层叠样式文件相关推荐

  1. 【HTML+CSS】CSS初始化样式文件

    [HTML+CSS]CSS初始化样式文件 不同的浏览器对有些标签的默认值是不一样的,为了消除不用浏览器对HTML文件呈现的差异,照顾浏览器的兼容性,我们需要进行CSS初始化.一般情况下,我们会专门准备 ...

  2. html,css维护优化,网站CSS代码优化的7个原则

    作为网页设计师或前端工程师,你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速 ...

  3. css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源

    每篇文章纯属个人经验观点,如有错误疏漏欢迎指正   因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...

  4. webpack5-打包css等样式资源,css等样式文件提取,css等样式文件压缩

    打包css资源 加载css资源需要安装style-loader,css-loader库 配置如下: module: {rules: [// 在rules中写详细的loader配置// 打包css资源{ ...

  5. vue项目html引入css,vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入 在ma ...

  6. css公用样式文件,CSS公用样式.doc

    CSS公用样式 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, ...

  7. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  8. css层叠样式的使用,CSS层叠样式表——使用CSS样式的方法

    使用CSS样式的方式 1  HTML 声明标签 1.1  定义和用法 声明必须是HTML文档的第一行,位于标签之前. 声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指 ...

  9. C# .net 利用NPOI插件导出类似简历的word文件

    最近业务有个需求需要导出类似简历的word文件,因为原项目已经用NPOI做了excel的导出,所以干脆用这个继续做word的生成和导出,网站资料实在太少了,通过各种东拼西凑终于做出来一般还比较满意的, ...

最新文章

  1. Ubuntu18.04中pyhton默认版本从2.7换为3.x
  2. 为什么说无人出租车关乎特斯拉和Uber的生死存亡
  3. YUV 后面数字的含义_高速公路标示牌上的字母和数字,到底什么意思?很多人都不知道...
  4. Java vs Kotlin,Android开发人员应该选择哪种语言?
  5. 使用开源项目的正确姿势,都是血和泪的总结!
  6. golang 结构体断言_Golang中的reflect原理
  7. 【数据结构和算法笔记】数组(数组的储存方式和特殊矩阵的压缩储存)
  8. 深入理解Javascript之this关键字
  9. Factory Method (工厂方法)
  10. java 语言的介绍
  11. 比较简单的单间租房协议!
  12. 【论文笔记】 Synthesizing Robust Adversarial Examples
  13. 启动springboot报错:程序包org.springframework.boot不存在
  14. C语言 crc32校验算法原理,CRC循环冗余校验的实现原理
  15. 台式计算机怎么进入bios,小编告诉大家hp台式机怎么进bios
  16. HTML5视频播放器jQuery插件
  17. [量子计算]一种金融衍生品的蒙特卡洛定价量子算法。(Quantum algorithm for the Monte Carlo pricing of financial derivatives.)
  18. HDFS 数据块损坏
  19. E.04.08 They Survived Taiwan’s Train Crash. Their Loved Ones Did Not.
  20. ubantu安装网易云

热门文章

  1. 如何用“向上管理”搞垮一个团队?
  2. 快、准、狠!秒杀Excel的报表工具,十分钟教你做好数据填报
  3. web报表工具FineReport的SQL编辑框的语法简介
  4. 如何将js加入到HTML中
  5. 摩擦力特点用计算机绘制出,AGC液压缸模拟工况摩擦力特性测试方法研究
  6. python打开快捷方式_Python打开一个JAR快捷方式
  7. matlab百分制到5分制的转换,绩点换算百分制(绩点5分制百分对照表)
  8. mysql如何查看dbid_如何获得数据库的DBID
  9. 【TensorFlow-windows】(零)TensorFlow的安装
  10. 【caffe-windows】 caffe-master 之 matlab接口配置