Cumulative Layout Shift là gì? Cách cải thiện điểm CLS

CLS là viết tắt của Cumulative Layout Shift một chỉ số quan trọng trong bộ Core Web Vitals của Google. CLS dùng để đo lường mức độ ổn định của bố cục website khi tải trang. Việc hiểu rõ và cải thiện CLS sẽ giúp website của bạn thân thiện hơn với người dùng và nâng cao thứ hạng trên công cụ tìm kiếm.

CLS là gì?

CLS (Cumulative Layout Shift) là một chỉ số đo lường mức độ ổn định của bố cục trang web trong quá trình tải và khi người dùng tương tác. Cụ thể, CLS phản ánh tổng số điểm của tất cả các lần thay đổi bố cục không mong muốn trên trang. Tức là khi các phần tử như hình ảnh, văn bản, nút bấm… bất ngờ di chuyển hoặc thay đổi vị trí mà không có sự tác động trực tiếp từ người dùng.

Điểm CLS càng cao thì trang web càng thiếu ổn định, làm gián đoạn trải nghiệm người dùng. Ví dụ, bạn đang đọc một đoạn văn thì bất ngờ một quảng cáo hoặc hình ảnh tải chậm xuất hiện, đẩy nội dung xuống dưới khiến bạn mất vị trí đang đọc – đó chính là một “layout shift” và sẽ bị tính vào điểm CLS.

Điểm CLS bao nhiêu là tốt?

Chỉ số Cumulative Layout Shift (CLS) phản ánh mức độ ổn định của bố cục trang web trong quá trình người dùng truy cập. Không giống như các chỉ số hiệu suất khác như Largest Contentful Paint (LCP) hay Interaction to Next Paint (INP) được đo bằng giây, CLS đo lường mức độ dịch chuyển bất ngờ của các phần tử trên trang.

Theo chuẩn đánh giá của Google:

• Tốt: CLS < 0,1 – Trang web hiển thị ổn định, không bị xê dịch nội dung.

• Cần cải thiện: CLS từ 0,1 – 0,25 – Cần tối ưu để giảm tình trạng thay đổi bố cục.

• Kém: CLS > 0,25 – Trải nghiệm người dùng bị ảnh hưởng nghiêm trọng.

Hiểu rõ và tối ưu điểm CLS giúp website duy trì trải nghiệm mượt mà, tránh gây khó chịu cho người truy cập và cải thiện thứ hạng SEO tổng thể.

Độ dịch chuyển bố cục tích lũy (CLS) được đo như thế nào?

Cumulative Layout Shift (CLS) là thước đo đánh giá mức độ ổn định hình ảnh và bố cục của trang web khi người dùng tải trang. Thay vì đo bằng thời gian, CLS sử dụng một hệ thống điểm để xác định mức độ các phần tử bị dịch chuyển ngoài ý muốn trong quá trình hiển thị.

Cụ thể, CLS được tính dựa trên sự di chuyển của các thành phần không ổn định trong khung nhìn giữa hai khung hình hiển thị. Công thức tính điểm CLS là:

Điểm CLS = Tỷ lệ tác động × Tỷ lệ khoảng cách

• Tỷ lệ tác động (Impact Fraction): Biểu thị phần diện tích màn hình bị ảnh hưởng bởi phần tử bị dịch chuyển.

• Tỷ lệ khoảng cách (Distance Fraction): Cho biết phần tử đó đã di chuyển bao xa so với vị trí ban đầu.

Tỷ lệ tác động (Impact Fraction) là gì?

Trong chỉ số Cumulative Layout Shift (CLS), tỷ lệ tác động (Impact Fraction – IF) thể hiện mức độ phần diện tích màn hình bị ảnh hưởng khi xảy ra sự dịch chuyển bố cục. Chỉ số này giúp xác định phần tử nào trên trang chiếm bao nhiêu không gian trong khung nhìn trước và sau khi bị dịch chuyển.

Nói cách khác, IF cho biết tỷ lệ vùng hiển thị bị ảnh hưởng bởi thay đổi bố cục giữa hai khung hình liên tiếp.

Công thức tính IF như sau: IF = Tổng diện tích của khung nhìn / Tổng diện tích của các thay đổi bố cục

Phân số khoảng cách (Distance Fraction) là gì?

Phân số khoảng cách (DF) là một thành phần quan trọng trong việc tính toán Cumulative Layout Shift (CLS), dùng để đo lường mức độ di chuyển của các phần tử không ổn định trên trang web so với kích thước khung nhìn (viewport).

