如何优化CSS文件的速度

Question

我想知道如何优化CSS文件以加快加载速度,目前我的CSS文件是2400行并且大小为54kb.没有任何图形元素比4kb大,所以我相信CSS是reasson我的网站渲染/加载缓慢.

这只是主要的CSS,在某些页面上,我正在加载其他CSS文件.

Answer 1

这是很多CSS.虽然CSS"缩小"工具是一个好主意,但您可能希望手动传递文件并查找可以组合的规则.例如:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;

可以简化为:

margin: 10px 5px 0 5px;

甚至更进一步:

margin: 10px 5px 0;

同样,边界可以减少:

border-width: 2px;
border-color: #123456;
border-style: solid;

这可以表示为:

border: 2px solid #123456;

背景,填充和字体是可以编写的一些其他规则,使得它们更短且更有效.这是一篇关于CSS快捷方式的好文章.

CSS minifiers是有用的工具,但我不确定他们是否能够将代码重新排列为快捷方式格式.

Answer 2

您可以使用以下工具缩小CSS代码:

CSSMin http://code.google.com/p/cssmin

缩小http://code.google.com/p/minify

YUI http://developer.yahoo.com/yui/compressor

CSS Minifier http://www.artofscaling.com/css-minifier

CSS Tidy http://csstidy.sourceforge.net