VnTips 7 tháng trước

CLS là gì? Cách tối ưu CLS cho WordPress

Mục lục

Cumulative Layout Shift ( viết tắt là CLS) dịch sang tiếng Việt có nghĩa là thay đổi bố cục tích lũy. CLS là số liệu đánh giá trải nghiệm trang web bằng cách đo lường mức độ thay đổi bất ngờ của các trang trên trang web của bạn.

Mặc dù có một số yếu tố trang web ảnh hưởng đến trải nghiệm người dùng nhưng điểm CLS kém cũng ảnh hưởng đến việc tối ưu hóa công cụ tìm kiếm (SEO) trên trang web của bạn. Do đó, hiểu CLS là gì và cách đạt được điểm CLS tốt sẽ giúp cải thiện hiệu suất tổng thể trang web của bạn.

Trong bài viết này, chúng tôi sẽ thảo luận về các cách khác nhau để đo điểm CLS. Chúng tôi cũng sẽ giải thích những yếu tố nào ảnh hưởng đến nó và trả lời một số câu hỏi thường gặp về CLS ở cuối bài viết này.

Hãy bắt đầu bằng cách trả lời câu hỏi chính: CLS là gì?

Điểm số tổng hợp về mức thay đổi bố cục (CLS) là gì?

Sự thay đổi bố cục tích lũy đo lường độ ổn định về mặt hình ảnh của các trang web, tính toán tổng số lần thay đổi bố cục không mong muốn trên một trang web. Sự thay đổi bố cục xảy ra khi một phần tử hiển thị thay đổi vị trí hoặc kích thước của nó, di chuyển nội dung xung quanh nó.

Điểm thay đổi bố cục tích lũy Tác động đến SEO

Sự thay đổi bố cục tích lũy là một yếu tố xếp hạng trong Google vì nó ảnh hưởng đến hiệu suất và trải nghiệm người dùng của trang web. Đây là một trong những số liệu Core Web Vitals và Google có thể phạt một trang web không đáp ứng tiêu chuẩn của nó.

Điểm CLS kém cho thấy trang web đó không đáng tin cậy, điều này có thể khiến khách truy cập rời đi nhanh hơn. Vì vậy, tối ưu hóa trang web của bạn để có điểm CLS cao là một thành phần thiết yếu của chiến lược SEO thành công.

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

Điểm CLS cao cho thấy số lượng thay đổi bố cục không mong muốn đáng kể trên một trang web. Mặt khác, một trang hoàn toàn tĩnh có thể đạt điểm thấp bằng 0 .

Google đã đặt ra tiêu chuẩn cho tất cả các chỉ số Core Web Vitals để giúp chủ sở hữu trang web đo lường và cải thiện điểm CLS của họ:

Tốt – dưới 0,1 là điểm chấp nhận được theo tiêu chuẩn của Google.
Cần cải thiện – từ 0,1 đến 0,25 cho biết bạn cần thực hiện các thay đổi để giảm bớt những thay đổi không mong muốn.
Kém – trên 0,25 có thể làm hỏng thứ hạng trang web của bạn.

Một trang web có thể có điểm CLS khác nhau cho các trang web và màn hình khác nhau. Sự thay đổi bố cục trên màn hình thiết bị di động có tác động đáng kể hơn đến trải nghiệm người dùng thiết bị di động.

Cách đo điểm thay đổi bố cục tích lũy của bạn

Dưới đây là hai phương pháp phổ biến để thực hiện bài kiểm tra Sự thay đổi bố cục tích lũy:

Trong phòng thí nghiệm – mô phỏng trải nghiệm của người dùng trong môi trường được kiểm soát.
Tại hiện trường – dựa trên tương tác thực của người dùng.

Không có phương pháp nào tốt hơn vì sử dụng cả hai sẽ cung cấp dữ liệu đáng tin cậy hơn về hiệu suất trang web của bạn. Để giúp đo lường CLS của trang web của bạn, Google có sẵn nhiều công cụ miễn phí .