Cụ thể, DF phản ánh khoảng cách lớn nhất mà bất kỳ phần tử nào di chuyển (theo chiều ngang hoặc chiều dọc) trong quá trình hiển thị, chia cho kích thước lớn nhất của khung nhìn — tức chiều rộng hoặc chiều cao, tùy bên nào lớn hơn.

Công thức tính DF như sau: DF = Kích thước lớn nhất của khung nhìn / Khoảng cách lớn nhất mà phần tử không ổn định di chuyển được

Đo CLS bằng dữ liệu phòng thí nghiệm và dữ liệu thực địa

Khi phân tích chỉ số Cumulative Layout Shift (CLS) trong Google PageSpeed Insights (PSI), bạn sẽ thấy kết quả được chia thành hai phần: Core Web Vitals và Điểm hiệu suất (Performance Score). Sự khác biệt giữa hai phần này nằm ở nguồn dữ liệu được sử dụng.

• Dữ liệu thực địa (Field Data): Là dữ liệu thu thập từ người dùng thật trong các phiên truy cập thực tế. Đây là nguồn thông tin chính trong phần Core Web Vitals, phản ánh chính xác cách trang web của bạn hoạt động trong môi trường thực, bao gồm các yếu tố như tốc độ mạng, thiết bị hay vị trí người dùng.

  

• Dữ liệu phòng thí nghiệm (Lab Data): Là dữ liệu mô phỏng, được tạo ra trong môi trường kiểm soát bằng máy tính. Phần này được thể hiện trong Điểm hiệu suất, giúp bạn xác định nguyên nhân kỹ thuật gây ra sự cố và tiến hành khắc phục cụ thể.

Cả hai loại dữ liệu đều cần thiết: dữ liệu thực địa giúp đánh giá trải nghiệm người dùng thực, trong khi dữ liệu phòng thí nghiệm giúp phát hiện lỗi và tối ưu kỹ thuật nhằm cải thiện điểm CLS và hiệu suất tổng thể của website.

Nguyên nhân phổ biến gây ra vấn đề CLS (Cumulative Layout Shift)

Các vấn đề CLS thường xuất phát từ thiết kế, cấu trúc hoặc cách thức tải nội dung chưa được tối ưu. Dưới đây là những nguyên nhân phổ biến nhất gây ra CLS mà bạn cần nhận biết và khắc phục để đảm bảo website hoạt động ổn định, thân thiện và đạt điểm hiệu suất cao:

Hình ảnh không có kích thước cố định

Một trong những nguyên nhân phổ biến gây ra điểm CLS cao là hình ảnh không được chỉ định rõ chiều rộng và chiều cao trong HTML. Khi thiếu hai thuộc tính này, trình duyệt sẽ tạm thời phân bổ không gian cho hình ảnh dựa trên kích thước mặc định.

Tuy nhiên, khi hình ảnh thực tế được tải và có kích thước khác so với dự đoán, bố cục trang sẽ bị thay đổi — các phần tử xung quanh có thể bị đẩy lên, xuống hoặc lệch sang hai bên. Điều này không chỉ làm mất ổn định giao diện mà còn ảnh hưởng đến trải nghiệm người dùng và điểm Core Web Vitals.

Quảng cáo, phương tiện nhúng và iFrame

Các quảng cáo, video nhúng hoặc khung iFrame là những yếu tố thường gây ra thay đổi bố cục (CLS) nếu không được cấu hình đúng cách. Nguyên nhân là do các thành phần này tải không đồng bộ hoặc không có kích thước xác định, khiến trình duyệt không thể dự đoán chính xác không gian cần hiển thị trước khi nội dung tải xong.

Khi quảng cáo hoặc nội dung nhúng xuất hiện, chúng có thể đẩy các phần tử khác xuống dưới hoặc sang ngang, làm xáo trộn bố cục và ảnh hưởng trực tiếp đến trải nghiệm người dùng.

Nội dung động

Các phần tử nội dung động như accordion mở rộng, cửa sổ bật lên (popup) hay quảng cáo tải muộn thường là nguyên nhân khiến bố cục trang web bị thay đổi (CLS). Khi những thành phần này xuất hiện hoặc thay đổi kích thước sau khi trang đã tải xong, trình duyệt phải sắp xếp lại toàn bộ cấu trúc hiển thị, khiến các phần tử khác bị đẩy xuống hoặc lệch vị trí.

Điều này không chỉ làm gián đoạn trải nghiệm người dùng, mà còn ảnh hưởng tiêu cực đến điểm Core Web Vitals của website.

Phông chữ web và quá trình tải phông chữ

