it-swarm.cn

减少带宽(以及页面加载时间)的有效方法?

在减少网站呈现页面所需的带宽量方面,最有效的方法是什么?

积极的缓存?缩小JS/CSS? gzip的? CMS?精灵?

12
Mark Henderson

任何网站都可以轻松实现一些基本方法:

  • 如果发出请求的浏览器支持,请使用deflategzip压缩HTML,CSS和Javascript。
  • Google Closure编译器 缩小你的javascript
  • YUI压缩器 缩小你的css

更多参与:

  • 如果页面或图像不太可能更改,请告知浏览器将其缓存。大多数Web服务器已经为静态文件执行此操作,因此您应该尽可能将其添加到动态脚本中。
  • 将CSS和JS文件自动合并为一个。这是有利的,因为它减少了HTTP请求(具有开销和某些愚蠢的浏览器 - 并且我的意思是Internet Explorer - 默认限制每个域一次2个请求)。
  • 将静态文件(CSS,JS,图像等)移动到单独的域名。这会导致不在HTTP请求中发送cookie信息。
  • 使用自动生成的精灵。 Sprite是包含多个图标或其他小图像的单个图像;然后选择要使用CSS background属性显示的图像。 实施例

    优点是客户端减少了HTTP请求(具有开销)。

我自动加粗了,因为如果你手动做这些事情那么它绝对不值得,它会让代码维护成为一场噩梦。通常自动执行就意味着编写一个自定义脚本,这就是为什么它“更多涉及”,

10
Thomas Bonini

谷歌已经概述并解释了他们的最佳建议 最小化有效载荷大小 。它们包括以下技术:

  1. 启用压缩
  2. 删除未使用的CSS
  3. 缩小JavaScript
  4. 缩小CSS
  5. 缩小HTML
  6. 推迟加载JavaScript
  7. 优化图像
  8. 提供缩放图像
  9. 从一致的URL提供资源

这些建议是他们的开源Firefox/Firebug附加项目的一部分,名为 Page Speed 。类似于Yahoo!的 YSlow 插件。实际的Page Speed插件将检查比列表详细解释的更多优化。还提供了使用页面速度的说明。

雅虎的 加速你的网站的最佳实践 确定一组类似的最佳实践:

  1. 最小化HTTP请求
  2. 使用内容分发网络
  3. 添加Expires或Cache-Control标头
  4. Gzip组件
  5. 将样式表放在顶部
  6. 把脚本放在底部
  7. 避免使用CSS表达式
  8. 使JavaScript和CSS外部
  9. 减少DNS查找
  10. ...

(雅虎的名单长约35项,无需全部引​​用。)

YSlow (图像链接)和 页面速度 (图像链接)将允许您在您的页面上运行测试,建议您可以做的事情并向您展示他们的建议,已经实施。

5
Bryson