Cumulative Layout Shift (CLS) là gì? Làm thế nào để cải thiện chỉ số CLS trong Core Web Vital

Cumulative Layout Shift (CLS) là một trong những chỉ số quan trọng của Core Web Vitals, giúp đánh giá trải nghiệm người dùng trên website của bạn. CLS đo lường sự thay đổi của layout trên trang web trong quá trình tải, đặc biệt là khi người dùng tương tác với trang web. Nếu chỉ số CLS của trang web của bạn cao, điều này sẽ gây ảnh hưởng đến trải nghiệm người dùng và cũng ảnh hưởng đến sự tương tác của họ với trang web của bạn. Trong bài viết này, chúng ta sẽ tìm hiểu về Cumulative Layout Shift (CLS) là gì, các yếu tố gây ra CLS, tại sao CLS quan trọng đối với Core Web Vitals, cách đo lường chỉ số CLS và cách cải thiện chỉ số CLS trên trang web của bạn.

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là một chỉ số quan trọng đánh giá trải nghiệm người dùng trên website. Nó được định nghĩa là sự thay đổi vị trí các phần tử trên trang web trong quá trình tải trang. CLS được đo bằng tỉ lệ phần trăm của kích thước phần tử bị dịch chuyển so với tổng kích thước của trang web.

Chỉ số CLS càng thấp thì trang web sẽ có trải nghiệm người dùng tốt hơn. Nếu trang web có chỉ số CLS cao, người dùng có thể bị phân tâm và khó chịu khi đọc nội dung trên trang web.

Để giảm thiểu chỉ số CLS, bạn cần đảm bảo rằng các phần tử trên trang web được định vị chính xác và không bị dịch chuyển khi trang web đang tải. Các phần tử có kích thước động như quảng cáo, hình ảnh hoặc video nên được tối ưu để tránh gây ra CLS.

Các yếu tố khiến CLS của trang web bạn ở mức cao

Các yếu tố gây ra CLS CLS là sự thay đổi vị trí của các phần tử trên một trang web khi nó đang tải. Các yếu tố gây ra CLS bao gồm:

1. Hình ảnh và quảng cáo không có kích thước cố định

Khi trình duyệt tải hình ảnh hoặc quảng cáo mà không có kích thước cố định, chúng sẽ làm thay đổi vị trí của các phần tử khác trên trang web, gây ra CLS.

2. Đồng bộ hóa không đúng

Đồng bộ hóa không đúng là một yếu tố gây ra CLS phổ biến. Nếu phần tử được tải trước đó không được đồng bộ hóa đúng với phần tử được tải sau đó, thì nó sẽ gây ra sự thay đổi vị trí của các phần tử khác trên trang web.

3. Thay đổi kích thước phần tử

Khi các phần tử trên trang web thay đổi kích thước, chúng sẽ làm thay đổi vị trí của các phần tử khác, gây ra CLS.

4. Chuyển đổi không đồng bộ

Khi một phần tử trên trang web bị ẩn hoặc hiển thị, nó có thể gây ra CLS nếu các phần tử khác trên trang web không được chuyển đổi đồng bộ.

5. Nội dung động

Nội dung động, chẳng hạn như các bài đăng trên mạng xã hội hoặc hình ảnh được tạo ra bằng JavaScript, có thể gây ra sự thay đổi vị trí của các phần tử khác trên trang web, gây ra CLS.

Để cải thiện chỉ số CLS, bạn cần phải tối ưu hóa các phần tử trên trang web của mình để giảm thiểu sự thay đổi vị trí của chúng khi trang web đang tải.

Tại sao CLS quan trọng đối với Core Web Vitals

Cumulative Layout Shift (CLS) là một trong các yếu tố quan trọng trong Core Web Vitals, một chuẩn đoán toàn cầu được Google công bố cho các trang web. Core Web Vitals đo lường trải nghiệm người dùng trên trang web của bạn, bao gồm tốc độ tải trang, tốc độ khả dụng và sự ổn định của trang web. Với CLS, nó đánh giá sự ổn định của giao diện người dùng bằng cách đo lường sự thay đổi trên trang web khi các yếu tố được tải.

Tại sao CLS quan trọng đối với Core Web Vitals? Điều này liên quan đến trải nghiệm người dùng. Khi trang web của bạn có CLS cao, điều này có thể dẫn đến việc các phần của trang web di chuyển khi người dùng đang xem nó, làm cho trang web trở nên khó sử dụng và gây khó chịu cho người dùng. Điều này có thể dẫn đến mất khách hàng và giảm doanh số bán hàng. Nếu bạn muốn trang web của mình đạt được kết quả tốt trong Core Web Vitals, CLS là một yếu tố bạn không thể bỏ qua.

