- Cumulative Layout Shift (CLS) là chỉ số đo lường sự dịch chuyển bố cục không mong muốn của các phần tử trên trang web trong quá trình tải và tương tác của người dùng.
- CLS phản ánh mức độ ổn định hình ảnh của một trang, là một trong ba chỉ số quan trọng của Core Web Vitals.
- Công thức tính CLS dựa trên tích của hai chỉ số: Impact Fraction (mức độ ảnh hưởng) và Distance Fraction (khoảng cách dịch chuyển), dao động từ 0 đến 1.
- Điểm CLS tốt phải dưới 0.1, ngưỡng cần cải thiện là từ 0.1 đến 0.25, và trên 0.25 là kém.
- CLS ảnh hưởng trực tiếp đến trải nghiệm người dùng (UX) bằng cách gây khó chịu, nhấp nhầm, và mất tập trung khi nội dung bị xô đẩy đột ngột.
- Google coi CLS là một yếu tố xếp hạng quan trọng, tác động đến vị trí của trang trên kết quả tìm kiếm.
- Các công cụ như PageSpeed Insights, Lighthouse, Chrome DevTools, Google Search Console giúp kiểm tra và đo lường CLS.
- Chiến lược tối ưu CLS bao gồm việc khai báo kích thước cố định cho ảnh/video, dành chỗ cho quảng cáo, xử lý font chữ, tránh chèn nội dung động gây xô đẩy.
- Tối ưu CLS giúp website cải thiện hiệu suất SEO, tăng tỷ lệ chuyển đổi và nâng cao sự hài lòng của người dùng.
Từ những điểm chính trên, LADIGI Agency nhận thấy rằng sự ổn định của bố cục trang không chỉ là một khía cạnh kỹ thuật mà còn là yếu tố then chốt định hình cách người dùng tương tác với website của bạn. Để hiểu rõ hơn về Cumulative Layout Shift (CLS), công thức tính cũng như các phương pháp tối ưu hiệu quả, chúng ta sẽ đi sâu vào từng khía cạnh chi tiết trong bài viết này.
Cumulative Layout Shift (CLS) là gì?
Cumulative Layout Shift (CLS) là một chỉ số hiệu suất web quan trọng thuộc nhóm Core Web Vitals của Google, dùng để đo lường mức độ ổn định thị giác của một trang web. CLS phản ánh tổng hợp tất cả các lần dịch chuyển bố cục không mong muốn của các phần tử trên trang trong suốt vòng đời của nó.
Định nghĩa:
* CLS định lượng số lần một phần tử hiển thị (visual element) thay đổi vị trí một cách không mong muốn từ khung hình này sang khung hình khác, đặc biệt là khi các phần tử này xuất hiện đột ngột hoặc thay đổi kích thước sau khi người dùng đã bắt đầu tương tác hoặc nhìn thấy nội dung ban đầu.
* Giá trị CLS được tính bằng một con số không âm, trong đó 0 là lý tưởng (không có dịch chuyển nào) và các giá trị lớn hơn cho thấy mức độ dịch chuyển cao hơn, ảnh hưởng tiêu cực đến trải nghiệm người dùng.
Nguyên nhân phổ biến:
* Hình ảnh hoặc video không có kích thước cố định: Trình duyệt không biết kích thước của nội dung media cho đến khi nó tải xong, dẫn đến việc cấp phát không gian và xô đẩy các phần tử khác.
* Quảng cáo, nhúng (embed) hoặc iframe: Nội dung bên ngoài thường được tải bất đồng bộ và có kích thước thay đổi, gây ra sự dịch chuyển.
* Nội dung được chèn động: Chẳng hạn như popup, banner, cookie consent, thường xuất hiện đột ngột, làm đẩy các phần tử khác xuống hoặc sang một bên.
* Web fonts (font chữ tùy chỉnh): Việc tải và hiển thị font chữ tùy chỉnh có thể gây ra Flash of Unstyled Text (FOUT) hoặc Flash of Invisible Text (FOIT), dẫn đến bố cục thay đổi khi font gốc được thay thế bằng font tùy chỉnh hoặc khi văn bản hiển thị trở lại.
Mục tiêu chính của việc tối ưu CLS là đảm bảo rằng các phần tử trên trang web không dịch chuyển sau khi được hiển thị, mang lại trải nghiệm duyệt web mượt mà và dễ chịu hơn cho người dùng.
CLS được tính toán như thế nào?
CLS được tính toán dựa trên việc đo lường tổng hợp của tất cả các lần dịch chuyển bố cục (layout shifts) không mong muốn xảy ra trong suốt quá trình tải và hiển thị trang. Mỗi lần dịch chuyển bố cục được tính dựa trên hai yếu tố chính: Impact Fraction (mức độ ảnh hưởng) và Distance Fraction (khoảng cách dịch chuyển). Giá trị CLS là tổng của tích hai yếu tố này cho tất cả các lần dịch chuyển.
Công thức cơ bản:
Layout Shift Score = Impact Fraction × Distance Fraction
CLS = Σ Layout Shift Score (tất cả các lần dịch chuyển bố cục không mong muốn)
Ví dụ minh họa chi tiết:
Giả sử một phần tử chiếm 50% khung nhìn (viewport) theo chiều dọc và 100% theo chiều ngang (Impact Fraction = 0.5). Sau khi tải thêm nội dung, phần tử này bị đẩy xuống 20% chiều cao của khung nhìn (Distance Fraction = 0.2).
Layout Shift Score = 0.5 × 0.2 = 0.1
Nếu có nhiều lần dịch chuyển xảy ra, tổng của tất cả các Layout Shift Score sẽ tạo nên giá trị Cumulative Layout Shift (CLS).
Chỉ số Impact Fraction
Định nghĩa:
* Impact Fraction đo lường mức độ mà các phần tử không ổn định (unstable elements) chiếm trong vùng nhìn (viewport) của người dùng trước và sau khi dịch chuyển.
* Nó là tỷ lệ phần trăm của vùng nhìn bị ảnh hưởng bởi sự dịch chuyển, sau đó được chuyển đổi thành số thập phân.
* Cụ thể, Impact Fraction là tổng diện tích của vùng va chạm (union of the visible areas of all unstable elements before and after the shift) chia cho tổng diện tích khung nhìn.
* Vùng va chạm bao gồm cả khu vực ban đầu và khu vực cuối cùng của phần tử dịch chuyển.
Cách tính:
* Xác định kích thước khung nhìn hiện tại.
* Xác định khu vực ban đầu mà phần tử chiếm giữ (A).
* Xác định khu vực cuối cùng mà phần tử chiếm giữ (B) sau khi dịch chuyển.
* Impact Fraction = Diện tích (A hợp B) / Diện tích khung nhìn
Ví dụ:
* Một banner quảng cáo ban đầu không hiển thị, sau đó xuất hiện và chiếm 25% chiều cao của khung nhìn và 100% chiều rộng. Các nội dung khác bị đẩy xuống.
* Nếu khung nhìn có chiều cao H, thì banner chiếm 0.25 * H. Phần diện tích dịch chuyển sẽ là 0.25 * H * W (với W là chiều rộng khung nhìn).
* Giả sử banner xuất hiện và chiếm một vùng diện tích bằng 30% diện tích khung nhìn (Impact Area = 0.3 * Viewport Area).
* Impact Fraction sẽ là 0.3.
Chỉ số Distance Fraction
Định nghĩa:
* Distance Fraction đo lường khoảng cách mà các phần tử không ổn định đã di chuyển trên trang, tính bằng phần trăm của khung nhìn lớn nhất (chiều rộng hoặc chiều cao, tùy theo hướng dịch chuyển).
* Nó là tỷ lệ phần lớn nhất mà bất kỳ phần tử nào đã dịch chuyển theo chiều ngang hoặc chiều dọc, so với chiều rộng hoặc chiều cao tương ứng của khung nhìn.
Cách tính:
* Tìm phần tử dịch chuyển nhiều nhất (theo chiều dọc hoặc chiều ngang).
* Xác định max(tổng khoảng cách dịch chuyển của phần tử)
* Distance Fraction = max(Khoảng cách dịch chuyển dọc) / Chiều cao khung nhìn HOẶC max(Khoảng cách dịch chuyển ngang) / Chiều rộng khung nhìn
* Luôn chọn giá trị lớn nhất trong hai trường hợp trên.
Ví dụ:
* Một đoạn văn bản bị đẩy xuống 50px trong một khung nhìn có chiều cao 1000px.
* Khoảng cách dịch chuyển dọc = 50px.
* Chiều cao khung nhìn = 1000px.
* Distance Fraction = 50 / 1000 = 0.05.
Ví dụ minh họa cách tính CLS
Hãy xem xét một tình huống thực tế:
Bạn đang đọc một tin tức trên điện thoại (khung nhìn 400px rộng x 800px cao).
Scenario 1: Hình ảnh không có kích thước cố định
1. Trạng thái ban đầu: Một đoạn văn bản hiển thị.
2. Dịch chuyển: Một hình ảnh lớn không khai báo width và height tải xong, bất ngờ xuất hiện phía trên đoạn văn bản, đẩy đoạn văn bản xuống 150px.
* Impact Area: Giả sử hình ảnh chiếm 300px chiều cao và toàn bộ chiều rộng (400px), cùng với 150px chiều cao của đoạn văn bản bị đẩy. Tổng diện tích bị ảnh hưởng là (300 + 150)px * 400px = 180,000px².
* Diện tích khung nhìn: 400px * 800px = 320,000px².
* Impact Fraction = 180,000 / 320,000 = 0.5625.
* Distance Fragment: Phần tử (đoạn văn bản) bị dịch chuyển nhiều nhất là 150px. Chiều cao khung nhìn là 800px.
* Distance Fraction = 150 / 800 = 0.1875.
* CLS cho lần dịch chuyển này = 0.5625 * 0.1875 = 0.105.
Scenario 2: Quảng cáo chèn vào giữa nội dung
1. Trạng thái ban đầu: Bạn đang đọc một bài blog, có hai đoạn văn bản liên tiếp.
2. Dịch chuyển: Một quảng cáo được tải bất đồng bộ xuất hiện giữa hai đoạn văn bản, sau khi người dùng đã bắt đầu đọc. Quảng cáo này có chiều cao 100px và chiều rộng 400px.
* Impact Area: Giả sử khu vực mà quảng cáo xuất hiện và đẩy nội dung là 100px * 400px = 40,000px².
* Impact Fraction = 40,000 / 320,000 = 0.125.
* Distance Fragment: Các đoạn văn bản phía dưới quảng cáo bị đẩy xuống 100px.
* Distance Fraction = 100 / 800 = 0.125.
* CLS cho lần dịch chuyển này = 0.125 * 0.125 = 0.015625.
Tính tổng CLS:
Nếu cả hai kịch bản trên xảy ra trên cùng một trang, CLS tổng sẽ là:
Tổng CLS = 0.105 (từ hình ảnh) + 0.015625 (từ quảng cáo) = 0.120625.
Đây là một ví dụ đơn giản. Trong thực tế, nhiều lần dịch chuyển nhỏ có thể cộng dồn lại thành một giá trị CLS lớn, ngay cả khi mỗi lần dịch chuyển riêng lẻ có vẻ không đáng kể.
Điểm CLS tốt và ngưỡng cần cải thiện là bao nhiêu?
Để đảm bảo trải nghiệm người dùng tốt và xếp hạng SEO hiệu quả, Google đã đặt ra các ngưỡng điểm CLS cụ thể:
- Tốt (Good): CLS < 0.1
- Đây là mục tiêu mà tất cả các website nên hướng tới. Điểm CLS dưới 0.1 cho thấy trang web có sự ổn định bố cục rất tốt, ít gây khó chịu cho người dùng.
- Đạt được ngưỡng này sẽ giúp website có lợi thế trong xếp hạng SEO của Google.
- Cần cải thiện (Needs Improvement): 0.1 <= CLS < 0.25
- Nếu website của bạn nằm trong phạm vi này, nó vẫn còn khá chấp nhận được nhưng đã có những điểm dịch chuyển bố cục có thể gây ảnh hưởng nhẹ đến trải nghiệm người dùng.
- Google khuyến nghị nên có hành động cải thiện để đạt ngưỡng “Tốt” nhằm tránh các tác động tiêu cực đến SEO.
- Kém (Poor): CLS >= 0.25
- Điểm CLS trên 0.25 cho thấy trang web có vấn đề nghiêm trọng về sự ổn định bố cục.
- Người dùng có thể gặp khó chịu đáng kể, dễ nhấp nhầm hoặc mất phương hướng do nội dung bị xô đẩy liên tục.
- Google sẽ đánh giá thấp trang web của bạn về hiệu suất và trải nghiệm người dùng, dẫn đến tác động tiêu cực đáng kể đến thứ hạng tìm kiếm.
Mục tiêu cốt lõi là giữ cho CLS của trang càng thấp càng tốt, lý tưởng nhất là dưới 0.1. Việc đạt được và duy trì ngưỡng này là chìa khóa để mang lại trải nghiệm người dùng mượt mà và tận dụng tối đa lợi ích SEO từ Core Web Vitals.
Tại sao CLS quan trọng cho trải nghiệm người dùng và SEO?
CLS không chỉ là một chỉ số kỹ thuật; nó là một yếu tố phản ánh trực tiếp chất lượng trải nghiệm mà website mang lại cho người dùng và có tác động sâu rộng đến hiệu suất SEO. Một trang web có CLS cao sẽ gây ra sự khó chịu, giảm tương tác và bị Google đánh giá thấp.
Ảnh hưởng tiêu cực đến trải nghiệm người dùng
Trải nghiệm người dùng là yếu tố cốt lõi quyết định sự thành công của một website. CLS cao trực tiếp phá vỡ sự ổn định của trải nghiệm này:
- Gây khó chịu và bực bội: Khi nội dung, hình ảnh, hoặc các nút tương tác dịch chuyển đột ngột, người dùng sẽ cảm thấy bực bội. Điều này đặc biệt đúng khi họ đang cố gắng nhấp vào một liên kết hoặc nút mà vị trí của nó thay đổi ngay lập tức.
- Nhấp nhầm (Accidental Clicks): Một trong những vấn đề phổ biến nhất là người dùng cố gắng nhấp vào một phần tử (ví dụ: nút “Thêm vào giỏ hàng”) nhưng ngay trước khi nhấp, một phần tử khác (ví dụ: quảng cáo) đột ngột xuất hiện hoặc đẩy phần tử ban đầu ra chỗ khác. Điều này dẫn đến việc nhấp vào thứ không mong muốn, gây lãng phí thời gian và tăng frustation.
- Mất phương hướng và gián đoạn luồng đọc: Trong khi đọc bài viết, việc văn bản bị xô đẩy lên xuống hoặc sang ngang sẽ làm người dùng mất dấu vị trí đang đọc, buộc họ phải tìm lại. Điều này làm gián đoạn luồng tư duy và giảm khả năng tiếp thu thông tin.
- Giảm độ tin cậy và chuyên nghiệp: Một trang web “nhảy múa” không tạo ra cảm giác chuyên nghiệp hay đáng tin cậy. Người dùng có thể nghi ngờ về chất lượng kỹ thuật của trang, thậm chí cả chất lượng nội dung.
- Tăng tỷ lệ thoát (Bounce Rate): Người dùng dễ dàng rời bỏ một trang web có trải nghiệm tồi tệ để tìm kiếm một nguồn thông tin khác ổn định hơn. CLS cao là một trong những nguyên nhân chính góp phần làm tăng tỷ lệ thoát.
- Giảm tỷ lệ chuyển đổi (Conversion Rate): Đối với các trang thương mại điện tử, dịch vụ, hay trang thu lead, việc người dùng gặp khó khăn trong việc tìm kiếm thông tin hoặc nhấp vào nút “Mua hàng”, “Đăng ký” do dịch chuyển bố cục sẽ trực tiếp ảnh hưởng đến doanh thu.
Tác động trực tiếp đến hiệu suất SEO
Google đã công bố rõ ràng rằng Core Web Vitals, trong đó có CLS, là một trong các yếu tố xếp hạng quan trọng. Việc có CLS cao sẽ có những tác động tiêu cực đáng kể đến SEO:
- Giảm thứ hạng tìm kiếm: Google ưu tiên các trang web cung cấp trải nghiệm tốt cho người dùng. Nếu CLS của bạn kém, Google có thể hạ thứ hạng trang của bạn trên kết quả tìm kiếm, đặc biệt trên thiết bị di động.
- Ảnh hưởng đến việc hiển thị Featured Snippet & AI Overviews: Các thuật toán của Google (bao gồm cả các công nghệ AI tiên tiến) được thiết kế để trích xuất thông tin từ các trang có cấu trúc rõ ràng, ổn định. CLS cao làm cho quá trình trích xuất này khó khăn hơn, giảm khả năng trang của bạn xuất hiện trong các đoạn trích nổi bật (Featured Snippets) hoặc các phản hồi AI Overview, những vị trí vô cùng giá trị.
- Giảm lưu lượng truy cập không phải trả tiền (Organic Traffic): Khi thứ hạng giảm, hiển nhiên lưu lượng truy cập tự nhiên từ Google sẽ bị ảnh hưởng tiêu cực.
- Mất lợi thế cạnh tranh: Trong một thị trường cạnh tranh, nơi các đối thủ đều tối ưu Core Web Vitals, việc bỏ qua CLS sẽ khiến website của bạn tụt lại phía sau.
- “Cờ đỏ” cho Google: CLS cao là một tín hiệu mạnh mẽ cho Google rằng trang của bạn không thân thiện với người dùng, và điều này có thể ảnh hưởng đến cách Google “crawl” và “index” trang của bạn về lâu dài.
Vai trò trong bộ Core Web Vitals
CLS là một trong ba chỉ số cốt lõi của Core Web Vitals, cùng với Largest Contentful Paint (LCP) và First Input Delay (FID). Mỗi chỉ số này đo lường một khía cạnh riêng của trải nghiệm người dùng, nhưng chúng bổ trợ và ảnh hưởng lẫn nhau.
- Largest Contentful Paint (LCP): Đo lường thời gian cần thiết để hiển thị nội dung có dung lượng lớn nhất trên màn hình. LCP tập trung vào hiệu suất tải trang.
- First Input Delay (FID): Đo lường độ trễ từ khi người dùng tương tác lần đầu tiên (nhấp chuột, gõ phím) đến khi trình duyệt có thể phản hồi lại tương tác đó. FID tập trung vào khả năng phản hồi.
- Cumulative Layout Shift (CLS): Đo lường sự ổn định hình ảnh của trang. CLS tập trung vào sự ổn định của bố cục sau khi tải.
Mối liên hệ:
* Ba chỉ số này cùng nhau cung cấp một cái nhìn toàn diện về tải trang, tính tương tác và ổn định hình ảnh.
* Một CLS tốt không thể bù đắp cho LCP hoặc FID kém, và ngược lại. Cả ba đều phải đạt ngưỡng “Tốt” để website được đánh giá cao bởi Google.
* Đôi khi, các vấn đề gây ra LCP kém cũng có thể gián tiếp ảnh hưởng đến CLS. Ví dụ, việc tải tài nguyên chậm trễ (như font chữ) có thể khiến các phần tử bị “xô đẩy” khi tài nguyên cuối cùng được tải.
* Việc tối ưu CLS thường liên quan đến các kỹ thuật frontend, tương tự như các kỹ thuật được dùng để cải thiện LCP và FID, ví dụ: khai báo kích thước hình ảnh (ảnh hưởng cả LCP và CLS), tối ưu font chữ (ảnh hưởng CLS), ưu tiên tải các yếu tố quan trọng (có thể giúp giảm dịch chuyển không mong muốn).
Tổng lại, việc tối ưu CLS không chỉ là một yêu cầu kỹ thuật mà là một khoản đầu tư chiến lược vào trải nghiệm người dùng, giúp website của bạn giữ vững vị thế trên kết quả tìm kiếm và duy trì sự tương tác tích cực với khách hàng.
Các công cụ kiểm tra và đo lường CLS hiệu quả
Để xác định và khắc phục các vấn đề về CLS, bạn cần sử dụng các công cụ phù hợp. Các công cụ này cung cấp cả dữ liệu thử nghiệm (Lab Data) và dữ liệu thực tế từ người dùng (Field Data), giúp bạn có cái nhìn toàn diện về hiệu suất CLS của website.
PageSpeed Insights
Mô tả: PageSpeed Insights (PSI) là công cụ được Google cung cấp miễn phí, cho phép phân tích hiệu suất của một URL cụ thể trên cả thiết bị di động và máy tính để bàn. Nó cung cấp cái nhìn tổng quan về Core Web Vitals, bao gồm CLS.
Tính năng nổi bật:
* Dữ liệu Trường (Field Data – Chrome User Experience Report): Hiển thị dữ liệu CLS thực tế mà người dùng đã trải nghiệm trên trang của bạn trong 28 ngày qua. Đây là dữ liệu quan trọng nhất vì nó phản ánh trải nghiệm của người dùng thật.
* Dữ liệu Phòng thí nghiệm (Lab Data – Lighthouse): Chạy kiểm tra hiệu suất trong một môi trường được kiểm soát và cung cấp điểm CLS ước tính. Điều này giúp gỡ lỗi và kiểm tra các thay đổi mà bạn thực hiện.
* Đề xuất tối ưu: Cung cấp các khuyến nghị cụ thể để cải thiện CLS, như “Tránh bố cục dịch chuyển lớn” kèm theo danh sách các phần tử gây dịch chuyển.
Cách sử dụng:
1. Truy cập PageSpeed Insights.
2. Nhập URL của trang cần kiểm tra.
3. Nhấn “Analyze”.
4. Tìm phần “Core Web Vitals” và “Diagnostics” để xem điểm CLS và các khuyến nghị.
Lighthouse
Mô tả: Lighthouse là một công cụ mã nguồn mở tự động, tích hợp sẵn trong Chrome DevTools và cũng là nền tảng cho Lab Data của PageSpeed Insights. Nó kiểm tra hiệu suất, khả năng tiếp cận, SEO, PWA (Progressive Web App), và các phương pháp tốt nhất.
Tính năng nổi bật:
* Phân tích sâu: Cung cấp báo cáo chi tiết về CLS và các chỉ số hiệu suất khác trong môi trường thử nghiệm.
* Đánh giá từng phần tử: Chỉ ra cụ thể những phần tử nào trên trang gây ra dịch chuyển bố cục và mức độ nghiêm trọng của chúng.
* Mô phỏng điều kiện mạng và CPU: Cho phép bạn kiểm tra hiệu suất dưới các điều kiện khác nhau (ví dụ: mạng 3G chậm, CPU yếu), giúp tái tạo các vấn đề mà người dùng có thể gặp phải.
Cách sử dụng:
1. Mở Chrome Developer Tools (nhấn F12 hoặc Ctrl+Shift+I trên Windows/Linux, Cmd+Opt+I trên Mac).
2. Chuyển sang tab “Lighthouse”.
3. Chọn loại thiết bị (Mobile/Desktop) và các danh mục kiểm tra.
4. Nhấn “Analyze page load”.
5. Xem báo cáo CLS dưới phần “Performance”.
Chrome DevTools
Mô tả: Chrome DevTools là bộ công cụ phát triển web tích hợp sẵn trong trình duyệt Google Chrome, cung cấp nhiều tính năng mạnh mẽ để gỡ lỗi và tối ưu hóa website.
Tính năng nổi bật:
* Performance Monitor: Hiển thị biểu đồ theo dõi các sự kiện bố cục (layout shifts) trong thời gian thực khi trang tải.
* Layout Shift Regions: Sử dụng công cụ “Render” để làm nổi bật các khu vực bị dịch chuyển bố cục trên trang bằng cách tô màu xanh da trời. Điều này giúp trực quan hóa vấn đề.
* Event Log: Xem chi tiết các sự kiện dịch chuyển bố cục trong tab “Performance” và truy vết nguyên nhân đến các phần tử DOM cụ thể.
* Animations Panel: Hỗ trợ kiểm tra các hoạt ảnh gây ra dịch chuyển.
Cách sử dụng:
1. Mở Chrome DevTools.
2. Chuyển đến tab “Performance”.
3. Nhấp vào biểu tượng ghi (Record) và tải lại trang.
4. Phân tích biểu đồ “Experience” để tìm các lần dịch chuyển bố cục (Layout Shift).
5. Trong tab “Rendering”, bật “Layout Shift Regions” để xem các vùng bị ảnh hưởng trực quan.
Google Search Console
Mô tả:Google Search Console (GSC) là một dịch vụ miễn phí của Google giúp quản trị viên web giám sát hiệu suất tìm kiếm của trang web. Nó cung cấp báo cáo Core Web Vitals tổng thể cho toàn bộ website.
Tính năng nổi bật:
* Báo cáo Core Web Vitals: Cung cấp cái nhìn tổng thể về hiệu suất CLS trên tất cả các trang của website, phân loại theo trạng thái (Good, Needs Improvement, Poor).
* Xác định các trang bị ảnh hưởng: Giúp bạn nhanh chóng nhận diện nhóm các URL có CLS kém, từ đó ưu tiên tối ưu hóa.
* Dữ liệu thực tế: Dựa trên dữ liệu từ Chrome User Experience Report (CrUX), phản ánh trải nghiệm người dùng thực.
Cách sử dụng:
1. Đăng nhập vào Google Search Console.
2. Chọn website của bạn.
3. Trong menu bên trái, chọn “Core Web Vitals” dưới mục “Experience”.
4. Chọn “Di động” hoặc “Máy tính để bàn” để xem báo cáo CLS.
5. Nhấp vào các chi tiết để xem các nhóm URL bị ảnh hưởng.
WebPageTest
Mô tả: WebPageTest là một công cụ kiểm tra hiệu suất website mạnh mẽ, cung cấp phân tích chi tiết về quá trình tải trang, bao gồm cả CLS. Nó cho phép bạn mô phỏng nhiều điều kiện thử nghiệm khác nhau.
Tính năng nổi bật:
* Kiểm tra từ nhiều vị trí và trình duyệt: Cho phép bạn chọn vị trí địa lý, loại trình duyệt, và tốc độ kết nối để mô phỏng trải nghiệm người dùng khác nhau.
* Filmstrip View và Video Capture: Ghi lại video quá trình tải trang, giúp bạn trực quan hóa mọi dịch chuyển bố cục xảy ra.
* Timeline chi tiết: Cung cấp biểu đồ thác nước (waterfall chart) và các sự kiện thời gian, giúp xác định chính xác thời điểm và nguyên nhân gây ra dịch chuyển CLS.
* Core Web Vitals Scores: Hiển thị điểm CLS cùng với LCP và FID.
Cách sử dụng:
1. Truy cập WebPageTest.org.
2. Nhập URL của trang cần kiểm tra.
3. Thiết lập các tùy chọn thử nghiệm (vị trí, trình duyệt, kết nối).
4. Nhấp “Start Test”.
5. Sau khi kiểm tra hoàn tất, xem kết quả “Core Web Vitals” và phân tích video/timeline để tìm lỗi CLS.
Sử dụng kết hợp các công cụ này sẽ giúp bạn không chỉ phát hiện các vấn đề CLS mà còn hiểu rõ nguyên nhân gốc rễ và kiểm tra hiệu quả của các giải pháp tối ưu.
8 chiến lược tối ưu CLS hiệu quả cho website
Để cải thiện CLS và mang lại trải nghiệm người dùng ổn định, việc áp dụng các chiến lược tối ưu từ khía cạnh kỹ thuật là vô cùng cần thiết. Dưới đây là các phương pháp hiệu quả nhất.
1. Đặt kích thước cố định cho hình ảnh và video
Vấn đề: Khi trình duyệt tải hình ảnh hoặc video mà không biết trước kích thước của chúng, nó sẽ cấp phát một không gian mặc định. Sau khi nội dung media được tải xong và kích thước thực tế được xác định, bố cục trang sẽ bị dịch chuyển để phù hợp với kích thước mới, gây ra CLS.
Giải pháp:
* Khai báo thuộc tính width và height trong thẻ <img> và <video>: Đây là cách đơn giản và trực tiếp nhất để trình duyệt biết kích thước chính xác của hình ảnh/video trước khi chúng được tải.
html <img src="anh-minh-hoa.jpg" width="600" height="400" alt="Mô tả ảnh"> <video src="video.mp4" width="800" height="450" controls></video>
* Sử dụng CSS aspect-ratio: Đối với thiết kế đáp ứng (responsive design), thuộc tính aspect-ratio giúp duy trì tỷ lệ khung hình cố định cho các phần tử media ngay cả khi chiều rộng thay đổi, ngăn chặn dịch chuyển.
css img { aspect-ratio: 16 / 9; /* Tỷ lệ rộng/cao */ width: 100%; height: auto; /* Để chiều cao tự động điều chỉnh theo tỷ lệ */ }
* Sử dụng CSS padding-top hack (phương pháp cũ hơn): Tạo một container với padding-top dựa trên tỷ lệ phần trăm của chiều rộng để giữ chỗ cho nội dung media.
css .video-container { position: relative; width: 100%; padding-top: 56.25%; /* 9/16 = 0.5625 */ height: 0; overflow: hidden; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Bằng cách này, trình duyệt có thể cấp phát không gian chính xác cho hình ảnh và video ngay từ đầu, hạn chế sự dịch chuyển bố cục.
2. Dự trữ không gian cho quảng cáo, iframe và nội dung nhúng
Vấn đề: Quảng cáo, các widget bên thứ ba (như plugin mạng xã hội, bản đồ), hoặc iframe thường được tải bất đồng bộ. Khi chúng tải xong, kích thước không cố định của chúng có thể gây ra dịch chuyển bố cục.
Giải pháp:
* Dành không gian cố định (Placeholder): Trước khi quảng cáo/iframe được tải, hãy tạo một vùng giữ chỗ (placeholder) có chiều cao và chiều rộng cụ thể bằng CSS.
html <div style="width: 300px; height: 250px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc;"> <p>Không gian quảng cáo</p> </div> <!-- Sau đó JavaScript sẽ chèn quảng cáo vào đây -->
* Sử dụng khoảng không gian lớn nhất có thể: Nếu bạn biết quảng cáo có thể có nhiều kích thước, hãy cấp phát không gian cho kích thước lớn nhất có thể hoặc sử dụng min-height.
* Tránh đặt quảng cáo gần đầu trang: Nếu bắt buộc phải sử dụng quảng cáo động, hãy đặt chúng ở những vị trí ít gây ảnh hưởng nhất đến trải nghiệm người dùng, chẳng hạn như cuối nội dung chính.
3. Xử lý font chữ tùy chỉnh và Flash of Unstyled Text
Vấn đề: Khi website sử dụng font chữ tùy chỉnh (web fonts), có hai hiện tượng có thể gây CLS:
* FOIT (Flash of Invisible Text): Trình duyệt ẩn văn bản cho đến khi font tùy chỉnh tải xong. Khi font tải xong, văn bản xuất hiện, có thể gây dịch chuyển nhẹ nếu kích thước font thay đổi.
* FOUT (Flash of Unstyled Text): Trình duyệt hiển thị văn bản bằng font hệ thống (fallback font) trước. Khi font tùy chỉnh tải xong, nó sẽ thay thế font hệ thống, thường làm thay đổi kích thước và khoảng cách giữa các chữ, gây dịch chuyển bố cục.
Giải pháp:
* Sử dụng font-display trong CSS: Thuộc tính font-display giúp kiểm soát hành vi hiển thị của font chữ.
* font-display: swap;: Hiển thị văn bản bằng font hệ thống ngay lập tức (FOUT) và thay thế bằng font tùy chỉnh khi tải xong. Dù có FOUT, Google thường coi nó là cách tốt hơn cho UX so với FOIT. Bạn cần tối ưu font thay thế để khớp gần nhất có thể với font chính.
* font-display: optional;: Hạn chế FOUT và FOIT. Nếu font tùy chỉnh chưa tải xong nhanh, trình duyệt sẽ sử dụng font hệ thống mà không cố gắng chuyển đổi, giúp ổn định bố cục. Nó chỉ sử dụng font tùy chỉnh nếu nó đã được lưu vào bộ nhớ cache hoặc tải cực kỳ nhanh.
* font-display: block; hoặc font-display: fallback;: Các tùy chọn khác với hành vi riêng. block có thể gây FOIT dài, trong khi fallback cho một thời gian ngắn ẩn rồi dùng font hệ thống.
- Preload web fonts: Sử dụng
<link rel="preload">để ưu tiên tải font chữ sớm trong quá trình tải trang.
html <link rel="preload" href="/fonts/your-custom-font.woff2" as="font" type="font/woff2" crossorigin> - Cung cấp font dự phòng tương tự (Fallback Fonts): Chọn font dự phòng trong CSS (
font-family) có kích thước và chiều cao dòng tương tự với font tùy chỉnh để giảm thiểu sự dịch chuyển. - Sử dụng
size-adjustvàfont-stretch(CSS Font Metrics Override): Các thuộc tính này cho phép bạn điều chỉnh kích thước của font dự phòng để nó gần giống nhất có thể với font tùy chỉnh, giảm tối đa dịch chuyển khi hoán đổi font.
4. Tránh chèn nội dung động lên trên nội dung hiện có
Vấn đề: Các popup, biểu mẫu đăng ký, banner thông báo hoặc các thông báo về cookie xuất hiện đột ngột sau khi trang đã tải xong có thể đẩy toàn bộ nội dung chính xuống, gây ra một sự dịch chuyển bố cục lớn và CLS cao.
Giải pháp:
* Chèn nội dung mới ở phía dưới cùng hoặc dưới các vùng không quan trọng: Nếu có thể, hãy đặt các loại nội dung này vào vùng dưới cùng của trang hoặc sidebar, nơi chúng ít có khả năng gây ra dịch chuyển cho nội dung chính.
* Sử dụng Overlay hoặc Modal không làm dịch chuyển bố cục: Thay vì đẩy nội dung, hãy hiển thị popup dưới dạng overlay trên nội dung hiện có. Đảm bảo rằng overlay không chiếm không gian trong dòng chảy tài liệu (document flow).
css .overlay { position: fixed; /* Hoặc absolute */ top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
* Pre-allocate space: Nếu không thể tránh khỏi việc hiển thị nội dung động trong luồng tài liệu, hãy cấp phát không gian cho nó từ trước bằng CSS min-height hoặc height.
* Tối ưu thời điểm xuất hiện: Nếu có thể, trì hoãn việc hiển thị các phần tử này cho đến khi người dùng đã cuộn trang một chút hoặc ở một điểm ít quan trọng hơn, hoặc chỉ hiển thị sau khi đã hết thời gian không tương tác (idle time).
5. Hạn chế thay đổi bố cục do hoạt ảnh hoặc chuyển đổi
Vấn đề: Các hoạt ảnh (animations) hoặc chuyển đổi (transitions) được áp dụng cho các thuộc tính CSS như height, width, padding, margin, top, left, v.v. có thể gây ra dịch chuyển bố cục nếu chúng thay đổi vị trí hoặc kích thước của một phần tử trong luồng tài liệu.
Giải pháp:
* Sử dụng các thuộc tính không gây layout shift: Thay vì thay đổi các thuộc tính gây thay đổi bố cục, hãy ưu tiên các thuộc tính được điều khiển bởi GPU, như transform và opacity.
* transform: translate(Xpx, Ypx); để dịch chuyển phần tử.
* transform: scale(X); để thay đổi kích thước.
* opacity: N; để điều chỉnh độ trong suốt.
* Hạn chế hoạt ảnh chạy trong quá trình tải trang: Tránh các hoạt ảnh khởi tạo ngay khi trang tải, đặc biệt là những hoạt ảnh làm thay đổi vị trí của các phần tử chính.
* Sử dụng will-change (cẩn trọng): Thuộc tính will-change có thể báo cho trình duyệt biết các thuộc tính nào sẽ thay đổi trong tương lai, giúp trình duyệt tối ưu việc chuẩn bị render. Tuy nhiên, việc sử dụng không đúng cách có thể gây tốn tài nguyên.
6. Tối ưu cho thiết kế đáp ứng
Vấn đề: Thiết kế đáp ứng hiện đại thường cho phép các phần tử tự động điều chỉnh kích thước và vị trí theo kích thước khung nhìn. Tuy nhiên, nếu không được thiết kế cẩn thận, các breakpoint của CSS hoặc việc tính toán lại bố cục có thể dẫn đến dịch chuyển không mong muốn, đặc biệt trên các thiết bị có kích thước màn hình khác nhau hoặc khi xoay màn hình (orientation change).
Giải pháp:
* Kiểm tra kỹ lưỡng các breakpoint: Đảm bảo rằng các media query của bạn được thiết kế tốt và không gây ra các lần dịch chuyển đột ngột khi thay đổi kích thước khung nhìn.
* Sử dụng cùng một tỷ lệ khung hình: Áp dụng các quy tắc về tỷ lệ khung hình cho hình ảnh/video/iframe trên tất cả các breakpoint để duy trì tính nhất quán.
* Cấp phát không gian trước cho các phần tử độc quyền theo thiết bị: Nếu một phần tử chỉ xuất hiện trên di động hoặc máy tính, hãy đảm bảo rằng không gian của nó không bị chiếm giữ bởi một phần tử khác khi thay đổi thiết bị.
* Giám sát trên nhiều thiết bị: Luôn kiểm tra website trên nhiều kích thước màn hình, loại thiết bị và cả khi xoay màn hình để phát hiện các vấn đề CLS liên quan đến thiết kế đáp ứng.
7. Giám sát CLS liên tục
Vấn đề: CLS không phải là một chỉ số “đặt một lần rồi quên”. Các thay đổi nhỏ trong code, việc thêm các plugin mới, cập nhật quảng cáo, hoặc đơn giản là các bản cập nhật trình duyệt có thể tái tạo hoặc tạo ra các vấn đề CLS mới.
Giải pháp:
* Thiết lập giám sát tự động: Sử dụng các công cụ RUM (Real User Monitoring) hoặc API Web Vitals JavaScript để thu thập dữ liệu CLS thực tế từ người dùng và theo dõi theo thời gian.
* Tích hợp vào quy trình CI/CD: Sử dụng Lighthouse CI hoặc các công cụ kiểm tra hiệu suất tự động trong quy trình phát triển và triển khai để đảm bảo rằng các thay đổi mới không làm suy giảm CLS.
* Thường xuyên kiểm tra bằng Google Search Console: Theo dõi báo cáo Core Web Vitals trong GSC để nắm bắt xu hướng CLS và nhận diện sớm các vấn đề trên diện rộng.
* Kiểm tra định kỳ các trang quan trọng: Định kỳ kiểm tra thủ công các trang có lưu lượng truy cập cao, trang chuyển đổi quan trọng bằng PageSpeed Insights hoặc Lighthouse.
Việc áp dụng đồng bộ các chiến lược này không chỉ giúp giảm điểm CLS mà còn cải thiện tổng thể hiệu suất và trải nghiệm người dùng, từ đó mang lại lợi ích lâu dài cho SEO.
Câu hỏi thường gặp về Cumulative Layout Shift
CLS ảnh hưởng đến doanh thu như thế nào?
CLS có tác động trực tiếp và gián tiếp đến doanh thu của website thông qua nhiều khía cạnh:
- Giảm tỷ lệ chuyển đổi:
- Nhấp nhầm: Người dùng có thể vô tình nhấp vào quảng cáo hoặc liên kết sai do bố cục dịch chuyển, khiến họ thất vọng và rời trang trước khi hoàn thành hành vi mong muốn (mua hàng, đăng ký).
- Trải nghiệm mua sắm kém: Trên các trang thương mại điện tử, sự dịch chuyển bố cục trong quá trình xem sản phẩm, thêm vào giỏ hàng, hoặc thanh toán sẽ gây mất niềm tin và làm gián đoạn quá trình mua, dẫn đến việc bỏ giỏ hàng.
- Tăng tỷ lệ thoát (Bounce Rate): Người dùng có trải nghiệm khó chịu do CLS cao thường rời trang rất nhanh, làm giảm cơ hội tương tác và chuyển đổi.
- Ảnh hưởng đến SEO và lượng truy cập: CLS kém ảnh hưởng tiêu cực đến thứ hạng SEO, làm giảm lượng truy cập tự nhiên đến website. Lượng truy cập giảm đồng nghĩa với ít khách hàng tiềm năng hơn và ít cơ hội tạo ra doanh thu.
- Giảm hiệu quả quảng cáo: Nếu website phụ thuộc vào doanh thu quảng cáo (AdSense, Ad Exchange), CLS cao có thể làm giảm số lần hiển thị quảng cáo được xem, giảm tỷ lệ nhấp (CTR) và do đó giảm doanh thu. Các nhà quảng cáo cũng có thể đánh giá thấp các trang web có UX kém.
- Thiệt hại danh tiếng thương hiệu: Một website không chuyên nghiệp và gây khó chịu làm giảm uy tín thương hiệu, ảnh hưởng đến khách hàng trung thành và khả năng thu hút khách hàng mới về lâu dài.
Tóm lại, CLS kém trực tiếp làm mất đi các cơ hội chuyển đổi, giảm lượng truy cập và gây thiệt hại đến danh tiếng, tất cả đều tác động tiêu cực đến doanh thu.
Có thể tắt CLS không?
Không, bạn không thể “tắt” hoàn toàn chỉ số CLS. CLS là một thước đo của sự dịch chuyển bố cục không mong muốn, và sự dịch chuyển này là một hiện tượng phát sinh từ cách trình duyệt render trang web của bạn. Mục tiêu không phải là “tắt” nó mà là tối ưu hóa để đưa giá trị CLS về 0 hoặc càng gần 0 càng tốt (dưới 0.1).
Tuy nhiên, có một số trường hợp cụ thể:
* Hoạt ảnh chuyển đổi được kích hoạt bởi người dùng: Các hoạt ảnh hoặc chuyển đổi được kích hoạt rõ ràng bởi tương tác của người dùng (ví dụ: một menu đổ xuống khi người dùng nhấp vào nút) thường không được tính vào CLS, miễn là chúng diễn ra trong 500ms đầu tiên sau khi người dùng tương tác. Google giả định rằng nếu người dùng đã chủ động tương tác, họ kỳ vọng có sự thay đổi.
* Phần mềm chặn quảng cáo/script: Một số phần mềm chặn quảng cáo có thể vô tình “khắc phục” các vấn đề CLS liên quan đến quảng cáo bằng cách không cho chúng tải, nhưng đây không phải là giải pháp gốc mà bạn có thể kiểm soát.
Giải pháp tối ưu CLS nằm ở việc tuân thủ các phương pháp lập trình web tốt (như khai báo kích thước ảnh, dành chỗ cho quảng cáo, v.v.), chứ không phải tìm cách vô hiệu hóa một chỉ số đo lường hiệu suất.
CLS có quan trọng trên tất cả các loại website?
Có, CLS quan trọng trên hầu hết tất cả các loại website. Google đã đưa CLS vào nhóm Core Web Vitals, một bộ chỉ số áp dụng chung cho mọi trang web trên Internet.
- Website tin tức và blog: CLS cực kỳ quan trọng vì người dùng dành thời gian đọc nội dung. Bất kỳ sự dịch chuyển nào cũng làm gián đoạn trải nghiệm đọc và có thể khiến họ rời đi.
- Website thương mại điện tử: Người dùng cần sự ổn định để duyệt sản phẩm, thêm vào giỏ hàng và thanh toán. Dịch chuyển bố cục có thể dẫn đến nhấp nhầm và mất niềm tin, ảnh hưởng trực tiếp đến doanh thu.
- Website dịch vụ và doanh nghiệp: Một trang web ổn định thể hiện sự chuyên nghiệp. CLS kém có thể làm suy yếu niềm tin và khiến khách hàng tiềm năng ngần ngại tương tác.
- Web ứng dụng (Web Apps): Ngay cả các ứng dụng web phức tạp cũng cần sự ổn định UI để người dùng có thể tương tác hiệu quả mà không bị gián đoạn.
- Trang đích (Landing Pages): Đặc biệt quan trọng để tối đa hóa tỷ lệ chuyển đổi. Mọi sự dịch chuyển có thể làm giảm khả năng khách hàng hoàn thành mẫu đăng ký hoặc nhấp vào lời kêu gọi hành động.
Chỉ những loại trang web rất đặc thù mà không có bất kỳ tương tác hoặc nội dung động nào (rất hiếm) có thể ít bị ảnh hưởng hơn bởi CLS, nhưng nhìn chung, việc tối ưu CLS là cần thiết cho mọi website muốn cung cấp trải nghiệm người dùng tốt và xếp hạng SEO hiệu quả.
Bao lâu nên kiểm tra lại CLS của website?
Việc kiểm tra CLS không phải là một công việc làm một lần mà là một quá trình liên tục. LADIGI Agency khuyến nghị tần suất kiểm tra như sau:
- Kiểm tra thường xuyên (hàng tuần/hàng tháng) qua Google Search Console: GSC cung cấp cái nhìn tổng quan về tình trạng CLS của toàn bộ website dựa trên dữ liệu thực tế (Field Data). Đây là công cụ hữu ích để theo dõi xu hướng và phát hiện các vấn đề mới xuất hiện trên diện rộng.
- Sau mỗi lần triển khai code hoặc cập nhật nội dung lớn: Bất kỳ thay đổi nào trong code, CSS, JS, việc thêm hình ảnh/video mới, hoặc các thành phần của bên thứ ba đều có thể ảnh hưởng đến CLS. Cần chạy kiểm tra CLS trên các trang bị ảnh hưởng ngay sau khi deploy.
- Kiểm tra định kỳ các trang quan trọng: Đối với các trang có lưu lượng truy cập cao, trang chuyển đổi chính (ví dụ: trang sản phẩm, trang giỏ hàng, trang đăng ký), nên kiểm tra thủ công bằng PageSpeed Insights hoặc Lighthouse hàng tháng hoặc quý.
- Khi sử dụng các công cụ giám sát RUM: Nếu bạn triển khai giải pháp RUM (Real User Monitoring), bạn sẽ nhận được dữ liệu CLS liên tục từ người dùng thực. Điều này cho phép bạn phản ứng nhanh chóng ngay khi có sự suy giảm hiệu suất.
- Khi có thông báo từ Google: Nếu Google gửi cảnh báo qua Search Console về hiệu suất Core Web Vitals, hãy ưu tiên kiểm tra và xử lý ngay lập tức.
Tóm lại, hãy xem CLS như một yếu tố sức khỏe của website cần được theo dõi liên tục, đặc biệt là khi có các thay đổi lớn hoặc khi có dấu hiệu suy giảm hiệu suất.
font-display: optional giúp gì cho việc tối ưu CLS?
font-display: optional là một giá trị của thuộc tính CSS font-display có thể giúp tối ưu CLS một cách mạnh mẽ, đặc biệt trong các tình huống font chữ tải chậm.
Cách hoạt động của font-display: optional:
- Không gây FOIT (Flash of Invisible Text): Trình duyệt sẽ hiển thị văn bản ngay lập tức bằng font dự phòng (fallback font) trong khi chờ font tùy chỉnh tải.
- Giới hạn thời gian chờ: Trình duyệt sẽ chỉ hiển thị font tùy chỉnh nếu nó đã tải xong và sẵn sàng rất nhanh (thường là trong vòng 100ms đầu tiên sau khi bố cục trang được tải).
- Sử dụng font dự phòng nếu quá chậm: Nếu font tùy chỉnh không tải xong kịp trong thời gian quy định, trình duyệt sẽ quyết định không sử dụng font tùy chỉnh cho lần truy cập đó và tiếp tục sử dụng font dự phòng cho phần còn lại của phiên. Font tùy chỉnh sẽ được tải ngầm và lưu vào bộ nhớ cache cho các lần truy cập tiếp theo.
Lợi ích đối với CLS:
* Giảm thiểu hoặc loại bỏ dịch chuyển: Bằng cách tránh chuyển đổi giữa font dự phòng và font tùy chỉnh nếu font tùy chỉnh tải quá chậm, font-display: optional giúp duy trì tính ổn định của bố cục. Văn bản sẽ được hiển thị bằng một font và giữ nguyên như vậy, không gây dịch chuyển bất ngờ.
* Ưu tiên UX ổn định: Nó ưu tiên trải nghiệm người dùng không bị gián đoạn hơn là sự chính xác tuyệt đối về kiểu chữ ngay lập tức.
* Không ảnh hưởng đến hiệu suất tải trang ban đầu: Trình duyệt không chặn hiển thị văn bản để chờ font tải, giúp cải thiện tốc độ hiển thị nội dung đầu tiên (First Contentful Paint).
Khi nào nên dùng:
font-display: optional là lựa chọn tuyệt vời cho các font chữ không phải là yếu tố “nhận diện thương hiệu” cốt lõi hoặc các website mà sự ổn định bố cục quan trọng hơn việc phải có font tùy chỉnh ngay lập tức. Đối với các font rất quan trọng, bạn có thể xem xét font-display: swap kết hợp với preload và tối ưu font dự phòng.
Sự khác biệt giữa Layout Shift và Cumulative Layout Shift?
Layout Shift (Dịch chuyển bố cục):
* Là một sự kiện riêng lẻ khi một phần tử nhìn thấy trên trang bất ngờ thay đổi vị trí của nó (chẳng hạn, dịch chuyển từ vị trí A sang vị trí B).
* Mỗi Layout Shift có một score (điểm số) riêng, được tính bằng tích của Impact Fraction và Distance Fraction.
* Một Layout Shift được coi là không mong muốn nếu nó không được kích hoạt rõ ràng bởi tương tác của người dùng và xảy ra trong vòng 500ms sau một tương tác của người dùng.
* Ví dụ: một hình ảnh tải xong và đẩy nội dung phía dưới xuống là một Layout Shift.
Cumulative Layout Shift (CLS):
* Là tổng hợp tất cả các điểm số Layout Shift riêng lẻ không mong muốn xảy ra trong suốt toàn bộ vòng đời của trang web.
* Nó không chỉ đo lường một lần dịch chuyển mà là tất cả các lần dịch chuyển gây ra từ khi trang bắt đầu tải cho đến khi người dùng rời khỏi trang.
* Để tính CLS, Google sử dụng một “phiên dịch chuyển” (session window) 5 giây. Tất cả các dịch chuyển xảy ra trong một cửa sổ 5 giây mà có ít nhất một dịch chuyển khác trong vòng 1 giây của dịch chuyển trước đó sẽ được cộng điểm, với cửa sổ dịch chuyển tối đa 5 giây. Khi cửa sổ dịch chuyển đóng lại (không có dịch chuyển nào trong 1 giây hoặc đã đạt 5 giây), CLS của cửa sổ đó sẽ được tính và giá trị CLS tổng thể được cập nhật.
* Mục đích của CLS là cung cấp một chỉ số tổng thể về mức độ ổn định của trang web.
Tóm lại:
* Layout Shift là hành động của một phần tử di chuyển.
* Cumulative Layout Shift là tổng điểm số của tất cả các hành động dịch chuyển không mong muốn diễn ra trên trang.
Mục tiêu khi tối ưu là giảm thiểu các Layout Shift riêng lẻ, đặc biệt là những cái không được kích hoạt bởi người dùng, để giữ cho tổng điểm Cumulative Layout Shift ở mức thấp.
Kết bài:
Cumulative Layout Shift (CLS) là một chỉ số không thể bỏ qua trong chiến lược tối ưu website hiện đại. Việc thấu hiểu CLS, công thức tính toán và những phương pháp tối ưu hiệu quả không chỉ giúp LADIGI xây dựng những trang web có trải nghiệm người dùng vượt trội mà còn đảm bảo chúng đạt được thứ hạng cao trên công cụ tìm kiếm.
Từ việc cấp phát không gian cho hình ảnh, xử lý font chữ cho đến việc giám sát liên tục, mỗi bước tối ưu đều góp phần mang lại một website ổn định, chuyên nghiệp và thân thiện với người dùng. LADIGI Agency tự tin cung cấp dịch vụ SEO chuyên sâu, giúp doanh nghiệp của bạn cải thiện các chỉ số Core Web Vitals, tăng cường khả năng hiển thị và chuyển đổi vượt trội. Hãy liên hệ với LADIGI Agency để được tư vấn và triển khai giải pháp tối ưu CLS và SEO tổng thể cho website của bạn ngay hôm nay!
