Giới Thiệu

Cumulative Layout Shift (CLS) là một trong những chỉ số quan trọng trong bộ Web Vitals do Google phát triển để đánh giá trải nghiệm người dùng trên website. CLS đo lường mức độ ổn định của bố cục trang trong quá trình tải và khi người dùng tương tác với trang. Một chỉ số CLS cao phản ánh sự thay đổi không mong muốn trong bố cục, có thể gây ra sự không hài lòng cho người dùng.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu để tối ưu hóa CLS, từ đó cải thiện trải nghiệm của người dùng một cách hiệu quả nhất.

Cách Tính Cumulative Layout Shift (CLS)

CLS được tính bằng cách cộng dồn các điểm số của mọi thay đổi bố cục xảy ra trong suốt thời gian tồn tại của trang. Mỗi sự thay đổi bố cục được đánh giá thông qua công thức sau:

Công thức tính CLS:

Copy

CLS = Layout Shift Score
Layout Shift Score = Impact Fraction * Distance Fraction

Trong đó:

Impact Fraction: Phần trăm của viewport bị ảnh hưởng bởi sự thay đổi bố cục.
Distance Fraction: Khoảng cách di chuyển của phần tử so với kích thước viewport.

Nguyên Nhân Gây Ra CLS Cao

Có nhiều nguyên nhân dẫn đến giá trị CLS cao. Một số yếu tố chính bao gồm:

Thiếu Kích Thước Cố Định Cho Ảnh và Video: Khi hình ảnh và video không có kích thước cố định, chúng có thể làm thay đổi bố cục trang khi được tải.
Chèn Nội Dung Động: Việc thêm các phần tử như quảng cáo, video không đồng bộ sẽ dễ dàng làm thay đổi bố cục trang.
Sử Dụng Phông Chữ Tuỳ Chỉnh: Khi phông chữ tùy chỉnh tải về, kích thước của văn bản có thể thay đổi, gây ra sự dịch chuyển trong bố cục.

Cách Tối Ưu CLS

1. Đặt Kích Thước Cố Định Cho Các Phần Tử Media

Hãy chắc chắn rằng bạn cung cấp thuộc tính width và height cho mọi hình ảnh và video để trình duyệt dự đoán được không gian cần thiết cho chúng.

html Copy

<img src="example.jpg" width="600" height="400" alt="Hình Ảnh Ví Dụ">

2. Tránh Chèn Nội Dung Động Bất Ngờ

Khi thêm nội dung động, hãy đảm bảo rằng bạn đã dành không gian cần thiết cho chúng từ trước. Đặc biệt với quảng cáo, bạn nên sử dụng các container cố định.

html Copy

<div style="width: 300px; height: 250px;">
  <!-- Quảng cáo sẽ được tải vào đây -->
</div>

3. Sử Dụng Phông Chữ Hệ Thống Hoặc Tải Phông Chữ Tuỳ Chỉnh Hợp Lý

Để tránh sự dịch chuyển bố cục, hãy sử dụng thuộc tính font-display: swap trong CSS để sử dụng phông chữ hệ thống trong khi chờ phông chữ tùy chỉnh.

css Copy

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

4. Đảm Bảo Không Gian Trống Cho Các Thành Phần Khác

Nếu biết một thành phần sẽ được thêm vào sau khi tải trang, hãy dành không gian trống cho nó từ ban đầu.

css Copy

.banner {
  min-height: 50px;
  /* Không gian trống cho banner */
}

Công Cụ Đo Lường và Theo Dõi CLS

1. Chrome DevTools

Sử dụng Chrome DevTools để theo dõi CLS bằng cách mở công cụ (F12) và vào tab "Performance".

2. Lighthouse

Lighthouse giúp cải thiện chất lượng trang web, cung cấp báo cáo chi tiết về hiệu suất và CLS.

bash Copy

lighthouse https://example.com --output json --output html --save-assets

3. PageSpeed Insights

Công cụ này cung cấp báo cáo chi tiết về hiệu suất website, bao gồm giá trị CLS.
Link đến PageSpeed Insights

4. WebPageTest

WebPageTest là công cụ cho phép Kiểm tra hiệu suất trên nhiều vị trí khác nhau và cung cấp số liệu CLS.
Link đến WebPageTest

Kết Luận

Tối ưu hóa Cumulative Layout Shift (CLS) không chỉ cải thiện điểm số Core Web Vitals mà còn tạo ra trải nghiệm người dùng tốt hơn trên website. Bằng cách thực hiện các biện pháp như đặt kích thước cố định cho media, hạn chế nội dung động và sử dụng phông chữ hợp lý, bạn có thể giảm thiểu CLS và nâng cao chất lượng trang web của mình. Hy vọng rằng bài viết này sẽ giúp bạn có thêm kiến thức để cải thiện website của cá nhân hoặc doanh nghiệp. Cảm ơn bạn đã dành thời gian đọc bài viết này!
source: viblo

Hướng Dẫn Tối Ưu Hóa Chỉ Số Cumulative Layout Shift (CLS) Để Nâng Cao Trải Nghiệm Người Dùng Trên Website