Hiệu suất video

Trong học phần trước, bạn đã tìm hiểu một số kỹ thuật hiệu suất liên quan đến là một loại tài nguyên được sử dụng rộng rãi trên web có thể sử dụng băng thông đáng kể nếu không cẩn thận để tối ưu hoá chúng và lấy khung nhìn.

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. Các video là một loại phương tiệ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ác biện pháp tối ưu hoá có thể đạt được, thì trước tiên, bạn cần phải hiểu cách <video> phần tử hoạt động.

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 miền khác) được gọi là vùng chứa. Vùng chứa chứa một hoặc luồng khác. Trong hầu hết các trường hợp, đó 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à vùng chứa WebM chứa luồng video được nén bằng VP9 và một â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ã là rất hữu ích, bởi vì nó giúp bạn nén các tệp đa phương tiện mà sử dụng ít băng thông hơn đáng kể, từ đó giảm thời gian tải trang tổng thể 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, một chỉ số tập trung vào người dùng và một trong ba Chỉ số quan trọng chính của trang web.

Một cách để nén tệp video bao gồm sử dụng FFmpeg:

ffmpeg -i input.mov output.webm

Lệnh trước (mặc dù cơ bản như khi sử dụng FFmpeg) sẽ lấy Tệp input.mov và xuất ra một tệp output.webm sử dụng FFmpeg mặc định . Lệnh trước đó tạo 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. Chỉnh sửa video hoặc các lựa chọn âm thanh mà FFmpeg cung cấp có thể giúp bạn giảm kích thước tệp video hơn nữa. Ví dụ: nếu bạn đang khi sử dụng phần tử <video> để thay thế ảnh GIF, bạn nên xoá bản âm thanh đó:

ffmpeg -i input.mov -an output.webm

Nếu bạn muốn tinh 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 phương thức mã hoá tốc độ bit biến thiên. -crf là viết tắt của cụm từ Hệ số tốc độ không đổi. Đây là 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 phạm vi nhất định.

Những bộ mã hoá và giải mã như H.264 và VP9 hỗ trợ cờ -crf nhưng việc sử dụng những bộ mã hoá này còn phụ thuộc vào bộ mã hoá và giải mã bạn đang dùng. Để biết thêm thông tin, hãy đọc bài viết về hệ số tốc độ không đổi cho mã hoá video ở H.264, cũng như chất lượng không đổi khi mã hoá video ở Văn bản 9 (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ẽ có tác dụng 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ả 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ể sử dụng MP4 làm 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, mã này chưa được hỗ trợ rộng rãi, hay còn gọi là bộ mã hoá và giải mã VP9 cũ hơn ( được hỗ trợ tốt hơn so với AV1, nhưng thường không nén tốt như AV1.

Thuộc tính poster

Hình ảnh áp phích của một video sẽ được thêm bằng cách sử dụng thuộc tính poster trên <video> , gợi ý cho người dùng về nội dung video trước khi phát lại 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 chứa autoplay. autoplay được dùng khi phải phát một video ngay lập tức—chẳng hạn như khi được sử dụng làm nền video hoặc thay thế cho ảnh GIF động.

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

Nếu video tự động phát là yêu cầu cho trang web của mình, bạn có thể sử dụng Thuộc tính autoplay trực tiếp 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 bạn để chỉ tải video xuống khi video đã nằm trong khung nhìn. Hình ảnh poster có thể là phần giữ chỗ hình ảnh chất lượng thấp, chẳng hạn như hình ảnh đầu tiên khung hình của video. Sau khi video xuất hiện trong khung nhìn, trình duyệt sẽ khởi động đang 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 một thời gian ngắn cho đến khi video được tải và bắt đầu phát.

Quá trình phát do người dùng khởi tạo

Thông thường, trình duyệt bắt đầu tải xuống tệp video ngay khi HTML trình phân tích cú pháp sẽ khám phá phần tử <video>. Nếu bạn có phần tử <video> trong đó người dùng bắt đầu phát lại, 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 ứng dụng.

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

• Việc đặt preload="none" sẽ thông báo cho trình duyệt rằng không có nội dung của video nào cần 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ư và có thể là các thông tin chi tiết khác.

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

Trong trường hợp này, bạn có thể cải thiện trải nghiệm người dùng bằng cách thêm hình ảnh poster. Phần này giúp người dùng biết được bối cảnh 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 giá trị của poster mức độ ưu tiên 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

Trước tình hình rất phức tạp trong việc tối ưu hoá và phân phối hiệu quả nội dung video, nên giảm bớt vấn đề cho các dịch vụ video chuyên dụng như dưới dạng YouTube hoặc Vimeo. Các dịch vụ đó 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ụ của bên thứ ba cũng có thể có tác dụng riêng đối với vì các trình phát video được nhúng thường phân phát thêm chẳng hạn như JavaScript.

Trên thực tế này, việc nhúng video của bên thứ ba có thể ảnh hưởng đáng kể đến trang hiệu suất. Theo HTTP Archive, nội dung nhúng trên YouTube chặn chuỗi chính trong hơn 1,7 giây cho trang web trung bình. Chặn luồng chính cho kéo 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 với nội dung hiển thị tiếp theo (INP) trên trang đó. Tuy nhiên, bạn có thể đưa ra một thoả thuận bằng cách không tải nội dung nhúng ngay trong lần tải trang đầu tiên mà thay vào đó tạo một phần giữ chỗ cho nội dung nhúng và sẽ thay thế bằng nội dung nhúng video thực tế khi người dùng tương tác với quảng cáo.

Video minh hoạ

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

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

Tiếp theo, chúng ta sẽ thảo luận 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ữ trên trang web của bạn là điều thường bị bỏ qua, nhưng có thể có tác động đáng kể đến tốc độ tải tổng thể của trang web và các chỉ số như là LCP và Điểm số tổng hợp về mức thay đổi bố cục (CLS).