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ăng chuyền có thể được sử dụng ở nơi khác, 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ề hiệu suất và các phương pháp hay nhấ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ả, về bản thân nó sẽ có rất ít hoặc không có ảnh hưở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ó xuất hiện trong băng chuyền hoặc nơi khác.

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

Các băng chuyền lớn trong màn hình đầu tiên thường chứa phần tử LCP của trang và do đó có thể có tác độ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. Để tìm hiểu chuyên sâu nội dung giải thích 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, tham chiếu đến đo lường 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 không nên ảnh hưởng đến khả năng phản hồi của trang. Nếu bạn phát hiện thấy băng chuyền trên trang web của mình 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 (Mức thay đổi bố cục tích luỹ)

Một số lượng đáng ngạc nhiên các băng chuyền sử dụng ảnh động giật, không được kết hợp có thể đóng góp vào CLS (Mức thay đổi bố cục tích luỹ). Trên những trang có băng chuyền tự động phát, khả năng gây ra CLS vô hạn. Loại CLS này thường không rõ ràng vào mắt người, giúp dễ dàng bỏ qua vấn đề. Để tránh tình trạng này hãy tránh sử dụng ảnh động không được ghép trong băng chuyền (ví dụ: trong khi 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ể tìm thấy ngay từ đầu trong quá trình tải trang. Sử dụng JavaScript để bắt đầu tải nội dung băng chuyền có lẽ là cách sai lầm về hiệu suất cần tránh khi sử dụng băng chuyền. Việc 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 tĩnh trang trình bày đầu tiên. sau đó cải tiến dần dần để bao gồm các nút điều khiển điều hướng và nội dung. Kỹ thuật này phù hợp nhất với những môi trường mà bạn có sự chú ý kéo dài của người dùng—điều này khiến nội dung tải thêm thời gian. Trong những môi trường như trang chủ, nơi người dùng có thể chỉ ở lại trong vài giây hoặc hai là 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

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

Hiệu ứng chuyển đổi trang trình bày: Sự thay đổi về 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 gây bố cục của các phần tử DOM. Ví dụ về một số sản phẩm trong số này bao gồm: left, top, width và marginTop. Để tránh thay đổi bố cục, hãy sử dụng CSS transform để chuyển đổi các phần tử này. Chiến dịch này bản minh hoạ cho biết cách sử dụng transform để tạo băng chuyền cơ bản.
Nút điều khiển điều hướng: Di chuyển hoặc thêm/xoá chế độ điều hướng trên băng chuyền các chế độ kiểm soát từ DOM có thể gây ra thay đổi bố cục tuỳ thuộc vào cách những thay đổi này đều được triển khai. Những băng chuyền biểu hiện hành vi này thường hoạt động trong phản hồi khi người dùng di chuột.

Sau đây là một số điểm dễ gây nhầm lẫn thường gặp về hoạt động đo lường CLS (Mức thay đổi bố cục tích luỹ) băng chuyền:

Tự động phát băng chuyền: Hiệu ứng chuyển đổi trang trình bày là nguồn phổ biến nhất liên quan đến băng chuyền. Trong băng chuyền không tự động phát, bố cục này sẽ thay đổi thường xảy ra trong vòng 500 mili giây từ một tương tác của người dùng và do đó không được tính theo Đ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 về bố cục này không chỉ có thể được tính cho CLS, nhưng cũng có thể lặp lại vô thời hạn. Do đó, điều đặc biệt bạn cần xác minh rằng băng chuyền tự động phát không phải là nguồn bố cục ca.
Cuộn: Một số băng chuyền cho phép người dùng sử dụng chức năng cuộn để di chuyển qua trang trình bày dạng 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ử (nghĩa là scrollLeft hoặc scrollTop) thay đổi với cùng số lượng (nhưng theo chiều ngược lại), thì đây không phải là được xem là thay đổi bố cục miễn là chúng diễn 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 bố cục ca làm việc.

Sử dụng công nghệ hiện đại

Nhiều trang web 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ó 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 API hiệu quả hơn và ít có khả năng yêu cầu 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 JavaScript. Cuộn API Snap giúp bạn có thể triển khai các chuyển đổi giống như băng chuyền chỉ bằng cách sử dụng HTML và Dịch vụ so sánh giá (CSS).

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

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ăng chuyền này có thể giúp bạn để đảm bảo rằng những hình ảnh này được tối ưu hoá hoàn toàn. Chọn bên phải định dạng hình ảnh và mức độ nén hình ảnh, bằng cách sử dụng CDN hình ảnh, và sử dụng srcset để phân phát nhiều hình ảnh các phiên bản tất cả các kỹ thuật có thể làm giảm kích thước truyền hình ảnh.

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

Phần này thảo luận về hoạt động đo lường LCP vì 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 LCP thì cơ chế tính LCP để tự động phát băng chuyền là điểm chung 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ẽ lên khung. Ứng cử 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) cùng với trang. Do đó, bất kỳ trang trình bày nào tự động phát băng chuyền có tiềm năng là phần tử LCP cuối cùng, trong khi ở dạng phần tử tĩnh chỉ trang trình bày đầu tiên sẽ là đề xuất LCP tiềm năng.
Nếu hiển thị hai hình ảnh có kích thước bằng nhau, hình ảnh đầu tiên sẽ được xem xét phần tử LCP. Phần tử LCP chỉ được cập nhật khi ứng viên LCP là 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 đều có kích thước bằng nhau, thì phần tử LCP phải là hình ảnh đầu tiên được hiển thị.
Khi đánh giá các đề xuất LCP, LCP 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 quảng cáo tự động phát băng chuyền hiển thị hình ảnh ở một kích thước nhất quán, nhưng lại chứa các hình ảnh biến đổi hàm nội tại kích thước 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 đượ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 lúc thì hình ảnh có kích thước nội tại lớn nhất sẽ được coi là 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 chế độ tự động phát băng chuyền có cùng kích thước nội tại.

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

