Cumulative Layout Shift (CLS) là gì? Cách tối ưu từ A-Z

Bạn đã bao giờ cố gắng nhấp vào một nút trên website, để rồi một banner quảng cáo đột ngột xuất hiện và đẩy nó xuống, khiến bạn nhấp nhầm vào thứ khác chưa? Cảm giác thật khó chịu, phải không? Trải nghiệm bực bội đó chính là ví dụ điển hình nhất khi chúng ta nói về Cumulative Layout Shift (CLS) là gì. Đây không chỉ là một thuật ngữ kỹ thuật khô khan, mà là một yếu tố cốt lõi quyết định sự hài lòng của người dùng và thứ hạng SEO của bạn. Hãy cùng Việt Thắng tìm hiểu từ A-Z cách để “thuần hóa” chỉ số quan trọng này nhé.

Cumulative Layout Shift (CLS) là gì?

Nói một cách đơn giản nhất, Cumulative Layout Shift (CLS) là một chỉ số dùng để đo lường sự ổn định về mặt thị giác của một trang web. Nó tính toán tổng số điểm của tất cả các lần thay đổi bố cục bất ngờ xảy ra trong suốt quá trình người dùng truy cập trang. Một sự thay đổi bố cục (layout shift) xảy ra khi một phần tử trên trang thay đổi vị trí của nó từ khung hình này sang khung hình tiếp theo.

Giải mã chỉ số đo lường sự ổn định thị giác của trang

Hãy tưởng tượng bạn đang đọc một bài báo online. Bạn đang tập trung vào một đoạn văn, bỗng nhiên một hình ảnh tải xong và chèn vào phía trên, đẩy toàn bộ nội dung bạn đang đọc xuống một đoạn. Bạn phải mất công tìm lại vị trí cũ. Đây chính là một “layout shift” và CLS là chỉ số đo lường mức độ nghiêm trọng của những sự dịch chuyển như vậy.

Mục tiêu của Google khi đưa ra chỉ số này là khuyến khích các nhà phát triển web tạo ra những trang web có trải nghiệm mượt mà, dễ đoán. Người dùng sẽ không phải đối mặt với tình trạng các phần tử nhảy múa trên màn hình một cách khó lường. Một trang web ổn định là một trang web đáng tin cậy.

Vai trò của CLS trong bộ ba Core Web Vitals (LCP, FID, CLS)

CLS không đứng một mình. Nó là một trong ba trụ cột chính của Core Web Vitals, bộ chỉ số quan trọng mà Google sử dụng để đánh giá trải nghiệm người dùng thực tế trên một trang web. Nếu coi Core Web Vitals là một đội, thì mỗi thành viên có một nhiệm vụ riêng:

• LCP (Largest Contentful Paint): Đo lường tốc độ tải. Nó trả lời câu hỏi: “Trang web tải nội dung chính nhanh đến mức nào?”
• FID (First Input Delay): Đo lường khả năng tương tác. Nó trả lời câu hỏi: “Trang web phản hồi lại hành động đầu tiên của người dùng (như nhấp chuột) nhanh ra sao?”
• CLS (Cumulative Layout Shift): Đo lường sự ổn định. Nó trả lời câu hỏi: “Bố cục của trang có ổn định trong quá trình tải và sử dụng không?”

Bộ ba này cùng nhau tạo nên một bức tranh tổng thể về chất lượng trải nghiệm mà website của bạn mang lại. Cải thiện CLS cũng quan trọng không kém việc tối ưu tốc độ tải trang.

CLS ảnh hưởng như thế nào đến SEO và trải nghiệm người dùng?

Có thể bạn nghĩ rằng vài phần tử bị dịch chuyển một chút cũng không phải vấn đề lớn. Nhưng thực tế, tác động của một chỉ số CLS kém có thể lan rộng, ảnh hưởng tiêu cực đến cả người dùng và thứ hạng của bạn trên công cụ tìm kiếm.

Tác động trực tiếp đến hành vi và sự hài lòng của người dùng (UX)

Đây là hậu quả dễ thấy nhất. Một chỉ số CLS cao gây ra sự khó chịu và nhầm lẫn. Người dùng có thể vô tình nhấp vào nút “Hủy đơn hàng” thay vì “Xác nhận”, hoặc nhấn vào một quảng cáo mà họ không hề có ý định. Những trải nghiệm tồi tệ này dẫn đến:

• Tỷ lệ thoát (Bounce Rate) tăng cao: Người dùng sẽ nhanh chóng rời đi nếu cảm thấy trang web của bạn khó sử dụng.
• Giảm tỷ lệ chuyển đổi: Không ai muốn mua hàng trên một trang web mà họ không tin tưởng hoặc liên tục gây ra lỗi.
• Mất niềm tin vào thương hiệu: Một website thiếu chuyên nghiệp, liên tục “nhảy múa” sẽ làm giảm uy tín của bạn trong mắt khách hàng.