Tùy chọn 1: Đo CLS trong Lab (Phòng thí nghiệm)

Khi đo CLS trong lab, kết quả chỉ tính đến một phạm vi nhỏ các tình huống có thể xảy ra. Hầu hết các công cụ dành cho nhà phát triển trình duyệt đều cung cấp cách tính điểm CLS của trang web, thường hiển thị lớp phủ hình chữ nhật hiển thị các vùng bị ảnh hưởng.

Dưới đây là các bước để đo CLS bằng Google Chrome’s Developer Tools:

Nhấp vào menu trình duyệt của bạn và đi tới More tools -> Developer tools. Một tùy chọn khác là nhấn Ctrl + Shift + I và chọn bảng Performance
Kiểm tra tùy chọn Web Vitals và nhấp vào nút reload hoặc nhấn Ctrl + Shift + E để ghi lại quá trình tải trang
Chờ kết quả rồi nhấn vào tab Layout Shift bên cạnh Experience. Công cụ sẽ hiển thị Điểm tích lũy ở mục Summary

Lưu ý rằng có thể có nhiều tab Layout Shift cho điểm khác nhau do các thành phần hình ảnh khác nhau hiển thị các thay đổi về bố cục. Nhấp vào từng tab để xem yếu tố nào đang gây ra sự cố trên trang web của bạn.

Các công cụ khác giúp đo lường CLS trong môi trường được kiểm soát bao gồm Lighthouse và tiện ích mở rộng Chrome Web Vitals.

Tùy chọn 2: Đo CLS tại hiện trường (Dữ liệu người dùng thực)

Phương pháp còn lại đo lường tương tác thực của người dùng bằng cách sử dụng Báo cáo trải nghiệm người dùng Chrome (CrUX) làm nguồn dữ liệu chính, giúp phân tích hiệu suất tổng thể của trang web của bạn.

Một công cụ phổ biến giúp đo lường dữ liệu người dùng thực của bạn là PageSpeed Insights . Dưới đây là các bước sử dụng PageSpeed Insights để tính điểm CLS của trang web:

Nhập URL trang web và nhấp vào nút Phân tích để kiểm tra hiệu suất của nó.
PageSpeed Insights sẽ hiển thị Đánh giá quan trọng về trang web cốt lõi tổng thể và liệu trang web có đáp ứng tiêu chuẩn của Google hay không. Công cụ sẽ hiển thị kết quả dành cho Thiết bị di động trước tiên.
Nhấp vào Máy tính để bàn để tìm điểm CLS cho thiết bị máy tính để bàn. Lưu ý rằng điểm số có thể khác nhau trên các màn hình khác nhau.
Bấm vào Mở rộng chế độ xem để hiểu rõ hơn về điểm số.

Các công cụ phổ biến khác giúp đo lường CLS trong lĩnh vực này là BigQuery và Looker Studio.

Hiểu cách tính điểm CLS

Hiểu cách tính điểm Chuyển đổi bố cục tích lũy sẽ giúp tối ưu hóa nó. Điểm CLS đo lường hai yếu tố trong sự thay đổi bố cục không mong muốn:

Phần tác động – đo lường tác động của một phần tử không ổn định trên khung nhìn.
Phần khoảng cách – đo khoảng cách phần tử di chuyển trên khung nhìn.

Cách tính để có được điểm CLS là:

Điểm CLS cuối cùng = Tỷ lệ tác động x Tỷ lệ khoảng cách

Phần tác động

Phần tác động đo lường lượng không gian mà phần tử không ổn định chiếm trong khu vực khung nhìn. Khi các phần tử hiển thị bất ngờ chuyển sang khu vực khác, phần tác động sẽ tính toán tổng diện tích mà ca đó chiếm:

Tỷ lệ tác động = Vùng tác động/Khu vực khung nhìn

