Tại sao phải trì hoãn tải video? Khi bạn lấy video từ Youtube, Wistia, Vimeo, vân vân để nhúng vào trong trang web của bạn, nó có thể là nguyên nhân gây tải chậm trang (bạn có thể tham khảo thêm bài viết YouTube tải nặng như thế nào?).
Khi video được trì hoãn tải cho đến khi nội dung thuộc màn hình đầu tiên tải xong, điều đó sẽ giúp trang web của bạn tải nhanh hơn mà không cần thu thập tất cả file và các tài nguyên mà video yêu cầu.
Bằng cách trì hoãn video bạn thường có thể tiết kiếm hàng tá file yêu cầu và các tài nguyên tải về và nó có thể thực sự đem đến khác biệt cho tốc độ trang web. Video có thể rơi vào lỗi JavaScript chặn hiển thị trong công cụ kiểm tra tốc độ trang khi bạn thử kiểm tra trang của bạn.
#1. Video ví dụ
Tôi vừa thêm một video vào trang này để làm ví dụ. Trang này tải về chưa đến nửa giây ngay cả khi nó chứa video.
Nếu tôi không trì hoãn tải video, thì cũng trang này sẽ mất đến 2,5 giây thì mới tải xong. Trang này được tải khi video chưa cần tải xong, vì thế mà trang không cần phải “đợi video”.
#2. Trì hoãn tải Video
Tôi trì hoãn video sử dụng cùng cách thức tôi từng dùng để trì hoãn tải ảnh. Với ảnh phương thức chung là ẩn file ảnh để nó không tải xuống trong khi tải trang rồi sau đó thay thế nó thông qua JavaScript, nhờ vậy ảnh sẽ tải sau khi trang tải xong. Sự khác biệt với video là bạn sẽ không tải file mà là bạn tải iframe.
Sử dụng cùng ý tưởng, chúng ta có thể ngăn video tải tất cả các tệp được liên kết bằng cách không chỉ định nguồn iframe (iframe src) cho đến khi tải xong trang.
#3. Làm thế nào video nhúng hoạt động được
Khi bạn nhúng một video từ Youtube hoặc Vimeo trên trang nghĩa là bạn đang tải một iframe. Khi iframe này được gọi xuống trong khi tải trang, nó có thể yêu cầu một vài (đôi khi là hàng tá) file và tài nguyên bổ sung. Những tài nguyên bổ sung này là cái làm chậm trang. Các tài nguyên này có thể là file JavaScript, tài nguyên dùng để phân tích cho video (cái thậm chí còn gọi nhiều tài nguyên hơn), và nhiều thứ khác không liên quan đến bạn, và chắc chắn là chẳng bổ béo gì cho nội dung thuộc màn hình đầu tiên.
Điểm mấu chốt là không nguồn tài nguyên nào có thể được gọi nếu iframe không được gọi từ máy chủ của chứa video.
Nếu bạn không chỉ định nguồn của iframe, chúng ta sẽ không phải gọi các tài nguyên bổ sung đó.
#4. Làm thế nào để trì hoãn video
Để làm điều đó chúng ta cần đánh dấu mã nhúng của chúng ta và thêm một đoạn JavaScript nhỏ và rất đơn giản. Tôi sẽ cho bạn thấy phương thức tôi thực sự sử dụng cho trang này.
Đoạn HTML:
<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>
Trong đoạn mã trên tôi đã nhúng đoạn mã video từ Youtube và thực hiện hai thay đổi nhỏ. Thay đổi đầu tiên là tôi để trống “src” bằng cách loại bỏ url của nó như bên dưới:
src=""
Điều thứ hai tôi thực hiện là tôi thêm url tôi lấy từ “src” và thêm nó vào “data-src”.
data-src="//www.youtube.com/embed/OMOVFvcNfvE"
Đoạn mã javascript:
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
#5. Tóm tắt cách sử dụng
- Lấy mã nhúng video mà bạn muốn
- Thay đổi đoạn mã nhúng như được miêu tả ở trên
- Thêm đoạn mã JavaScript xuống cuối trang
Với hầu hết các trang bạn chỉ cần thêm đoạn mã JavaScript ngay trước thẻ đóng body trong HTML của bạn.
(Dịch từ bài viết: Deferring videos – Tác giả: Patrick Sexton – Website: Varvy)
#6. Bonus của người dịch
Nếu dùng WordPress bạn có thể tham khảo thêm 2 bài viết về tối ưu tốc độ video mà tôi viết trên trang Kiến Càng:
- Cách tăng tốc tải video YouTube & Vimeo trong WordPress
- Hướng dẫn sử dụng plugin WP YouTube Lyte để tăng tốc độ tải video trên YouTube
Chúc vui & hẹn gặp lại.
Comments are closed.