Trang này được dịch bởi Cloud Translation API.

Các phương pháp hay nhất cho băng chuyền

Tối ưu hoá băng chuyền để nâng cao hiệu suất và khả năng hữu dụng.

Katie Hempenius

Băng chuyền là một thành phần trải nghiệm người dùng hiển thị nội dung theo cách giống như trình chiếu. Băng chuyền có thể "tự động phát" hoặc được người dùng di chuyển theo cách thủ công. Mặc dù bạn có thể sử dụng băng chuyền ở những nơi khác, nhưng chúng thường được dùng nhất để hiển thị hình ảnh, sản phẩm và chương trình khuyến mãi trên trang chủ.

Bài viết này thảo luận về các phương pháp hay nhất về hiệu suất và trải nghiệm người dùng cho băng chuyền.

Hiệu suất

Một băng chuyền được triển khai hiệu quả sẽ chỉ có tác động rất nhỏ hoặc không có tác động đến hiệu suất. Tuy nhiên, băng chuyền thường chứa nội dung nghe nhìn có dung lượng lớn. Thành phần lớn có thể ảnh hưởng đến hiệu suất bất kể chúng được hiển thị trong băng chuyền hay ở nơi khác.

LCP (Thời gian hiển thị nội dung lớn nhất)

Băng chuyền lớn và trong màn hình đầu tiên thường chứa phần tử LCP của trang, do đó có thể có tác động đáng kể đến LCP. Trong những trường hợp như vậy, việc tối ưu hoá băng chuyền có thể cải thiện đáng kể LCP. Để hiểu rõ hơn về cách hoạt động của tính năng đo lường LCP trên các trang chứa băng chuyền, hãy tham khảo phần phép đo LCP cho băng chuyền.
INP (Lượt tương tác với Nội dung hiển thị tiếp theo)

Băng chuyền có yêu cầu tối thiểu về JavaScript nên sẽ không ảnh hưởng đến khả năng phản hồi của trang. Nếu phát hiện băng chuyền trên trang web của bạn có các tập lệnh chạy trong thời gian dài, bạn nên xem xét việc thay thế công cụ băng chuyền.
CLS (Điểm số tổng hợp về mức thay đổi bố cục)

Có rất nhiều băng chuyền sử dụng ảnh động bị giật, không kết hợp mà có thể đóng góp vào CLS (Điểm số tổng hợp về mức thay đổi bố cục). Trên các trang có băng chuyền tự động phát, điều này có khả năng gây ra CLS vô hạn. Loại CLS này thường không rõ ràng để người dùng nhìn thấy, nên rất dễ bỏ qua vấn đề. Để tránh vấn đề này, hãy tránh sử dụng ảnh động không được kết hợp trong băng chuyền của bạn (ví dụ: trong quá trình chuyển đổi trang trình bày).

Các phương pháp hay nhất về hiệu suất

Tải nội dung băng chuyền bằng HTML

Nội dung băng chuyền phải được tải qua mã đánh dấu HTML của trang để trình duyệt có thể sớm phát hiện nội dung này trong quá trình tải trang. Việc sử dụng JavaScript để bắt đầu tải nội dung băng chuyền có thể là lỗi về hiệu suất lớn nhất cần tránh khi sử dụng băng chuyền. Điều này làm chậm quá trình tải hình ảnh và có thể tác động tiêu cực đến LCP.

Nên

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

Không nên

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Để tối ưu hoá băng chuyền nâng cao, hãy cân nhắc tải trang trình bày đầu tiên theo phương thức tĩnh, sau đó tăng dần trang trình bày đó để bao gồm các chế độ điều khiển điều hướng và nội dung bổ sung. Kỹ thuật này phù hợp nhất với các môi trường mà bạn để người dùng chú ý trong thời gian dài – điều này giúp nội dung có thêm thời gian tải. Trong các môi trường như trang chủ, nơi người dùng chỉ có thể ở lại trong vài giây, việc chỉ tải một hình ảnh duy nhất cũng có thể mang lại hiệu quả tương tự.

Tránh thay đổi bố cục

Hiệu ứng chuyển đổi trang trình bày và các thành phần điều khiển điều hướng là 2 nguồn phổ biến nhất làm thay đổi bố cục trong băng chuyền:

Chuyển đổi trang trình bày: Sự thay đổi bố cục xảy ra trong quá trình chuyển đổi trang trình bày thường là do việc cập nhật các thuộc tính tạo ra bố cục của các phần tử DOM. Ví dụ về một số thuộc tính trong số này: left, top, width và marginTop. Để tránh thay đổi bố cục, hãy sử dụng thuộc tính CSS transform để chuyển đổi các phần tử này. Bản minh hoạ này cho biết cách sử dụng transform để tạo một băng chuyền cơ bản.
Bộ điều khiển điều hướng: Việc di chuyển hoặc thêm/xoá các thành phần điều khiển di chuyển dạng băng chuyền khỏi DOM có thể làm thay đổi bố cục tuỳ thuộc vào cách triển khai những thay đổi này. Những băng chuyền thể hiện hành vi này thường được dùng để phản hồi thao tác di chuột của người dùng.