Điểm này cho thấy các yếu tố không ổn định ảnh hưởng như thế nào đến hiệu suất tổng thể của trang web.

Phân số khoảng cách

Phân số khoảng cách đo khoảng cách lớn nhất mà các phần tử không ổn định đã di chuyển trong quá trình thay đổi bố cục không mong muốn. Việc tính toán để có được phần khoảng cách là:

Phần khoảng cách = Khoảng cách di chuyển tối đa / Diện tích khung nhìn

Điểm số thể hiện mức độ di chuyển của một phần tử hiện có đối với các phần tử khác khi dịch chuyển bất ngờ.

Cách tìm yếu tố nào gây ra điểm CLS kém

Nếu một trang web có điểm CLS kém thì một số yếu tố cần xem xét là:

Quảng cáo biểu ngữ, nội dung nhúng, iFrame, hình ảnh và phần tử video không có thông số kích thước.
Nội dung động phía trên khung nhìn hiện tại, không có phần giữ chỗ cho kích thước màn hình.
Phông chữ tùy chỉnh thay đổi hành vi hiển thị.

Những hành động này thường chờ phản hồi của mạng để tải các phần tử lên, điều này gây ra sự thay đổi bố cục không mong muốn cao hơn.

Các công cụ đo điểm CLS của trang web cũng có thể chỉ ra các yếu tố cụ thể có thể gây ra sự cố khi thay đổi bố cục.

Ví dụ: bảng Performance trên công cụ dành cho nhà phát triển của trình duyệt hiển thị các phần tử không ổn định trên tab Layout Shift.

Tóm tắt cũng chia sẻ Vị trí và Kích thước ban đầu và mới của phần tử không ổn định.

Trên PageSpeed Insights, hãy tìm thêm chi tiết về phần tử gây ra những thay đổi không mong muốn trong phần DIAGNOSTICS.

Cách cải thiện Điểm thay đổi bố cục tích lũy của bạn

Điểm CLS là một yếu tố xếp hạng, do đó việc tối ưu hóa nó sẽ giúp thu hút nhiều lưu lượng truy cập hơn đến trang web của bạn. Dưới đây là bốn cách để cải thiện điểm CLS của bạn, cùng với mức độ khó và tác động của từng phương pháp.

1. Xác định kích thước cho hình ảnh và video

Mức độ khó: Dễ

Tác động: Cao

Tất cả các thành phần hình ảnh và video trên trang web đều cần thuộc tính kích thước chiều rộng và chiều cao để tránh những thay đổi không mong muốn. Một ví dụ về cách đặt thuộc tính chiều rộng và chiều cao của bạn trông như thế này:

<img src="example.jpg" width="400" height="400" alt="Đây là ảnh ví dụ.">

Tuy nhiên, hình ảnh phản hồi cần sử dụng cùng tỷ lệ khung hình để giúp trình duyệt tính toán chính xác lượng không gian cần thiết để hiển thị chúng.

Thuộc tính srcset xác định một tập hợp các kích thước hình ảnh khác nhau bằng cách sử dụng cùng một tỷ lệ khung hình để giúp trình duyệt phân phối hình ảnh phản hồi một cách chính xác. Đây là một ví dụ về giao diện của mã khi sử dụng thuộc tính này:

<img width="1000" height="1000" src="example-1000.jpg" srcset="example-1000.jpg 1000w, example-2000.jpg 2000w, example-3000.jpg 3000w" alt="Ví dụ của 1 ảnh.">

Hầu hết các trình duyệt hiện đại cũng có thể đặt tỷ lệ khung hình mặc định dựa trên thuộc tính chiều rộng và chiều cao của hình ảnh hoặc video. Vì vậy, một cách để ngăn chặn sự thay đổi bố cục là sử dụng các hộp tỷ lệ khung hình CSS như trong ví dụ bên dưới:

img {
aspect-ratio:attr(width)/attr(height);
}

Mã này giúp trình duyệt dự đoán các tỷ lệ khung hình khác nhau bằng cách tuân theo kích thước hình ảnh trong khi tải nó.

2. Đặt Quảng cáo biểu ngữ có chiều rộng và chiều cao, phần nhúng và iFrame

Mức độ khó: Trung bình

Tác động: Cao

Dành không gian cho quảng cáo biểu ngữ, nội dung nhúng và iFrame giúp tránh thay đổi bố cục.

Quảng cáo biểu ngữ

Quảng cáo biểu ngữ đẩy nội dung hiển thị có thể gây ra sự thay đổi lớn về bố cục, dẫn đến trải nghiệm người dùng dưới mức tối ưu. Mạng quảng cáo và nhà xuất bản hỗ trợ kích thước quảng cáo động nên đặt trước phần giữ chỗ để ngăn điểm CLS kém.

Tạo kiểu cho phần tử trước khi tải thư viện thẻ quảng cáo để ngăn quảng cáo biểu ngữ đẩy nội dung hiển thị. Việc áp dụng phương pháp này cũng rất quan trọng khi quảng cáo lấp đầy toàn bộ hàng hoặc cột của trang để ngăn việc thay đổi bố cục ngay cả khi quảng cáo không tải.

Sử dụng phần tử vùng để chỉ định kích thước quảng cáo bằng cách sử dụng thuộc tính CSS có chiều cao tối thiểu và chiều rộng tối thiểu:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

Ngoài ra, hãy thêm truy vấn phương tiện CSS để chỉ định các mức tối thiểu khác nhau khi sử dụng các kích thước màn hình khác nhau:

@media screen and (max-width: 970px) {
 #ad-slot {
 min-height: 250px;
  }
}

Sử dụng dữ liệu lịch sử của bạn để chọn kích thước tốt nhất cho vùng quảng cáo. Đảm bảo xem xét các yếu tố hình thức khác nhau và sự khác biệt nhỏ về kích thước quảng cáo.

Phương pháp này cũng hoạt động khi bạn chèn quảng cáo không dính vào trang web. Bằng cách thêm không gian cần thiết, quảng cáo sẽ không kích hoạt thay đổi bố cục khi tải ngoài màn hình.

Nhúng và iFrames

Nội dung nhúng có thể có nhiều dạng khác nhau, do đó, việc không chắc chắn về kích thước của chúng trên trang web sẽ dễ dàng hơn. Do đó, các nền tảng không phải lúc nào cũng dành đủ không gian cần thiết cho các ứng dụng và tiện ích có thể nhúng.

Tương tự, Khung nội tuyến (iFrame) cũng đưa các phần tử của bên thứ ba vào trang web, điều này có thể gây ra thay đổi bố cục.

Để tránh việc có các nội dung nhúng và iFrame gây ra điểm CLS kém, hãy kiểm tra kích thước của chúng bằng các công cụ dành cho nhà phát triển trình duyệt của bạn. Nhấp vào biểu tượng con trỏ ở góc trên bên trái của công cụ dành cho nhà phát triển và chọn các thành phần bạn muốn kiểm tra.

Sau khi chọn phần tử, công cụ sẽ hiển thị kích thước của nó.

Thêm các kích thước này vào phần tử nhúng hoặc iFrames của bạn.

3. Sử dụng font:display cho Phông chữ Tùy chỉnh

Mức độ khó: Trung bình

Tác động: Trung bình

Việc thêm phông chữ tùy chỉnh vào trang web của bạn có thể tăng điểm CLS bằng cách gây ra:

Flash of Invisible Text (FOIT): hiển thị trang sẽ hiển thị văn bản vô hình hoặc phông chữ trống cho đến khi tải phông chữ tùy chỉnh.
Flashes of Unstyled Text (FOUT): trình duyệt hiển thị phông chữ dự phòng cho đến khi chúng tải phông chữ tùy chỉnh, tạm thời bỏ qua bố cục trang.

