我想知道如何优化CSS文件以实现更快的加载速度。目前我的CSS文件大约有2400行，大小为54kb。其中没有任何图形元素超过4kb，因此我认为CSS是导致我的网站渲染/加载缓慢的原因。
这只是主要的CSS文件，在一些页面上，我正在加载其他CSS文件。
这只是主要的CSS文件，在一些页面上，我正在加载其他CSS文件。
如何优化CSS文件以提高速度
8
- ProDraz
5
154k很小。您可以通过压缩器运行CSS，这将节省一些空间。但是，如果您遇到加载缓慢的问题-您的CSS表格的大小不是问题所在。另一方面，这是很多规则，应用的规则数量可能会延长页面呈现时间。 - Bosworth99
根据你的规则设计而定。看起来你创建规则的方式非常低效，但是如果没有一些例子，我们无法判断。 - Sirko
我可能会被视为亵渎神明的人，但是2400行CSS听起来有点过度。你是否使用Sprites来减少页面加载时上传的图像数量？[http://spriteme.org/] 你是否考虑过将CSS层次结构化，以便在50个不同的类中不浪费代码应用相同的样式50次？总的来说，这听起来像是一个代码审查问题。 - Duke Hall
例如，对于电子商务网站来说，2400行并不算过多。示例中，Magento的默认样式表就有2000个单行规则。话虽如此，效率很可能是罪魁祸首。 - Bosworth99
我四处搜索并找到了一个新工具CSSBurner（http://www.cssburner.com），它可以定位冗余/重复的选择器和规则以及所有其他可以删除或减少的CSS类型。我能够从我的CSS文件中删除数十kB。 - The One and Only ChemistryBlob
10个回答
13
这是很多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快捷方式的好文章。
CSS最小化工具是有用的工具，但我不确定它们能否将您的代码重新排列成快捷方式格式。
- Surreal Dreams
2
我仅通过这样做就获得了1秒12秒的平均时间，而且大约有600行代码被删除了:D明天我还会尝试使用一些工具... - ProDraz
太好了，很高兴这对你有帮助。使用这种技术的另一个好处是代码可读性较高，尽管它可能是手动的。缩小后的代码可能难以阅读。 - Surreal Dreams
5
您可以使用以下工具来压缩CSS代码：
CSSMin http://code.google.com/p/cssmin Minify 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
CSSMin http://code.google.com/p/cssmin Minify 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
- Andriy Budzinskyy
2
尝试压缩你的css文件
此外，您还应该注意不要反复编写相同的代码，并针对经常使用的内容使用类。
如果您有像
#content{
border-radius:5px;
}
#nav{
border-radius:5px;
}
所以你应该使用类似以下的内容：
.borderAll{
border-radius:5px;
}
并将这些类添加到您的div中
其他可以做的事情包括：
- 使用精灵图像：
“CSS Sprites是减少图像请求的首选方法。将背景图像合并成单个图像，并使用CSS background-image和background-position属性显示所需的图像段。”- Yahoo Developer Rule
- 始终将CSS文件放置在标头顶部
“在研究雅虎的性能时，我们发现将样式表移动到文档HEAD使页面看起来加载更快。这是因为将样式表放在HEAD中允许页面逐步呈现。”
- 使用Link而不是@import
- 减少换行符
删除最后一个分号
h2 {font-family:Arial; font-color:#333} 更好的写法： h2 {font-family:Arial; font-color:#333}
使用简单颜色：
使用#FFF代替#FFFFFF，使用#ABC代替#AABBCC
- 使用CSS快捷方式：
http://cssdog.com/css_shortcuts.html
- mas-designs
1
这是正确的方向。但是，如果你过度使用它（例如一个有十几个规则的元素），那么在标记中实现会导致过于复杂的类应用。 - Bosworth99
2
你有压缩文件吗？http://www.minifycss.com/css-compressor/
我不会认为2400行CSS太多了。所以也许速度问题是其他的原因？在浏览器中安装Web开发者插件，查看加载了多少资源。
尝试将图像合并成精灵，使用SmushIt压缩图像，并对CSS/JS进行压缩。
- Stanley
2
在压缩CSS文件的基础上，您应该考虑将CSS文件拆分为多个文件。 如果您有特定的类仅在特定页面中使用，则应该为该特定页面有一个CSS文件，它不会在任何其他地方加载。
您还应确保正确继承样式项，以便不必一遍又一遍地重新编写相同的元素。
- Patrick
1
1这听起来像是一种反模式...下载所有小的CSS文件将比使用合并的文件花费更长时间，即使其中一些样式不被使用。如果您真的想要优化，那么将站点特定的样式放入
<style></style>标记是一种方法（但后期维护困难）。 - tomasz862
如果网站加载缓慢，我怀疑一个54K的CSS文件不是你的最大问题。实际上，这并不算太大，而且一旦用户加载过一次，浏览器就会将其缓存，因此不会导致页面加载缓慢。你是否使用过任何工具来分析你网站上每个资源的加载时间？检查Firebug中的网络面板；如果有任何外部资源被引用，你可能会遇到来自外部站点的缓慢响应，从而降低你自己站点的速度。
话虽如此，如果你仍然希望加快加载速度，你仍然可以从压缩CSS文件中受益。谷歌搜索“压缩CSS”以获取大量关于这个主题的良好资源，包括可下载和在线工具，用于创建样式表的压缩版本 :) 祝你好运！
话虽如此，如果你仍然希望加快加载速度，你仍然可以从压缩CSS文件中受益。谷歌搜索“压缩CSS”以获取大量关于这个主题的良好资源，包括可下载和在线工具，用于创建样式表的压缩版本 :) 祝你好运！
- Dave McHale
0
我知道这个问题已经得到了很多答案，但是我使用了一个小技巧（需要启用JavaScript），它似乎非常有效 - 即使对于像Chrome这样尽快渲染页面的浏览器。
如果您的压缩和优化文件仍然太慢，这可能会起作用。
通常，许多CSS用于交互式内容，例如:hover、:focus等。这些样式不需要立即加载，您可以在页面完全加载后再加载它们。
因此，我建议将所有:hover和:focus样式或仅用于通过交互可见的任何类样式移动到单独的CSS文件中。然后在JavaScript（Jquery示例）中完全呈现主要HTML内容后加载此单独文件：
$(document).ready(function ()
{
//Render Interactive CSS:
var Link = document.createElement('link'); Link.rel = 'stylesheet';
Link.href = '[Relative Interactive CSS File URL]';
var Head = document.getElementsByTagName('head')[0];
Head.parentNode.insertBefore(Link, Head);
}
参考这个指南： https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
对我来说，即使是小的Interactive.css文件，这也带来了实质性的改进。
希望这能有所帮助！
- Robert
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接