Cumulative Layout Shift: Khái niệm và cách tối ưu chỉ số CLS

Cumulative Layout Shift (CLS) là gì?

Chỉ số CLS trong PageSpeed Insights

Cumulative Layout Shift (CLS) là một chỉ số quan trọng trong bộ Core Web Vitals của Google, được sử dụng để đo lường mức độ ổn định của bố cục trang web trong quá trình tải. CLS phản ánh sự thay đổi không mong muốn trong vị trí của các phần tử trên trang, điều này có thể gây khó chịu cho người dùng nếu nội dung di chuyển đột ngột trong khi họ đang tương tác với trang.

Đánh giá điểm số CLS:

• 0.1 hoặc thấp hơn: Tốt, không cần cải thiện.

• 0.1 đến 0.15: Khá, nhưng nên cải thiện.

• 0.15 đến 0.25: Dài hơn mức khuyến nghị, cần cải thiện.

• 0.25 hoặc cao hơn: Rất cao, cần cải thiện ngay lập tức

Công thức tính CLS

CLS được tính toán dựa trên hai yếu tố chính:

• Impact Fraction (Phần trăm tác động): Đây là tỷ lệ diện tích của viewport (khung nhìn) bị ảnh hưởng bởi sự thay đổi bố cục. Ví dụ, nếu một phần tử chiếm 75% diện tích khung nhìn và di chuyển, thì phần tác động sẽ là 0.75.

• Distance Fraction (Phần khoảng cách): Đây là tỷ lệ khoảng cách mà phần tử di chuyển so với kích thước của viewport. Nếu phần tử di chuyển 25% chiều cao của khung nhìn, thì phần khoảng cách sẽ là 0.25.

Công thức tính CLS là:

CLS=Impact Fraction × Distance Fraction

Điểm số CLS tổng hợp sẽ được tính bằng cách nhân hai chỉ số này với nhau. Một giá trị CLS thấp (dưới 0.1) cho thấy trang web có sự ổn định tốt, trong khi giá trị cao hơn có thể chỉ ra rằng người dùng có thể gặp phải trải nghiệm không tốt do sự dịch chuyển của các phần tử.

Tại sao nên tối ưu chỉ số Cumulative Layout Shift?

Tối ưu chỉ số Cumulative Layout Shift (CLS) là rất quan trọng vì nó ảnh hưởng trực tiếp đến trải nghiệm người dùng và thứ hạng SEO của trang web. Dưới đây là một số lý do chính:

Ảnh hưởng đến trải nghiệm người dùng

• Trải nghiệm không liền mạch: Một CLS cao có thể gây ra sự khó chịu cho người dùng khi các phần tử trên trang bất ngờ thay đổi vị trí, làm gián đoạn quá trình đọc hoặc tương tác. Điều này có thể dẫn đến việc người dùng nhấp nhầm vào các liên kết hoặc nút không mong muốn, gây ra cảm giác bực bội và không thoải mái.

• Tăng tỷ lệ thoát: Khi người dùng gặp phải những thay đổi bố cục không mong muốn, họ có thể rời khỏi trang ngay lập tức. Điều này không chỉ làm giảm thời gian người dùng lưu lại trang mà còn có thể ảnh hưởng đến tỷ lệ chuyển đổi, đặc biệt là trong các trang thương mại điện tử.

Tác động đến SEO

• Yếu tố xếp hạng của Google: Google đã xác nhận rằng CLS là một trong những chỉ số trong bộ Core Web Vitals, ảnh hưởng đến thứ hạng tìm kiếm. Một trang web có CLS thấp sẽ được ưu tiên hơn trong kết quả tìm kiếm, giúp tăng khả năng hiển thị và thu hút lưu lượng truy cập tự nhiên.

• Tăng cường uy tín và độ tin cậy: Trang web có trải nghiệm người dùng tốt thường được đánh giá cao hơn, từ đó xây dựng được uy tín và độ tin cậy trong mắt người dùng cũng như các công cụ tìm kiếm. Điều này có thể dẫn đến việc người dùng quay lại trang web nhiều lần hơn trong tương lai

Cách kiểm tra Cumulative Layout Shift của website

Để biết chỉ số Cumulative Layout Shift (CLS) của website bạn đang ở mức nào, bạn có thể sử dụng một số công cụ trực tuyến và phần mềm phân tích hiệu suất. Dưới đây là những cách phổ biến để kiểm tra CLS:

Công cụ kiểm tra CLS

