带有图片标签的PageSpeed Insight LCP

Question

我们使用PageSpeed Insight来衡量我们网站的性能(drupal 7和延迟加载的图片模块)。在移动结果中，我们得到了这样的消息: LCP (最大的内容油漆)太高(4.5s)，如下代码所示。

<img class=" lazyloaded" data-src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf&amp;timestamp=1559550873" alt="ABNT NBR IEC 62262 " title="" src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf&amp;timestamp=1559550873">

如果我们查看Chrome工具，我们可以在网络选项卡中看到，代码中的图像(4.jpg)不是交付的(代码中的图像大约有110 KB的文件大小)，而是一个分辨率较低的图像(大约有47 KB的文件大小)。现在，我们用14 KB文件大小的图像(47 KB)更改交付的映像。但是PageSpeed的洞察值不会改变。总是一样的4.5秒。

使用PageSpeed在计算值的代码中查看图像？或者我们能做些什么来获得更快的时间结果？

Answer 1

LCP大约在页面上绘制最大项时，它与kb中该项的大小无关(除了一个较小的元素将加载得更快)。

您想要的是“上面的折叠”内容(内容可见无滚动)在2.5秒内完全绘制，理想情况下是1.5秒。

为了实现这一点，您需要确保所有用于“高于折叠”的CSS都内联在HTML中。(称为“内联临界CSS")。

这样做还将修复“消除呈现阻塞资源”，因为呈现页面所需的所有内容都将加载到第一个请求中。最后，这也将有助于累积布局的转变，因为当CSS样式被加载时，东西不会在页面周围“反弹”。

对于折叠上面的图像，您不希望它们被延迟加载，而是希望它们能够正常加载，因为它们需要尽可能快地呈现。您还可能希望确保您为徽标使用的背景图像具有相关的CSS内联，以及其他情况下，将载入晚。(最好将徽标转换为内联SVG，以保存不必要的请求和页重)。

最后，我注意到你使用视频背景，这是不太可能得到最高的分数，因为这需要很大的带宽。我建议将您的视频背景替换为移动上的静态图像，以节省与视频背景相关的大量开销。

无论如何，将视频移动到页面的下方，并将其延迟加载，但可能允许用户手动启动视频。

允许用户决定是否播放视频，既可以帮助数据津贴低的人，也可以帮助患有多动症、孤独症等的人，这些人可能会发现移动图像会让人分心。

，无论如何，我已经偏离正切一点了。要修复延迟的LCP，请确保以上所有的折叠资产都具有优先权，并且基本上是轻量级的。。

您可能会发现这个文章解释LCP很有用，对于理解您需要查看的内容也很有用。