带有图片标签的 PageSpeed Insights LCP答案

【问题标题】：PageSpeed Insights LCP with picture tag带有图片标签的 PageSpeed Insights LCP
【发布时间】：2020-07-03 09:55:17
【问题描述】：

我们使用 PageSpeed Insights 来衡量我们网站的性能（drupal 7 和用于延迟加载的图片模块）。在移动搜索结果中，我们收到一条消息，即 LCP（最大内容绘制）太高（4.5 秒），并显示了以下代码。

<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 开发者工具，我们会在网络选项卡中看到，代码中的图像 (https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg) 未交付（代码中的图像文件大小约为 110 KB），而是分辨率较低的图像（文件大小约为 47 KB）。现在我们用一个文件大小为 14 KB 的图像 (47 KB) 更改交付的图像。但是 PageSpeed Insights 的值不会改变。总是相同的 4.5 秒。

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

【问题讨论】：

标签： pagespeed-insights

【解决方案1】：

LCP 是关于何时绘制页面上最大的项目，它与该项目的大小（以 kb 为单位）无关（除了较小的元素会加载更快）。

您想要的是让“首屏”内容（无需滚动即可看到的内容）在不到 2.5 秒（最好是 1.5 秒）内完成绘制。

要实现这一点，您需要确保所有用于“首屏”的 CSS 都内联在 HTML 中。（称为“内联关键 CSS”）。

这样做也将修复“消除渲染阻塞资源”，因为渲染页面所需的所有内容都将在第一个请求中加载。最后，这也有助于累积布局移位，因为加载 CSS 样式时，页面不会“反弹”。

对于首屏上的图像，您不希望它们被延迟加载，而是希望它们正常加载，因为它们需要尽可能快地呈现。您可能还需要确保用于徽标的背景图像具有相关的内联 CSS，否则会延迟加载。（最好将徽标转换为内联 SVG 以节省不需要的请求和页面权重）。

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

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

允许用户决定是否播放视频对数据流量低的人以及患有 ADHD、自闭症等可能会分散注意力的人都有帮助。

无论如何，我已经偏离了正题。要修复迟到的 LCP，请确保所有首屏资产都具有优先权，并且基本上尽可能轻。

您可能会发现此article explaining LCP 以及此article on how to optimise LCP 很有用，以了解您需要查看的内容。

【讨论】：