如何优化 CSS 交付？

Question

我在 Google 页面速度上测试了我的网站，发现我需要优化我的 css 文件。 但在 Google 文档中只回复小 css 文件。

这是我测试网站时出现的消息：

优化以下 CSS 交付：

http://www.example.com/css/style.css
http://www.example.com/css/reset.css
http://www.example.com/css/social.css
http://www.example.com/css/comments.css
http://www.example.com/css/widgets.css
http://www.example.com/css/jquery.tweet.css
http://www.example.com/css/superfish.css
http://www.example.com/js/prettyPhoto/css/prettyPhoto.css
http://www.example.com/…ytip-1.1/src/tip-twitter/tip-twitter.css
http://www.example.com/…rc/tip-yellowsimple/tip-yellowsimple.css
http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300
http://www.example.com/css/flexslider.css
http://www.example.com/css/lessframework.css
http://www.example.com/css/skin.css

有人可以帮助我吗？

Answer 1

可以通过多种方式优化 CSS（和 Javascript）：

• 缩小 - 这会通过删除空格、换行符和其他非功能部分来压缩您的 CSS
• 捆绑 - 这会将几个相关的 CSS 文件合并为一个，从而减少向服务器发出的请求数

更广泛地说，您应该确保您的网络服务器配置为支持网络服务器上的压缩，以及至少为您的静态文件提供基本缓存策略。这些将有助于提高浏览器的效率。