TÀI LIỆU  Thư viện kiến thức

Cumulative Layout Shift (CLS) là gì? Công thức tính và cách tối ưu cho website

10:37 | 13/09/2024

Cumulative Layout Shift (CLS) là một chỉ số quan trọng trong bộ Core Web Vitals của Google, đánh giá mức độ ổn định của trang web trong quá trình tải. Tối ưu hóa CLS giúp cải thiện trải nghiệm người dùng và xếp hạng SEO. Hãy cùng tìm hiểu Cumulative Layout Shift (CLS) là gì và cách tối ưu như thế nào để tăng điểm PageSpeed cho website của mình nhé. 

>>> Có thể bạn quan tâm:

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là một chỉ số quan trọng trong bộ Core Web Vitals của Google, được sử dụng để đo lường mức độ ổn định của bố cục trang web trong quá trình tải. CLS phản ánh sự thay đổi không mong muốn trong vị trí của các phần tử trên trang, điều này có thể gây khó chịu cho người dùng nếu nội dung di chuyển đột ngột trong khi họ đang tương tác với trang.

Chỉ số CLS trong Pagespeed Insights
Chỉ số CLS trong PageSpeed Insights

Đánh giá điểm số CLS:

  • 0.1 hoặc thấp hơn: Tốt, không cần cải thiện.

  • 0.1 đến 0.15: Khá, nhưng nên cải thiện.

  • 0.15 đến 0.25: Dài hơn mức khuyến nghị, cần cải thiện.

  • 0.25 hoặc cao hơn: Rất cao, cần cải thiện ngay lập tức

Công thức tính CLS

CLS được tính toán dựa trên hai yếu tố chính:

  • Impact Fraction (Phần trăm tác động): Đây là tỷ lệ diện tích của viewport (khung nhìn) bị ảnh hưởng bởi sự thay đổi bố cục. Ví dụ, nếu một phần tử chiếm 75% diện tích khung nhìn và di chuyển, thì phần tác động sẽ là 0.75.

  • Distance Fraction (Phần khoảng cách): Đây là tỷ lệ khoảng cách mà phần tử di chuyển so với kích thước của viewport. Nếu phần tử di chuyển 25% chiều cao của khung nhìn, thì phần khoảng cách sẽ là 0.25.

Công thức tính CLS là:

CLS=Impact Fraction × Distance Fraction

Điểm số CLS tổng hợp sẽ được tính bằng cách nhân hai chỉ số này với nhau. Một giá trị CLS thấp (dưới 0.1) cho thấy trang web có sự ổn định tốt, trong khi giá trị cao hơn có thể chỉ ra rằng người dùng có thể gặp phải trải nghiệm không tốt do sự dịch chuyển của các phần tử.

Tại sao nên tối ưu chỉ số Cumulative Layout Shift?

Tối ưu chỉ số Cumulative Layout Shift (CLS) là rất quan trọng vì nó ảnh hưởng trực tiếp đến trải nghiệm người dùng và thứ hạng SEO của trang web. Dưới đây là một số lý do chính:

Ảnh hưởng đến trải nghiệm người dùng

  • Trải nghiệm không liền mạch: Một CLS cao có thể gây ra sự khó chịu cho người dùng khi các phần tử trên trang bất ngờ thay đổi vị trí, làm gián đoạn quá trình đọc hoặc tương tác. Điều này có thể dẫn đến việc người dùng nhấp nhầm vào các liên kết hoặc nút không mong muốn, gây ra cảm giác bực bội và không thoải mái.

  • Tăng tỷ lệ thoát: Khi người dùng gặp phải những thay đổi bố cục không mong muốn, họ có thể rời khỏi trang ngay lập tức. Điều này không chỉ làm giảm thời gian người dùng lưu lại trang mà còn có thể ảnh hưởng đến tỷ lệ chuyển đổi, đặc biệt là trong các trang thương mại điện tử.

