Bạn đã bao giờ đang truy cập website khi một chiếc gì đó đột nhiên thay đổi trên trang? Không có cảnh báo, và bạn bị vận chuyển đến 1 url khác và bạn đã mất vị trí của mình. Hoặc thậm chí còn tệ hơn: bạn sắp chạm vào một trong những liên kết hoặc một nút, nhưng ngay tức thì trước lúc ngón tay của bạn chạm vào đó, và cuối cùng bạn nhấp vào một chiếc gì đó khác! Hồ hết thời kì những loại kinh nghiệm này chỉ gây phiền nhiễu, nhưng trong một số trường hợp, chúng có thể gây ra thiệt hại thực sự. Ví dụ như các trang tự động hóa bị chuyển hướng, các trang “lừa” người dùng click vào link không đúng hoặc website bị nhiễm mã độc chuyển hướng

Chuyển động bất thần của nội dung trang thường xẩy ra do tài nguyên được tải không đồng bộ hoặc các thành phần DOM được thêm động vào trang phía bên trên nội dung hiện có. Thủ phạm có thể là hình ảnh hoặc video có kích thước không xác định, phông chữ hiển thị to ra thêm hoặc nhỏ hơn dự phòng hoặc quảng cáo hoặc tiện ích của bên thứ ba tự động hóa thay đổi kích thước.

Điều khiến vấn đề này trở thành rối rắm hơn nữa là phương pháp hoạt động của một website thường khác với cách người dùng trải nghiệm nó. Nội dung được member hóa hoặc bên thứ ba thường không hoạt động giống như trong quá trình phát triển, hình ảnh thử nghiệm thường có trong bộ đệm của trình duyệt của nhà phát triển và các lệnh gọi API chạy cục bộ thường nhanh đến mức không thể nhận thấy độ trễ.

Số liệu Chuyển đổi bố cục tổng quan tích lũy (CLS) giúp cho bạn xử lý vấn đề này bằng phương pháp đo tần suất xẩy ra khi đối chiếu với người dùng thực.

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ổng quan 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. Đó cũng là một trong những yếu tố cốt lõi nhất của cỗ máy tìm kiếm google. CLS nhằm nhìn nhận và đánh giá độ ổn định thị giác, nhìn nhận và đánh giá tần suất người dùng trải nghiệm các thay đổi bố cục tổng quan 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ìn nhận và đánh giá dưới 0,một 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. Điểm số CLS là điều tổng số

1 báo cáo giải trình CLS trong search console

Đặc điểm CLS

Các thay đổi bố cục tổng quan được xác định bởi API không ổn định bố cục tổng quan , báo cáo giải trình layout-shift các mục nhập bất kì khi nào một thành phần hiển thị với chủ trương xem thay đổi vị trí mở màn của nó (ví dụ: vị trí trên cùng và bên trái của nó trong chủ trương ghi mặc định ) giữa hai sườn. Các yếu tố như vậy được xem là yếu tố không ổn định .

Lưu ý rằng sự thay đổi bố cục tổng quan chỉ xẩy ra lúc các yếu tố ngày nay thay đổi vị trí mở màn của chúng. Nếu một thành phần mới được thêm vào DOM hoặc một thành phần hiện có thay đổi kích thước, thì nó không được tính là một sự thay đổi bố cục tổng quan, miễn sao thay đổi đó không làm cho những thành phần hiển thị khác thay đổi vị trí mở màn của chúng.

Cách cải thiện điểm CLS

Phương pháp tính điểm CLS: layout shift score = impact fraction * distance fraction = phần tác động x phần khoảng tầm cách

Phần tác động thống kê giám sát các yếu tố không ổn định tác động đến khu vực sườn nhìn giữa hai sườn hình.

Sự phối hợp của đa số khu vực có thể nhìn thấy của tất cả những yếu tố không ổn định cho sườn trước đó và sườn ngày nay là một phần của tổng diện tích S của sườn nhìn là một phần tác động cho sườn ngày nay.

Trong hình trên, có một thành phần chiếm một nửa số sườn nhìn trong một sườn. Sau đó, trong sườn tiếp theo, thành phần sẽ giảm 25% độ cao của sườn nhìn. Hình chữ nhật chấm red color biểu thị sự phối hợp của vùng nhìn thấy của thành phần trong cả hai sườn, trong trường hợp này là 75% tổng số sườn nhìn, vì vậy phần tác động của nó là 0.75.