Phông chữ web là một trong những yếu tố thường bị bỏ qua nhưng có thể gây ra sự thay đổi bố cục (CLS) nếu không được tối ưu đúng cách. Khi phông chữ web được tải không đồng bộ hoặc sử dụng thuộc tính font-display: swap, trình duyệt có thể hiển thị văn bản bằng phông chữ dự phòng, sau đó thay đổi sang phông chữ gốc khi tải xong. Điều này dễ dẫn đến hiện tượng nhấp nháy văn bản vô hình (FOIT) hoặc nhấp nháy văn bản không định kiểu (FOUT), khiến bố cục bị dịch chuyển.

Tương tự, việc tải phông chữ chậm hoặc sử dụng phông chữ tùy chỉnh cũng có thể khiến văn bản tự động thay đổi kích thước hoặc tràn dòng, gây ra thay đổi bố cục bất ngờ trong quá trình tải trang.

Tập lệnh của bên thứ ba

Các tập lệnh bên thứ ba (third-party scripts) như công cụ phân tích, quảng cáo, chatbot hay tiện ích nhúng có thể là nguồn gốc gây ra thay đổi bố cục (CLS) nếu không được tối ưu hợp lý. Những tập lệnh này thường tải không đồng bộ hoặc thao tác trực tiếp trên DOM, khiến các phần tử trong trang bị di chuyển hoặc thay đổi kích thước đột ngột trong quá trình tải.

Khi điều này xảy ra, bố cục trang sẽ bị xáo trộn, dẫn đến trải nghiệm người dùng kém và điểm Core Web Vitals thấp hơn.

Hoạt ảnh và chuyển tiếp CSS

Các hiệu ứng hoạt ảnh (animation) và chuyển tiếp (transition) trong CSS có thể giúp trang web trở nên sinh động hơn, nhưng nếu triển khai không đúng cách, chúng lại là nguyên nhân gây ra sự thay đổi bố cục (CLS).

Khi các hiệu ứng này làm thay đổi vị trí, kích thước hoặc khoảng cách giữa các phần tử, trình duyệt phải tính toán và sắp xếp lại bố cục (reflow), dẫn đến nội dung bị dịch chuyển đột ngột. Điều này thường xảy ra khi hoạt ảnh được kích hoạt bởi tương tác người dùng, hoặc do các sự kiện tự động trong mã kịch bản.

Cách tự xác định các vấn đề về CLS

Để khắc phục hiệu quả các vấn đề về Chuyển đổi Bố cục Tích lũy (Cumulative Layout Shift – CLS), bạn có thể tự kiểm tra bằng các công cụ chuyên dụng như Google Chrome DevTools hoặc Google PageSpeed Insights (PSI). Dưới đây là hướng dẫn chi tiết:

1. Sử dụng Google Chrome DevTools

Mở DevTools: Truy cập trang web cần kiểm tra, nhấp chuột phải chọn “Kiểm tra” và tương tác với trang như người dùng thật.

Truy cập bảng Hiệu suất (Performance): Trong DevTools, mở tab “Performance” và xem phần Trải nghiệm (Experience). Tại đây, bạn có thể thấy điểm CLS tổng thể và các ô màu đỏ biểu thị những khu vực bị thay đổi bố cục trong quá trình tải trang.

2. Sử dụng Google PageSpeed Insights

Google PageSpeed Insights (PSI) là công cụ mạnh mẽ giúp bạn phát hiện các vấn đề liên quan đến Chuyển đổi Bố cục Tích lũy (Cumulative Layout Shift – CLS) thông qua báo cáo chi tiết trong hai phần: Cơ hội (Opportunities) và Chẩn đoán (Diagnostics).

Dưới đây là những cảnh báo phổ biến liên quan đến CLS mà bạn có thể gặp trong báo cáo PSI:

1. Tránh thay đổi bố cục lớn: Cảnh báo này xuất hiện khi các phần tử trên trang bị dịch chuyển đáng kể trong quá trình tải, gây mất ổn định trực quan cho người dùng.

2. Hình ảnh không có chiều rộng hoặc chiều cao rõ ràng: Khi hình ảnh thiếu thuộc tính width và height, trình duyệt không thể dành không gian hiển thị trước, dễ gây dịch chuyển bố cục khi ảnh tải xong.

3. Loại bỏ tài nguyên chặn hiển thị (Render-Blocking Resources): Các tệp CSS hoặc JavaScript tải chậm có thể làm trì hoãn quá trình hiển thị, dẫn đến thay đổi vị trí nội dung trên trang.

4. Giảm thời gian thực thi JavaScript: Các tác vụ JS kéo dài sẽ làm chậm khả năng phản hồi của trang, đồng thời ảnh hưởng đến sự ổn định của bố cục trong khi trình duyệt xử lý.