Tác động đến SEO

  • Yếu tố xếp hạng của Google: Google đã xác nhận rằng CLS là một trong những chỉ số trong bộ Core Web Vitals, ảnh hưởng đến thứ hạng tìm kiếm. Một trang web có CLS thấp sẽ được ưu tiên hơn trong kết quả tìm kiếm, giúp tăng khả năng hiển thị và thu hút lưu lượng truy cập tự nhiên.

  • Tăng cường uy tín và độ tin cậy: Trang web có trải nghiệm người dùng tốt thường được đánh giá cao hơn, từ đó xây dựng được uy tín và độ tin cậy trong mắt người dùng cũng như các công cụ tìm kiếm. Điều này có thể dẫn đến việc người dùng quay lại trang web nhiều lần hơn trong tương lai

Cách kiểm tra Cumulative Layout Shift của website

Để biết chỉ số Cumulative Layout Shift (CLS) của website bạn đang ở mức nào, bạn có thể sử dụng một số công cụ trực tuyến và phần mềm phân tích hiệu suất. Dưới đây là những cách phổ biến để kiểm tra CLS:

Công cụ kiểm tra CLS

  • Google PageSpeed Insights: Đây là một công cụ miễn phí của Google cho phép bạn nhập URL của trang web để phân tích và nhận báo cáo về các chỉ số hiệu suất, bao gồm CLS. Kết quả sẽ cho bạn biết điểm số CLS và các khuyến nghị để cải thiện.

  • Google Lighthouse: Lighthouse là một công cụ tích hợp trong Chrome DevTools, cho phép bạn kiểm tra hiệu suất và chất lượng của trang web. Bạn có thể mở DevTools, chọn tab "Lighthouse", và chạy phân tích để nhận điểm số CLS cùng với các chỉ số khác.

  • WebPageTest: Công cụ này cho phép bạn kiểm tra hiệu suất trang web từ nhiều vị trí khác nhau và trên các trình duyệt khác nhau. Nó cung cấp các số liệu chi tiết về CLS và nhiều chỉ số hiệu suất khác.

  • GTmetrix: GTmetrix cũng là một công cụ phổ biến để phân tích hiệu suất trang web, bao gồm đo lường CLS. Bạn chỉ cần nhập URL và nhận báo cáo chi tiết về các chỉ số, bao gồm CLS.

Cách sử dụng

  1. Truy cập vào một trong các công cụ trên (như Google PageSpeed Insights hoặc Lighthouse).

  2. Nhập URL của trang web bạn muốn kiểm tra.

  3. Chạy phân tích và chờ kết quả.

  4. Xem báo cáo để biết điểm số CLS của bạn, cùng với các khuyến nghị cải thiện nếu cần.

Hướng dẫn cách cải thiện chỉ số Cumulative Layout Shift

Để cải thiện chỉ số Cumulative Layout Shift (CLS) của website, bạn có thể thực hiện một số cách dưới đây nhé:

1. Đặt kích thước cố định cho hình ảnh và video

Hãy tưởng tượng bạn đang đọc một bài viết và đột nhiên đoạn văn bị đẩy xuống vì một hình ảnh vừa được tải. Thật phiền phức phải không?

  • Sử dụng thuộc tính width height: Luôn xác định chiều rộng và chiều cao cho thẻ <img> và <video>. Điều này giúp trình duyệt dự trù không gian cho chúng trước khi nội dung được tải, giữ cho bố cục ổn định.

  • Áp dụng aspect-ratio: Nếu không biết kích thước cụ thể, sử dụng thuộc tính CSS aspect-ratio để duy trì tỷ lệ khung hình cho hình ảnh và video.

2. Dự trữ không gian cho quảng cáo, iframe và nội dung nhúng

Quảng cáo và nội dung bên thứ ba thường là "thủ phạm" gây ra CLS.

  • Đặt kích thước cố định hoặc sử dụng khung chứa: Đảm bảo bạn dành sẵn không gian cho các thành phần này. Khi nội dung được tải, bố cục sẽ không bị thay đổi đột ngột.

  • Sử dụng mã tải không đồng bộ: Giúp giảm thiểu tác động của nội dung bên thứ ba lên bố cục trang.

3. Tránh chèn nội dung lên trên nội dung hiện có

