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 để đảm bảo 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 người dùng có thể di chuyển theo cách thủ công. Mặc dù có thể sử dụng băng chuyền ở nơi khác, nhưng băng chuyền thường được dùng để 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 trình bày 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

Bản thân băng chuyền được triển khai hiệu quả sẽ có tác động rất nhỏ hoặc không ảnh hưởng đến hiệu suất. Tuy nhiên, băng chuyền thường chứa các thành phần 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 xuất hiện trong băng chuyền hay nơi khác.

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

Các băng chuyền lớn, nằm phía trên cùng thường chứa phần tử LCP của trang và do đó có thể ảnh hưởng đáng kể đến LCP. Trong những trường hợp này, việc tối ưu hoá băng chuyền có thể cải thiện đáng kể LCP. Để biết nội dung giải thích chi tiết 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 Đo lường LCP cho băng chuyền.
INP (Lượt tương tác đến nội dung hiển thị tiếp theo)

Băng chuyền có yêu cầu tối thiểu về JavaScript, do đó, sẽ không ảnh hưởng đến khả năng phản hồi của trang. Nếu phát hiện thấy băng chuyền của trang web có các tập lệnh chạy trong thời gian dài, bạn nên cân nhắ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ó một số lượng đáng ngạc nhiên các băng chuyền sử dụng ảnh động không ghép, bị giật có thể góp phần làm tăng CLS. Trên các trang có băng chuyền tự động phát, điều này có thể gây ra CLS vô hạn. Loại CLS này thường không rõ ràng đối với mắt người, khiến vấn đề dễ bị bỏ qua. Để 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 (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 trên băng chuyền phải được tải thông qua mã đánh dấu HTML của trang để trình duyệt có thể phát hiện sớm nội dung đó 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 hiệu suất lớn nhất mà bạn 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ể ảnh hưở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 ở chế độ tĩnh, sau đó tăng cườ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 những môi trường mà người dùng chú ý trong thời gian dài. Điều này giúp nội dung bổ sung có thêm thời gian để tải. Trong các môi trường như trang chủ, nơi người dùng có thể chỉ ở lại trong một hoặc hai giây, việc chỉ tải một hình ảnh 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 giữa các trang trình bày và các chế độ điều khiển điều hướng là hai nguồn phổ biến nhất gây ra sự thay đổi bố cục trong băng chuyền:

Hiệu ứng trượt khi chuyển tiếp: Việc 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 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 bao gồm: 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 thấy cách sử dụng transform để tạo một băng chuyền cơ bản.
Chế độ điều khiển điều hướng: Việc di chuyển hoặc thêm/xoá các chế độ điều khiển điều hướng của băng chuyền khỏi DOM có thể gây ra sự thay đổi bố cục tuỳ thuộc vào cách triển khai các thay đổi này. Các băng chuyền thể hiện hành vi này thường làm như vậy để phản hồi thao tác di chuột của người dùng.

Dưới đây là một số điểm thường gây nhầm lẫn về việc đo lường CLS cho băng chuyền:

Băng chuyền tự động phát: Hiệu ứng chuyển đổi trang trình bày là nguồn phổ biến nhất của việc 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 sau khi người dùng tương tác và do đó không được tính vào CLS (Sự thay đổi bố cục tích luỹ). Tuy nhiên, đối với băng chuyền tự động phát, những thay đổi về bố cục này không chỉ có thể tính vào 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à 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 độ dời cuộn của phần tử đó (tức là scrollLeft hoặc scrollTop) thay đổi theo cùng một lượng (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à các thay đổi đó xảy ra trong cùng một khung.

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

Sử 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 hơn. Các công cụ mới hơn có xu hướng sử dụng các API hiệu quả hơn và ít có khả năng yêu cầu thêm các phần phụ thuộc như jQuery.

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

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

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 trên 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á đầy đủ. Việc 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 đều là những kỹ thuật có thể giảm kích thước truyề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 liên quan đến băng chuyền. Mặc dù băng chuyền được xử lý không khác gì bất kỳ thành phần trải nghiệm người dùng nào khác trong quá trình tính LCP, nhưng cơ chế tính LCP cho băng chuyền tự động phát là một điểm thường gây nhầm lẫn.

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

Dưới đây là những điểm chính để hiểu cách hoạt động của phép tính LCP (Nội dung lớn nhất hiển thị) đối với băng chuyền:

LCP xem xét các phần tử trang khi chúng được vẽ vào khung. Các đề xuất mới cho phần tử LCP sẽ 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 đó, mọi trang trình bày trong băng chuyền tự động phát đều có khả năng trở thành phần tử LCP cuối cùng, trong khi trong băng chuyền tĩnh, chỉ trang trình bày đầu tiên mới có khả năng trở thành phần tử LCP.
Nếu hai hình ảnh có kích thước bằng nhau được kết xuất, thì 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 phần tử đề 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 đề xuất 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 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ó nhiều kích thước nội tại khác nhau nhỏ hơn kích thước hiển thị, thì phần tử LCP có thể thay đổi khi các trang trình bày mới hiển thị. Trong trường hợp này, nếu tất cả hình ảnh đều hiển thị ở cùng kích thước, thì hình ảnh có kích thước nội tại lớn nhất sẽ được coi là phần tử LCP. Để giữ cho LCP ở mức thấp, bạn nên đảm bảo rằng tất cả các mục trong băng chuyền tự động phát đều có cùng kích thước nội tại.

Thay đổi đối với 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à các lượt vẽ nội dung lớn nhất tiềm ẩn. Trước Chrome 88, những hình ảnh này bị loại trừ khỏi việc xem xét. Đối với những trang web sử dụng băng chuyền tự động phát, thay đổi định nghĩa này sẽ ảnh hưởng tích cực hoặc trung tính đến điểm LCP.

Thay đổi này được thực hiện để phản hồi quan sát rằng nhiều trang web triển khai hiệu ứng 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 khi một trang trình bày mới xuất hiện, việc xoá phần tử trước đó sẽ kích hoạt một bản cập nhật LCP. Thay đổi này chỉ ảnh hưởng đến băng chuyền tự động phát – theo định nghĩa, các lượt vẽ nội dung lớn nhất tiềm năng chỉ có thể xảy ra trước khi người dùng tương tác lần đầu với trang.

Thay đổi đối với ngưỡng trong Chrome 121

Chrome 121 đã thay đổi hành vi cho hình ảnh cuộn theo chiều ngang như băng chuyền. Các hành động này hiện sử dụng cùng ngưỡng với thao tác 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 việc tải hình ảnh, nhưng sẽ làm tăng lượt tải xuống. Sử dụng bản minh hoạ Tải lười theo chiều ngang để so sánh hành vi trong Chrome 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 sẽ giúp nâng cao các mục tiêu kinh doanh của bạn và trình bày nội dung theo cách dễ điều hướng và dễ đọ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 nổi bật

Các nút điều khiển điều hướng băng chuyền phải dễ nhấp và dễ thấy. Đây là điều hiếm khi được thực hiện tốt – hầu hết 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 hiếm khi hoạt động trong mọi trường hợp. Ví dụ: một mũi tên hiển thị rõ ràng trên nền tối có thể khó nhìn thấy trên nền sáng.

Cho biết tiến trình điều hướng

Các nút điều khiển điều hướng băng chuyền phải cung cấp thông tin về tổng số trang trình bày và tiến trình của người dùng trong các trang trình bày đó. Thông tin này giúp người dùng dễ dàng điều hướng đến một trang trình bày cụ thể và hiểu nội dung nào đã được xem. Trong một số trường hợp, việc cung cấp bản xem trước nội dung sắp tới (cho dù đó là một đoạn trích 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ỉ trên thiết bị di động

Trên thiết bị di động, bạn nên hỗ trợ các 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 các đường dẫn điều hướng thay thế

Vì hầu hết người dùng không có khả năng tương tác với tất cả nội dung băng chuyền, nên nội dung mà các trang trình bày băng chuyền liên kết đến phải có thể 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 về dễ đọc

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

Việc sử dụng tính năng 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à khiến họ 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 nào tự động phát là một lựa chọn phù hợp. Nếu nội dung quan trọng, thì việc không sử dụng tính năng tự động phát sẽ giúp nội dung đó được hiển thị tối đa; 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 tầm quan trọng của nội dung quan trọng hơn. Ngoài ra, các băng chuyền tự động phát có thể khó đọc (và gây khó chịu). Mọi người đọc ở tốc độ khác nhau, vì vậy, hiếm khi băng chuyền chuyển đổi một cách nhất quán vào thời điểm "chính xác" cho nhiều người dùng.

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

Tách riêng văn bản và hình ảnh

Nội dung văn bản trên băng chuyền thường được "tích hợp 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 cho khả năng tiếp cận, bản địa hoá và tốc độ nén. Điều này cũng khuyến khích việc sử dụng phương pháp tạo thành phần phù hợp với mọi kích thước. Tuy nhiên, cùng một định dạng hình ảnh và văn bản hiếm khi dễ đọc như nhau trên các định dạng dành cho máy tính và thiết bị di động.

Hãy súc tích

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

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 dọc để hiển thị nội dung bổ sung. Băng chuyền trên trang sản phẩm thường là ví dụ điển hình về 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à nếu chứa nội dung quảng bá hoặc tự động chuyển tiếp, dễ bị người dùng nhầm lẫn với quảng cáo. Người dùng có xu hướng bỏ qua quảng cáo – một hiện tượng được gọi là mù quảng cáo.
Băng chuyền thường được dùng để xoa dịu nhiều bộ phận 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 nơi chứa nội dung không hiệu quả.

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

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

Phù hợp

Băng chuyền hoạt động hiệu quả nhất khi chứa nội dung thú vị và phù hợp được trình bày với bối 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 đó vào băng chuyền sẽ không giúp nội dung hoạt động hiệu quả 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 rằng mỗi trang trình bày đều liên quan đủ để người dùng muốn nhấp vào trang trình bày tiếp theo.