Sau đây là một số điểm gây nhầm lẫn phổ biến về hoạt động đo lường CLS cho băng chuyền:

Tự động phát băng chuyền: Chuyển đổi trang trình bày là nguồn phổ biến nhất của sự thay đổi bố cục liên quan đến băng chuyền. Trong băng chuyền không tự động phát, những thay đổi về bố cục này thường xảy ra trong vòng 500 mili giây kể từ khi người dùng tương tác và do đó không được tính vào Điểm số tổng hợp về mức thay đổi bố cục (CLS). Tuy nhiên, đối với băng chuyền tự động phát, những thay đổi bố cục này không chỉ có thể tính đến CLS mà còn có thể lặp lại vô thời hạn. Do đó, điều đặc biệt quan trọng là bạn phải xác minh rằng băng chuyền tự động phát không phải là nguồn gây ra sự thay đổi bố cục.
Cuộn: Một số băng chuyền cho phép người dùng sử dụng tính năng cuộn để di chuyển qua các trang trình bày băng chuyền. Nếu vị trí bắt đầu của một phần tử thay đổi nhưng độ lệch cuộn của phần tử đó (tức là scrollLeft hoặc scrollTop) thay đổi theo cùng một mức (nhưng theo hướng ngược lại), thì đây không được coi là sự thay đổi bố cục miễn là chúng xảy ra trong cùng một khung.

Để biết thêm thông tin về việc thay đổi bố cục, hãy xem bài viết Gỡ lỗi về thay đổi bố cục.

Dùng công nghệ hiện đại

Nhiều trang web sử dụng thư viện JavaScript của bên thứ ba để triển khai băng chuyền. Nếu đang sử dụng công cụ băng chuyền cũ, bạn có thể cải thiện hiệu suất bằng cách chuyển sang công cụ mới. Các công cụ mới hơn có xu hướng dùng API hiệu quả hơn và ít có khả năng đòi hỏi thêm phần phụ thuộc như jQuery.

Tuy nhiên, tuỳ thuộc vào loại băng chuyền bạn đang tạo, bạn có thể không cần đến JavaScript. API ScrollSnap mới giúp bạn có thể triển khai các hoạt động chuyển đổi giống như băng chuyền chỉ bằng cách sử dụng HTML và CSS.

Sau đây là một số tài nguyên có thể giúp ích cho bạn về cách sử dụng scroll-snap:

Tối ưu hoá nội dung băng chuyền

Băng chuyền thường chứa một số hình ảnh lớn nhất của trang web, vì vậy, bạn nên dành thời gian để đảm bảo rằng những hình ảnh này được tối ưu hoá hoàn toàn. Chọn định dạng hình ảnh và mức nén phù hợp, sử dụng CDN hình ảnh và sử dụng srcset để phân phát nhiều phiên bản hình ảnh là tất cả các kỹ thuật có thể làm giảm kích thước chuyển của hình ảnh.

Đo lường hiệu suất

Phần này thảo luận về việc đo lường LCP có liên quan đến băng chuyền. Mặc dù băng chuyền được xử lý không khác với bất kỳ phần tử trải nghiệm người dùng nào khác trong quá trình tính toán LCP, nhưng cơ chế tính LCP để tự động phát băng chuyền là một điểm gây nhầm lẫn phổ biến.

Đo lường LCP cho băng chuyền

Dưới đây là các điểm chính để hiểu cách tính LCP hoạt động cho băng chuyền:

