Layout Shift Là Gì? Toàn Tập Về CLS Và Cách Khắc Phục Điểm Trừ Core Web Vitals

Khi lướt web, Hiện tượng đó chính là layout shift hay còn gọi là dịch chuyển bố cục. Trong bài viết này, chúng ta sẽ đi sâu vào khái niệm layout shift là gì, vì sao nó lại quan trọng với trải nghiệm người dùng và thứ hạng SEO, cùng các giải pháp tối ưu toàn diện để cải thiện chỉ số Cumulative Layout Shift (CLS).

Layout Shift Là Gì? Định Nghĩa Và Bản Chất Của Hiện Tượng Dịch Chuyển Bố Cục

Layout shift là sự thay đổi vị trí đột ngột của các phần tử trên trang web sau khi nội dung đã được hiển thị ban đầu. Điều này xảy ra khi trình duyệt tải và hiển thị tài nguyên (hình ảnh, video, font chữ, quảng cáo) mà chưa khai báo trước kích thước, hoặc khi có các thao tác chèn nội dung động từ JavaScript. Kết quả là các element bị đẩy sang một vị trí khác, gây khó chịu cho người dùng và làm giảm độ tin cậy của website.

Google đã đưa chỉ số Cumulative Layout Shift (CLS) vào bộ ba Core Web Vitals, đánh giá mức độ ổn định thị giác của trang. Một website có CLS cao đồng nghĩa với việc layout thường xuyên bị xáo trộn, ảnh hưởng trực tiếp đến trải nghiệm duyệt web và điểm số SEO trong mắt công cụ tìm kiếm.

Vì Sao Layout Shift Gây Ảnh Hưởng Xấu Đến Trải Nghiệm Người Dùng Và SEO?

Các nghiên cứu hành vi người dùng chỉ ra rằng layout shift làm tăng tỷ lệ thoát (bounce rate) lên đến 30% nếu xảy ra thường xuyên. Khi người dùng bị gián đoạn đột ngột, họ cảm thấy website thiếu chuyên nghiệp và dễ dàng rời bỏ. Về mặt kỹ thuật, Google sử dụng CLS để đánh giá chất lượng trang, áp dụng làm yếu tố xếp hạng trong kết quả tìm kiếm. Một trang có CLS dưới 0.1 được xem là tốt, trong khi trên 0.25 là kém và cần cải thiện khẩn cấp.

Nguyên Nhân Chính Gây Ra Layout Shift Trên Website

Để khắc phục layout shift hiệu quả, cần hiểu rõ các tác nhân phổ biến nhất.

Font Chữ Web Load Chậm Hoặc Không Đúng Kích Thước

Khi một font chữ web (web font) được tải về sau khi văn bản đã hiển thị bằng font dự phòng, kích thước và khoảng cách ký tự có thể khác biệt đáng kể. Sự thay đổi này làm giãn hoặc co các khối văn bản, đẩy các element phía dưới xuống một cách bất ngờ. Đây là một trong những nguyên nhân hàng đầu gây layout shift âm thầm.

Ảnh Và Video Không Khai Báo Kích Thước Rõ Ràng

Hình ảnh và video là ‘thủ phạm’ kinh điển. Nếu không có thuộc tính width và height trong HTML hoặc CSS, trình duyệt sẽ không biết trước không gian cần dành cho chúng. Khi tài nguyên được tải xong, bố cục bỗng nhiên phải mở rộng để chứa chúng, gây ra dịch chuyển rõ rệt.

Quảng Cáo Và Nhúng Nội Dung Từ Bên Thứ Ba

Các mạng quảng cáo như Google AdSense, AdExchange hoặc các iframe nhúng từ bên thứ ba thường có kích thước không cố định. Chúng có thể thay đổi kích thước tùy theo thiết bị, người dùng hoặc nội dung quảng cáo được phân phối. Điều này tạo ra những cú ‘nhảy’ bố cục rất khó kiểm soát nếu không có container với kích thước dự phòng.

JavaScript Injection Và DOM Manipulation

Việc chèn nội dung động bằng JavaScript sau khi trang đã render là nguyên nhân phổ biến. Ví dụ: hiển thị pop-up, banner thông báo, hoặc load thêm bài viết khi cuộn chuột. Nếu các element này được chèn vào luồng DOM mà không có vị trí dự phòng, layout ngay lập tức bị xáo trộn.

Cách Đo Lường Và Tính Toán Chỉ Số Cumulative Layout Shift (CLS)

