Html 我是否应该预加载一个大图像'；折叠上面有什么？

我对

rel=“preload”

属性感到兴奋，因为它看起来可以帮助加快页面呈现时间

用例是一个在折叠上方有一个大图像的网页。现在，Chrome在获取jQuery（一个相当重的文件）之后才开始下载图像。启用预加载后，它们将并行下载

但我正在阅读关于是否应该对其他地方可见的HTML元素中的内容使用

preload

的相互矛盾的报告（与用户交互显示的内容相反，如下拉菜单）

似乎建议不要预加载：

不使用预加载时：

• 当资产在同一页的其他地方被引用时
• 当您不确定用户是否真的需要该资产时。就像在一个页面上一样，访问者只有3%的时间访问

虽然在英国《金融时报》网站上似乎表明这对类似情况确实有帮助：

当英国《金融时报》在其网站上引入链接预加载标题时，他们将显示报头图像的时间缩短了1秒

那是哪一个呢？我是否应该提供一个早期的“提示”来显示折叠图像上方始终显示的内容？或者我应该让浏览器按照通常的顺序访问它吗？

我会对图像使用rel=“preload”，只有在css中才能找到它们，javascript会在以后的页面呈现中导致瓶颈，如果用户驱动的事件将请求该图像，并且该图像将对用户体验产生不利影响，或者如果您在呈现页面时由于该大图像而遇到任何流

我知道你的图片在上面，如果从一开始就在源代码中找到它，我会让浏览器优先考虑先下载什么。

---

另一方面，您可以随时A/B此更改，看看它是否适合您。

我认为，在涉及性能优化的情况下，您确实需要确定应该执行哪项更改。对于图像预加载，作为一种最佳实践，确实没有适用于所有人的切碎答案

我最喜欢的一本书的最大信条之一，就是使用a/B测试来证明或否定HIPPO（高薪人士的观点）。无论是在你的组织中还是在互联网上，某些观点都很重要。由于他们的重要性和声誉，他们的观点转向了事实领域，尽管事实可能并非如此

我喜欢的另一本关于性能调优的书也吹捧了以经验衡量性能的做法——在这本书中，McConnell给出了几个代码示例，其中一段代码是最佳的，但事实上，它的性能很差（参见第25章和第26章）。他的一个关键点是，您应该始终测试性能优化。如果不值得测试，那么首先就不值得编写“高性能”代码。McConnell的前提不仅适用于他的低级编码示例，还适用于高级决策，例如在折叠上方预加载图像

我还可以证明A/B测试在专业水平上的重要性。我曾经在亚马逊的搜索引擎优化团队工作，我们对一切都进行了A/B测试。事实上，你永远都不知道客户对某件事会有什么反应。没有人能预测顾客的行为——甚至杰夫·贝佐斯也不行——你真的需要用真实数据来支持你的假设，以证明或反驳你所做的事情的有效性

即使您可以找到多篇博客文章和在线资源，讨论预加载是否更好，但在您完成之前，您并不真正知道这是否适用于您。不同的人有不同的服务器，具有不同的性能特征和不同的网络拓扑等。在获得数据之前，您不知道哪种方式更适合您。如果你启动A/B测试，发现预加载时排斥率上升，那么你知道你必须回拨治疗并恢复控制。但是，如果您发现客户没有厌倦等待，并且点击率比以前更高，那么您就有了赢家，您拨打了治疗电话——在一段时间后完全删除控制代码

---

我希望这能有所帮助。

这篇文章对这些说法的理解是错误的。开发人员使用预加载，因为他已经知道页面上需要这些资产。预加载不是一个“提示”。预取与他所说的更为一致，即您正在告诉浏览器可能需要该资产

如果图像位于折叠上方，则您知道需要它，而这正是预取的目的

预加载是一种声明性获取，允许您强制浏览器 在不阻止文档加载的情况下请求资源 事件

---

很多时候，感知加载时间比真实加载时间更重要。根据内容的不同，有时你会期望文本准备得更快，或者交互可以更快，有时图像。。。你应该试试，看看感觉如何。我记得一个具体的例子：6-7秒的白色加载屏幕是不可接受的，但是9-10秒加上一个小徽标和加载动画是完全可以的。页面结构是什么？js脚本包括在哪里，是页眉还是页脚？脚本是否包含在同步/异步模式中？我认为您的问题可以归结为一个特定的页面优化问题，因此最好能看到一个URL或具有类似结构的页面草图，以检查Chrome如何安排资源加载