css优化:免费让你的站点加载得更快

来源:网络整理 责任编辑:栏目编辑 发表时间:2013-07-01 20:08 点击:

原文见:http://www.bloggingpro.com/archives/2006/08/17/css-optimization/

(译者按,css优化的确是个不容忽视的站点优化策略,好的优化策略会使站点在访问者失去等待耐心之前就加载进来,站点加载的8秒原则是不容忽视的,希望各位看官引以为戒,我就用其中的cleancss优化了一下,效果虽然不太明显,但是看它的优化策略的确很不错)

当很多人设法优化他们的站点或博客的时候,看起来大部分人都忽略了CSS。

我今天花费了一些时间看CSS优化工具。我需要一些免费的、在线的和易于使用的工具。当然,它们要奏效才行。实际上有相当多网站满足条件,它们中的一些使用起来更方便、能生成更友好的代码,同时另外一些则使用起来麻烦一点,但是可以生成令人吃惊的结果。

我测试了CSS Optimizer, Icey’s CSS Compressor, Flumpcakes CSS Optimiser, 和CleanCSS,从这里可以看出谁可以把一些受欢迎站点的CSS文件压缩到最佳状态。

我选择六个测试站点:

  • Digg.com - web 2.0时代的poster boy, 主页面设计得很不错.
  • Slashdot - ‘昨天’的poster boy. 转移到css阵营相对较晚,但仍迎来了不少pageview.
  • Filmsy - BloggyNetwork的blog部分,我认为它设计得很不错
  • iBegin - 我在多伦多使用过的不错的本地搜索引擎
  • Download.com - CSS应用最受欢迎的站点之一
  • ESPN - 一个完全非科技的统计,它的CSS改版也是非常瞩目的。

CSS优化器施了大量伏都教的魔法来达到他们的最终结果,这包括合并相似类、删除无用的属性、删除空格等等。这能导致你或我难以阅读代码,但是对于更大的CSS文件,它可以大量压缩它的体积以致页面加载速度上有了很大的影响。

许多宽带用户可能不认为这有什么重要,因为大部分网站对他们而言加载得很快。但是如果你去的每个站点的加载速度都能快上10%,想想在一周的时间里它能节约你多少时间,一个月呢?或者一年呢?对于网站经营者而言带宽的节省也同样巨大。我将建议你一直保留一份阅读性好的CSS代码拷贝,这样如果你需要做任何改动它不会耗费你很长时间,然后你可以再次优化它。

结果

我用保持默认设置的工具来运行所有这些测试。这或许不能给它们所有一个相同的地位,但我认为这正是我们大多数人使用它们的情形,因为我们不知道哪个选项打开哪个选项关闭,而且一些工具没有特殊的选项供以打开或关闭。

Digg是第一只豚鼠。在优化Digg.com的主CSS文件之前它的体积是30.56KB,(错误消息就不翻译了,这样看起来更清楚)

Site After Reduction
CSS Optimizer 25.74 KB 9.89% (failed: moves Popular stories and upcoming stories tabs next to Technology header and messes up Digg Home button)
Icey CSS Compressor 16.69 KB 45.39% (failed: changes padding/margins on some items. Spaces things out more)
Flumpcakes CSS Optimiser 28.26 KB 5% (failed: Messes up Digg Home button)
CleanCSS 26.038 KB 16.8%

Slashdot进来的重新设计使CSS文件体积达到19.1KB大小,CSS优化器仍旧把文件体积做了很大缩减。

Site
    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • 扎实基础 9则css网页制作技巧
    • CSS设计符合Web标准的网页表单的几个技巧
    • 技巧:css星级效果总结
    • 用CSS建设网站的实例(9)
    • 提高网站性能:JavaScript+CSS优化的建议(3)
    • CSS制作网页实例:用CSS控制li标记样式
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1