LCP xem xét các phần tử trang khi chúng được tô lên khung. Các ứng viên mới cho phần tử LCP không còn được xem xét sau khi người dùng tương tác (nhấn, cuộn hoặc nhấn phím) với trang. Do đó, bất kỳ trang trình bày nào trong băng chuyền tự động phát đều có khả năng là phần tử LCP cuối cùng. Trong khi đó, trong băng chuyền tĩnh chỉ có trang trình bày đầu tiên là có thể trở thành LCP tiềm năng.
Nếu hai hình ảnh có kích thước như nhau được kết xuất, hình ảnh đầu tiên sẽ được coi là phần tử LCP. Phần tử LCP chỉ được cập nhật khi đề xuất LCP lớn hơn phần tử LCP hiện tại. Do đó, nếu tất cả các phần tử băng chuyền có kích thước bằng nhau, thì phần tử LCP phải là hình ảnh đầu tiên hiển thị.
Khi đánh giá các ứng viên LCP, LCP sẽ xem xét "kích thước hiển thị hoặc kích thước nội tại, tuỳ theo kích thước nào nhỏ hơn". Do đó, nếu một băng chuyền tự động phát hiển thị hình ảnh ở kích thước nhất quán nhưng chứa hình ảnh có kích thước nội tại khác nhau mà nhỏ hơn kích thước hiển thị, thì phần tử LCP có thể thay đổi khi trang trình bày mới được hiển thị. Trong trường hợp này, nếu tất cả hình ảnh được hiển thị ở cùng một kích thước, thì hình ảnh có kích thước hàm nội tại lớn nhất sẽ được coi là phần tử LCP. Để duy trì LCP ở mức thấp, bạn phải đảm bảo rằng tất cả các mục trong băng chuyền tự động phát có cùng kích thước nội tại.

Các thay đổi về cách tính LCP cho băng chuyền trong Chrome 88

Kể từ Chrome 88, các hình ảnh sau đó bị xoá khỏi DOM được coi là nội dung hiển thị có nội dung lớn nhất có thể. Trước Chrome 88, những hình ảnh này không được xem xét. Đối với các trang web sử dụng băng chuyền tự động phát, sự thay đổi về định nghĩa này sẽ có tác động bình thường hoặc tích cực đến điểm LCP.

Thay đổi này được thực hiện để đáp ứng quá trình quan sát mà nhiều trang web triển khai chuyển đổi băng chuyền bằng cách xoá hình ảnh đã hiển thị trước đó khỏi cây DOM. Trước Chrome 88, mỗi lần trang trình bày mới được trình bày, việc xoá phần tử trước đó sẽ kích hoạt bản cập nhật LCP. Thay đổi này chỉ ảnh hưởng đến việc tự động phát băng chuyền theo định nghĩa, thời gian hiển thị nội dung lớn nhất có thể chỉ xảy ra trước khi người dùng tương tác với trang lần đầu tiên.

Các thay đổi về ngưỡng trong Chrome 121

Chrome 121 đã thay đổi hành vi đối với hình ảnh cuộn ngang như băng chuyền. Các luồng này hiện sử dụng cùng các ngưỡng như cuộn dọc. Điều này có nghĩa là đối với trường hợp sử dụng băng chuyền, hình ảnh sẽ được tải trước khi hiển thị trong khung nhìn. Điều này có nghĩa là người dùng ít có khả năng nhận thấy hoạt động tải hình ảnh, nhưng đổi lại sẽ có nhiều lượt tải xuống hơn. Sử dụng bản minh hoạ Tải từng phần theo chiều ngang để so sánh hành vi trong Chrome so với Safari và Firefox.

Lưu ý khác

Phần này thảo luận về các phương pháp hay nhất về trải nghiệm người dùng và sản phẩm mà bạn nên lưu ý khi triển khai băng chuyền. Băng chuyền nên thúc đẩy mục tiêu kinh doanh của bạn và trình bày nội dung theo cách mà người dùng dễ dàng thao tác và đọc.

Các phương pháp hay nhất về điều hướng

Cung cấp các nút điều khiển điều hướng nổi bật

Các công cụ điều khiển băng chuyền phải dễ nhấp vào và có khả năng hiển thị cao. Đây là điều hiếm khi được thực hiện tốt, hầu hết các băng chuyền đều có các nút điều khiển điều hướng vừa nhỏ vừa tinh tế. Xin lưu ý rằng một màu hoặc kiểu điều khiển điều hướng đơn lẻ sẽ hiếm khi hoạt động trong mọi trường hợp. Ví dụ: có thể khó nhìn thấy mũi tên trên nền tối trên nền sáng.

Cho biết tiến trình di chuyển

Các tuỳ chọn điều khiển điều hướng băng chuyền sẽ cung cấp ngữ cảnh về tổng số trang trình bày và tiến trình của người dùng trên các trang trình bày đó. Thông tin này giúp người dùng chuyển đến một trang trình bày cụ thể dễ dàng hơn và biết được nội dung nào đã được xem. Trong một số trường hợp, bạn có thể xem trước nội dung sắp ra mắt (cho dù đó là phần trích dẫn của trang trình bày tiếp theo hay danh sách hình thu nhỏ) cũng có thể hữu ích và giúp tăng mức độ tương tác.

Hỗ trợ cử chỉ dành cho thiết bị di động

Trên thiết bị di động, bạn nên hỗ trợ cử chỉ vuốt ngoài các chế độ điều khiển điều hướng truyền thống (chẳng hạn như các nút trên màn hình).

Cung cấp đường dẫn điều hướng thay thế