Kể từ Chrome 88, những hình ảnh sau đó bị xoá khỏi DOM được coi là có tiềm năng lớn nhất nội dung sinh động. Trước Chrome 88, những hình ảnh này đã bị loại trừ khỏi cân nhắc. Đối với các trang web sử dụng băng chuyền tự động phát, định nghĩa này sẽ thay đổi sẽ có tác động trung lập hoặc tích cực đến điểm LCP.

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

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

Chrome 121 đã thay đổi cách hoạt động của hình ảnh cuộn ngang như băng chuyền. Các tuỳ chọn này hiện sử dụng cùng một 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 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 từng phần theo chiều ngang để so sánh hành vi trên Chrome với Safari và Firefox.

Lưu ý khác

Phần này thảo luận về trải nghiệm người dùng và những phương pháp hay nhất về sản phẩm mà bạn nên áp dụng khi triển khai băng chuyền. Băng chuyền 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 sao cho dễ thao tác và dễ đọc.

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

Cung cấp các thành phần điều khiển điều hướng nổi bật

Các nút điều khiển điều hướng trên băng chuyền phải dễ nhấp và dễ nhìn. Đây là một điều gì đó 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ỏ nhắn vừa tinh tế. Hãy nhớ rằng chỉ một màu sắc hoặc kiểu điều khiển điều hướng sẽ hiếm khi hoạt động trong mọi trường hợp. Ví dụ: mũi tên nếu nhìn rõ trên nền tối thì 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ông cụ điều hướng trên băng chuyền phải cung cấp ngữ cảnh về tổng số trang trang trình bày và tiến trình của người dùng qua các trang trình bày đó. Thông tin này giúp bạn dễ dàng giúp người dùng chuyển đến một trang trình bày cụ thể cũng như nắm được 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 của 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 hữu ích và 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, cử chỉ vuốt sẽ được hỗ trợ ngoài cử chỉ truyền thống các nút điều khiển thao tác (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ì ít 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ội dung mà trang trình bày dạng băng chuyền liên kết đến phải truy cập được từ điều hướng khác đường dẫn.

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 hai vấn đề gần như nghịch lý: trên màn hình ảnh động có xu hướng khiến người dùng mất tập trung và khiến họ không chú ý đến những nội dung quan trọng hơn nội dung; cùng một lúc, vì người dùng thường liên kết hoạt ảnh với quảng cáo, 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 là quan trọng, đừng sử dụng chế độ tự động phát sẽ tăng tối đa độ 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ự động phát sẽ làm giảm giá trị 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). Số người đọc ở nhiều tốc độ, nên hiếm khi một băng chuyền chuyển đổi một cách nhất quán ở "bên phải" dành cho những người dùng khác nhau.

Tốt nhất là nên hướng đến người dùng thông qua các nút điều khiển điều hướng. Nếu bạn phải sử dụng tính năng tự động phát, đồng thời sẽ 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ội dung trang trình bày-càng nhiều văn bản trang trình bày chứa trong đó thì nên hiển thị trên màn hình lâu hơn.

Tách biệt 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ì so với được hiển thị riêng biệt bằng cách sử dụng đánh dấu HTML. Phương pháp này không hiệu quả đối với khả năng tiếp cận, bản địa hoá và tỷ lệ nén. Điều này cũng khuyến khích phương pháp tạo thành phần phù hợp với mọi trường hợp. Tuy nhiên, cùng một hình ảnh và văn bản hiếm khi dễ đọc trên các định dạng trên máy tính và thiết bị di động.

Hãy súc tích

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

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 cần sử dụng thêm không gian dọc để hiển thị nội dung bổ sung không phải là một tuỳ chọn. 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, băng chuyền không phải lúc nào cũng được sử dụng hiệu quả.

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

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

Tác động của băng chuyền đối với hoạt động kinh doanh, đặc biệt là trên trang chủ, đánh giá và kiểm tra. 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 thật hiệu quả.

Có liên quan

Băng chuyền hoạt động tốt nhất khi chứa nội dung thú vị và có liên quan đượ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—đặt băng chuyền vào băng chuyền sẽ không làm cho băng chuyền hoạt động tốt hơn. Nếu bạn phải sử dụng băng chuyền, ưu tiên nội dung và đảm bảo mỗi trang trình bày vừa đủ phù hợp mà người dùng muốn nhấp vào để chuyển đến trang trình bày tiếp theo.