Không ai muốn nội dung họ đang đọc bị gián đoạn bởi một phần tử mới xuất hiện từ đâu đó.

  • Thận trọng với JavaScript động: Khi thêm nội dung động, hãy chèn nó vào dưới hoặc bên cạnh nội dung hiện có, trừ khi người dùng tương tác và mong đợi sự thay đổi đó.

  • Phản hồi dựa trên hành động của người dùng: Chỉ thay đổi bố cục khi có sự tương tác để người dùng không bị bất ngờ.

4. Tối ưu hóa phông chữ web

Phông chữ có thể gây ra những thay đổi nhỏ nhưng lại ảnh hưởng lớn đến trải nghiệm.

  • Sử dụng font-display: Thiết lập font-display: swap; hoặc optional; trong CSS để phông chữ dự phòng được hiển thị nếu phông chữ web chưa tải xong, tránh việc văn bản bị ẩn hoặc thay đổi đột ngột.

  • Preload phông chữ quan trọng: Sử dụng <link rel="preload"> để tải trước phông chữ, giảm thiểu thời gian chờ và tránh thay đổi bố cục.

5. Sử dụng hoạt ảnh và chuyển đổi một cách hiệu quả

Hoạt ảnh mượt mà sẽ làm trang web của bạn hấp dẫn hơn mà không gây rối mắt.

  • Ưu tiên thuộc tính không ảnh hưởng bố cục: Sử dụng transform và opacity khi tạo hoạt ảnh, vì chúng không buộc trình duyệt phải tái tính toán bố cục.

  • Tránh thay đổi kích thước và vị trí trực tiếp: Điều này có thể gây ra CLS do trình duyệt phải sắp xếp lại các phần tử.

6. Triển khai tải chậm (lazy loading) đúng cách

Lazy loading là tuyệt vời, nhưng cần thực hiện cẩn thận để không gây hại hơn lợi.

  • Tránh lazy load nội dung trên màn hình đầu tiên: Hình ảnh và nội dung mà người dùng thấy ngay khi vào trang nên được tải trước, đảm bảo trải nghiệm mượt mà.

7. Giám sát và kiểm tra thường xuyên

Biết mình đang ở đâu là bước đầu tiên để tiến bộ.

  • Sử dụng công cụ đo lường: Công cụ như Lighthouse, PageSpeed Insights hoặc Chrome DevTools sẽ giúp bạn xác định chính xác những yếu tố gây ra CLS.

  • Phân tích trên nhiều thiết bị: Kiểm tra trang web trên nhiều kích thước màn hình và trình duyệt để đảm bảo tính nhất quán.

8. Tối ưu hóa cho thiết kế đáp ứng (responsive design)

Người dùng truy cập từ nhiều thiết bị khác nhau, hãy chắc chắn trang web của bạn luôn hoàn hảo.

  • Sử dụng Media Queries: Điều chỉnh bố cục và nội dung phù hợp với từng kích thước màn hình, tránh việc bố cục bị thay đổi khi chuyển đổi giữa các thiết bị.

Việc cải thiện chỉ số CLS không chỉ nâng cao trải nghiệm người dùng mà còn có thể cải thiện thứ hạng SEO của bạn, vì Google đánh giá cao các trang web thân thiện với người dùng. Nhưng đừng quên rằng trải nghiệm người dùng không chỉ dừng lại ở các chỉ số kỹ thuật. Nội dung chất lượng, giao diện dễ sử dụng và giá trị thực sự bạn mang lại mới là chìa khóa giữ chân họ.

Nếu bạn quan tâm đến việc tối ưu hóa toàn diện hơn, hãy xem xét các chỉ số khác trong Core Web Vitals như Largest Contentful Paint (LCP)First Input Delay (FID). Chúng cũng đóng vai trò quan trọng trong việc đánh giá hiệu suất và trải nghiệm tổng thể của trang web.

Trên đây là chia sẻ của Vinalink Academy về khái niệm Cumulative Layout Shift (CLS) và cách tối ưu chỉ số này. Bằng việc áp dụng những phương pháp trên, bạn có thể cải thiện trải nghiệm người dùng, nâng cao hiệu suất website và thứ hạng SEO.
Call Zalo Messenger