Việc tải phông chữ web tùy chỉnh có thể khiến bố cục thay đổi đáng kể, thường là do sử dụng một khoảng không gian khác với phông chữ hệ thống yêu cầu. Sử dụng các giá trị phông chữ: hiển thị chẳng hạn như auto , fallback , block , swap và tùy chọn để tránh văn bản vô hình và không được định kiểu.

Một cách khác để tránh những thay đổi đáng kể về kiểu dáng đối với phông chữ web của bạn là chọn phông chữ hệ thống tương tự:

@font-face {
font-family: 'Pacifico';
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(www.examplefonts.woff2) format('woff2');
font-display: swap;
}

Với phông chữ web tùy chỉnh của Google, hãy ngăn chặn sự thay đổi bố cục bằng cách thêm &display=swap sau liên kết của bạn:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Việc thêm giá trị <link rel=preload> vào tệp phông chữ của bạn cũng sẽ giúp tránh thay đổi bố cục khi tải phông chữ web tùy chỉnh.

4. Xem lại nội dung được chèn động

Mức độ khó: Trung bình

Tác động: Cao

Một lý do khác đằng sau vấn đề CLS là nội dung động. Các trang web thường sử dụng nội dung động để thu hút khách truy cập hoàn thành một hành động cụ thể. Tuy nhiên, khi một thành phần nội dung mới xuất hiện ở đầu hoặc cuối trang, nó thường làm thay đổi nội dung xung quanh nó.

Do đó, tránh đưa nội dung động lên trên nội dung hiện có. Một số cách để xem lại nội dung được chèn động bao gồm:

Mời người dùng bắt đầu thay đổi: thêm yếu tố tương tác người dùng để kích hoạt tải nội dung mới nhằm ngăn chặn những thay đổi không mong muốn. Một số ví dụ bao gồm nút Đọc thêm hoặc nút Làm mới . Lưu ý bạn nên giữ sự thay đổi bố cục trong vòng 500ms để tránh ảnh hưởng đến CLS.
Tải nội dung ngoài màn hình: vì những thay đổi xảy ra ngoài màn hình không góp phần vào CLS, nên một tùy chọn khác là tải nội dung động bên ngoài khung nhìn của người dùng và sử dụng lớp phủ để mời người dùng xem nội dung đó, chẳng hạn như thông báo Cuộn lên.
Sử dụng vùng chứa có kích thước cố định: giúp tránh thay đổi bố cục của bạn. Một trong các tùy chọn là sử dụng băng chuyền, đây cũng là một giải pháp thay thế phù hợp nếu nội dung động của bạn thay thế một phần tử bằng một phần tử khác. Đảm bảo rằng mọi liên kết hoặc điều khiển đều chờ chuyển đổi để tránh các nhấp chuột vô tình.

Tổng kết

Chuyển đổi bố cục tích lũy đo lường những thay đổi không mong muốn trong khu vực khung nhìn của người dùng để đánh giá trải nghiệm người dùng. Ngoài ra, là một yếu tố xếp hạng của Google, CLS tác động đáng kể đến SEO của bạn.

Một trang web có độ ổn định hình ảnh cao có điểm CLS dưới 0,1s, trong khi bất kỳ điểm nào trên 0,25s cho thấy hiệu suất kém. Chúng tôi đã trình bày hai phương pháp để đo CLS: trong phòng thí nghiệm và hiện trường. Mặc dù có thể chọn một phương pháp duy nhất nhưng sử dụng cả hai sẽ mang lại kết quả đáng tin cậy hơn về hiệu suất trang web.

Sau khi thảo luận về cách xác định các yếu tố làm tăng điểm CLS của bạn, chúng tôi đã chia sẻ cách khắc phục các sự cố thay đổi bố cục tích lũy bằng bốn phương pháp sau: