利用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层叠样式文件相关推荐
- 【HTML+CSS】CSS初始化样式文件
[HTML+CSS]CSS初始化样式文件 不同的浏览器对有些标签的默认值是不一样的,为了消除不用浏览器对HTML文件呈现的差异,照顾浏览器的兼容性,我们需要进行CSS初始化.一般情况下,我们会专门准备 ...
- html,css维护优化,网站CSS代码优化的7个原则
作为网页设计师或前端工程师,你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速 ...
- css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
- webpack5-打包css等样式资源,css等样式文件提取,css等样式文件压缩
打包css资源 加载css资源需要安装style-loader,css-loader库 配置如下: module: {rules: [// 在rules中写详细的loader配置// 打包css资源{ ...
- vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入 在ma ...
- css公用样式文件,CSS公用样式.doc
CSS公用样式 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, ...
- CSS层叠样式选择器归纳
常用选择器 1.1 类型选择器:用来寻找特定类型的元素 标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...
- css层叠样式的使用,CSS层叠样式表——使用CSS样式的方法
使用CSS样式的方式 1 HTML 声明标签 1.1 定义和用法 声明必须是HTML文档的第一行,位于标签之前. 声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指 ...
- C# .net 利用NPOI插件导出类似简历的word文件
最近业务有个需求需要导出类似简历的word文件,因为原项目已经用NPOI做了excel的导出,所以干脆用这个继续做word的生成和导出,网站资料实在太少了,通过各种东拼西凑终于做出来一般还比较满意的, ...
最新文章
- Ubuntu18.04中pyhton默认版本从2.7换为3.x
- 为什么说无人出租车关乎特斯拉和Uber的生死存亡
- YUV 后面数字的含义_高速公路标示牌上的字母和数字,到底什么意思?很多人都不知道...
- Java vs Kotlin,Android开发人员应该选择哪种语言?
- 使用开源项目的正确姿势,都是血和泪的总结!
- golang 结构体断言_Golang中的reflect原理
- 【数据结构和算法笔记】数组(数组的储存方式和特殊矩阵的压缩储存)
- 深入理解Javascript之this关键字
- Factory Method (工厂方法)
- java 语言的介绍
- 比较简单的单间租房协议!
- 【论文笔记】 Synthesizing Robust Adversarial Examples
- 启动springboot报错:程序包org.springframework.boot不存在
- C语言 crc32校验算法原理,CRC循环冗余校验的实现原理
- 台式计算机怎么进入bios,小编告诉大家hp台式机怎么进bios
- HTML5视频播放器jQuery插件
- [量子计算]一种金融衍生品的蒙特卡洛定价量子算法。(Quantum algorithm for the Monte Carlo pricing of financial derivatives.)
- HDFS 数据块损坏
- E.04.08 They Survived Taiwan’s Train Crash. Their Loved Ones Did Not.
- ubantu安装网易云
热门文章
- 如何用“向上管理”搞垮一个团队?
- 快、准、狠!秒杀Excel的报表工具,十分钟教你做好数据填报
- web报表工具FineReport的SQL编辑框的语法简介
- 如何将js加入到HTML中
- 摩擦力特点用计算机绘制出,AGC液压缸模拟工况摩擦力特性测试方法研究
- python打开快捷方式_Python打开一个JAR快捷方式
- matlab百分制到5分制的转换,绩点换算百分制(绩点5分制百分对照表)
- mysql如何查看dbid_如何获得数据库的DBID
- 【TensorFlow-windows】(零)TensorFlow的安装
- 【caffe-windows】 caffe-master 之 matlab接口配置