当前位置：css优化：免费让你的站点加载得更快
文章来自:互联网 | 发表时间:2007-9-23 23:00:22
原文见：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文件压缩到最佳状态。
我选择六个测试站点：
许多宽带用户可能不认为这有什么重要，因为大部分网站对他们而言加载得很快。但是如果你去的每个站点的加载速度都能快上10%，想想在一周的时间里它能节约你多少时间，一个月呢？或者一年呢？对于网站经营者而言带宽的节省也同样巨大。我将建议你一直保留一份阅读性好的CSS代码拷贝，这样如果你需要做任何改动它不会耗费你很长时间，然后你可以再次优化它。
结果
我用保持默认设置的工具来运行所有这些测试。这或许不能给它们所有一个相同的地位，但我认为这正是我们大多数人使用它们的情形，因为我们不知道哪个选项打开哪个选项关闭，而且一些工具没有特殊的选项供以打开或关闭。
Digg是第一只豚鼠。在优化Digg.com的主CSS文件之前它的体积是30.56KB，(错误消息就不翻译了，这样看起来更清楚）
Slashdot进来的重新设计使CSS文件体积达到19.1KB大小，CSS优化器仍旧把文件体积做了很大缩减。
下一个是Filmsy，这一个有最小的CSS文件，总共才11.39KB。不过，我们仍完成了将近50%的压缩。
下一个是iBegin Toronto.一个不错的搜索引擎，它的CSS文件是22.79KB大小。
倒数第二个是Download.com. 它设计上向CSS－P的转移制造了很大的响声，我们很有兴趣知道一个大公司能获得多少收益。它的CSS文件大小是54.2KB，测试的所有体积中最大的。
最后一个是ESPN。和Download.com一起，这两个站点是当谈起CSS在大规模网站的生存能力时提起最多的。ESPN的CSS体积是25.68KB。
压缩表
很显然的冠军是Icey’s CSS Compressor，它的气势足以刮走其他选手。它甚至用颜色显示压缩的代码，使我们更容易看出它所做的改变，以及它如何格式化的。它同时使阅读其他大部分工具的输出变得更加便宜。
第二位看起来是CleanCSS，它是基于csstidy 1.1的。它同样语法高亮，这使理解代码更加容易。它也列出了它做的改变，以及它注意到的任何错误。
第三位是CSS Optimizer,它是最简单的一个。它没有前两者的一些功能，但是比起最后一名的 Flumpcakes CSS 来其代码显示好得多。
Flumpcakes比CSS优化器多一些选项，但是它界面没有后者简洁。我设置后，结果页面显示得极其丑陋。它甚至不告诉用以比较的测量单位。
结论
CSS优化是一种不用牺牲太多（仅仅牺牲了可读性）就能加快页面下载的有效方式。对于下载速度3KB/S的拨号用户来说，仅仅节约10KB意味着页面加载快了三分钟。想象一下ESPN节约了将近18KB。把它乘以站点获得的庞大访问，这些是实实在在的提升－－有价值的节约。So while this may not be important whilst you use a broadband connection, just you wait until you go visit your grandparents.（这一句不知道什么意思了）
（译者按：翻译完毕，让我想到前段时间翻译的google deplicated的那篇，国外用户带宽可以说比国内实行得到位多了，很多地方都到了几个G的带宽，但是它们考虑的却是几个K的流量，因为在有一个很大的流量基数下，几K的流量也会变成几百M，乃至几G，这不是耸人听闻。站长们，在四处拉广告，提排行的时候，如果能考虑一下这些很简单但是长远效果会很明显的优化方法那会多好）
（译者按，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改版也是非常瞩目的。
许多宽带用户可能不认为这有什么重要，因为大部分网站对他们而言加载得很快。但是如果你去的每个站点的加载速度都能快上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% |
| Site | After | Reduction |
| CSS Optimizer | 15.01 KB | 21.38% |
| Icey CSS Compressor | 9.68 KB | 49.38% |
| Flumpcakes CSS Optimiser | 16.9 KB | 11% |
| CleanCSS | 15.234 KB | 22.1% |
| Site | After | Reduction |
| CSS Optimizer | 9.25 KB | 18.85% |
| Icey CSS Compressor | 6.03 KB | 47.08% |
| Flumpcakes CSS Optimiser | 9.4 KB | 17% |
| CleanCSS | 8.27 KB | 29.1% |
| Site | After | Reduction |
| CSS Optimizer | 16.17 KB | 29.04% (failed: font-size got larger) |
| Icey CSS Compressor | 10.04 KB | 55.95% |
| Flumpcakes CSS Optimiser | 19.28 KB | 12% (failed: font-size got larger) |
| CleanCSS | 17.134 KB | 26.6% (failed: font-size got larger) |
| Site | After | Reduction |
| CSS Optimizer | 17.36 KB | 32.39% (failed: Fonts and Padding on elements change) |
| Icey CSS Compressor | 54.3 KB | 0% |
| Flumpcakes CSS Optimiser | 20.0 KB | 17% (failed: Fonts and Padding on elements change) |
| CleanCSS | 45.699 KB | 17.8% |
| Site | After | Reduction |
| CSS Optimizer | 17.36 KB | 32.39% (failed: Fonts and Padding on elements change) |
| Icey CSS Compressor | 7.74 KB | 69.84% |
| Flumpcakes CSS Optimiser | 20.0 KB | 17% (failed: Fonts and Padding on elements change) |
| CleanCSS | 18.944 KB | 27.9% |
| Site | CSS Optimiser | Icey Compressor | Flumpcakes | Clean CSS |
| Digg.com | failed | failed | failed | 16.8% |
| Slashdot | 17.45% | 51.21% | 9% | 21.9% |
| Filmsy | 18.85% | 47.08% | 17% | 29.1% |
| iBegin | failed | 55.95% | failed | failed |
| Download.com | failed | 45.49% | 0% | 27.9% |
| ESPN | failed | 69.84% | failed | 27.9% |
| Average: | 18.15% | 53.91% | 8.67% | 24.18% |
第二位看起来是CleanCSS，它是基于csstidy 1.1的。它同样语法高亮，这使理解代码更加容易。它也列出了它做的改变，以及它注意到的任何错误。
第三位是CSS Optimizer,它是最简单的一个。它没有前两者的一些功能，但是比起最后一名的 Flumpcakes CSS 来其代码显示好得多。
Flumpcakes比CSS优化器多一些选项，但是它界面没有后者简洁。我设置后，结果页面显示得极其丑陋。它甚至不告诉用以比较的测量单位。
结论
CSS优化是一种不用牺牲太多（仅仅牺牲了可读性）就能加快页面下载的有效方式。对于下载速度3KB/S的拨号用户来说，仅仅节约10KB意味着页面加载快了三分钟。想象一下ESPN节约了将近18KB。把它乘以站点获得的庞大访问，这些是实实在在的提升－－有价值的节约。So while this may not be important whilst you use a broadband connection, just you wait until you go visit your grandparents.（这一句不知道什么意思了）
（译者按：翻译完毕，让我想到前段时间翻译的google deplicated的那篇，国外用户带宽可以说比国内实行得到位多了，很多地方都到了几个G的带宽，但是它们考虑的却是几个K的流量，因为在有一个很大的流量基数下，几K的流量也会变成几百M，乃至几G，这不是耸人听闻。站长们，在四处拉广告，提排行的时候，如果能考虑一下这些很简单但是长远效果会很明显的优化方法那会多好）