Khoảng tầm cách

Phần khác của phương trình điểm dịch chuyển bố trí đo khoảng tầm cách mà các thành phần không ổn định đã vận chuyển, liên quan đến chủ trương xem. Phân số khoảng tầm cách là khoảng tầm cách lớn số 1 mà bất kỳ yếu tố không ổn định nào đã vận chuyển trong sườn (theo chiều ngang hoặc chiều dọc) chia cho kích thước lớn số 1 của sườn nhìn (chiều rộng hoặc độ cao, tùy theo giá trị nào to ra thêm).

Trong ví dụ trên, kích thước sườn nhìn lớn số 1 là độ cao và thành phần không ổn định đã vận chuyển 25% độ cao của sườn nhìn, làm cho phần khoảng tầm cách 0,25.

Vì vậy, trong ví dụ này, phần tác động là 0.75và phần khoảng tầm cách là 0.25, do đó, điểm dịch chuyển bố cục tổng quan là 0.75 * 0.25 = 0.1875.

Thuở đầu, điểm dịch chuyển bố cục tổng quan chỉ được tính dựa trên phần tác động . Phân số khoảng tầm cách được đưa ra để tránh các trường hợp xử phạt trên mức cho phép trong đó các thành phần lớn dịch chuyển một lượng nhỏ.

Ví dụ tiếp theo minh họa cách thêm nội dung vào một trong những yếu tố hiện có ảnh hưởng tác động tới điểm dịch chuyển bố cục tổng quan:

>>Xem thêm: Cách xóa Cache DNS máy tính member | xóa Bộ nhớ đệm DNS | Flush dns

“Nhấp vào tôi!” nút được gắn vào dưới cùng của hộp màu xám với văn bản màu đen, đẩy hộp màu xanh lá cây với văn bản white color xuống (và một phần thoát ra khỏi chủ trương xem).

Trong ví dụ này, hộp màu xám thay đổi kích thước, nhưng vị trí mở màn của nó không thay đổi nên nó không phải là một yếu tố không ổn định.

“Nhấp vào tôi!” nút trước kia không có trong DOM, vì vậy vị trí mở màn của nó cũng không thay đổi.

Tuy nhiên, vị trí mở màn của hộp màu xanh lá cây không thay đổi, nhưng vì nó đã được vận chuyển một phần thoát ra khỏi sườn nhìn, nên khu vực vô hình dung không được xem xét khi tính toán phần tác động . Liên kết các khu vực có thể nhìn thấy cho hộp màu xanh lá cây trong cả hai sườn hình (được minh họa bằng hình chữ nhật chấm red color) giống như diện tích S của hộp màu xanh lá cây trong sườn hình trước tiên 50% của sườn nhìn. Phần tác động là 0.5.

Phần khoảng tầm cách được minh họa bằng mũi tên màu tím. Hộp màu xanh lá cây đã vận chuyển xuống khoảng tầm 14% của sườn nhìn, do đó, khoảng tầm cách là 0.14.

Điểm thay đổi bố trí là 0.5 x 0.14 = 0.07.

Ví dụ cuối cùng này minh họa nhiều yếu tố không ổn định:

>>Xem thêm: High Availability Là Gì? Cách Xây Dựng Hệ Thống High Availability

Trong sườn trước tiên ở trên, có bốn kết quả của yêu cầu API cho động vật hoang dã, được sắp xếp theo trật tự bảng vần âm. Trong sườn thứ hai, nhiều kết quả được thêm vào list được sắp xếp.

Mục trước tiên trong list (“Cat”) không thay đổi vị trí mở màn giữa các sườn, vì vậy nó ổn định. Tương tự, các mục mới được thêm vào list trước kia không có trong DOM, vì vậy vị trí mở màn của chúng cũng không thay đổi. Nhưng những vật phẩm có nhãn “Chó”, “Ngựa” và “Ngựa vằn” đều thay đổi vị trí mở màn, khiến chúng trở thành các yếu tố không ổn định.

Một lần nữa, hình chữ nhật chấm red color thay mặt đại diện cho việc phối hợp của ba yếu tố không ổn định này ‘trước và sau các khu vực, trong trường hợp này là khoảng tầm 38% diện tích S của sườn nhìn ( phần tác động của 0.38).