5. Đảm bảo văn bản hiển thị khi tải phông chữ web: Khi phông chữ web tải không đồng bộ, văn bản có thể xuất hiện bằng phông chữ dự phòng (fallback font) rồi bị thay đổi sau khi phông thật tải xong — một nguyên nhân phổ biến gây CLS.

Cách để cải thiện điểm CLS của bạn

Tối ưu CLS (Cumulative Layout Shift) là quá trình quan trọng giúp ổn định bố cục trang web, giảm thiểu sự dịch chuyển không mong muốn và cải thiện trải nghiệm người dùng.

1. Chỉ định kích thước hình ảnh để giảm thiểu CLS

Trong thiết kế web hiện đại, đặc biệt là thiết kế web đáp ứng (Responsive Web Design), hình ảnh thường được điều chỉnh kích thước bằng CSS. Tuy nhiên, nếu không chỉ định sẵn kích thước, trình duyệt sẽ không thể dự đoán được không gian cần dành cho hình ảnh trước khi tải, dẫn đến sự thay đổi bố cục (CLS).

Để khắc phục, bạn nên chỉ định rõ thuộc tínhwidth và height trên thẻ <img>. Các trình duyệt như Chrome, Firefox và Safari sẽ tự động tính toán tỷ lệ khung hình mặc định dựa trên hai thuộc tính này, giúp dành sẵn không gian hiển thị ảnh, tránh việc nội dung bị đẩy xuống khi ảnh tải xong.

Sau khi hình ảnh được tải, CSS có thể sử dụng giá trị auto để điều chỉnh kích thước mà không phá vỡ bố cục.

Đối với hình ảnh phản hồi (responsive images), nên dùng thuộc tính srcset để trình duyệt chọn kích thước ảnh phù hợp với từng thiết bị, đồng thời duy trì tỷ lệ khung hình nhất quán.

Tối ưu hóa việc tải phông chữ để cải thiện CLS

Phông chữ web là một trong những yếu tố có thể gây thay đổi bố cục (CLS) nếu không được tải hoặc hiển thị đúng cách. Để giảm thiểu tình trạng này, bạn có thể áp dụng các phương pháp tối ưu sau:

1. Tải trước phông chữ quan trọng bằng rel=preload: Việc tải trước phông chữ giúp chúng sẵn sàng ngay trong lần vẽ đầu tiên của trang, hạn chế việc văn bản bị nhấp nháy hoặc dịch chuyển khi phông được áp dụng.

2. Sử dụng thuộc tính font-display: optional: Cách này cho phép trình duyệt chỉ tải phông chữ web nếu phông sẵn sàng tại thời điểm hiển thị ban đầu, giúp duy trì bố cục ổn định.

3. Thiết lập phông chữ dự phòng tương đồng: Chọn phông fallback có đặc điểm gần giống phông chính về độ đậm, độ rộng, chiều cao và kiểu chữ. Bạn có thể tinh chỉnh thêm bằng các API như size-adjust, ascent-override, descent-override và line-gap-override để đảm bảo sự nhất quán về kích thước và khoảng cách dòng.

4. Sử dụng Font Loading API: Công cụ này giúp nhà phát triển kiểm soát quá trình tải phông chữ, từ đó rút ngắn thời gian hiển thị và giảm nguy cơ thay đổi bố cục.

Dành không gian cho sự ổn định bố cục quảng cáo

Quảng cáo là một trong những nguyên nhân hàng đầu gây ra điểm CLS cao, làm gián đoạn trải nghiệm người dùng và ảnh hưởng đến hiệu suất trang web. Tuy nhiên, thay vì loại bỏ hoàn toàn quảng cáo, bạn có thể kiểm soát cách hiển thị để cân bằng giữa doanh thu và trải nghiệm người dùng.

Dưới đây là một số phương pháp hiệu quả giúp ổn định bố cục quảng cáo:

1. Đặt nội dung tải muộn ở vị trí thấp: Các phần tử như quảng cáo hoặc video nhúng nên được đặt bên dưới phần hiển thị chính của trang (below the fold), giúp hạn chế sự thay đổi bố cục ở khu vực người dùng đang xem.

2. Sử dụng placeholder quảng cáo cố định: Tạo khung quảng cáo có kích thước cố định trước khi quảng cáo tải. Nếu bạn có thể nhận nhiều loại quảng cáo với kích thước khác nhau, hãy chọn kích thước khung phù hợp nhất hoặc lớn hơn kích thước trung bình để đảm bảo tính ổn định.
   
   → Tránh việc thu gọn vùng chứa quảng cáo, kể cả khi chưa có quảng cáo hiển thị, vì hành động này vẫn có thể làm thay đổi CLS.

