Trong mô-đun trước, bạn đã tìm hiểu một số kỹ thuật tăng 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 đáng kể băng thông nếu không chú ý tối ưu hoá và xem xét khung nhìn của người dùng.
Tuy nhiên, hình ảnh không phải là loại phương tiệ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ố phương án tối ưu hoá có thể áp dụng, 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 (.mp4, .webm và các tệp khác) được gọi là vùng chứa. 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, đó 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 luồng âm thanh được nén bằng Vorbis.
Việc hiểu được sự khác biệt giữa vùng chứa và bộ mã hoá và giải mã rất hữu ích vì tính năng 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 ít băng thông hơn đáng kể, dẫn đến tổng thời gian tải trang thấp hơn, cũng như có thể cải thiện Thời gian hiển thị nội dung lớn nhất (LCP) của một trang. Đây là chỉ số tập trung vào người dùng và là một trong 3 Chỉ số quan trọng chính của trang web.
Có 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ư 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ên sẽ 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. Việc chỉnh sửa video hoặc các tuỳ chọn â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ế ảnh GIF, bạn nên xoá bản âm thanh:
ffmpeg -i input.mov -an output.webm
Nếu bạn 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 phương thức mã hoá tốc độ bit biến đổi. -crf là viết tắt của Constant Rate Factor (Hệ số tỷ lệ hằng số). Đâ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.
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 cờ 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 để mã hoá video trong H.264, cũng như chất lượng không đổi khi mã hoá video trong 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 để dự phòng cho những trình duyệt không hỗ trợ tất 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 phương án dự phòng cho các trình duyệt cũ. Phiên bản WebM có thể dùng bộ mã hoá và giải mã AV1 mới (chưa được hỗ trợ rộng rãi) hoặc bộ mã hoá và giải mã VP9 cũ hỗ trợ tốt hơn AV1 nhưng thường không nén 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 trong phần tử <video>. Thuộc tính này giúp người dùng biết được nội dung video có thể là gì trước khi bắt đầu phát:
<video poster="poster.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Tự động phát
Theo Kho lưu trữ HTTP, 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 dùng làm nền video hoặc để 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. Các ảnh GIF động thường tiêu tốn vài megabyte dữ liệu. Điều này có thể làm tiêu hao đáng kể băng thông dành cho các tài nguyên quan trọng hơn. Thường thì bạn nên tránh các định dạng hình ảnh động, vì các định dạng tương đương của <video> hiệu quả hơn nhiều đối với loại nội dung nghe nhìn này.
Nếu trang web của bạn cần phải tự động phát video, thì 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 mình để 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ư 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. Nhược điểm, 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 được tải và bắt đầu phát.
Phát do người dùng khởi tạo
Nhìn chung, trình duyệt 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 sẽ 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ể 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 thuộc tính preload của phần tử <video>:
- Việc đặt
preload="none"thông báo cho trình duyệt rằng sẽ 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à các thông tin ngắn gọn khác.
Việc đặt preload="none" có thể là trường hợp được mong muốn nhất nếu bạn đang tải 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 biết được nội dung của video là gì. Ngoài ra, nếu
hình ảnh áp phích là phần tử LCP của bạn, thì 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
Do 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ả, việc giải quyết vấn đề đó cho các dịch vụ video chuyên biệt như YouTube hoặc Vimeo là điều hợp lý. Các dịch vụ như vậy tối ưu hoá việc phân phối video cho bạn, nhưng việc nhúng video qua dịch vụ của bên thứ ba có thể có tác động riêng đối với hiệu suất, vì trình phát video được nhúng thường có thể phân phát rất nhiều tài nguyên bổ sung, chẳng hạn như JavaScript.
Do đó, việc 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 Kho lưu trữ HTTP, video nhúng của YouTube chặn luồng chính trong hơn 1,7 giây đối với trang web trung gian. Việc chặn luồng chính trong thời gian dài là một vấn đề nghiêm trọng đối với 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) của trang. Tuy nhiên, bạn có thể cảnh cáo vi phạm bằng cách không tải nội dung nhúng ngay lập tức trong lần tải trang đầu tiên 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 video thực tế đã nhúng khi người dùng tương tác với video đó.
Video minh hoạ
Kiểm tra kiến thức
Thứ tự của các phần tử <source> bên trong phần tử <video> mẹ không xác định tài nguyên video nào cuối cùng sẽ được tải xuống.
Thuộc tính poster của phần tử <video> được xem là một LCP đề xuất.
Tiếp theo: Tối ưu hoá phông chữ trên web
Tiếp theo trong 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 là việc thường bị bỏ qua, nhưng có thể có tác động đáng kể đến tốc độ tải tổng thể và các chỉ số như LCP và Điểm số tổng hợp về mức thay đổi bố cục (CLS).