我应该预加载折叠上方的大图像吗？
Should I preload a large image that's above the fold?
我对 rel="preload" 属性 感到很兴奋，因为它看起来可以帮助加快页面呈现时间。
用例是一个网页，首屏有一张大图片。现在，Chrome 直到获取 jQuery（一个相当大的文件）后才开始下载图像。启用预加载后，它们会并行下载。
但我正在阅读相互矛盾的报告，关于我是否应该将 preload 用于其他地方可见 HTML 元素的内容（而不是通过用户交互显示的内容，例如下拉菜单） ).
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...
那是哪一个？我是否应该提前提供 "hint" 来显示始终显示的首屏图像？或者我应该让浏览器按照通常的顺序访问它吗？
只有在 css、javascript 中找到图像时，我才会对图像使用 rel="preload"，这将导致页面渲染出现瓶颈稍后，如果用户驱动的事件将请求图像，这会对用户体验产生不利影响，或者如果您在页面呈现过程中遇到由于此大图像而导致的任何流程。
我知道你的图片在首屏，如果从一开始就在源代码中找到它，我会让浏览器优先下载什么。
另一方面，您可以随时 A/B 此更改并查看它是否适合您。
我认为在涉及性能优化的情况下，您确实需要create an A/B test来确定您应该做哪一个。对于作为最佳实践适用于每个人的图像预加载，确实没有千篇一律的答案。
我最喜欢的一本书 Lean Enterprise 的最大原则之一是使用 A/B 测试来证明或反驳 HIPPO（高薪人士的意见）。某些意见在您的组织和互联网上都具有很大的分量。由于他们的重要性和声誉，他们的观点倾向于事实，尽管事实可能并非如此。
根据经验衡量性能的做法也被我喜欢的另一本书吹捧，该书涉及性能调优 - Code Complete 2nd Ed.在那本书中，McConnell 给出了几个代码示例，您可能希望其中一段代码是最佳的，但实际上表现不佳（见第 25 和 26 章）。他的要点之一是您应该始终测试性能优化。 如果不值得测试，那么一开始就不值得写"highly performant"代码。 McConnell 的前提不仅适用于他的低级编码示例，还适用于高级决策，例如在首屏预加载图像。
我也可以证明 A/B 专业水平测试的重要性。我曾经在亚马逊的 SEO 团队工作，我们 A/B 测试了所有内容。事实上，您永远无法真正了解客户对某事的反应。没有人可以预测客户行为 - 甚至 Jeff Bezos 也不行 - 你确实需要用真实数据来支持你的假设，以证明或反驳你正在做的事情的有效性。
即使您可以找到多篇博客文章和在线资源来讨论预加载是否更好，但在您完成之前您并不知道它是否适合您。不同的人有不同的服务器，具有不同的性能特征和不同的网络拓扑等。在您拥有数据之前，您只是不知道哪种方式更适合您您。如果您启动 A/B 测试并发现您的排斥率在预加载时上升，那么您知道您必须拨回您的治疗和 return 到您的控制。但是，如果您发现客户不会厌倦等待并以比以前更高的速度点击通过，那么您就有了赢家并且您拨通了治疗 - 在一段时间后完全删除控制代码。
希望对您有所帮助。
这篇文章关于这些陈述是错误的。开发人员使用预加载是因为他已经知道页面上需要这些资产。预加载不是 "hint"。预取更符合他的说法，您是在告诉浏览器可能需要该资产。
如果图像在首屏，那么您就知道需要它，而这正是预取的目的。
preload is a declarative fetch, allowing you to force the browser to
make a request for a resource without blocking the document’s onload
event.
我对 rel="preload" 属性 感到很兴奋，因为它看起来可以帮助加快页面呈现时间。
用例是一个网页，首屏有一张大图片。现在，Chrome 直到获取 jQuery（一个相当大的文件）后才开始下载图像。启用预加载后，它们会并行下载。
但我正在阅读相互矛盾的报告，关于我是否应该将 preload 用于其他地方可见 HTML 元素的内容（而不是通过用户交互显示的内容，例如下拉菜单） ).
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...
那是哪一个？我是否应该提前提供 "hint" 来显示始终显示的首屏图像？或者我应该让浏览器按照通常的顺序访问它吗？
只有在 css、javascript 中找到图像时，我才会对图像使用 rel="preload"，这将导致页面渲染出现瓶颈稍后，如果用户驱动的事件将请求图像，这会对用户体验产生不利影响，或者如果您在页面呈现过程中遇到由于此大图像而导致的任何流程。
我知道你的图片在首屏，如果从一开始就在源代码中找到它，我会让浏览器优先下载什么。 另一方面，您可以随时 A/B 此更改并查看它是否适合您。
我认为在涉及性能优化的情况下，您确实需要create an A/B test来确定您应该做哪一个。对于作为最佳实践适用于每个人的图像预加载，确实没有千篇一律的答案。
我最喜欢的一本书 Lean Enterprise 的最大原则之一是使用 A/B 测试来证明或反驳 HIPPO（高薪人士的意见）。某些意见在您的组织和互联网上都具有很大的分量。由于他们的重要性和声誉，他们的观点倾向于事实，尽管事实可能并非如此。
根据经验衡量性能的做法也被我喜欢的另一本书吹捧，该书涉及性能调优 - Code Complete 2nd Ed.在那本书中，McConnell 给出了几个代码示例，您可能希望其中一段代码是最佳的，但实际上表现不佳（见第 25 和 26 章）。他的要点之一是您应该始终测试性能优化。 如果不值得测试，那么一开始就不值得写"highly performant"代码。 McConnell 的前提不仅适用于他的低级编码示例，还适用于高级决策，例如在首屏预加载图像。
我也可以证明 A/B 专业水平测试的重要性。我曾经在亚马逊的 SEO 团队工作，我们 A/B 测试了所有内容。事实上，您永远无法真正了解客户对某事的反应。没有人可以预测客户行为 - 甚至 Jeff Bezos 也不行 - 你确实需要用真实数据来支持你的假设，以证明或反驳你正在做的事情的有效性。
即使您可以找到多篇博客文章和在线资源来讨论预加载是否更好，但在您完成之前您并不知道它是否适合您。不同的人有不同的服务器，具有不同的性能特征和不同的网络拓扑等。在您拥有数据之前，您只是不知道哪种方式更适合您您。如果您启动 A/B 测试并发现您的排斥率在预加载时上升，那么您知道您必须拨回您的治疗和 return 到您的控制。但是，如果您发现客户不会厌倦等待并以比以前更高的速度点击通过，那么您就有了赢家并且您拨通了治疗 - 在一段时间后完全删除控制代码。
希望对您有所帮助。
这篇文章关于这些陈述是错误的。开发人员使用预加载是因为他已经知道页面上需要这些资产。预加载不是 "hint"。预取更符合他的说法，您是在告诉浏览器可能需要该资产。
如果图像在首屏，那么您就知道需要它，而这正是预取的目的。
preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.