Hiệu suất video

Trong mô-đun trước, bạn đã tìm hiểu một số kỹ thuật cải thiện hiệu suất liên quan đến hình ảnh. Đây là một loại tài nguyên được sử dụng rộng rãi trên web và có thể tiêu tốn băng thông đáng kể nếu bạn không tối ưu hoá và cân nhắc khung nhìn của người dùng.

Tuy nhiên, hình ảnh không phải là loại nội dung nghe nhìn duy nhất thường thấy trên web. Video là một loại nội dung nghe nhìn phổ biến khác thường được dùng trên các trang web. Trước khi xem xét một số cách tối ưu hoá có thể, bạn cần hiểu cách hoạt động của phần tử <video>.

Tệp nguồn video

Khi làm việc với các tệp nội dung nghe nhìn, tệp mà bạn nhận ra trên hệ điều hành (.mp4, .webm và các tệp khác) được gọi là container. Một container chứa một hoặc nhiều luồng. Trong hầu hết các trường hợp, đây sẽ là luồng video và âm thanh.

Bạn có thể nén từng luồng bằng một bộ mã hoá và giải mã. Ví dụ: video.webm có thể là một container WebM chứa một luồng video được nén bằng VP9 và một luồng âm thanh được nén bằng Vorbis.

Việc hiểu rõ sự khác biệt giữa vùng chứa và bộ mã hoá và giải mã sẽ rất hữu ích, vì điều này giúp bạn nén các tệp nội dung nghe nhìn bằng cách sử dụng băng thông ít hơn đáng kể, dẫn đến thời gian tải trang tổng thể thấp hơn, cũng như có khả năng cải thiện Nội dung lớn nhất hiển thị (LCP) của trang. Đây là một chỉ số tập trung vào người dùng và là một trong 3 Core Web Vitals.

Một cách để nén tệp video là sử dụng FFmpeg:

ffmpeg -i input.mov output.webm

Lệnh trước đó (mặc dù là lệnh cơ bản nhất khi sử dụng FFmpeg) sẽ lấy tệp input.mov và xuất tệp output.webm bằng các tuỳ chọn FFmpeg mặc định. Lệnh trước đó xuất một tệp video nhỏ hơn hoạt động trong tất cả các trình duyệt hiện đại. Việc điều chỉnh các tuỳ chọn video hoặc âm thanh mà FFmpeg cung cấp có thể giúp bạn giảm kích thước tệp của video hơn nữa. Ví dụ: nếu đang sử dụng phần tử <video> để thay thế GIF, bạn nên xoá bản âm thanh:

ffmpeg -i input.mov -an output.webm

Nếu muốn điều chỉnh thêm một chút, FFmpeg sẽ cung cấp cờ -crf khi nén video mà không sử dụng tính năng mã hoá tốc độ bit thay đổi. -crf là viết tắt của Hệ số tốc độ không đổi. Đây là một chế độ cài đặt điều chỉnh mức độ nén và thực hiện việc này bằng cách chấp nhận một số nguyên trong một phạm vi nhất định.

Các bộ mã hoá và giải mã như H.264 và VP9 hỗ trợ cờ -crf, nhưng việc sử dụng cờ này phụ thuộc vào bộ mã hoá và giải mã mà bạn đang sử dụng. Để biết thêm thông tin, hãy đọc bài viết về hệ số tốc độ không đổi để mã hoá video ở định dạng H.264, cũng như chất lượng không đổi khi mã hoá video ở định dạng VP9.

Nhiều định dạng

Khi làm việc với các tệp video, việc chỉ định nhiều định dạng sẽ hoạt động như một phương án dự phòng cho các trình duyệt không hỗ trợ tất cả các định dạng hiện đại.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Vì tất cả các trình duyệt hiện đại đều hỗ trợ bộ mã hoá và giải mã H.264, nên bạn có thể dùng MP4 làm phương án dự phòng cho các trình duyệt cũ. Phiên bản WebM có thể sử dụng bộ mã hoá và giải mã AV1 mới hơn, chưa được hỗ trợ rộng rãi, hoặc bộ mã hoá và giải mã VP9 cũ hơn, được hỗ trợ tốt hơn AV1 nhưng thường không nén tốt bằng AV1.

Thuộc tính poster

Hình ảnh áp phích của video được thêm bằng thuộc tính poster trên phần tử <video>, cho người dùng biết nội dung video có thể là gì trước khi quá trình phát bắt đầu:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Tự động phát

Theo HTTP Archive, 20% video trên web có thuộc tính autoplay. autoplay được dùng khi video phải được phát ngay lập tức, chẳng hạn như khi được dùng làm hình nền video hoặc để thay thế GIF động.

GIF động có thể rất lớn, đặc biệt là nếu có nhiều khung hình với các chi tiết phức tạp. Ảnh GIF động thường tiêu tốn vài megabyte dữ liệu, có thể làm giảm đáng kể băng thông được sử dụng cho các tài nguyên quan trọng hơn. Nói chung, bạn nên tránh các định dạng hình ảnh động, vì <video> tương đương hiệu quả hơn nhiều đối với loại nội dung nghe nhìn này.

