带骨架的快速 LCP

如何解决带骨架的快速 LCP

我们目前正在寻找提高某些网页上 Largest Contentful Paint (LCP) 分数的方法。根据上面的链接，计算LCP考虑了以下元素：

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

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

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

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

• Material UI Skeletons 使用 CSS 背景颜色和动画实现。
• Chakra UI Skeletons 使用 CSS 背景颜色和动画实现。
• Ant Design Skeletons 使用 CSS 背景颜色实现。
• Skeleton Elements SkeletonText 是用 CSS 实现的，可选包装文本占位符，我相信 会被考虑用于 LCP。但是，SkeletonImage 是用围绕向量 <svg> 的 CSS 实现的，LCP 不会考虑使用它（但这可能会移入 CSS background: url(data:image/svg+xml;base64,...)）

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