Hiệu suất video

Trong mô-đun trước, bạn đã tìm hiểu một số kỹ thuật nâng cao 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 thụ băng thông đáng kể nếu bạn không chú ý tối ưu hoá và cân nhắc khung hiển thị 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ố điểm tối ưu hoá có thể, trước tiên, 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 của mình (.mp4, .webm và các hệ điều hành khác) được gọi là container (vùng chứa). Một vùng chứa 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 vùng chứa 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á/giải mã là rất hữu ích, vì điều này giúp bạn nén các tệp đa phương tiệ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ó thể cải thiện Nội dung lớn nhất hiển thị (LCP) của trang. Đây là một chỉ số lấy người dùng làm trung tâm và là một trong ba Chỉ số quan trọng chính của trang web.

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ù 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 lựa chọn mặc định của FFmpeg. Lệnh trước đó sẽ xuất ra 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 lựa chọn về 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 dùng phần tử <video> để thay thế một ảnh 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, bạn có thể dùng cờ -crf của FFmpeg khi nén video mà không dùng phương thức mã hoá tốc độ bit biến thiên. -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 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 dùng. Để biết thêm thông tin, hãy đọc 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 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 những 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ả 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 giải pháp dự phòng cho các trình duyệt cũ. Phiên bản WebM có thể sử dụng codec AV1 mới hơn (chưa được hỗ trợ rộng rãi) hoặc codec 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 cách sử dụng thuộc tính poster trên phần tử <video>. Thuộc tính này gợi ý cho người dùng về nội dung video 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 phát ngay lập tức, chẳng hạn như khi được dùng làm nền video hoặc làm thay thế cho ảnh GIF động.

Ảnh 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. GIF động thường tiêu thụ vài megabyte dữ liệu, có thể làm giảm đáng kể băng thông mà bạn nên dành 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 ảnh động vì các định dạng tương đương <video> hiệu quả hơn nhiều đối với loại nội dung nghe nhìn này.

Nếu tính năng tự động phát video là một 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 hiển thị, 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. Nhược điểm là khi sử dụng hình ảnh poster cho autoplay, người dùng sẽ chỉ thấy hình ảnh trong thời gian ngắn cho đến khi video tải xong và bắt đầu phát.

Hoạt động 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 thấy 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ó thể 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 preload của phần tử <video>:

• Chế độ cài đặt preload="none" 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.
• Chế độ cài đặ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à các thông tin sơ bộ khác.

Việc đặt preload="none" có lẽ là trường hợp phù hợp nhất nếu bạn đang tải những 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 nắm được một số thông tin về nội dung của 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">

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 chuyển vấn đề này cho các dịch vụ video chuyên dụng như YouTube hoặc Vimeo. Những 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ừ một dịch vụ bên thứ ba có thể có ảnh hưởng riêng đến hiệu suất, vì trình phát video được 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, video nhúng của bên thứ ba có thể ảnh hưởng đáng kể đến hiệu suất trang. Theo HTTP Archive, các video được nhúng trên 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 chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) của một trang. Tuy nhiên, bạn có thể thoả hiệp bằng cách không tải ngay thành phần nhúng trong quá trình tải trang ban đầu, mà thay vào đó, hãy tạo một phần giữ chỗ cho thành phần nhúng. Phần giữ chỗ này sẽ được thay thế bằng thành phần nhúng video thực tế khi người dùng tương tác với phần giữ chỗ đó.

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 của chúng tôi về cách tối ưu hoá các loại tài nguyên cụ thể là phông chữ. Tối ưu hoá phông chữ của trang web là một việc 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).