Cách đo lường chỉ số CLS

Để đo lường chỉ số CLS, chúng ta cần sử dụng công cụ Google PageSpeed Insights hoặc WebPageTest. Cả hai công cụ này đều cung cấp cho chúng ta thông tin về CLS của trang web của mình.

Khi sử dụng Google PageSpeed Insights, chỉ số CLS sẽ được hiển thị trong mục "Danh sách các vấn đề". Nếu chỉ số CLS của trang web của bạn cao, hãy xem xét các giải pháp được đề xuất để cải thiện nó.

Trong khi đó, khi sử dụng WebPageTest, chỉ số CLS sẽ được hiển thị trong tab "Layout Shifts". Trên tab này, bạn có thể xem chi tiết về các yếu tố gây ra CLS và các thay đổi trong layout của trang web của bạn.

Ngoài ra, bạn cũng có thể sử dụng các công cụ như Chrome DevTools hoặc Lighthouse để đo lường chỉ số CLS. Tuy nhiên, Google PageSpeed Insights và WebPageTest được coi là hai công cụ phổ biến và tin cậy nhất để đo lường chỉ số CLS.

Cách cải thiện chỉ số CLS

Một số cách để cải thiện chỉ số CLS của trang web của bạn bao gồm:

1. Tối ưu hóa hình ảnh và video

Hình ảnh và video có thể là nguyên nhân chính gây ra CLS trên trang web của bạn. Điều này xảy ra khi trình duyệt không biết trước kích thước chính xác của tài nguyên đa phương tiện và phải tính toán lại khi chúng tải xuống. Để giảm thiểu CLS, bạn nên tối ưu hóa hình ảnh và video bằng cách sử dụng độ phân giải thấp hơn hoặc sử dụng các định dạng nhỏ hơn, như JPEG thay vì PNG.

2. Sử dụng tài nguyên có kích thước cố định

Để giảm thiểu sự thay đổi vị trí của các phần tử trên trang web của bạn, hãy sử dụng tài nguyên có kích thước cố định. Ví dụ, thay vì sử dụng các hình ảnh có kích thước khác nhau, bạn nên sử dụng các hình ảnh có kích thước giống nhau, được tối ưu hóa cho các kích thước khác nhau của màn hình.

3. Hạn chế hoặc tối ưu hiệu ứng chuyển động động

Hiệu ứng chuyển động (slide, popup, growth, shrink...) có thể là nguyên nhân gây ra CLS trên trang web của bạn. Khi các hiệu ứng này chạy, chúng có thể làm thay đổi vị trí của các phần tử khác trên trang khiến trang web bị co giản về kích thước, xê dịch phần tử theo hướng làm giảm trải nghiệm của người dùng. Để giảm thiểu CLS, bạn nên tối ưu các hiệu ứng chuyển động hoặc hạn chế sử dụng các hiệu ứng chuyển động.

4. Tối ưu hóa CSS và JavaScript

CSS và JavaScript có thể là nguyên nhân gây ra CLS trên trang web của bạn. Điều này xảy ra khi trình duyệt phải tính toán lại các phần tử trên trang web của bạn khi CSS và JavaScript được tải xuống. Để giảm thiểu CLS, bạn nên tối ưu hóa CSS và JavaScript bằng cách sử dụng các tệp nén và loại bỏ các mã không cần thiết.

5. Sử dụng thuộc tính preload

Thuộc tính preload có thể giúp giảm thiểu CLS trên trang web của bạn bằng cách cho phép trình duyệt biết trước các tài nguyên mà trang web của bạn sẽ sử dụng. Khi trình duyệt biết trước các tài nguyên này, nó có thể tính toán vị trí của chúng trên trang web của bạn trước khi chúng được tải xuống. Điều này giúp giảm thiểu sự thay đổi vị trí của các phần tử trên trang web của bạn và làm giảm CLS.

Tổng kết

Như vậy, chúng ta đã tìm hiểu về Cumulative Layout Shift (CLS) và tầm quan trọng của chỉ số này trong Core Web Vitals. Bên cạnh đó, chúng ta cũng đã hiểu rõ các yếu tố gây ra CLS và cách đo lường, cải thiện chỉ số này. Để tăng trải nghiệm người dùng và tối ưu hóa website, việc cải thiện chỉ số CLS là việc cần thiết mà các nhà quản trị website không thể bỏ qua. Chúc các bạn thành công trong việc cải thiện chỉ số CLS cho website của mình!

Câu hỏi thường gặp (FAQ)