CLS được tính dựa trên hai yếu tố: impact fraction và distance fraction. Impact fraction là tổng diện tích vùng bị ảnh hưởng bởi các element dịch chuyển so với khung nhìn. Distance fraction là khoảng cách tối đa mà các element di chuyển so với vị trí ban đầu. Công thức: CLS score = impact fraction x distance fraction. Mỗi lần layout shift xảy ra sẽ được ghi nhận, và tổng điểm CLS là tổng của tất cả các lần shift trong suốt phiên làm việc của người dùng.

Các công cụ phổ biến để đo layout shift bao gồm:

• Lighthouse: Công cụ của Google có sẵn trong Chrome DevTools, cung cấp báo cáo CLS cùng gợi ý khắc phục.
• PageSpeed Insights: Phân tích trực tiếp từ URL và hiển thị cả dữ liệu lab test lẫn field data từ Chrome User Experience Report.
• Web Vitals Extension: Tiện ích mở rộng giúp theo dõi real-time các chỉ số CLS, LCP, FID khi duyệt web.
• Search Console: Báo cáo Core Web Vitals tổng hợp cho toàn bộ website dựa trên dữ liệu người dùng thực.

Tiêu Chuẩn Điểm CLS Tốt, Cần Cải Thiện Và Kém



Phân loại	Điểm CLS	Ý nghĩa
Tốt	Dưới 0.1	Trang web ổn định, layout hầu như không dịch chuyển, trải nghiệm người dùng tốt.
Cần cải thiện	Từ 0.1 đến dưới 0.25	Vẫn có thể chấp nhận được nhưng cần tối ưu thêm để tránh bị Google đánh dấu.
Kém	Từ 0.25 trở lên	Layout shift xảy ra thường xuyên, ảnh hưởng nghiêm trọng đến UX và thứ hạng SEO.

Hướng Dẫn Chi Tiết Khắc Phục Layout Shift

Tối ưu layout shift là quá trình kết hợp giữa thiết kế cẩn thận, khai báo kích thước rõ ràng và kiểm soát chặt chẽ các tài nguyên tải muộn. Thực hiện tuần tự các bước sau để giảm thiểu tối đa CLS.

Thêm Thuộc Tính Width Và Height Cho Ảnh Và Video

Với mỗi thẻ <img>, luôn khai báo đầy đủ width và height. Nếu sử dụng CSS responsive, kết hợp với max-width: 100%; height: auto;. Đối với video, đặt container có tỷ lệ khung hình cố định (aspect ratio) bằng cách dùng padding-bottom dựa trên phần trăm. Ví dụ: một video 16:9 sẽ có padding-bottom: 56.25%.

Sử Dụng Font Display Swap Và Preload Font Chữ

Đặt font-display: swap trong khai báo @font-face để trình duyệt hiển thị ngay font dự phòng, sau đó thay thế khi font chính tải xong. Để giảm layout shift do swap, hãy preload font chữ chính bằng thẻ <link rel="preload"> và cân đối khoảng cách giữa font dự phòng và font chính thông qua thuộc tính size-adjust trong CSS @font-face.

Đặt Kích Thước Cố Định Cho Quảng Cáo Và Iframe

Luôn đặt các container dự phòng (placeholder) với kích thước tối thiểu cho iframe quảng cáo. Sử dụng CSS để dành sẵn không gian trống tương ứng với kích thước quảng cáo dự kiến. Nếu quảng cáo thất bại hoặc tải chậm, container vẫn giữ nguyên vị trí, tránh layout shift. Một số mạng quảng cáo cho phép cấu hình kích thước cố định hoặc responsive an toàn.

Tối Ưu Hóa JavaScript Và Tránh Chèn Nội Dung Bất Ngờ

Trì hoãn việc thực thi JavaScript không cần thiết bằng defer hoặc async. Đối với các pop-up, banner thông báo, hãy chèn chúng vào vị trí cố định (fixed position) để không ảnh hưởng đến luồng bố cục. Nếu cần chèn nội dung động vào luồng DOM, hãy dành sẵn không gian bằng một container rỗng với kích thước phù hợp ngay từ HTML tĩnh.

So Sánh Layout Shift Với Các Chỉ Số Core Web Vitals Khác (FCP, LCP, INP)



