深入理解 Cumulative Layout Shift (CLS) ：让网页布局更稳定

ErpanOmer
651 阅读4分钟

Cumulative Layout Shift (CLS) 是 Google 的核心网页指标 (Core Web Vitals) 之一，用于衡量网页在加载过程中发生的 视觉稳定性。这一指标的提出旨在改善用户体验，因为频繁的布局变化会让用户感到困惑，甚至误操作。

本文将深入探讨 CLS 的定义、计算方式、常见问题以及优化方法，并通过代码实例和工具展示如何高效处理 CLS 问题。

什么是 Cumulative Layout Shift？

CLS 是衡量网页布局在加载或交互过程中发生的 非预期视觉移动 的总量。它量化了用户因内容移动而体验到的视觉不稳定性。

定义：

  • 非预期的变化： 当用户未滚动页面或交互时，页面中的内容突然移动。
  • 预期的变化： 由于用户触发操作而引起的变化（如点击按钮触发弹窗）不计入 CLS。

CLS 是如何计算的？

CLS 的计算公式基于以下两个因素：

  1. Impact Fraction（影响分数） ： 指被移动元素占据的视觉区域相对于视口的比例。

    • 公式：Impact Fraction = 移动后面积 / 视口面积

  2. Distance Fraction（距离分数） ： 指移动的元素相对于视口的距离比例。

    • 公式：Distance Fraction = 移动距离 / 视口高度

CLS = Impact Fraction × Distance Fraction

为什么 CLS 很重要？

  1. 用户体验： 内容突然移动会导致用户点错按钮或失去上下文，降低体验。
  2. SEO 优化： CLS 是 Google 核心网页指标之一，直接影响搜索排名。
  3. 用户留存： 稳定的布局让用户对网站更加信任，减少流失率。

常见的 CLS 问题

1. 图片未指定尺寸

  • 问题：加载图片时，页面先渲染文本或其他内容，图片加载后挤压布局。

  • 示例：

    <img src="example.jpg">

2. 动态加载广告或第三方内容

  • 问题：广告框架加载后推挤主要内容。

  • 示例：

    <div id="ad-slot"></div>
<script src="ad.js"></script>

3. 动态注入内容

  • 问题：加载 JavaScript 时插入新内容导致布局变化。

  • 示例：

    const newElement = document.createElement('div');
newElement.textContent = '动态内容';
document.body.appendChild(newElement);

如何优化 CLS？

1. 为图片和视频指定尺寸

通过设置宽高属性或使用 CSS aspect-ratio，确保页面在加载时为图片预留空间。

<img src="example.jpg" width="400" height="300" alt="example">

或使用 CSS：

img {
    aspect-ratio: 4 / 3;
    width: 100%;
}

2. 为广告和嵌入内容预留空间

确保动态加载的内容在初始渲染时有固定的占位符。

<div style="width: 300px; height: 250px;">广告位</div>

3. 避免动态插入内容

在需要动态加载内容时，确保使用占位符或预留空间。

const placeholder = document.createElement('div');
placeholder.style.height = '50px';
document.body.appendChild(placeholder);

// 动态加载内容
setTimeout(() => {
    placeholder.textContent = '动态内容';
}, 2000);

4. 优化字体加载

使用 font-display: swap 确保文本在字体加载时显示替代字体，避免内容跳动。

@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
}

5. 避免动画引起的布局变化

在动画中使用 transform 和 opacity 而非 margin 或 width 等影响布局的属性。

.bad-example {
    margin-left: 20px; /* 可能导致布局变化 */
}

.good-example {
    transform: translateX(20px); /* 不会影响布局 */
}

实战代码：如何监控 CLS？

使用 JavaScript 获取 CLS 值

借助 web-vitals 库动态检测 CLS 值：

import { onCLS } from 'web-vitals';

onCLS((metric) => {
    console.log('Current CLS value:', metric.value);
});

Lighthouse 报告分析

使用 Chrome DevTools 的 Lighthouse 生成页面性能报告，可以清晰看到 CLS 的问题来源。

Performance 面板

手动调试 CLS 问题：

  1. 打开 DevTools，切换到 Performance 标签。
  2. 记录性能数据并过滤布局变化。

代码示例：解决 CLS 的优化实例

优化图片布局问题

  • 问题代码：

    <img src="example.jpg">

  • 优化代码：

    <img src="example.jpg" width="800" height="600" alt="example">

优化动态内容插入

  • 问题代码：

    const newContent = document.createElement('div');
newContent.textContent = 'New Content';
document.body.appendChild(newContent);

  • 优化代码：

    const placeholder = document.createElement('div');
placeholder.style.height = '50px';
document.body.appendChild(placeholder);

setTimeout(() => {
    placeholder.textContent = 'New Content';
}, 2000);

工具和实践

1. Lighthouse

Google 官方工具，生成页面性能报告，提供 CLS 问题的详细分析。

2. WebPageTest

全面测试网站性能，分析 CLS 值和改进建议。

3. Performance 面板

DevTools 中的 Performance 面板可以手动调试布局变化。

总结

Cumulative Layout Shift (CLS) 是衡量页面视觉稳定性的关键指标，直接影响用户体验和 SEO 排名。通过为图片和广告指定尺寸、优化动态内容加载、减少字体加载影响等方法，可以有效降低 CLS 值，提升页面性能和用户满意度。

在未来的网页开发中，优化 CLS 应成为开发者的标准实践，以确保为用户提供稳定流畅的浏览体验。

avatar
文章
阅读
粉丝