html - HTML 5 网页加载缓慢如何提高性能

Question

我有网页，它的性能非常好，加载图像和其他东西需要很长时间。如何提高加载性能。

Answer 1

这是一个模糊的问题，但可以给出一些一般性建议。

• 首先通过http://gtmetrix.com/之类的工具运行您的网站，该工具使用 Yahoo 的 YSlow 和自定义验证引擎来提供建议。您将从 GT Metrix 获得的建议将涵盖 95% 以上的最常见 Web 最佳实践。（不附属；只是真的很喜欢他们的工具）。

• 如果您的网站不公开，您可以使用 Chrome 的开发人员工具（运行审核以获得整个页面的性能建议列表，以及 JS 和 CSS 解释时间——非常有用）。

• 使用http://validator.w3.org验证您的文档是否存在错误。即使您的网站不是公开的，您也可以将源代码作为文本粘贴到验证器引擎中。

• 如果图像是您主要关心的问题，请使用延迟加载技术仅加载可见内容，例如用于图像的 jQuery 延迟加载器。为 Web 图像使用正确的大小/格式。使用http://www.smushit.com/ysmush.it/之类的工具来压缩图像。

一般页面性能因素

来自 YSlow，按字母顺序

• 添加过期标头
• 避免使用 AlphaImageLoader 过滤器
• 避免 CSS 表达式
• 避免空 src 或 href
• 避免 HTTP 404（未找到）错误
• 避免 URL 重定向
• 使用 gzip 压缩组件
• 配置实体标签 (ETags)
• 不要在 HTML 中缩放图像
• 使 AJAX 可缓存
• 使网站图标小且可缓存
• 减少 HTTP 请求
• 使 JavaScript 和 CSS 外部化
• 缩小 JavaScript 和 CSS
• 将 CSS 放在顶部
• 将 JavaScript 放在底部
• 减小 cookie 大小
• 减少 DNS 查找
• 减少 DOM 元素的数量
• 删除重复的 JavaScript 和 CSS
• 使用内容交付网络 (CDN)
• 使用无 cookie 域
• 将 GET 用于 AJAX 请求