用 Page Speed 检测多余的 CSS

  加速 Wordpress 对我来说是永恒的主题,今天又找到一个可以帮助 Wordpress 提速的小工具——Firefox 插件 Page Speed。试用了一下,感觉很不错,立马拿出来分享一下。

  如果你的主题和我一样不是亲手一笔一划写出来,而是套用别的主题修改的话,那样式表里难免会残留一些多余的 CSS,积少则成多,臃肿的 CSS 久而久之会拖慢 Wordpress 的加载速度。所以我们需要做的就是清理掉那些多余的 CSS。清理多余的 CSS 一点也不难,但是很麻烦很耗时,为了提升 Wordpress 的速度我之前不惜耗费大量的时间比对样式表和 Html 中的选择器来剔除多余的 CSS,难免还会漏掉一二。

  今天我推荐的这个 Page Speed 插件就完全可以替你自动甄别多余的 CSS,可以从下面的截图看出,Page Speed 和 Yslow 一样,也是基于 Firebug 的插件,而与 Yslow 各有所长,结合实用效果更佳。

Page Speed

  以上这张截图是 Page Speed 根据当前页面判定出多余的 CSS 的选择器和所在行数,只需删除即可。再看看下面这张清理 CSS 后的截图:

  可以看到红圈圈的 "Remove unused CSS" 一项已经从刚才的三角警告标志变成了绿色通过标志。于是乎我就轻轻松松给 CSS 减肥了,再也不用像以前逐个比对那样费时费力。

  Page Speed 有很多提速选项,给 CSS 减肥只是其中一项。总的来说,Page Speed 比 Yslow 更细致,而且不只是像 Yslow 分析原因,更是给出了解决方案,很容易上手。

  点此进入 Page Speed 插件下载页面

  10.03 Update: 感谢 zwwooooo 和 whisperer 的友情提醒,因为大多数博客全站就只有一个 style.css,不像我给每个不同页面的样式都独立开来了,而 Paged Speed 只是针对当前页面排除多余的 CSS,所以会将其他页面需要用的 CSS 误杀,还是要有选择的删除,Paged Speed 仅作为辅助工具,不可完全用它来代劳,建议有 CSS 基础的朋友使用,另外修改前记得备份。