Chỉ số	Ý nghĩa	Mối liên hệ với layout shift
First Contentful Paint (FCP)	Thời điểm hiển thị nội dung đầu tiên	Layout shift không ảnh hưởng trực tiếp đến FCP, nhưng FCP nhanh có thể khiến layout shift dễ thấy hơn do người dùng bắt đầu đọc sớm.
Largest Contentful Paint (LCP)	Thời điểm hiển thị nội dung chính lớn nhất	Nếu LCP element bị dịch chuyển, điểm LCP có thể tăng do trình duyệt cần thời gian stabilize.
Interaction to Next Paint (INP)	Độ trễ tương tác sau khi người dùng thao tác	Layout shift đột ngột khi người dùng đang tương tác (click, scroll) gây ra INP kém, làm giảm trải nghiệm tổng thể.

Sai Lầm Thường Gặp Khi Xử Lý Layout Shift

• Chỉ tập trung vào hình ảnh mà bỏ qua font và quảng cáo: Nhiều người chỉ khai báo kích thước cho ảnh nhưng quên mất web font và các iframe bên thứ ba, khiến CLS vẫn cao.
• Không kiểm tra trên thiết bị di động: Layout shift thường xảy ra mạnh hơn trên màn hình nhỏ do không gian hạn chế. Cần test trên nhiều kích thước khác nhau.
• Dùng CSS transition for height hoặc width: Một số người cố gắng làm mượt layout shift bằng transition, điều này thực sự làm tăng thời gian dịch chuyển và vẫn bị tính vào CLS.
• Không kiểm tra với dữ liệu thực (field data): Chỉ dùng Lighthouse lab test là chưa đủ, cần đối chiếu với Search Console để thấy hành vi người dùng thực tế.

Lưu Ý Quan Trọng Khi Tối Ưu CLS Cho Website

Khi triển khai các thay đổi, luôn kiểm tra lại bằng công cụ đo lường sau mỗi lần cập nhật. Việc tối ưu CLS cần sự phối hợp giữa đội phát triển front-end, thiết kế và quản lý quảng cáo. Một số mẹo bổ sung: sử dụng kỹ thuật CSS aspect-ratio cho các block bất kỳ, tránh thay đổi kích thước các phần tử có position static sau khi trang đã render, và ưu tiên dùng empty placeholder thay vì hiện thị spinner hoặc loader không chiếm đúng không gian. Ngoài ra, hãy cập nhật thường xuyên các thư viện JavaScript vì các bản vá thường cải thiện cách chúng tác động đến bố cục.

Câu Hỏi Thường Gặp Về Layout Shift (FAQ)

Layout shift có ảnh hưởng đến thứ hạng Google không?

Có. Từ tháng 6 năm 2021, Google đã chính thức đưa CLS vào thuật toán xếp hạng cho cả kết quả tìm kiếm trên di động và máy tính. Trang web có CLS cao sẽ bị giảm thứ hạng so với các đối thủ có trải nghiệm ổn định hơn.

CLS bao nhiêu là tốt?

Chỉ số CLS dưới 0.1 được đánh giá là tốt. Từ 0.1 đến dưới 0.25 là cần cải thiện, và từ 0.25 trở lên là kém, cần can thiệp ngay.

Tại sao CLS của tôi vẫn cao dù đã fix ảnh?

Có thể còn các nguyên nhân khác như web font, quảng cáo, iframe, hoặc JavaScript injection. Hãy kiểm tra lại các bản ghi session trong Chrome DevTools > Performance > Layout Shifts để xác định chính xác element nào đang dịch chuyển.

Có công cụ nào kiểm tra layout shift không?

Có rất nhiều công cụ miễn phí: Lighthouse, PageSpeed Insights, Chrome DevTools (tab Performance > xem các sự kiện Layout Shift), Web Vitals Chrome Extension. Ngoài ra, các công cờ như GTmetrix hay Pingdom cũng hiển thị chỉ số CLS trong báo cáo.

Kết Luận

Layout shift là gì – đó là hiện tượng dịch chuyển bố cục gây mất ổn định thị giác, ảnh hưởng xấu đến trải nghiệm người dùng và thứ hạng SEO. Việc nắm vững nguyên nhân và áp dụng các giải pháp khai báo kích thước, tối ưu font, quảng cáo, JavaScript là chìa khóa để đạt được CLS dưới 0.1. Hãy biến layout shift thành cơ hội để nâng cao chất lượng website, giữ chân người dùng và đạt điểm cao từ Google. Bắt đầu kiểm tra ngay hôm nay bằng công cụ yêu thích của bạn và xây dựng một trang web vững chắc, không còn nhảy múa trước mắt người xem nữa.