Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Cách khắc phục Vấn đề CLS: cao hơn 0,25 (Di động), 0,1 (Máy tính)

5/5 - (2 bình chọn)

CLS là gì? Cách khắc phục sự cố CLS có khó không? Là một trong những thắc mắc được rất nhiều tân binh. Những người lần đầu tiên tiếp cận với việc thiết lập trang web. Đôi khi lang thang trên một trang web nào đó, bỗng dưng bạn bị chuyển đến một trang khác mà không có bất kỳ cảnh báo nào. Thậm chí bạn còn được di chuyển đến một vị trí khác. Hay khi bạn muốn chạm vào một thứ gì đó, nhưng khi chạm vào nó lại dẫn bạn đến một cái khác…Đó chính là những hiện tượng của CLS. Vậy CLS là gì? Nguyên nhân dẫn đến hiện tượng trên là do đâu? Cách khắc phục sự cố CLS có khó không? Hãy cùng Lamvt.vn tìm hiểu trong nội dung bài viết ngắn dưới đây nhé.

CLS issue: more than 0.25 (mobile), CLS issue: more than 0.1 (desktop),

Dấu hiệu nhận biết sự cố CLS

Khi bạn truy cập vào một trang web và định nhấp vào một liên kết đến một bài báo, và sau đó… bố cục đột nhiên di chuyển, một quảng cáo xuất hiện và bằng cách nào đó thay vì nhấp vào bài báo bạn muốn đọc, bạn lại nhấp vào quảng cáo vô dụng? Chuyển động đột ngột đó chính là CLS.  Để hiểu hơn hãy tiếp tục đọc để tìm hiểu nó và cách khắc phục sự cố CLS nhé!

Cách khắc phục Vấn đề CLS: cao hơn 0,25 (Di động), 0,1 (Máy tính) imge_vidu_cls
Hiện tượng về cls trong trang web

CLS là gì?

CLS là chữ viết tắt của Cumulative Layout Shift, được hiểu nôm na là “Thay đổi bố cục tích lũy”. Google đưa ra điểm số này nhằm đánh mạnh vào yếu tố trải nghiệm người dùng. CLS nhằm đánh giá độ ổn định thị giác, đánh giá tần suất người dùng trải nghiệm các thay đổi bố cục không mong muốn. CLS được tính bằng điểm số, càng thấp chứng tỏ trải nghiệm của người dùng càng tốt (càng nhỏ càng tốt, Google đánh giá dưới 0,1 là tốt). CLS đo chỉ số cả giao diện trên máy tính để bàn và thiết bị di động.

Nguyên nhân xảy ra sự cố CLS?

Trong một số trường hợp, CLS cũng có thể xảy ra khi các phông chữ tự hiển thị lớn hơn hoặc nhỏ hơn, quảng cáo của bên thứ ba hoặc tiện ích con tự động thay đổi kích thước, gây ra các thay đổi về bố cục không mong muốn.

Theo Google, có năm nguyên nhân chính dẫn đến CLS:

  1. Hình ảnh không có kích thước (thiếu số cao và chiều rộng để duy trì tỷ lệ co đáp ứng)
  2. Nhúng quảng cáo và iframe không có thứ nguyên
  3. Nội dung được chèn sau khi tải trang đầu tiên (còn được gọi là văn bản ẩn)
  4. Flash của văn bản chưa được định kiểu (FOUT) xảy ra khi phông chữ web tùy chỉnh tải chậm
  5. Các hành động chờ phản hồi từ mạng trước khi cập nhật DOM

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

Nguyên tắc chung của Google là bất kỳ điểm CLS nào dưới 0,1 là tốt và bất kỳ điểm nào trên 0,25 đều là xấu. Không giống như các chỉ số Core Web Vital khác, CLS không được tính như một thước đo thời gian. Công thức của điểm dịch chuyển bố cục là: Điểm dịch chuyển bố cục = Phân số tác động * Phân số khoảng cách

Các chỉ số này đo chuyển động của các phần tử không ổn định liên quan đến kích thước khung nhìn. Sau đó CLS là điểm tích lũy của tất cả điểm dịch chuyển bố trí.

Ngoài ra, hãy nhớ rằng vì điện thoại di động có màn hình nhỏ hơn, nên sự thay đổi bố cục trên thiết bị di động có tác động mạnh hơn rất nhiều. Khi bạn kiểm tra điểm Dịch chuyển bố cục tích lũy của mình, bạn sẽ nhận được điểm CLS riêng cho thiết bị di động và máy tính để bàn. Điều hợp lý là bạn sẽ phải tối ưu hóa cho cả máy tính để bàn và thiết bị di động vì Google đang đẩy mạnh chương trình ưu tiên thiết bị di động.

Cách khắc phục Vấn đề CLS: cao hơn 0,25 (Di động), 0,1 (Máy tính) thang_diem_cls
Chuẩn đo lường theo thang điểm CLS

Vậy nên để tránh những tình trạng CLS lớn hơn 0.25 bạn có thể thực hiện những cách dưới đây:

Các cách khắc phục sự cố CLS?

Trong nhiều trường hợp, các nhà thiết kế trang web có thể tránh sự thay đổi bố cục không mong muốn dẫn đến phạm vi CLS thấp bằng cách tuân thủ một số phương pháp hay nhất cơ bản sau:

Tắt các tiêu đề cố định

Khiến nội dung chuyển lên và xuống.

Tắt hiệu ứng thu nhỏ logo – phóng to hoặc thu nhỏ logo khi cuộn trang

