css - 如何优化 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 文件合并为一个文件，从而减少对服务器的请求数量

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