【问题标题】:How optimize css delivery?如何优化 CSS 交付?
【发布时间】:2015-04-08 18:19:20
【问题描述】:

我在 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

有人可以帮助我吗?

【问题讨论】:

  • 最小化它们,如果可以的话将它们组合起来,从 CDN 提供它们,设置未来的到期日期

标签: css optimization pagespeed google-pagespeed


【解决方案1】:

可以通过多种方式优化 CSS(和 Javascript):

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

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

【讨论】:

  • 你认为最好的是什么?
  • 以上所有,但它们可以一次实现一个。服务器配置将为您带来最大的好处,压缩将有助于 CSS、JS、JSON、XML、HTML 和其他基于文本的资源。发送静态内容的缓存标头将为您的用户带来不错的速度提升。接下来可能会缩小您的 CSS 和 Javascript——如果您使用构建系统,您可以将其添加为构建步骤。最后可能是捆绑,但这只是因为很难做到正确 - 棘手的部分是弄清楚哪些资源通常一起使用,然后将它们组合起来。
猜你喜欢
  • 2013-10-22
  • 1970-01-01
  • 2014-10-25
  • 2013-10-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-31
  • 1970-01-01
相关资源
最近更新 更多