Các mũi tên biểu thị khoảng tầm cách mà các thành phần không ổn định đã vận chuyển từ vị trí mở màn của chúng. Thành phần “Zebra”, được biểu thị bằng mũi tên màu xanh, đã vận chuyển nhiều nhất, bằng khoảng tầm 30% độ cao của sườn nhìn. Điều đó làm cho phần khoảng tầm cách trong ví dụ này 0.3.

Điểm thay đổi bố trí là 0.38 x 0.3 = 0.1172.

Ví dụ: nếu tương tác người dùng kích hoạt yêu cầu mạng có thể mất một lúc để hoàn thành, tốt nhất bạn nên tạo một số không gian ngay tức thì và hiển thị chỉ báo tải để tránh thay đổi bố cục tổng quan khó chịu khi yêu cầu hoàn thành. Nếu người dùng không sở hữu và nhận ra thứ gì đó đang tải hoặc không biết khi nào tài nguyên sẽ sẵn sàng, họ có thể nỗ lực cố gắng nhấp vào thứ khác trong những lúc mong đợi một thứ gì đó có thể vận chuyển từ phía dưới.

Các thay đổi bố cục tổng quan xẩy ra trong vòng 500 mili giây của nguồn vào của người dùng sẽ có được hadRecentInput cờ được đặt, do đó chúng có thể được loại trừ khỏi các tính toán.

Ảnh động và chuyển tiếp

Ảnh động và chuyển tiếp, khi được thực hiện tốt, là một cách tuyệt vời để update nội dung trên trang mà không khiến ngạc nhiên cho những người dùng. Nội dung thay đổi đột ngột và bất thần trên trang hầu như luôn tạo ra trải nghiệm người dùng xấu. Nhưng nội dung vận chuyển từ từ và tự nhiên từ vị trí này sang vị trí tiếp theo thường có thể giúp người dùng nắm vững hơn về những gì đang diễn ra và hướng dẫn họ giữa các thay đổi trạng thái.

transform Tính chất CSS được cho phép bạn làm động các thành phần mà không kích hoạt thay đổi bố cục tổng quan:

Thay vì thay đổi heightvà widthcác tính chất, sử dụng transform: scale().Để vận chuyển các yếu tố xung quanh, tránh thay đổi top, right, bottom, hoặc lefttài sản và sử dụng transform: translate()để thay thế.

Các dụng cụ đo điểm số CLS

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)

Các lưu ý khi cải thiện điểm CLS

So với hồ hết các website, chúng ta cũng có thể tránh tất cả những thay đổi bố cục tổng quan bất thần bằng phương pháp tuân thủ một số nguyên tắc hướng dẫn:

Luôn gồm có các tính chất kích thước trên các yếu tố hình ảnh và video của bạn hoặc bảo lưu không gian cấp thiết với một chiếc gì đó như các hộp tỷ lệ sườn hình CSS . Cách tiếp cận này đảm nói rằng trình duyệt có thể phân bổ lượng không gian xác thực trong tài liệu trong những lúc hình ảnh đang tải. Lưu ý rằng bạn cũng có thể có thể sử dụng chính sách tính năng đa phương tiện để buộc hành vi này trong các trình duyệt tương trợ chính sách tính năng.Không bao giờ chèn nội dung trên nội dung hiện có, ngoại trừ phản ứng với tương tác của người dùng. Điều này đảm bảo bất kỳ sự thay đổi bố trí xẩy ra được mong đợi.Thích chuyển đổi hình ảnh động thành hình ảnh động của đa số tính chất kích hoạt thay đổi bố cục tổng quan. Chuyển đổi phim hoạt hình Theo phong cách cung cấp toàn cảnh và liên tục từ trạng thái này sang trạng thái khác.

Trên đây là lời đáp xác thực cho thắc mắc cls là gì? vì sao cần cải thiện cls trong seo, mong rằng qua nội dung bài viết này còn có thể giúp các bạn dễ dàng hiểu cls là gì? vì sao cần cải thiện cls trong seo hơn! Nếu thấy nội dung bài viết này hữu ích hãy subscribe để theo dõi những thông tin tiên tiến nhất từ Hosting Việt nhé. Chúc các bạn thành công!