Cũng bao gồm các thuộc tính kích thước trên hình ảnh logo của bạn. Theo kinh nghiệm của tôi, thiếu các thuộc tính kích thước hình ảnh cho biểu trưng là nguyên nhân phổ biến thứ hai gây ra các vấn đề CLS.

Luôn bao gồm các thuộc tính kích thước trên hình ảnh và video của bạn

Nếu bạn đang sử dụng WordPress ngay khi bạn tải lên một hình ảnh. WordPress sẽ tự động điều chỉnh kích thước của hình ảnh. Nếu không, đây là một ví dụ về mã hình ảnh với chiều rộng và chiều cao được khai báo:

         <img src = ”thelink” width = ”400px” height = ”300px”>

Không bao giờ chèn nội dung có thể xuất hiện bên trên nội dung hiện có

Ngoại trừ phản hồi tương tác của người dùng. Điều này đảm bảo bất kỳ thay đổi bố cục nào xảy ra đều được như mong đợi. Một ví dụ điển hình về điều này là các cửa sổ bật lên như cửa sổ bật lên “đăng ký ngay bây giờ” hoặc cửa sổ bản tin gây phiền nhiễu.

Tắt hoạt ảnh chuyển đổi thành hoạt ảnh của thuộc tính kích hoạt thay đổi bố cục

Tạo hiệu ứng chuyển tiếp theo ngữ cảnh và tính liên tục từ trạng thái này sang trạng thái khác. Hoặc tốt hơn là tránh xa các hình ảnh động.

Cải thiện phản hồi HTTP và đồng bộ hóa các phần tử

Phản hồi HTTP của máy chủ chậm cũng có thể gây ra sự cố với bố cục nội dung. Khi bạn đang sử dụng CDN, quá trình tải các phần tử được thụt lề mất khá nhiều mili giây. Điều đó khiến nội dung bị nhảy. Sau đó, bạn phải xây dựng không gian trong DOM hoặc đồng bộ hóa với các phần tử khác.

Đặt kích thước quảng cáo và nhúng quảng cáo

Nó là một trong những yếu tố đóng góp lớn nhất vào sự thay đổi bố cục. Các nhà xuất bản và mạng quảng cáo thường hỗ trợ kích thước quảng cáo động. Do tỷ lệ nhấp cao hơn và nhiều quảng cáo cạnh tranh hơn trong phiên. Nên kích thước quảng cáo cải thiện hiệu quả. Đáng buồn thay, do quảng cáo đẩy nội dung hiển thị mà bạn đang xem xuống trang. Nên điều này có thể dẫn đến trải nghiệm người dùng không tối ưu.

Bạn có thể thử các bước sau để giảm nguy cơ CLS cao do quảng cáo:

  • Dành không gian tĩnh cho vùng quảng cáo. Có nghĩa là, tạo kiểu cho mục trước khi tải thư viện thẻ quảng cáo.
  • Khi đưa quảng cáo vào luồng nội dung, đảm bảo kích thước vùng được phân bổ để tránh thay đổi. Nếu được tải ngoài màn hình, những quảng cáo đó sẽ không kích hoạt thay đổi bố cục.
  • Khi đặt quảng cáo không dính ở gần đầu khung nhìn, hãy cẩn thận hơn.
  • Loại bỏ thay đổi về bố cục bằng cách dành vị trí quảng cáo với thời lượng rộng nhất.
  • Sử dụng dữ liệu lịch sử để chọn kích thước có khả năng xảy ra nhất cho vùng quảng cáo.

Một cách dễ dàng để kiểm tra xem bạn đã khắc phục sự cố CLS hay chưa là kiểm tra nó bằng công cụ tốc độ trang của google ngay sau mỗi thay đổi của bạn. Nhưng trước tiên, hãy đảm bảo rằng bạn xóa bộ nhớ cache trang web của mình hoặc nếu sử dụng WordPress bạn chỉ cần tắt tất cả các plugin bộ nhớ đệm.

Hy vọng rằng bài viết này đã giúp bạn hiểu rõ về CLS và những cách để khắc phục CLS. Nếu cần hỏi đáp các bạn liên hệ với mình nhé.

Xem thêm:

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...
    17 giây trước
  2. Mô tả meta là một thẻ HTML giúp cung cấp thông tin quan trọng về nội dung trang web cho...
    15 giây trước
  3. Sự bùng nổ của công nghệ thông tin song hành với nó là sự phát triển của marketing online. Các...
    3 giây trước
  4. Trước nay khi nhắc đến SEO, người ta không bao giờ quên đề cập đến 2 vấn đề quan trọng:...
    10 giây trước
  5. Dưới đây là 5 Dịch vụ chat online miễn phí trên Facebook Messenger dành cho các trang web. Bạn có...
    11 giây trước
  6. Bạn đang gặp khó khăn trong việc tìm kiếm những công cụ giúp cải thiện trang web của mình. Và...
    3 giây trước
  7. Google đã công bố dự án AMP- Accelerated Mobile Pages đây có vẻ như động thái đáp trả 2 đối...
    27 giây trước
  8. Để có được một bài viết chuẩn SEO, các content phải thực hiện rất nhiều công đoạn từ nghiên cứu...
    10 giây trước
  9. Dịch vụ tối ưu website, Tăng tốc Website của bạn, Tối ưu hóa hiệu suất của trang web luôn là...
    7 giây trước
  10. Hiện nay có rất nhiều trang web thương mại cho sản phẩm thiết bị phòng tắm, thiết bị xông hơi,...
    3 giây trước