广告通常以异步方式加载,因此可能会导致偏移。因此,您需要首先为它们提供空间。
在某些情况下,广告网络不提供广告。如果发生这种情况,请不要折叠容器,因为这会导致布局发生变化。相反,使用占位符。
优化字体传送(FOUT/FOIT)
不优化字体也会导致布局转变。
当浏览器需要来自 Web 浏览器的字体时,任何使用该字体的元素都将被隐藏,直到字体资产完全下载为止。这被称为不可见文本闪烁 (FOIT)。
浏览器一直保持此模式,直到加载特殊模式,从而产生无样式文本闪烁(FLOUT)。为了防止因字体不同而导致的布局偏移,您的网站应该加载更少的字体行。
媒体尺寸
最简单的 CLS 修复之一是为图像和视频添加高度和宽度属性。这使得浏览器可以提前知道为每个视频或图像分配多少时间。
如果不添加这些属性,则该图像加载后,后续图像将移动以腾出空间。您可以通过打开 DevTools 并点击元素来找到您上传的图像或视频的尺寸。
禁用动画
您可以使用 CSS/JS 创建强大的元素。但这可能会导致布局的转变。如果必须包含动画,请确保它提供从一个状态到另一个状态的上下文和连续性。否则,避免使用动画。
结论
总体而言,核心网络生命力是 Google 用来评估特定 URL 速度的测量标准。主要组成部分是 LCP、FID 和 CLS,这些指标衡量用户体验的不同方面。由于用户体验对于提高销售量和转化率非常重要,因此您应该始终努力提高您的分数。
记得使用 Google Search Console 和 PageSpeed Insights 来监控你的页面性能。这些工具将准确反映用户对您网站的体验。开始优化您的核心网络生命力分数以改善您的 SEO。