html - 我应该预加载折叠上方的大图像吗？

Question

我对 rel="preload" 属性感到很兴奋，因为它看起来可以帮助加快页面呈现时间。

用例是一个网页，首屏有一张大图片。现在，Chrome 直到获取 jQuery(一个相当大的文件)后才开始下载图像。启用预加载后，它们会并行下载。

但我正在阅读相互矛盾的报告，关于我是否应该对其他地方可见 HTML 元素中的内容(而不是通过用户交互显示的内容，如下拉菜单)使用 preload。

This post似乎建议不要预加载:

When not to use preloading:

• When the asset is referred to somewhere else on the same page.
• When you're not sure the user will actually require that asset. Like on a page visitors only go to 3% of the time.

同时 this one似乎表明它对金融时报网站上的类似情况确实有帮助:

When the Financial Times introduced a Link preload header to their site, they shaved 1 second off the time it took to display the masthead image...

那是什么？我是否应该提供一个早期的“提示”来显示始终显示的首屏图像？或者我应该让浏览器按通常的顺序访问它吗？

Answer 1

我认为在涉及性能优化的情况下，你真的很想create an A/B test来确定你应该做哪一个。对于作为最佳实践适用于每个人的图像预加载，确实没有千篇一律的答案。

我最喜欢的一本书的最大原则之一，Lean Enterprise , 用于 A/B 测试来证明或反驳 HIPPO(高薪人士的意见)。某些意见在您的组织和互联网上都具有很大的分量。由于他们的重要性和声誉，他们的观点倾向于事实领域，尽管事实可能并非如此。

凭经验衡量性能的做法也被另一本我喜欢的关于性能调优的书所吹捧 - Code Complete 2nd Ed.在那本书中，McConnell 给出了几个代码示例，其中您期望一段代码是最佳的，但实际上它的性能很差(参见第 25 和 26 章)。他的要点之一是您应该始终测试性能优化。 如果不值得测试，那么一开始就不值得编写“高性能”代码。 McConnell 的前提不仅适用于他的低级编码示例，还适用于高级决策，例如在首屏预加载图像。

我还可以证明 A/B 测试在专业水平上的重要性。我曾经在亚马逊的 SEO 团队工作，我们对所有内容都进行了 A/B 测试。事实上，您永远无法真正了解客户对某事的 react 。没有人可以预测客户行为 - 甚至 Jeff Bezos 也不行 - 你确实需要用真实数据来支持你的假设，以证明或反驳你正在做的事情的有效性。

即使您可以找到多篇博客文章和在线资源来讨论预加载是否更好，但在您完成之前，您并不知道它是否适合您。不同的人拥有不同的服务器，这些服务器具有不同的性能特征和不同的网络拓扑等。在您拥有数据之前，您根本不知道哪种方式更适合您。。如果您启动 A/B 测试并发现您的排斥率在预加载时上升，那么您知道您必须拨回您的处理并返回到您的控制。但是，如果您发现客户不会厌倦等待并以比以前更高的速度点击通过，那么您就有了赢家，您可以拨通治疗方案 - 在一段时间后完全删除控制代码。

希望对您有所帮助。