Trang chủ » Blog » Kiến thức chuyên sâu » 7 cách cải thiện cls trong website nhanh chóng

Kiến thức

7 cách cải thiện cls trong website nhanh chóng

2 Tháng Năm, 2024

Chỉ số CLS đo lường mức độ bố cục trang web của bạn thay đổi một cách bất ngờ trong quá trình tải trang. Để khắc phục và ổn định bố cục website, cùng GoSELL tìm hiểu chi tiết hơn trong bài viết dưới đây.

7 cách cải thiện CLS trong website nhanh chóng
7 cách cải thiện CLS trong website nhanh chóng

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) là một chỉ số đo lường hiệu suất trải nghiệm người dùng trên web. Nó đo lường mức độ mà các thành phần trên trang web (ví dụ: hình ảnh, văn bản, nút) thay đổi vị trí của mình trong quá trình tải trang. Điều này có thể gây ra những trải nghiệm bất ngờ được cho người dùng, đặc biệt là khi họ đang cố gắng tương tác với các thành phần khác trên trang.

CLS được tính bằng cách nhận diện các thành phần tham gia và tính tổng của tỷ lệ thay đổi vị trí của chúng so với kích thước của khung nhìn trong quá trình tải trang. Mục tiêu là giảm thiểu CLS để cải thiện trải nghiệm người dùng khi truy cập và hoạt động trên trang web của bạn.

Thay đổi bố cục dự kiến & bất ngờ

Thay đổi bố cục không hoàn toàn có nghĩa là sẽ mang đến trải nghiệm người dùng xấu. Bất kỳ thay đổi có chủ ý nào trong bố cục (chẳng hạn như các hoạt ảnh và chuyển tiếp) xảy ra bởi hành động của người dùng và xảy ra trong vòng 500 mili giây sau khi tương tác được coi là bình thường. Các ví dụ khác bao gồm:

  • Mở menu thả xuống hoặc mở rộng một phần.
  • Lật qua các yếu tố như băng chuyền, bản trình chiếu hoặc nội dung động mà người dùng dự đoán.
  • Nhấp vào nút để hiển thị nội dung bổ sung hoặc cuộn để điều hướng qua một trang.
Thay đổi bố cục bất ngờ khi đang trải nghiệm website
Những thay đổi bố cục bất ngờ có thể mang đến trải nghiệm không tốt cho người dùng

Mặt khác, sự thay đổi bố cục bất ngờ khiến người dùng đôi lúc cảm thấy khó chịu và làm gián đoạn trải nghiệm duyệt web.

Thế nào là điểm CLS tốt

Khác với Largest Contentful Paint (LCP) và Interaction to Next Paint (INP), CLS không được đo bằng đơn vị thời gian và thường được xem là “tốt” nếu nó dưới 0.1.

CLS được phân loại dựa trên các ngưỡng sau:

  • Tốt: Điểm CLS dưới 0.1
  • Cần cải thiện: Điểm CLS ừ 0.1 đến 0.25
  • Kém; Điểm CLS lớn hơn 0.25

Cách tính toán CLS

Cumulative Layout Shift (CLS) được đo bằng cách sử dụng một hệ thống điểm số để đo lường sự ổn định hình ảnh của một trang web trong quá trình tải. Nó được tính dựa trên sự di chuyển của các yếu tố không ổn định trong khung hình.

Hai chỉ số được sử dụng để định lượng sự di chuyển đó:

  • Tỉ lệ ảnh hưởng (Impact fraction).
  • Tỉ lệ khoảng cách (Distance fraction).

Điểm số của sự thay đổi bố cục = tỉ lệ ảnh hưởng * tỉ lệ khoảng cách.

Xem thêm: Hướng dẫn cách đăng ký DMCA để bảo vệ bản quyền cho website

Tỉ lệ ảnh hưởng (IF)

Tỉ lệ ảnh hưởng đại diện cho diện tích bị ảnh hưởng bởi sự thay đổi bố cục so với kích thước giữa hai khung hình. Đó là một phép tính cơ bản về mức độ mà một yếu tố chiếm diện tích trong khung nhìn trước và sau khi di chuyển.

Điều này cũng có thể được biểu diễn bằng một công thức đơn giản:

IF = Tổng diện tích của khung hình/ Tổng diện tích của sự thay đổi bố cục

Công thức tính tỉ lệ ảnh hưởng (IF)
Công thức tính tỷ lệ ảnh hưởng đến website

Tỉ lệ khoảng cách (DF)

Tỉ lệ khoảng cách, ngược lại, đại diện cho khoảng cách mà các yếu tố không ổn định đã di chuyển so với khung hình. Đó là khoảng cách lớn nhất theo chiều ngang hoặc dọc mà bất kỳ yếu tố không ổn định nào đã di chuyển trong khung hình chia cho kích thước lớn nhất của khung hình(chiều rộng hoặc chiều cao, tùy thuộc vào cái nào lớn hơn).

Trong một công thức đơn giản, tỉ lệ khoảng cách sẽ trông như thế này:

DF = Kích thước lớn nhất của khung hình/ Khoảng cách ngang hoặc dọc lớn nhất mà bất kỳ yếu tố không ổn định nào đã di chuyển.

Xem thêm: Những module không thể thiếu khi thiết kế website bán hàng

Các nguyên nhân gây ra vấn đề CLS

Các nguyên nhân phổ biến gây ra vấn đề về Cumulative Layout Shift (CLS) thường xuất phát từ nhiều yếu tố, thường liên quan đến cách trang web được thiết kế, cấu trúc và việc tải trang. Các nguyên nhân phổ biến nhất bao gồm:

Hình ảnh không có kích thước xác định

Khi hình ảnh trên một trang web không có thuộc tính chiều rộng và chiều cao được xác định trong mã HTML, trình duyệt sẽ dành không gian cho các hình ảnh này dựa trên các kích thước mặc định. Khi hình ảnh thực tế được tải và chiếm nhiều hoặc ít hơn không gian so với mặc định, nó sẽ gây ra sự dịch chuyển bố cục.

Quảng cáo, đính kèm hoặc iFrame

Quảng cáo, phương tiện nhúng hoặc iFrame được tải bất đồng bộ hoặc không có kích thước xác định có thể dẫn đến sự dịch chuyển bố cục khi chúng xuất hiện và đẩy nội dung khác xuống hoặc sang ngang.

Nội dung động

Nội dung được tải hoặc thay đổi kích thước sau khi hiển thị ban đầu, chẳng hạn như các mở rộng accordion, cửa sổ pop-up hoặc vị trí quảng cáo động, có thể gây ra sự dịch chuyển bố cục nếu không được quản lý đúng cách.

Các dạng nội dung động xuất hiện trong website
Các nội dung động trên website có thể ảnh hưởng đến bố cục của trang web

Hoạt ảnh và chuyển động CSS

Hoạt ảnh hoặc chuyển động CSS được triển khai không đúng cách do tương tác của người dùng hoặc các sự kiện được kịch bản có thể gây ra sự dịch chuyển bố cục nếu chúng ảnh hưởng đến vị trí hoặc kích thước của các yếu tố trên trang.

5 Cách để cải thiện điểm CLS trên website

Xác định kích thước hình ảnh

Với sự phát triển của kỹ thuật thiết kế web, CSS đã trở thành tiêu chuẩn cho việc điều chỉnh kích thước hình ảnh, nhưng điều này dẫn đến các vấn đề về việc di chuyển lại khi hình ảnh được tải. Để ngăn chặn điều này, các trình duyệt hiện đại tính toán tỷ lệ khung hình mặc định dựa trên các kích thước hình ảnh được xác định trong các thuộc tính chiều rộng và chiều cao. Điều này cho phép trình duyệt dành không gian cho hình ảnh trước khi chúng được tải, giảm thiểu sự thay đổi bố cục và cải thiện trải nghiệm người dùng.

Kích thước khung hình so với ảnh hưởng đến bố cục website
Xác định kích thước khung hình sẽ giúp hạn chế độ sai lệch bố cục website