Trải nghiệm người dùng tốt không phải là một tùy chọn, mà là yêu cầu bắt buộc để giữ chân khách truy cập.

Là một yếu tố xếp hạng trang quan trọng của Google

Kể từ bản cập nhật Page Experience vào năm 2021, Google đã chính thức xác nhận Core Web Vitals (bao gồm cả CLS) là một tín hiệu xếp hạng. Điều này có nghĩa là, nếu hai trang web có nội dung chất lượng tương đương nhau, trang web có điểm Core Web Vitals tốt hơn (bao gồm điểm CLS tốt) sẽ có nhiều khả năng xếp hạng cao hơn.

Bỏ qua CLS đồng nghĩa với việc bạn đang bỏ qua một cơ hội để cải thiện vị thế của mình trên trang kết quả tìm kiếm. Google muốn mang đến cho người dùng những kết quả tốt nhất, và “tốt nhất” không chỉ là về nội dung, mà còn là về trải nghiệm sử dụng trang.

Cách tính và đánh giá điểm CLS: Điểm tốt là bao nhiêu?

Để cải thiện CLS, trước tiên bạn cần hiểu cách Google đo lường và chấm điểm nó. Điểm số này không phải là một con số ngẫu nhiên mà được tính toán dựa trên một công thức cụ thể.

Công thức tính điểm CLS: Layout Shift Score = Impact Fraction x Distance Fraction

Mỗi khi một phần tử không ổn định gây ra dịch chuyển, một điểm số dịch chuyển bố cục (Layout Shift Score) sẽ được tính. Công thức khá đơn giản:

Layout Shift Score = Impact Fraction (Tỷ lệ ảnh hưởng) x Distance Fraction (Tỷ lệ khoảng cách)

Để Việt Thắng giải thích dễ hiểu hơn:

• Impact Fraction: Là diện tích mà phần tử không ổn định chiếm dụng trên màn hình. Ví dụ, một banner lớn chiếm nửa màn hình sẽ có tỷ lệ ảnh hưởng cao hơn một icon nhỏ.
• Distance Fraction: Là khoảng cách lớn nhất mà phần tử đó đã dịch chuyển (theo chiều dọc hoặc chiều ngang), chia cho chiều cao hoặc chiều rộng lớn nhất của khung nhìn. Nói đơn giản là nó đã “nhảy” đi bao xa.

Điểm CLS cuối cùng của trang là tổng hợp của tất cả các điểm Layout Shift Score riêng lẻ xảy ra trong suốt phiên truy cập.

Các ngưỡng điểm CLS theo tiêu chuẩn Google (Tốt, Cần cải thiện, Kém)

Sau khi có điểm số, Google sẽ phân loại nó vào một trong ba nhóm để bạn dễ dàng đánh giá. Đây là các ngưỡng bạn cần ghi nhớ:

Mục tiêu của bạn là đưa tất cả các URL trên website của mình vào ngưỡng Tốt.

Nguyên nhân nào gây ra lỗi Cumulative Layout Shift cao?

Hiểu được nguyên nhân gây ra CLS là bước đầu tiên để khắc phục. Hầu hết các vấn đề đều xuất phát từ việc trình duyệt không biết trước kích thước của một phần tử trước khi nó được tải hoàn toàn.

Hình ảnh và video không có thuộc tính kích thước (width, height)

Đây là “thủ phạm” phổ biến nhất. Khi bạn chèn một hình ảnh mà không khai báo thuộc tính `width` và `height`, trình duyệt sẽ không biết phải dành cho nó bao nhiêu không gian. Ban đầu, nó sẽ không dành chỗ nào cả. Khi hình ảnh tải xong, nó đột ngột xuất hiện và đẩy tất cả nội dung xung quanh ra xa. Điều này tạo ra một cú dịch chuyển bố cục lớn.

Quảng cáo, iframe và nội dung nhúng không có không gian dành riêng

Tương tự như hình ảnh, các banner quảng cáo, video nhúng từ YouTube, hay các iframe khác thường có kích thước thay đổi. Nếu bạn không định sẵn một vùng chứa cố định cho chúng bằng CSS, chúng sẽ gây ra hiện tượng “nhảy” bố cục khi được tải và hiển thị. Đặc biệt, các mạng quảng cáo thường tự động điều chỉnh kích thước banner để tối ưu hóa, làm cho vấn đề càng thêm phức tạp.

Nội dung được chèn động (Dynamic Content)

