[Khắc phục] Vấn đề CLS: cao hơn 0,1 – 0,25 (máy tính, thiết bị di động)

21 Tháng Tư, 2021 by

Ắt hẳn bạn sẽ nhận được các thông báo trong Google Search Console như: Vấn đề CLS: cao hơn 0,1 (máy tính), Vấn đề CLS: cao hơn 0,25 (máy tính), Vấn đề CLS: cao hơn 0,25 (thiết bị di động), Vấn đề CLS: cao hơn 0,1 (thiết bị di động).

Trong thời gian gần đây Goolge tung ra cái gọi là tăng tính trải nghiệm người dùng và trong Google Search Console thêm hẳn một mục riêng báo cáo về vấn đề này đó là mục trải nghiệm trong đó bao gồm

Trải nghiệm trên trang
Các tín hiệu về trải nghiệm trang:

• Chỉ số thiết yếu về trang web
• Tính khả dụng trên thiết bị di động
• Vấn đề bảo mật
• HTTPS – SSL
• Trải nghiệm quảng cáo

CLS – Cumulative Layout Shift là gì?

BỐ CỤC KHÔNG ỔN ĐỊNH – Cumulative Layout Shift là một trang web có bố cục không ổn định, hay còn gọi là sự dịch chuyển bố cục.

Bạn đã bao giờ vào một trang web, mà ở trong phần màn hình hiển thị bạn định click vào một đối tượng nào đó mà nó lại nhảy nhót không ổn định hoặc hiển thị một quảng cáo hay popup khiến bạn phải click vào một đối tượng khác? Các bố cục này không ổn định và khiến cho người dùng khó chịu thậm chí là đánh lừa người dùng. Như vậy được khái niệm như là BỐ CỤC KHÔNG ỔN ĐỊNH – Cumulative Layout Shift.

Những trang có bố cục không ổn định này thông thường là các trang có các quảng cáo, các popup hay các hiệu ứng javascript

Điểm số Cumulative Layout Shift được tính như thế nào?

Sự thay đổi bố cục tích lũy (CLS) là chỉ số Core Web Vitals được tính bằng cách tổng hợp tất cả các thay đổi bố cục không do tương tác của người dùng gây ra. CLS xem xét tỷ lệ khung nhìn bị ảnh hưởng bởi sự thay đổi bố cục và khoảng cách di chuyển của các phần tử đã được di chuyển.

Xem thêm: Giải mã công cụ Mở miễn phí Google Lighthouse 2021

Điểm CLS tốt là gì?

Điểm CLS có thể thấp tới 0 đối với các trang hoàn toàn tĩnh và càng cao thì càng có nhiều thay đổi bố cục trên trang.

Điểm của bạn càng thấp, bố cục của bạn càng ổn định. Điểm CLS chính thức được sử dụng bởi các công cụ hiệu suất của Google như sau:

• Tốt – CLS dưới 0,1,
• Cần cải thiện – CLS từ 0,1 đến 0,25,
• Kém – CLS trên 0,25.

Google khuyên bạn nên giữ điểm CLS của mình dưới 0,1.

Điểm CLS của bạn có ảnh hưởng đến SEO không?

CLS chắc chắn ảnh hưởng đến SEO, bạn hình dung nếu một trang web cung cấp thông tin hữu ích cho bạn mà không có một quảng cáo nào so với một trang web cũng tương tự mà có quá nhiều quảng cáo, bạn sẽ thấy khó chịu không và bạn sẽ chọn trang nào và bookmark trong trình duyệt cũng như trong tâm trí bạn là trang nào để lần kế tiếp bạn sẽ lựa chọn trang nào??
Điều đó hoàn toàn ảnh hưởng đến lượng khách truy cập vào trang web của bạn.

Ngoài ra Google từng nói CLS là một SEO Factor vào tháng 05/2021 nhưng gần đây công việc này lại dãn ra và CLS sẽ trở thành một yếu tố xếp hạng vào tháng 06 năm 2021 khi Bản cập nhật trải nghiệm trang của Google ra mắt. Điều đó có nghĩa là điểm CLS của bạn (cùng với các chỉ số LCP và FID) sẽ ảnh hưởng đến SEO của bạn. Mặc dù nó có thể chỉ là một yếu tố rất nhỏ, nhưng điểm CLS của bạn (cùng với các Web Vitals khác) có thể phản ánh lượng truy cập bạn nhận được từ Google và các công cụ tìm kiếm khác.

Xem thêm: Điểm số Google Lighthouse và Bằng chứng thực tế

Tại sao bạn cần quan tâm đến Sự thay đổi Bố cục trang web

Như tôi đã đề cập ở trên – CLS sẽ sớm trở thành một yếu tố xếp hạng.

Tuy nhiên, quan trọng hơn, điểm CLS cao có nghĩa là người dùng của bạn đang gặp khó khăn khi duyệt trang của bạn.

Tác động tiêu cực của nhiều lần thay đổi bố cục trải dài từ khó chịu nhẹ đến thậm chí vô tình mua nhầm sản phẩm, click nhầm sang đường link, thậm chí click sang các trang web S.E.X hoặc lừa đảo. Nó có thể dẫn đến những đánh giá không tốt cho website của bạn và không khuyến khích người dùng quay lại trang web cũng như giảm sự truy cập của khách hàng mới.

Xem thêm: Điểm Số Xanh (Google Lighthouse) và Những Hệ Lụy

Nguyên nhân nào khiến CLS cao

Theo Google, các nguyên nhân phổ biến nhất của CLS cao là:

• Hình ảnh không có kích thước,
• Quảng cáo, nhúng và iframe không có kích thước
• Nội dung động,
• Phông chữ web gây ra các hiệu ứng động hoặc Flash
• Các hành động chờ phản hồi khi load trang web – Popup ….

Xem thêm: Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021

Cách khắc phục CLS cao

– Cần bổ sung kích thước cho hình ảnh mà bạn sử dụng ví dụ: <img src=”” alt=”Lamvt CODE AND SEO” width=”500″ height=”500″>
Bạn có thể sử dụng thêm thuộc tính class responsive cho thiết bị di động nếu muốn.

– Các Font chữ của bạn cần đặt rel = preload và font-display:swap để tạo sự ổn định khi load trang web, việc ưu tiên load các font của bạn sẽ là điều dễ dàng nhanh chóng làm ổn định website.

– Các iframe hay video … bạn nên dùng có độ rộng để ổn định khi load

Xem thêm: Cách tối ưu tốc độ Google Page Speed, Googe Lighthouse 100 Điểm

Các công cụ kiểm ra và khắc phục CLS cao

– Google Lighthouse là được khuyên dùng bởi Google, nó cung cấp cho bạn cái nhìn đa chiều và nhiều yếu tố tốt cho website của bạn, đây là một công cụ mã nguồn mở và hoàn toàn miễn phí.
– GTMETRIX: đây là công cụ hoàn toàn miễn phí được anh em Webmaster tin dùng
Ngoài ra các bạn có thể dùng Webpagetest,Chrome DevTools,Chrome Web Vitals extension hay Google page Speed Insight…

Nếu bạn có thắc mắc giải đáp về vấn đề CLS và cách khắc phục vui lòng ĐT/ZALO: 0399815232
Trân trọng