Để triển khai điều này, hãy đặt các thuộc tính chiều rộng và chiều cao trên thẻ img và sử dụng CSS để điều chỉnh kích thước hình ảnh khi cần. Các trình duyệt sau đó tính toán tỷ lệ khung hình mặc định dựa trên các thuộc tính này, đảm bảo phân bổ không gian đúng đắn. Giá trị “  trong CSS đảm bảo rằng kích thước hình ảnh ghi đè lên tỷ lệ khung hình mặc định sau khi hình ảnh được tải, giảm thiểu sự thay đổi bố cục.

Tải trước Phông chữ

Có một số cách để tối ưu hóa phông chữ để cải thiện điểm CLS:

  • Tải các phông chữ web quan trọng càng sớm càng tốt bằng cách sử dụng link rel=preload sẽ đảm bảo rằng phông chữ sẵn sàng cho việc vẽ đầu tiên, giảm thiểu nguy cơ của các thay đổi bố cục.
  • Sử dụng font-display: optional sẽ giúp gọi phông chữ web chỉ khi nó có sẵn vào thời điểm bố cục ban đầu.
  • Thiết lập các phông chữ dự phòng có kiểu tương tự với phông chữ web của bạn bằng cách xem xét phông chữ, trọng lượng, độ rộng,… Điều này có thể được thực hiện bằng cách sử dụng các API như: size-adjust, ascent-override, descent-override và line-gap-override.
  • Xem xét sử dụng Font Loading API, có thể giúp giảm thời gian tải phông chữ.

Dành chỗ trống cho sự ổn định quảng cáo

Có thể nói, quảng cáo luôn là một nguyên nhân lớn nhất gây ra vấn đề về CLS. Những cách bạn có thể kiểm soát cách quảng cáo được hiển thị trên trang web của mình để giảm thiểu sự thay đổi bố cục bao gồm:

  • Một quy tắc tổng quát là đặt nội dung động được tải ở phía dưới của khung nhìn để bạn có nhiều lựa chọn hơn về cách dành chỗ cho nó.
  • Sử dụng các vị trí cho quảng cáo với kích thước cố định để dành chỗ cho quảng cáo trước khi chúng được hiển thị để ngăn chặn sự dịch chuyển.
  • Dành chỗ cho nội dung được tải sau bằng cách sử dụng thuộc tính CSS aspect-ratio mới để cho phép các khung chứa quảng cáo mở rộng cần thiết trong khi giảm thiểu nguy cơ của sự thay đổi bố cục.
Quảng cáo xuất hiện khi người dùng đang trải nghiệm website
Những quảng cáo xuất hiện trên website có thể ảnh hưởng đến bộ cục

Sử dụng chuyển động CSS thay vì hoạt ảnh

Với hoạt ảnh, bạn thường muốn tránh các quá trình tái bố trí bố cục. Để làm điều đó, xem xét:

  • Sử dụng các chuyển động CSS thay vì hoạt ảnh mỗi khi có thể. Các chuyển động CSS thường dẫn đến các hoạt ảnh mượt mà hơn và ít có khả năng gây ra sự dịch chuyển bố cục.
  • Tránh thay đổi thuộc tính trên và bên trái của các phần tử, cũng như box-shadow và box-sizing, ngay cả khi phần tử được hoạt ảnh di chuyển trên lớp riêng của nó.
  • Lựa chọn các thuộc tính CSS như hoạt ảnh biến đổi để dịch chuyển, xác định tỉ lệ, quay, hoặc nghiêng các phần tử thay vì sử dụng hoạt ảnh.

Tận dụng bộ nhớ cache

Bộ nhớ cache lưu trữ các trang web trong bộ nhớ của trình duyệt trong một thời gian ngắn sau khi bạn điều hướng ra khỏi trang để giữ cho chúng tải nhanh hơn nếu bạn quyết định quay lại trang đó. Điều này khiến trang web có thể sẵn sàng ngay lập tức mà không gây ra việc tải lại và các lần dịch chuyển bố cục lặp lại.

Bộ nhớ cache có sẵn trên tất cả các trình duyệt theo mặc định, nhưng trang web của bạn có thể không đủ điều kiện để sử dụng bộ nhớ cache do một số nguyên nhân chung, như:

Bên cạnh các phương pháp kể trên, việc thiết kế một website hoàn chỉnh, đầy đủ các thành phần được sắp xếp hợp lý cũng góp phần cải thiện bố cục website, tối ưu trải nghiệm người dùng. Với giải pháp thiết kế website của GoSELL, bạn hoàn toàn có thể tự mình tạo nên một website hoàn chỉnh để tiếp cận và thu hút khách hàng tiềm năng tốt hơn, tăng hiệu quả bán hàng đa kênh.

Thiết kế website bán hàng chuyên nghiệp với giải pháp của Google

Giải pháp thiết kế website bán hàng của GoSELL cho phép doanh nghiệp tự thiết kế website bán hàng chuyên nghiệp một cách nhanh chóng và thuận tiện. Với kho giao diện đa dạng, phù hợp với nhiều ngành nghề kinh doanh, bạn có thể tạo ra một website phản ánh đúng thương hiệu của mình. Chỉ với các bước kéo thả và thêm bớt các thành phần, doanh nghiệp có thể tạo ra một trang web bán hàng chuyên nghiệp và hiện đại.

Bạn có thể tùy chỉnh các thành phần trên website của mình để tạo nên bố cục dễ nhìn, logic nhất đến với người dùng. Giải pháp này cũng giúp website của bạn được tối ưu hiển thị trên nhiều thiết bị khác nhau, đảm bảo đem đến trải nghiệm tốt nhất cho người dùng khi truy cập đến website.

Giải pháp thiết kế website bán hàng của GoSELL
Giải pháp thiết kế website bán hàng của GoSELL

Ngoài ra, bạn cũng có thể thêm mã code tùy chỉnh để tạo giao diện, tính năng theo ý muốn. Giải pháp thiết kế website của GoSELL cũng cung cấp băng thông không giới hạn, dịch vụ lưu trữ miễn phí và chứng chỉ bảo mật SSL miễn phí để đảm bảo an toàn cho dữ liệu trên website.

Đặc biệt, doanh nghiệp có thể đồng bộ website với các kênh bán hàng khác, giúp quản lý đơn hàng đa kênh hiệu quả trên một hệ thống duy nhất. Tính năng này giúp doanh nghiệp dễ dàng quản lý sản phẩm, kho hàng và đơn hàng từ website và các kênh bán hàng khác một cách linh hoạt

Các giải pháp toàn diện khác của GoSELL

Các giải pháp của GoSELL không chỉ dừng lại ở việc thiết kế website bán hàng mà còn  hỗ trợ toàn diện cho quá trình bán hàng và quản lý đa kênh của doanh nghiệp như:

  • GoSELL cung cấp giải pháp tạo ứng dụng bán hàng trên cả hai hệ điều hành Android và iOS, giúp doanh nghiệp thu hút khách hàng trở lại mua sắm một cách hiệu quả.
  • Quản lý bán hàng tại quầy: Giải pháp này cho phép lên đơn hàng nhanh chóng và quản lý tồn kho chi tiết đến từng chi nhánh.
  • Bán hàng trên mạng xã hội: GoSELL tích hợp giải pháp quản lý bán hàng trên các nền tảng mạng xã hội như Facebook và Zalo, bao gồm đồng bộ tin nhắn, tạo kịch bản trả lời tự động và tạo đơn hàng ngay trong quá trình trò chuyện.
  • Tạo Landing Page chuyên nghiệp: GoSELL cung cấp giải pháp tạo Landing Page chuyên nghiệp để thu thập thông tin khách hàng.
  • Hệ thống quản lý tổng đài cuộc gọi: Đây là một công cụ hữu ích giúp doanh nghiệp xây dựng đội ngũ telesales và chăm sóc khách hàng một cách chuyên nghiệp.

Ngoài ra, GoSELL còn cung cấp gói dịch vụ vận hành và giải pháp marketing toàn diện, bao gồm chạy quảng cáo đa nền tảng, Content Marketing, xây dựng và quản lý Fanpage trên các nền tảng như Facebook, TikTok, Shopee, Lazada, và tối ưu SEO tổng thể onpage lẫn offpage.

Bài viết trên đã giúp bạn nắm được chi tiết về chỉ số cls cũng như cách để cải thiện cho website. Ngoài ra, bạn có thể tham khảo thêm những bài viết về thiết kế website để tối ưu quy trình bán hàng trên trang web của mình.

Tags:

Bài viết cùng chuyên mục