Nếu video tự động phát là yêu cầu đối với trang web của bạn, thì bạn có thể sử dụng trực tiếp thuộc tính autoplay trên phần tử <video>

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Bằng cách kết hợp thuộc tính poster với Intersection Observer API, bạn có thể định cấu hình trang của mình để chỉ tải video xuống khi video nằm trong khung nhìn. Hình ảnh poster có thể là một phần giữ chỗ hình ảnh chất lượng thấp, chẳng hạn như khung hình đầu tiên của video. Sau khi video xuất hiện trong khung nhìn, trình duyệt sẽ bắt đầu tải video xuống. Điều này có thể cải thiện thời gian tải cho nội dung trong khung nhìn ban đầu. Mặt khác, khi sử dụng hình ảnh poster cho autoplay, người dùng sẽ nhận được một hình ảnh chỉ hiển thị trong thời gian ngắn cho đến khi video tải xong và bắt đầu phát.

Phát do người dùng thực hiện

Thông thường, trình duyệt sẽ bắt đầu tải tệp video xuống ngay khi trình phân tích cú pháp HTML phát hiện phần tử <video>. Nếu có các phần tử <video> mà người dùng bắt đầu phát, thì có lẽ bạn không muốn video bắt đầu tải xuống cho đến khi người dùng tương tác với video đó.

Bạn có thể ảnh hưởng đến nội dung được tải xuống cho tài nguyên video bằng cách sử dụng thuộc tính <video> element's preload:

• Việc đặt preload="none" sẽ thông báo cho trình duyệt rằng không có nội dung nào của video được tải trước.
• Việc đặt preload="metadata" chỉ tìm nạp siêu dữ liệu video, chẳng hạn như thời lượng của video và có thể là thông tin sơ bộ khác.

Việc đặt preload="none" có thể là trường hợp mong muốn nhất nếu bạn đang tải các video mà người dùng cần bắt đầu phát.

Bạn có thể cải thiện trải nghiệm người dùng trong trường hợp này bằng cách thêm hình ảnh poster. Điều này giúp người dùng có một số thông tin về nội dung video. Ngoài ra, nếu hình ảnh áp phích là phần tử LCP, bạn có thể tăng mức độ ưu tiên của hình ảnh poster bằng cách sử dụng gợi ý <link rel="preload"> cùng với fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Tải từng phần

Một tính năng tương đối mới được thêm vào Hiệu suất video là thuộc tính loading=lazy. Tương tự như tính năng Tải từng phần hình ảnh ở cấp trình duyệt và tương tự đối với iframe, thuộc tính này mang đến tính năng tương tự cho video để tải poster và preload.

Việc sử dụng thuộc tính poster cùng với preload="none" hoặc preload="metadata" có thể tránh tải video xuống theo mặc định. Thuộc tính loading=lazy thậm chí còn trì hoãn việc tải hình ảnh áp phích và siêu dữ liệu xuống cho đến khi video nằm trong hoặc sắp tiếp cận khung nhìn.

Nhúng

Với tất cả sự phức tạp trong việc tối ưu hoá và phân phát nội dung video một cách hiệu quả, bạn nên giảm tải vấn đề này cho các dịch vụ video chuyên dụng như YouTube hoặc Vimeo. Các dịch vụ như vậy sẽ tối ưu hoá việc phân phối video cho bạn, nhưng việc nhúng video từ dịch vụ của bên thứ ba có thể có ảnh hưởng riêng đến hiệu suất, vì trình phát video nhúng thường có thể phân phát nhiều tài nguyên bổ sung, chẳng hạn như JavaScript.

Với thực tế này, nội dung nhúng video của bên thứ ba có thể ảnh hưởng đáng kể đến hiệu suất của trang. Theo HTTP Archive, nội dung nhúng YouTube chặn luồng chính trong hơn 1,7 giây đối với trang web trung bình. Việc chặn luồng chính trong thời gian dài là một vấn đề nghiêm trọng về trải nghiệm người dùng có thể ảnh hưởng đến Lượt tương tác đến nội dung hiển thị tiếp theo (INP) của trang. Tuy nhiên, bạn có thể thoả hiệp bằng cách không tải nội dung nhúng ngay lập tức trong lần tải trang ban đầu, mà thay vào đó, hãy tạo một phần giữ chỗ cho nội dung nhúng được thay thế bằng nội dung nhúng video thực tế khi người dùng tương tác với nội dung đó.

Video minh hoạ

Kiểm tra kiến thức của bạn

Tiếp theo: Tối ưu hoá phông chữ web

Tiếp theo trong phần trình bày về cách tối ưu hoá các loại tài nguyên cụ thể là phông chữ. Việc tối ưu hoá phông chữ của trang web là điều thường bị bỏ qua, nhưng có thể ảnh hưởng đáng kể đến tốc độ tải tổng thể của trang web và các chỉ số như LCP và Mức thay đổi bố cục tích luỹ (CLS).