performance - 为什么使用 Google Chrome Lighthouse 时会出现未使用的图像资源？

Question

我尝试使用此网站的 Google Chrome Lighthouse 扩展来提高加载时间(尤其是图像)的整体性能:https://muckenthaler.de/

性能测试完成后，我会得到一份机会列表，请查看此屏幕截图或自行测试:https://capture.dropbox.com/YV5ii1vrj0xpfWwK

在以下一代格式提供图像下列出了一些图像网址(例如: https://muckenthaler.de/media/image/54/7c/cb/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg )，这些网址甚至没有出现在特定页面上，但似乎以某种方式加载到其中并影响性能。

如何防止这种情况以及为什么加载这些图像资源？

Answer 1

以下是该页面的 WebPageTest 结果:https://www.webpagetest.org/result/220529_AiDcZP_759/1/details/#waterfall_view_step1

从此缩略图中您需要知道的是，黄色行表示 HTTP 重定向，紫色条表示图像。条形越长，资源加载所需的时间就越长。

所以我们可以从这张瀑布图像中看出一些事情:

• 有很多重定向
• 有很多图片
• 相对于其他资源，许多图像需要很长时间才能加载

当我抬头时https://muckenthaler.de/media/image/54/7c/cb/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg在响应 header 中，我看到 request 19有一个从 https://muckenthaler.de/media/image/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg 到该图像的重定向.

在源代码中查找该图像，我明白了

<img src="https://muckenthaler.de/media/image/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg"
  alt=""
  loading="eager">

另请注意，此内容位于名为 <div class="hidden-elements"> 的内容内。 。类 emotion--element 的这些元素设置为display: none这样内容就不会显示在屏幕上，而是 loading="eager"图像上的强制它们被加载。

您的 CMS(商店软件)似乎正在尝试急切地预加载将在其他页面上使用的图像。如果您有少量轻量级图像并且用户很可能导航到这些页面，那么这并不是一个糟糕的主意，但在这种情况下，它会加载数十个总计超过 30 MB 的图像。所以绝对不推荐。

根据CWV Tech Report与其他 CMS 和电子商务平台相比，Shopware 网站往往仅加载 2 MB 的图像，并且具有相当好的 Core Web Vitals 性能。这让我相信您的配置可能有误，或者您可能安装了错误的插件。