Nội dung chèn động là những thứ xuất hiện sau khi trang đã tải ban đầu. Ví dụ như thanh thông báo “Chúng tôi sử dụng cookie”, các biểu mẫu đăng ký email, hay các sản phẩm liên quan được tải thêm ở phía trên nội dung chính. Nếu việc chèn này không được xử lý khéo léo, nó sẽ đẩy toàn bộ nội dung hiện có xuống và gây ra điểm CLS cao.

Web Fonts gây ra hiện tượng FOIT/FOUT

Khi một trang web sử dụng font chữ tùy chỉnh (web font), trình duyệt cần thời gian để tải file font đó về. Trong lúc chờ đợi, có hai hiện tượng có thể xảy ra:

• FOIT (Flash of Invisible Text): Văn bản bị ẩn hoàn toàn cho đến khi font chữ tải xong.
• FOUT (Flash of Unstyled Text): Văn bản hiển thị bằng một font hệ thống mặc định (ví dụ: Times New Roman), sau đó đột ngột đổi sang font tùy chỉnh khi nó tải xong.

Cả hai trường hợp đều có thể gây ra dịch chuyển bố cục, vì font hệ thống và font tùy chỉnh thường có kích thước và khoảng cách ký tự khác nhau, làm thay đổi kích thước của cả khối văn bản.

Hướng dẫn chi tiết cách đo lường và kiểm tra chỉ số CLS

Trước khi sửa lỗi, bạn cần biết chính xác trang nào đang gặp vấn đề và nguyên nhân là gì. May mắn là có rất nhiều công cụ đo CLS miễn phí và hiệu quả từ chính Google.

Sử dụng Dữ liệu thực tế (Field Data): PageSpeed Insights & Google Search Console

Dữ liệu thực tế được thu thập từ những người dùng Chrome thực sự đã truy cập vào trang web của bạn. Đây là dữ liệu quan trọng nhất vì nó phản ánh trải nghiệm thực tế.

• Google PageSpeed Insights: Chỉ cần dán URL của bạn vào, công cụ này sẽ trả về điểm Core Web Vitals (bao gồm CLS) dựa trên dữ liệu thu thập trong 28 ngày qua. Nó sẽ cho bạn biết URL của bạn đang ở mức “Tốt”, “Cần cải thiện” hay “Kém”.
• Google Search Console: Trong báo cáo “Trải nghiệm trên trang” và “Các chỉ số quan trọng về trang web”, bạn có thể xem tổng quan về hiệu suất CLS trên toàn bộ website. Công cụ này sẽ nhóm các URL có cùng vấn đề lại với nhau, giúp bạn ưu tiên khắc phục các lỗi ảnh hưởng đến nhiều trang nhất.

Sử dụng Dữ liệu trong phòng thí nghiệm (Lab Data): Lighthouse & Chrome DevTools

Dữ liệu trong phòng thí nghiệm được tạo ra trong một môi trường được kiểm soát, mô phỏng quá trình tải trang. Nó cực kỳ hữu ích để gỡ lỗi và kiểm tra các thay đổi của bạn ngay lập tức.

• Lighthouse: Được tích hợp sẵn trong trình duyệt Chrome (Nhấn F12 -> tab Lighthouse). Khi chạy một bài kiểm tra, nó sẽ cho bạn điểm CLS và chỉ ra chính xác những phần tử nào trên trang đã gây ra dịch chuyển bố cục.
• Chrome DevTools: Đây là công cụ mạnh mẽ cho các nhà phát triển. Trong tab “Performance”, bạn có thể ghi lại quá trình tải trang và xem trực quan các “Layout Shift” xảy ra trên dòng thời gian. Bằng cách di chuột qua chúng, bạn có thể thấy phần tử nào đã dịch chuyển và dịch chuyển như thế nào.

Làm cách nào để khắc phục và tối ưu điểm CLS hiệu quả?

Giờ là lúc đi vào phần quan trọng nhất: cách tối ưu CLS. Với mỗi nguyên nhân đã nêu ở trên, chúng ta đều có giải pháp tương ứng. Đừng lo lắng, Việt Thắng sẽ hướng dẫn bạn chi tiết.

Luôn khai báo thuộc tính width và height cho hình ảnh, video

Đây là giải pháp đơn giản nhưng hiệu quả nhất. Bằng cách thêm thuộc tính `width` và `height` vào thẻ `` và `

<!-- Cách làm sai --><img src="wiweb-logo.jpg"><!-- Cách làm đúng --><img src="wiweb-logo.jpg" width="600" height="400">

Đối với thiết kế đáp ứng (responsive), bạn có thể kết hợp điều này với CSS `max-width: 100%; height: auto;` để hình ảnh tự co dãn theo kích thước màn hình mà không làm hỏng bố cục.

Dành không gian cố định cho quảng cáo và iframe bằng CSS

Với quảng cáo và các nội dung nhúng, bạn không thể luôn biết trước kích thước chính xác. Giải pháp ở đây là tạo một vùng chứa `

