CLS là gì? Bí quyết giữ trang web của bạn "yên vị" và thân thiện với người dùng!

Bạn đã bao giờ đang đọc một bài viết thú vị, chuẩn bị nhấn vào một đường link hay nút bấm, thì “rầm!” – toàn bộ nội dung trang bỗng nhiên nhảy lên, khiến bạn bấm nhầm sang chỗ khác chưa? Nếu có, bạn chính là nạn nhân của một vấn đề khó chịu có tên là Cumulative Layout Shift (CLS). Đây không chỉ là một sự cố nhỏ mà còn là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và thứ hạng SEO của website bạn.

CLS (Cumulative Layout Shift) là gì?

CLS, hay Cumulative Layout Shift, là một trong ba chỉ số quan trọng của Core Web Vitals do Google đặt ra để đo lường trải nghiệm người dùng trên website. Nó định lượng mức độ ổn định hình ảnh của trang web, tức là tổng số lần các phần tử trên trang bị dịch chuyển một cách không mong muốn trong suốt vòng đời của trang.

• Điểm CLS càng cao thì trang web của bạn càng không ổn định.
• Một trang web có điểm CLS dưới 0.1 được coi là có trải nghiệm người dùng tốt.
• Điểm từ 0.1 đến 0.25 cần cải thiện.
• Trên 0.25 là kém.

Tưởng tượng như bạn đang xây một ngôi nhà mà các bức tường cứ tự động dịch chuyển vậy, thật khó chịu phải không?

Tại sao CLS lại quan trọng đến vậy?

CLS không chỉ là một con số kỹ thuật khô khan, nó ảnh hưởng trực tiếp đến:

• Trải nghiệm người dùng (UX): Như ví dụ ở đầu bài, việc nội dung nhảy múa gây ra sự khó chịu, bực bội và có thể khiến người dùng rời bỏ trang. Nó cản trở khả năng tương tác của người dùng, dẫn đến những cú click sai lầm.
• SEO và thứ hạng tìm kiếm: Google sử dụng Core Web Vitals (trong đó có CLS) như một yếu tố xếp hạng quan trọng. Một điểm CLS thấp đồng nghĩa với một trang web thân thiện hơn, và điều này có thể giúp website của bạn có thứ hạng cao hơn trên kết quả tìm kiếm.

Thủ phạm chính gây ra CLS

Vậy, những nguyên nhân nào thường khiến trang web của bạn bị “rung lắc”? Dưới đây là những “kẻ tình nghi” phổ biến nhất:

1. Hình ảnh và video không có kích thước

Đây là lỗi thường gặp nhất. Khi trình duyệt tải một hình ảnh hoặc video mà không biết trước kích thước (width và height) của nó, nó sẽ không thể dành sẵn không gian. Sau khi hình ảnh tải xong, nó sẽ “đẩy” các nội dung xung quanh để chiếm chỗ, gây ra layout shift.

2. Quảng cáo, nhúng (embeds) và iframe

Tương tự như hình ảnh, các nội dung từ bên thứ ba như quảng cáo, các widget nhúng từ mạng xã hội, hoặc iframe thường tải động và không được định trước kích thước. Chúng có thể xuất hiện bất ngờ và đẩy nội dung trang.

3. Nội dung được chèn động

Các banner cookie, thông báo đăng ký email, hoặc các popup xuất hiện đột ngột mà không có không gian được dành trước cũng là nguyên nhân phổ biến. Đặc biệt nếu chúng được chèn vào phía trên nội dung hiện có.

4. Web Fonts gây "nhảy" chữ (FOIT/FOUT)

Khi trình duyệt tải font chữ tùy chỉnh từ web, đôi khi nó sẽ hiển thị văn bản bằng một font mặc định trước (Flash Of Unstyled Text - FOUT) hoặc không hiển thị gì cả (Flash Of Invisible Text - FOIT). Khi font tùy chỉnh tải xong, nó sẽ thay thế font cũ, và nếu hai font có kích thước chữ, chiều cao dòng khác nhau, văn bản sẽ bị dịch chuyển.

5. Hoạt ảnh (animations) và chuyển động (transitions) không đúng cách

Một số nhà phát triển sử dụng các thuộc tính CSS như top, left, width, height để tạo hoạt ảnh. Việc thay đổi những thuộc tính này sẽ buộc trình duyệt phải tính toán lại layout toàn bộ trang, gây ra CLS. Thay vào đó, nên sử dụng các thuộc tính transform của CSS.

Làm thế nào để "trị" CLS hiệu quả?

May mắn thay, có rất nhiều cách đơn giản để khắc phục và ngăn chặn CLS:

• Luôn chỉ định kích thước cho hình ảnh và video:
  Thêm thuộc tính width và height vào thẻ <img> và <video>. Hoặc sử dụng thuộc tính CSS aspect-ratio để duy trì tỷ lệ khung hình.

  <img src="example.jpg" alt="Mô tả" width="800" height="600">

  /* Hoặc dùng CSS aspect-ratio */img {  aspect-ratio: 4 / 3; /* Chiều rộng / Chiều cao */  width: 100%;  height: auto;}

• Dành chỗ trước cho quảng cáo và nội dung nhúng:
  Sử dụng CSS để định nghĩa min-height, min-width hoặc các thuộc tính kích thước cụ thể cho các container chứa quảng cáo, iframe hoặc widget bên thứ ba. Nếu không biết chính xác kích thước, hãy sử dụng kích thước trung bình hoặc lớn nhất có thể dự đoán.
• Tránh chèn nội dung động phía trên nội dung hiện có:
  Nếu bạn cần hiển thị banner cookie hoặc pop-up, hãy dành sẵn không gian cho chúng hoặc chỉ hiển thị chúng sau khi người dùng thực hiện một hành động cụ thể (ví dụ: cuộn trang đến một điểm nhất định). Cân nhắc đặt chúng ở cuối trang hoặc dưới dạng overlay để không làm dịch chuyển nội dung chính.
• Tối ưu hóa việc tải Web Fonts:
  Sử dụng font-display: swap; trong CSS để trình duyệt hiển thị một font dự phòng trước, sau đó hoán đổi sang font tùy chỉnh khi nó tải xong. Điều này giúp giảm thiểu FOIT/FOUT. Bạn cũng có thể preload font chữ quan trọng.

  @font-face {  font-family: 'MyCustomFont';  src: url('my-custom-font.woff2') format('woff2');  font-display: swap; /* Sử dụng swap để hiển thị font dự phòng trước */}

• Sử dụng thuộc tính CSS transform cho hoạt ảnh:
  Thay vì thay đổi các thuộc tính kích thước hoặc vị trí trực tiếp, hãy dùng transform: scale(), transform: translate() để tạo hiệu ứng chuyển động. Những thuộc tính này không gây ra việc tính toán lại layout.

Lời kết

CLS không chỉ là một chỉ số kỹ thuật, mà nó là thước đo trực tiếp cho sự quan tâm của bạn đến trải nghiệm người dùng. Một trang web ổn định, không bị "nhảy nhót" lung tung sẽ mang lại sự thoải mái, chuyên nghiệp và giữ chân người đọc lâu hơn. Hãy bắt tay vào "dọn dẹp" CLS ngay hôm nay để website của bạn luôn "yên vị" và thân thiện nhất!