本文已盖 87 层楼

  1. 回复 流年 说:

    很容易误杀滴,不怎么了解的慎用

  2. 回复 pazz7ven 说:

    好东西 我也在用firebug 不过只是稍微看看代码 Page Speed 可以自动检测 似乎明白了

  3. 回复 海马 说:

    大侠!用 Page Speed或者 Dust-Me Selectors 检测出来的多余css很多,如何批量删除啊? 找了很久都没有删除选项!!!!

    • 回复 万戈 说:

      首先,千万不要乱删哟,因为可能是其他页面需要的CSS
      我不知道你的CSS程度如何,所以建议先备份再清理
      至于批量删除这两个工具是做不到的

      • 回复 海马 说:

        回复这么快 大侠果然不凡 教个方法吧 找了一天了 一千多行没用的 怎么删那!!!!! 好像有css报表的Microsoft Expression Web也不能批量删除!!! 困扰!!!

        • 回复 万戈 说:

          :mrgreen: 呵呵,大侠不敢当呀,因为有邮件通知,知道你留言嘛
          工具只能作提示的作用,提示需要清理的CSS每句都需要自己判断过是否真的多余,所以根本不可能批量删除
          另外,一千多行样式,可以猜到你的网站很丰富呀,呵呵

          • 回复 海马 说:

            就是有点懒!!哈哈 现在只能用对比去删了 好像还稍微快点 其实既然能判断那些没用 加个批量删除不是问题 提前复制个留着 而后批量一删 多。。。。。。。爽!!!!

  4. 回复 孕妇网 说:

    就是嘛~~我的网站只有一个CSS,没办法搞,只能几个核心页面测试下,把相同的结果删除掉~~

  5. 回复 cat3 说:

    这样在有些情况是不行的,比如写了一些重用性很高的CSS,在当前页面没有用到,但在其它页面是用到的,如果删掉,对当前页面是没什么影响,但涉及到的其它页面,就会乱了。

  6. 回复 Mr.Sam 说:

    能挑出来然后去除,好强大啊。要了。 :grin:

  7. 回复 countmeon 说:

    这个我很喜欢,我的风格是很简单啦,不过CSS还有很多重复的地方这下可以瘦瘦身了

  8. 回复 阿修 说:

    不能用,怕误删……我用的这个主题CSS嵌套太多了。

  9. 没那时间去搞这些- -

  10. 回复 exia 说:

    只要按照要求做,就不会误删了吧

  11. :smile: 不知道效果怎样啊。。。弄一个试试,嘿嘿

  12. 回复 菠萝 说:

    很好的插件,试试。

  13. 这个好像不错,有时间试试

  14. 看来,这个可能拿来试一下,你的CSS有11K,8K

  15. 虽然现在的带宽足够了。但是css减肥还是必需得。

  16. 回复 华晨 说:

    自己写的代码一般自己能找出来,不过别人的代码这东西真有用了

  17. 回复 林木木 说:

    很有可能删错的哟~某一页面调用的CSS代码并不代表全部CSS内的代码,所以看完整检测多余的CSS代码也需要不少时间~

    另外吼一句,厦门回来啦~~~

    • 回复 万戈 说:

      厦门回来就忘记啦,我的CSS可是按需调用的哟,按需的!每个页面都是独享一个专用CSS的,所以对我来说不会有删错的可能,哇哈哈哈

  18. 回复 随影 说:

    基本上 冗余的css样式 应该不会占很多字节吧,可以适量的压缩下

  19. 回复 章鱼 说:

    你这小子 越来越牛逼了 :cool:

  20. 回复 无解... 说:

    好东西,拿来用用~

  21. 写的不详细啊 没写出从哪进入 只出现了几张看不懂的英文图片

  22. 回复 江流 说:

    但是我不用ff 可以用么

  23. 回复 JuJue 说:

    这个要试, 谢谢了.

    然后默默滴祝你中秋快乐 :twisted:

  24. 回复 aisinvon 说:

    我感觉自己写的css也有很多废的,但不知道怎么去除冗余

  25. 回复 浩子 说:

    呵呵
    我还以为是在线检测的呢
    我还说给我博客也弄弄……

  26. 回复 超人 说:

    万哥中秋节快乐啊~ :lol:

  27. 回复 伊香 说:

    又淘到好东西了, 偶也去试试~~、
    不小心点到你的播放器,发现有几首歌曲我boke上也有 HOHO~~

    • 回复 万戈 说:

      呵呵,有同样的爱好呀,我喜欢的歌本来就不多,真巧呀

      • 回复 伊香 说:

        我的耳朵不挑剔只要是动听的都喜欢。 我发现在商场试听后买的CD大多是会很走红的歌曲,而在这之前我连歌星是谁都不知道0.0,之后的几天就会在电视音乐频道或者FM101.7听到推荐该歌曲... 从校园时代至今已经有过N次巧合了=.=

  28. 回复 铵铵 说:

    中秋快乐,谢谢楼主分享经验.

  29. 回复 小明猪 说:

    过来支持~今天中秋哦,中秋快乐喔~~ :wink:

  30. 拿回去试着优化看看,不会造成页面混乱的现象吧? :razz:

  31. 回去我也试一下

  32. 回复 大剑 说:

    今天中秋节,大剑祝您及您的家人节日快乐,身体健康,万事如意!

  33. 回复 365hope 说:

    这个方法倒是不错滴~~~
    这个插件 Page Speed 只能在 FF 下才能使用啊。如果也能在 IE7 下使用就太好不过了,因为绝大多数人还是使用的 IE 啊。

  34. 回复 keelii 说:

    刚要写新主题的样式,正用上了哈。

  35. 回复 kangzj 说:

    万戈同学是加速狂人啊

  36. 回复 BestDong 说:

    这个我还是慎用吧 不敢乱删 看不懂css :arrow:

  37. 回复 whisperer 说:

    不错的插件~~

    不过我有一个疑问,因为我们每个页面都不可能用到所有的css,那么当前页面没有用到的css是不是就被认为是多余的css呢?
    这样一来每个页面多余的css都不一样,而且很有可能是其他页面必须的,会不会被误杀?

    • 回复 万戈 说:

      这个是我没说清楚,抱歉了,因为我每个页面都是单独的CSS,所以没有考虑到你说的问题,如果一些样式是控制其他页面的,那就不能删咯

  38. 很好,这个东西。

  39. 回复 kevinsnow 说:

    等我學了點CSS再說
    現在還是小白一個

  40. 回复 小y 说:

    下载试试。。上FF看看我的站。。

  41. 回复 zwwooooo 说:

    看起来不错啊,我都是手动删除,虽然css全部都是自己修改+加上的,总是会有遗漏

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析