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
Thứ tự của các phần tử <source>
trong một
phần tử <video>
mẹ không xác định
tài nguyên video nào sẽ được tải xuống cuối cùng.
Thuộc tính poster
của phần tử <video>
được coi là ứng cử viên LCP.
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).