3. Giữ chỗ bằng min-height hoặc aspect-ratio: Áp dụng thuộc tính min-height hoặc aspect-ratio trong CSS giúp vùng chứa quảng cáo có thể mở rộng linh hoạt khi nội dung tải, đồng thời giữ nguyên tỷ lệ khung hình, tránh xê dịch các phần tử xung quanh.

Sử dụng CSS Transitions thay vì Animations để giảm CLS

Hiệu ứng chuyển động có thể giúp website sinh động hơn, nhưng nếu triển khai không đúng cách, chúng cũng có thể làm thay đổi bố cục (CLS) và ảnh hưởng đến hiệu suất trang. Để hạn chế điều này, bạn nên tuân theo các nguyên tắc sau:

1. Ưu tiên dùng CSS Transitions thay vì Animations: CSS Transitions thường tạo ra hiệu ứng mượt mà hơn và ít khả năng gây thay đổi bố cục, giúp trang hiển thị ổn định ngay cả khi có chuyển động.

2. Tránh sử dụng các thuộc tính gây tái bố cục: Các thuộc tính như top, left, box-shadow hay box-sizing có thể buộc trình duyệt phải bố trí lại (reflow) hoặc vẽ lại (repaint) toàn bộ phần tử, dẫn đến hiện tượng dịch chuyển bố cục.

3. Sử dụng thuộc tính hiệu suất cao: Thay vì thay đổi vị trí hoặc kích thước trực tiếp, hãy dùng transform để dịch chuyển (translate), thay đổi tỷ lệ (scale), xoay (rotate) hoặc nghiêng (skew) phần tử. Các hiệu ứng này được xử lý bởi GPU nên mượt mà và không ảnh hưởng đến CLS.

4. Tối ưu hoạt ảnh tổng hợp: Các hoạt ảnh composited sử dụng translate hoặc các thuộc tính không gây tái bố cục (non-composited properties) sẽ không ảnh hưởng đến CLS và mang lại hiệu năng cao hơn.

Tận dụng bfcache để cải thiện hiệu suất và giảm CLS

Bộ nhớ đệm lùi/tiến (bfcache – Back/Forward Cache) là một cơ chế của trình duyệt cho phép lưu trữ tạm thời các trang web trong bộ nhớ sau khi người dùng rời khỏi trang. Nhờ đó, khi người dùng nhấn “Quay lại” hoặc “Tiến tới”, trang sẽ được tải lại ngay lập tức mà không cần phải vẽ lại giao diện hoặc tái bố cục (reflow), giúp cải thiện đáng kể điểm CLS và trải nghiệm người dùng.

Tuy nhiên, không phải trang web nào cũng đủ điều kiện sử dụng bfcache. Dưới đây là những yếu tố có thể ngăn trang của bạn được lưu vào bộ nhớ đệm:

• Tương tác JavaScript phức tạp: Các sự kiện hoặc listener động có thể khiến trình duyệt khó phục hồi chính xác trạng thái trang.

• Xác thực người dùng hoặc nội dung cá nhân hóa: Dữ liệu riêng tư hoặc phiên đăng nhập thường bị loại trừ khỏi cache để bảo mật.

• Điều hướng không chuẩn: Các trang SPA (Single Page Application) hoặc trang sử dụng AJAX Navigation thường không tận dụng được bfcache.

• Phụ thuộc tài nguyên ngoài: Trang tải nhiều script hoặc nội dung từ nguồn khác có thể ảnh hưởng đến khả năng lưu cache.

• Tiêu đề bộ nhớ đệm không phù hợp: Nếu máy chủ dùng Cache-Control: no-store, trình duyệt sẽ không lưu trang vào bfcache.

• Chia sẻ tài nguyên xuyên nguồn gốc (CORS): Các cấu hình bảo mật giới hạn có thể chặn việc lưu trữ toàn trang.

Trên đây là toàn bộ lời giải đáp chi tiết cho câu hỏi “CLS là gì?” và “Cách cải thiện CLS”. Hy vọng rằng sau bài viết này, bạn đã hiểu rõ hơn về tầm quan trọng của Chuyển đổi Bố cục Tích lũy (Cumulative Layout Shift) trong việc nâng cao trải nghiệm người dùng và cải thiện thứ hạng website trên Google.

Nếu bạn thấy bài viết này hữu ích, hãy đăng ký theo dõi (subscribe) để cập nhật những kiến thức mới nhất về SEO, tối ưu hiệu suất web và công nghệ hosting từ Seo Việt.