html - 带骨架的快速 LCP

Question

我们目前正在寻找方法来提高我们某些页面上的最大内容绘制 (LCP)分数。根据上面的链接，计算LCP时考虑了以下元素：

• <img>元素
• <image>元素内的<svg>元素
• <video>元素（使用海报图片）
• 具有通过函数加载的背景图像的元素url()（与 CSS 渐变相反）
• 包含文本节点或其他内联文本元素子级的块级元素。

为此，我们正在研究利用所谓的“骨架”元素为内容提供占位符的可能性，直到内容完全加载。作为参考，骨架看起来像这样：

这个想法是，如果页面上的单个最大元素（在我们的例子中是图像）首先作为骨架加载，该骨架会在 LCP 值较低的情况下快速呈现，然后可以将其替换为完整内容。

但是，我发现的当前骨架的实现似乎都不符合 LCP 考虑的标准。

• Material UI Skeletons使用 CSS 背景颜色和动画实现。
• Chakra UI Skeletons使用 CSS 背景颜色和动画实现。
• Ant Design Skeletons是用 CSS 背景颜色实现的。
• 骨架元素 SkeletonText是用 CSS 实现的，可以选择围绕文本占位符进行包装，我相信LCP会考虑使用它。但是，SkeletonImage是用 CSS 围绕一个 vector 实现的<svg>，LCP 不会考虑（但这可能会被移动到一个 CSS 中background: url(data:image/svg+xml;base64,...)）

因此，鉴于骨架的主要实现似乎并没有以一种开箱即用的方式来帮助 LCP，这甚至是一种可行的方法吗？例如，Material UI 团队可能知道一些我们不知道的事情，并决定不以 LCP 为目标，因为骨架不应该成为 LCP 策略的一部分。

标签： htmlcsscore-web-vitals