Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là một chỉ số đo lường mức độ ổn định hình ảnh của một trang web trong suốt quá trình tải. Khi một trang web được hiển thị, các phần tử như hình ảnh, video, quảng cáo hoặc các khối văn bản có thể thay đổi vị trí ngay cả sau khi trang đã bắt đầu tải. Hiện tượng này được gọi là "layout shift" – tức là thay đổi bố cục hiển thị.

CLS được tính toán bằng cách đo lường tổng của tất cả các "shift score" xảy ra trong suốt thời gian người dùng tương tác với trang. Mỗi shift score được xác định dựa trên hai yếu tố: diện tích khu vực bị thay đổi và khoảng cách mà phần tử di chuyển. Cụ thể, công thức tính CLS như sau:

CLS Score = Impact Fraction × Distance Fraction

• Impact Fraction = diện tích khu vực bị thay đổi / tổng diện tích hiển thị của trang
• Distance Fraction = khoảng cách lớn nhất mà một phần tử di chuyển / chiều cao của viewport

Google Analytics 4 và các công cụ đo lường khác xếp hạng hiệu suất CLS như sau:

Tầm quan trọng của CLS trong SEO và trải nghiệm người dùng

Google đã chính thức đưa CLS vào các yếu tố xếp hạng trên Google Search từ năm 2021, cùng với các chỉ số Core Web Vitals khác (Largest Contentful Paint – LCP và First Input Delay – FID). Điều này phản ánh sự chuyển dịch trọng tâm của Google từ việc chỉ đánh giá chất lượng nội dung sang đánh giá trải nghiệm trang tổng thể.

Việc một trang web có điểm CLS kém sẽ ảnh hưởng trực tiếp đến khả năng hiển thị trên công cụ tìm kiếm. Tuy nhiên, CLS không chỉ là một yếu tố xếp hạng – nó còn phản ánh trực tiếp trải nghiệm người dùng thực tế. Khi người dùng đang cố gắng nhấp vào một nút hoặc liên kết mà vị trí của nó liên tục thay đổi, họ sẽ cảm thấy bực bội và có thể rời khỏi trang. Điều này dẫn đến:

• Tỷ lệ thoát tăng (bounce rate)
<

Vấn đề thường gặp	Tác động đến CLS	Số liệu điển hình
Ảnh và video không có kích thước cố định	Thường gây ra shift lớn ngay khi tải	Ảnh không có width/height: CLS tăng 0.3-0.5
Quảng cáo và iframes	Thường tải chậm hơn nội dung chính	Quảng cáo chiếm 30% diện tích: CLS tăng 0.2-0.4
Các phần tử động (modal, toast, chatbot)	Thường tạo shift ngay khi hiển thị	Modal bật lên: shift 0.1-0.3
CSS lỗi thời hoặc xung đột	Gây reflow và repaint liên tục	CSS chưa optimized: CLS tăng 0.2-0.5
Lỗi plugin hoặc theme	Gây layout shift đột ngột	Plugin không tối ưu: CLS tăng 0.3-0.6

Bước tiếp theo: Tối ưu hóa Cumulative Layout Shift cho website

Sau khi đã hiểu rõ về Cumulative Layout Shift (CLS) và tầm quan trọng của nó đối với hiệu suất website, bước tiếp theo là thực hiện các biện pháp tối ưu hóa cụ thể. Dưới đây là một quy trình chi tiết để cải thiện điểm CLS của trang web.

1. Đánh giá hiện trạng

Bước đầu tiên là thu thập dữ liệu về hiệu suất CLS hiện tại của website. Sử dụng các công cụ sau:

• Google Search Console (GSC): Truy cập Reports → Core Web Vitals → Tệp bị ảnh hưởng. GSC sẽ liệt kê các URL có điểm CLS kém và cung cấp thông tin chi tiết về các thành phần gây ra vấn đề.
• PageSpeed Insights (PSI): Nhập URL cần kiểm tra, PSI sẽ hiển thị điểm CLS cùng với các Opportunities và Diagnostics chi tiết.
• Chrome DevTools: Mở tab "Lighthouse" → Chạy audit cho trang. Báo cáo Lighthouse sẽ có phần "Cumulative Layout Shift" kèm screenshot của các layout shift.
• WebPageTest: Chạy test từ nhiều vị trí và kết nối khác nhau, xem mục "Visual Comparison" để thấy rõ các chuyển động không mong muốn.

