问题描述
我们目前正在寻找提高某些网页上 Largest Contentful Paint (LCP) 分数的方法。根据上面的链接,计算LCP考虑了以下元素:
-
<img>
元素 -
<svg>
元素 -
<video>
元素(使用海报图片) - 具有通过
url()
函数加载的背景图像的元素(与 CSS 渐变相反) - 包含文本节点或其他内联级文本元素子级的块级元素。
<image>
元素内的 为此,我们正在研究利用所谓的“骨架”元素为内容提供占位符的可能性,直到内容完全加载。作为参考,骨架看起来像这样:
这个想法是,如果页面上最大的单个元素(在我们的例子中是图像)首先作为骨架加载,该骨架可以为低 LCP 值快速渲染,然后可以用完整内容替换。
然而,我发现的骨架的当前实现似乎都不符合 LCP 考虑的标准。
- Material UI Skeletons 使用 CSS 背景颜色和动画实现。
- Chakra UI Skeletons 使用 CSS 背景颜色和动画实现。
- Ant Design Skeletons 使用 CSS 背景颜色实现。
-
Skeleton Elements
SkeletonText
是用 CSS 实现的,可选包装文本占位符,我相信 会被考虑用于 LCP。但是,SkeletonImage
是用围绕向量<svg>
的 CSS 实现的,LCP 不会考虑使用它(但这可能会移入 CSSbackground: url(data:image/svg+xml;base64,...)
)
因此,鉴于骨架的主要实现似乎并没有以非常开箱即用的方式协助 LCP,这是否是一种可行的方法?例如,Material UI 团队可能知道一些我们不知道的事情,因此决定不以 LCP 为目标,因为骨架不应该成为 LCP 策略的一部分。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)