` bao bọc bên ngoài và đặt kích thước cố định cho nó bằng CSS, thường là kích thước lớn nhất có thể của quảng cáo.

.ad-container {  min-height: 250px; /* Chiều cao tối thiểu của banner */  width: 300px;  background-color: #f0f0f0; /* Màu nền giữ chỗ */}

Khi quảng cáo tải, nó sẽ lấp đầy vào không gian đã được dành sẵn này, không gây ảnh hưởng đến các phần tử xung quanh.

Tránh chèn nội dung mới phía trên nội dung hiện có

Nếu bạn cần hiển thị một thông báo hoặc banner, hãy cố gắng không chèn nó vào phía trên nội dung mà người dùng đang xem. Thay vào đó, hãy sử dụng các overlay, popup hoặc chèn nó vào một không gian đã được thiết kế sẵn mà không làm thay đổi bố cục hiện tại. Nếu bắt buộc phải chèn, hãy đảm bảo bạn đã dành sẵn một khoảng trống cho nó ngay từ đầu.

Tải font chữ tối ưu bằng font-display và preload

Để giải quyết vấn đề với font chữ, bạn có thể sử dụng hai kỹ thuật sau:

• Sử dụng `font-display: optional` hoặc `font-display: swap` trong CSS: `swap` sẽ hiển thị font hệ thống ngay lập tức và tráo đổi khi font tùy chỉnh tải xong. `optional` sẽ chỉ hiển thị font tùy chỉnh nếu nó tải về đủ nhanh, nếu không sẽ giữ nguyên font hệ thống. Cả hai đều giúp cải thiện điểm CLS.
• Preload (tải trước) các file font quan trọng: Bằng cách thêm một thẻ “ vào phần “ của trang, bạn yêu cầu trình duyệt ưu tiên tải file font ngay từ đầu, giảm thiểu thời gian chờ đợi.

<link rel="preload" href="/fonts/your-custom-font.woff2" as="font" type="font/woff2" crossorigin>

Sử dụng transform cho animation thay vì thay đổi thuộc tính layout

Khi bạn tạo hiệu ứng động (animation) bằng cách thay đổi các thuộc tính như `top`, `left`, `width`, hay `margin`, trình duyệt sẽ phải tính toán lại toàn bộ bố cục. Điều này rất tốn kém và có thể gây ra layout shift. Thay vào đó, hãy ưu tiên sử dụng thuộc tính `transform` của CSS (`translate`, `scale`, `rotate`). Các animation này được xử lý bởi GPU, mượt mà hơn và không ảnh hưởng đến bố cục chung của trang.

Tổng kết

Qua bài viết này, hy vọng bạn đã có một cái nhìn toàn diện và sâu sắc về Cumulative Layout Shift (CLS) là gì. Nó không chỉ là một chỉ số kỹ thuật, mà là thước đo sự tôn trọng của bạn dành cho trải nghiệm của người dùng.

Tóm tắt tầm quan trọng của CLS đối với thành công của website

Một điểm CLS tốt không chỉ giúp bạn cải thiện thứ hạng SEO trên Google. Quan trọng hơn, nó tạo ra một môi trường duyệt web ổn định, đáng tin cậy, giúp người dùng cảm thấy thoải mái và dễ dàng thực hiện các hành động họ mong muốn. Điều này trực tiếp góp phần vào việc tăng tỷ lệ chuyển đổi, xây dựng lòng trung thành và khẳng định sự chuyên nghiệp cho thương hiệu của bạn.

Bắt đầu cải thiện trải nghiệm người dùng ngay hôm nay

Việc tối ưu CLS là một hành trình liên tục, không phải là một công việc làm một lần rồi thôi. Hãy bắt đầu bằng việc kiểm tra website của bạn với PageSpeed Insights, xác định các URL có vấn đề và áp dụng những kỹ thuật mà Việt Thắng đã chia sẻ. Chăm chút cho trải nghiệm người dùng chính là cách đầu tư bền vững nhất cho sự thành công của website.

Trong quá trình tối ưu, bạn thấy phần nào khó thực hiện nhất? Chia sẻ với Việt Thắng ở phần bình luận nhé!

Lý Văn Hiếu

Anh Hiếu là chuyên gia có tư duy tổng thể, kết hợp nền tảng kỹ thuật lập trình (PHP, MySQL, WordPress, Flatsome) từ ĐH Công nghệ Thông tin (UIT) với chiến lược SEO sắc bén (kinh nghiệm từ GOBRANDING). Anh hiện đang dẫn dắt cả hai team Web và SEO tại Việt Thắng & WIFIM, đảm bảo mọi website ra đời đều là một cỗ máy tối ưu hoàn hảo cho cả người dùng và Google.