Vì khó có khả năng hầu hết người dùng sẽ tương tác với tất cả nội dung băng chuyền, nên nội dung mà băng chuyền trang trình bày liên kết đến phải truy cập được từ các đường dẫn điều hướng khác.

Các phương pháp hay nhất giúp cải thiện khả năng đọc

Không sử dụng tính năng tự động phát

Việc sử dụng chế độ tự động phát tạo ra 2 vấn đề gần như nghịch lý: ảnh động trên màn hình có xu hướng làm người dùng mất tập trung và không chú ý đến nội dung quan trọng hơn; đồng thời, vì người dùng thường liên kết ảnh động với quảng cáo nên họ sẽ bỏ qua băng chuyền tự động phát.

Do đó, hiếm khi tính năng tự động phát là một lựa chọn tốt. Nếu nội dung quan trọng, việc không sử dụng tính năng tự động phát sẽ tối đa hoá tần suất hiển thị quảng cáo; nếu nội dung băng chuyền không quan trọng, thì việc sử dụng tính năng tự động phát sẽ làm giảm giá trị hiển thị của nội dung quan trọng hơn. Ngoài ra, băng chuyền tự động phát có thể khó đọc (và cũng gây khó chịu). Mọi người đọc ở tốc độ khác nhau, vì vậy hiếm khi một băng chuyền chuyển đổi liên tục ở thời điểm "phù hợp" đối với những người dùng khác nhau.

Tốt nhất là bạn nên điều hướng trang trình bày theo hướng người dùng thông qua các công cụ điều khiển điều hướng. Nếu phải sử dụng tính năng tự động phát, bạn nên tắt tính năng tự động phát khi người dùng di chuột. Ngoài ra, tốc độ chuyển đổi trang trình bày phải xem xét đến nội dung trang trình bày – trang trình bày càng chứa nhiều văn bản thì trang trình bày càng hiển thị lâu hơn trên màn hình.

Tách biệt văn bản và hình ảnh

Nội dung văn bản của băng chuyền thường được "thêm vào" tệp hình ảnh tương ứng, thay vì hiển thị riêng biệt bằng mã đánh dấu HTML. Phương pháp này không tốt đối với khả năng hỗ trợ tiếp cận, bản địa hoá và tốc độ nén. Hướng dẫn này cũng khuyến khích phương pháp tạo thành phần hiệu quả cho mọi trường hợp. Tuy nhiên, hiếm khi người dùng đọc được cùng một định dạng hình ảnh và văn bản trên các định dạng máy tính và thiết bị di động.

Ngắn gọn

Bạn chỉ có một phần nhỏ của giây để thu hút sự chú ý của người dùng. Nội dung ngắn gọn, đi thẳng vào vấn đề sẽ làm tăng khả năng truyền tải thông điệp của bạn.

Các phương pháp hay nhất về sản phẩm

Băng chuyền hoạt động tốt trong trường hợp không thể sử dụng thêm không gian theo chiều dọc để hiển thị nội dung bổ sung. Băng chuyền trên trang sản phẩm thường là một ví dụ hay của trường hợp sử dụng này.

Tuy nhiên, không phải lúc nào băng chuyền cũng được sử dụng hiệu quả.

Băng chuyền, đặc biệt là khi chứa chương trình khuyến mãi hoặc chế độ tự động chuyển tiếp, sẽ dễ bị đánh dấu đối với quảng cáo của người dùng. Người dùng có xu hướng bỏ qua quảng cáo – hiện tượng được gọi là mờ biểu ngữ.
Băng chuyền thường được dùng để sắp xếp nhiều phòng ban và tránh đưa ra quyết định về các ưu tiên kinh doanh. Do đó, băng chuyền có thể dễ dàng trở thành bãi rác cho nội dung không hiệu quả.

Kiểm tra các giả định của bạn

Bạn nên đánh giá và kiểm tra tác động của băng chuyền về mặt kinh doanh, đặc biệt là tác động trên trang chủ. Tỷ lệ nhấp của băng chuyền có thể giúp bạn xác định xem băng chuyền và nội dung của băng chuyền đó có hiệu quả hay không.

Tạo nội dung có liên quan

Băng chuyền hoạt động hiệu quả nhất khi chứa nội dung thú vị và liên quan được thể hiện với ngữ cảnh rõ ràng. Nếu nội dung không thu hút người dùng bên ngoài băng chuyền thì việc đặt nội dung này trong băng chuyền sẽ không giúp nội dung hoạt động tốt hơn. Nếu bạn phải sử dụng băng chuyền, hãy ưu tiên nội dung và đảm bảo mỗi trang trình bày đều phù hợp để người dùng muốn nhấp vào trang trình bày tiếp theo.