Loading...

CSS 的 CLS 最佳化

學習如何最佳化CLS、提升Lighthouse分數

CSS
更新於 2025-06-12 17:41:41
Written by   Jacky Yang@Jacky Yang

什麼是 CLS

累積佈局偏移（Cumulative Layout Shift, CLS）是衡量網頁穩定性的一個關鍵指標。它評估頁面上的元素在加載過程中出現意外移動的程度。這些移動會影響用戶體驗，特別是在用戶正在閱讀或與頁面互動時。CLS 值越低，表示頁面越穩定。以下CSS使用的技巧可提升CLS

Width, Height的單位

少用%改用計算出來的單位

/* 更改前 */
.canvas-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    overflow: hidden;
}

/* 更改後 */
.canvas-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    opacity: 0.4;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

will-change

will-change 是一個 CSS 屬性，它可以告訴瀏覽器哪些元素將要發生改變，進而最佳化這些元素的渲染方式。

開發者Alex的詳盡解說

.canvas-wrapper .circle {
    transform: translate(-50%, -50%);
    will-change: transform;
}

未最佳化前lighthouse

w%

最佳化後的分數

v