Hãy tạo một danh sách các URL quan trọng cần tối ưu trước (ví dụ: trang chủ, trang sản phẩm, trang blog), sau đó sắp xếp chúng theo mức độ ảnh hưởng đến trải nghiệm người dùng và doanh thu.

2. Xác định các nguyên nhân cụ thể

Dựa trên dữ liệu từ các công cụ trên, phân tích kỹ lưỡng để xác định nguyên nhân gốc rễ của các layout shift. Ví dụ:

• Nếu ảnh không có width/height, các phần tử phía dưới sẽ nhảy lên khi ảnh tải xong.
• Nếu quảng cáo hoặc iframes tải chậm, vị trí của chúng sẽ thay đổi sau khi nội dung chính đã hiển thị.
• Nếu font chữ tải chậm, trang có thể hiển thị với font fallback (thường là sans-serif) rồi sau đó chuyển sang font chính, gây ra shift.

Đối với các trang có nhiều layout shift, sử dụng Chrome DevTools để xem timeline chi tiết. Click vào các frame màu đỏ trong timeline để xem lý do tại sao layout bị thay đổi. Điều này sẽ giúp bạn xác định chính xác các thành phần gây ảnh hưởng.

3. Tối ưu hóa hình ảnh và video

Hình ảnh và video thường là nguyên nhân chính gây ra layout shift. Để khắc phục, áp dụng các phương pháp sau:

• Đặt rõ ràng chiều rộng (width) và chiều cao (height) cho tất cả hình ảnh và video trong HTML hoặc CSS. Ví dụ: <img src="image.jpg" alt="Description" width="800" height="600">
• Sử dụng thuộc tính sizes cho hình ảnh responsive để browser có thể tính toán kích thước chính xác trước khi tải.
< img { display: block; max-width: 100%; height: auto; }
• Đối với video nhúng từ YouTube hoặc Vimeo, đặt kích thước cố định cho container của video và sử dụng padding-bottom để giữ tỉ lệ khung hình.

4. Quản lý kích thước cho quảng cáo, iframes và các phần tử nhúng

Các phần tử động như quảng cáo (Google AdSense, Criteo, etc.) và iframes thường tải chậm hơn nội dung chính, gây ra layout shift lớn. Để giảm thiểu điều này:

• Đặt kích thước cố định cho các container quảng cáo và iframes trong HTML/CSS. Ví dụ: .ad-container { width: 300px; height: 250px; }
• Sử dụng thuộc tính sandbox cho iframes để tăng cường bảo mật đồng thời ngăn các iframes thay đổi kích thước động.
• Đối với quảng cáo, yêu cầu nhà cung cấp dịch vụ cung cấp code quảng cáo có kích thước cố định. Tránh sử dụng code quảng cáo động (responsive ads) nếu không thể kiểm soát kích thước.
• Đặt loading="lazy" cho các iframes không quan trọng hiển thị phía dưới fold để trì hoãn tải cho đến khi người dùng cuộn xuống.

5. Xử lý font chữ và các phần tử động

Các font chữ tải chậm có thể khiến trang hiển thị tạm thời với font fallback rồi chuyển sang font chính, gây ra shift đáng kể. Để khắc phục:

• Sử dụng @font-face với font-display: swap; để hiển thị font fallback ngay lập tức và chuyển sang font chính khi tải xong.
• Chỉ tải những weight và style font cần thiết. Ví dụ: nếu chỉ dùng bold và italic, không cần tải cả font-weight 400 và 700.
• Đối với các phần tử động như modal, toast, chatbot, đặt vị trí cố định cho chúng trong HTML ngay từ đầu. Tránh để các phần tử này chèn vào cuối trang và khiến layout shift.

