zoukankan      html  css  js  c++  java
  • 利用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就会出现以窗口: firebug-pagespeed-diaglog 窗口中显示了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{90%;text-align:left;}
    table{font-family:Arial, Helvetica, sans-serif !important;font-size:10pt !important;}
    table.mos{border-bottom-1px;border-left-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-1px;border-top-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-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-1px;border-top-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;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-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的味道!
  • 相关阅读:
    this指向问题
    b继承a的函数
    如何解决跨域问题
    事件冒泡和阻止事件冒泡
    Spring5(二)——IOC
    MySQL基础(四)——
    MySQL基础(二)——常用命令
    MySQL基础(一)——入门
    Linux(二)——常用命令
    Linux(一)——简介
  • 原文地址:https://www.cnblogs.com/macleanoracle/p/2967580.html
Copyright © 2011-2022 走看看