• Google PageSpeed Insights: Đây là một công cụ miễn phí của Google cho phép bạn nhập URL của trang web để phân tích và nhận báo cáo về các chỉ số hiệu suất, bao gồm CLS. Kết quả sẽ cho bạn biết điểm số CLS và các khuyến nghị để cải thiện.

• Google Lighthouse: Lighthouse là một công cụ tích hợp trong Chrome DevTools, cho phép bạn kiểm tra hiệu suất và chất lượng của trang web. Bạn có thể mở DevTools, chọn tab "Lighthouse", và chạy phân tích để nhận điểm số CLS cùng với các chỉ số khác.

• WebPageTest: Công cụ này cho phép bạn kiểm tra hiệu suất trang web từ nhiều vị trí khác nhau và trên các trình duyệt khác nhau. Nó cung cấp các số liệu chi tiết về CLS và nhiều chỉ số hiệu suất khác.

• GTmetrix: GTmetrix cũng là một công cụ phổ biến để phân tích hiệu suất trang web, bao gồm đo lường CLS. Bạn chỉ cần nhập URL và nhận báo cáo chi tiết về các chỉ số, bao gồm CLS.

Cách sử dụng

1. Truy cập vào một trong các công cụ trên (như Google PageSpeed Insights hoặc Lighthouse).

2. Nhập URL của trang web bạn muốn kiểm tra.

3. Chạy phân tích và chờ kết quả.

4. Xem báo cáo để biết điểm số CLS của bạn, cùng với các khuyến nghị cải thiện nếu cần.

Hướng dẫn cách cải thiện chỉ số Cumulative Layout Shift

Để cải thiện chỉ số Cumulative Layout Shift (CLS) của website, bạn có thể thực hiện một số cách dưới đây nhé:

• Đặt kích thước cố định cho hình ảnh và video: Đảm bảo rằng tất cả các phần tử media (hình ảnh, video) đều có thuộc tính width và height được xác định. Điều này giúp trình duyệt biết trước không gian cần thiết cho các phần tử này, tránh tình trạng dịch chuyển bố cục khi chúng được tải.

• Sử dụng placeholder cho quảng cáo: Khi chèn quảng cáo vào trang, hãy sử dụng các khung giữ chỗ (placeholder) với kích thước cố định. Điều này giúp ngăn chặn việc dịch chuyển bố cục khi quảng cáo được tải vào.

• Tránh chèn nội dung động bất ngờ: Nếu bạn cần thêm nội dung mới vào trang (như bình luận, bài viết liên quan), hãy đảm bảo rằng không gian cho nội dung đó đã được dự phòng trước. Điều này giúp giảm thiểu sự thay đổi bố cục không mong muốn.

• Tối ưu hóa việc tải phông chữ: Sử dụng các thẻ "<link rel="preload">" hoặc "<link rel="preconnect">" để tải phông chữ sớm hơn. Điều này giúp giảm thiểu tình trạng FOIT (Flash of Invisible Text) và FOUT (Flash of Unstyled Text), từ đó giữ cho bố cục ổn định hơn trong quá trình tải.

• Sử dụng CSS Flexbox hoặc Grid: Các công cụ CSS hiện đại như Flexbox và Grid cho phép bạn tạo bố cục linh hoạt mà không cần phải thay đổi vị trí của các phần tử một cách đột ngột. Điều này giúp cải thiện tính ổn định của bố cục.

• Kiểm tra và tối ưu mã JavaScript: Đảm bảo rằng mã JavaScript không gây ra sự thay đổi bố cục không mong muốn. Tránh việc thực hiện các tác vụ nặng nề trong quá trình tải trang, và cân nhắc tải các script bên thứ ba sau khi trang đã hoàn tất tải.

• Sử dụng công cụ phân tích: Sử dụng các công cụ như Google PageSpeed Insights, Lighthouse, hoặc DevTools trong Chrome để theo dõi và phân tích CLS. Những công cụ này giúp bạn xác định các phần tử nào đang gây ra sự dịch chuyển và đưa ra các khuyến nghị cụ thể để cải thiện.

Việc tối ưu CLS không chỉ giúp cải thiện trải nghiệm người dùng mà còn có tác động tích cực đến thứ hạng SEO của website. Bằng cách thực hiện các biện pháp trên, bạn có thể giảm thiểu sự dịch chuyển bố cục không mong muốn và tạo ra một trang web ổn định và mượt mà hơn.