6. Tối ưu hóa mã nguồn và cấu trúc trang

Các vấn đề về mã nguồn như CSS lỗi thời, JavaScript xung đột hoặc các plugin không tối ưu có thể gây ra reflow và repaint liên tục, dẫn đến layout shift. Để khắc phục:

• Tối ưu hóa CSS: Xóa bỏ các rule CSS không sử dụng (dead CSS), tránh dùng absolute positioning quá nhiều, và đảm bảo các transition và animation không gây reflow (ví dụ: thay thế width bằng transform: translateX() cho hiệu ứng chuyển động).
• Tối ưu hóa JavaScript: Chuyển các script không quan trọng sang tải asynchronously hoặc defer. Đảm bảo các script không can thiệp vào quá trình render trang.
• Cập nhật và cập nhật plugin/theme: Thường xuyên kiểm tra và update các plugin, theme lên phiên bản mới nhất để đảm bảo tối ưu về hiệu suất.
• Sử dụng browser caching: Đặt cache header cho các tài nguyên tĩnh như CSS, JavaScript, hình ảnh để chúng không phải tải lại mỗi khi người dùng truy cập trang.

7. Kiểm tra và đo lường kết quả

Sau khi thực hiện các tối ưu, điều quan trọng là phải kiểm tra kỹ lưỡng để đảm bảo hiệu quả. Tiến hành như sau:

• Rút gọn danh sách kiểm tra (checklist) để tập trung vào các phần quan trọng nhất. Ví dụ: chỉ kiểm tra các trang có lưu lượng truy cập cao hoặc các trang quan trọng về chuyển đổi.
• Sử dụng các công cụ để kiểm tra lại điểm CLS: PSI, GSC, WebPageTest, Chrome DevTools.
• Theo dõi dữ liệu trong Google Analytics: So sánh các chỉ số như bounce rate, thời gian trên trang, tỷ lệ chuyển đổi trước và sau khi tối ưu để đánh giá tác động đến trải nghiệm người dùng.
• Thu thập feedback từ người dùng: Sử dụng heatmaps, session recording (với UserTesting, Hotjar) để hiểu rõ hơn về hành vi người dùng và xác nhận xem các tối ưu có thực sự cải thiện trải nghiệm.

8. Báo cáo và cải tiến liên tục

Quá trình tối ưu CLS là một quy trình liên tục, không phải một lần hoàn thành. Để đảm bảo hiệu suất trang luôn ổn định, áp dụng các biện pháp sau:

• Tạo báo cáo định kỳ (hàng tháng hoặc quý) về hiệu suất CLS cho các trang quan trọng. Bao gồm các thông tin: điểm CLS, các layout shift quan trọng nhất, và các tối ưu đã thực hiện.
• Thiết lập monitoring tự động bằng các công cụ như Google Search Console, GTmetrix, hoặc PagePing để nhận thông báo khi điểm CLS có dấu hiệu tăng đột biến.
• Đào tạo đội ngũ phát triển và nội dung về các best practices tối ưu CLS. Khi team hiểu rõ tầm quan trọng và các phương pháp tối ưu, họ sẽ tự động áp dụng trong quá trình phát triển trang.
• Thường xuyên audit website: Định kỳ 3-6 tháng, chạy audit toàn diện để phát hiện các vấn đề tiềm ẩn do thay đổi mã nguồn, cập nhật plugin, hoặc bổ sung tính năng mới.

Việc tối ưu Cumulative Layout Shift không chỉ giúp cải thiện điểm số trên các công cụ đo lường mà còn mang lại trải nghiệm trang web mượt mà, ổn định và thân thiện với người dùng. Khi người dùng không còn phải đối mặt với các chuyển động không mong muốn của trang, họ sẽ dành nhiều thời gian hơn trên trang, tương tác nhiều hơn và có khả năng chuyển đổi cao hơn. Đây chính là chìa khóa để xây dựng một website thành công trong môi trường digital marketing ngày nay.