YouTube Embeds quá nặng, và có thể khắc phục được

• YouTube Embeds có dung lượng khoảng 1.3MB và không chia sẻ tài nguyên giữa nhiều embed
• Dùng web component <lite-youtube> có thể giảm xuống còn khoảng 100k, chia sẻ tài nguyên và không phải hy sinh tính năng

Nhúng video YouTube

• Có thể nhúng video YouTube vào website
• Trong menu Share của YouTube, chọn tùy chọn < > Embed sẽ nhận được mã HTML có chứa <iframe>
• <iframe> không tốt cho hiệu năng, nhưng phù hợp với nội dung bên thứ ba được cô lập

Đề xuất để cải thiện hiệu năng

• Thêm thuộc tính loading="lazy" để video không bị tải ngay khi chưa hiển thị
• Thêm inline style để giữ đúng tỷ lệ gốc của video và giúp nó co giãn linh hoạt

Vấn đề của YouTube Embed hiện tại

• Một trang chỉ có một YouTube Embed cũng cần 32 request, truyền 1.3MB dữ liệu và mất 2.76 giây để tải
• Tài nguyên không được chia sẻ giữa nhiều embed, nên lượng dữ liệu truyền tăng tuyến tính theo số lượng embed

Giao diện và chức năng

• YouTube Embed cung cấp hình "poster" của video, tiêu đề video và nút phát lớn
• Những chức năng này có thể được triển khai mà không cần tiêu tốn quá nhiều tài nguyên

Vì sao lại làm theo cách này?

• Đã từng thử nghiệm embed nhẹ hơn, nhưng có báo cáo rằng mức độ tương tác giảm xuống
• Tuy nhiên đây là kết quả đi ngược trực giác và cần được xem xét kỹ hơn
• Việc tiêu tốn nhiều tài nguyên cũng là một vấn đề về môi trường

Giải pháp: tái tạo trải nghiệm nhúng theo cách khác

• Có web component lite-youtube-embed do Paul Irish của Google tạo ra
• Component này tập trung vào hiệu năng hiển thị và render nhanh hơn khoảng 224 lần
• Nó cung cấp cùng chức năng như embed mặc định nhưng cải thiện tốc độ, hiệu quả và quyền riêng tư mặc định

Cách dùng Lite YouTube Embed

1. Kết nối JavaScript để khởi tạo web component
2. Sử dụng

• Có thể cài từ npm hoặc sao chép vào dự án để dùng
• Có thể liên kết từ CDN để dùng

Các lựa chọn thay thế

• Phiên bản Shadow DOM (bảo vệ style, khó tùy biến style)
• Tự triển khai
  • Raymond Camden: xây dựng web component YouTube Embed (phiên bản vanilla và WebC)
  • Adrian Roselli: web component cho YouTube và Vimeo
• Mux: <youtube-video> (khớp với DOM API)
• Bản port cho React và phiên bản chính thức cho Next.js

Tóm tắt của GN⁺

• YouTube Embed tiêu tốn nhiều tài nguyên và ảnh hưởng tiêu cực đến hiệu năng
• Dùng web component như lite-youtube-embed có thể cải thiện hiệu năng đáng kể
• Cũng có thể mang lại tác động tích cực về mặt môi trường
• Cũng đáng cân nhắc các web component khác cung cấp chức năng tương tự

[xguru]

lite-youtube-embed - Nhúng YouTube nhanh hơn

[GN⁺]

Ý kiến Hacker News

• Trên các nền tảng diễn đàn cộng đồng, họ phát hiện các YouTube embed và thay bằng thumbnail proxy chỉ tải khi được nhấp

  • Việc một người chia sẻ video YouTube không có nghĩa là mọi người dùng đều phải tải hơn 1MB JavaScript của YouTube và bị Google theo dõi IP

• Tác giả không tin rằng phiên bản nhẹ làm giảm mức độ tương tác

  • Còn tôi thì hoàn toàn tin là có
  • Trong bản demo trên trang dự án lite-youtube-embed được đề xuất, phiên bản nhẹ mất nhiều thời gian hơn để phát video
  • Khi thời gian tải tăng thêm từng mili giây, mức độ tương tác sẽ giảm

• Không có gì đáng ngạc nhiên khi các trình phát khác bị người dùng đối xử khác đi

  • lite-youtube-embed không cho nhấp sang trang YouTube thực tế
  • Điều này có thể trông như một nỗ lực nhằm ngăn người dùng đi tới nguồn gốc thực của nội dung
  • Tôi hầu như không phát video nhúng, nhưng khi phát thì tôi thích trải nghiệm YouTube thông thường
  • Nếu trông như có thêm một lớp trung gian, khả năng tôi nhấp vào sẽ thấp hơn

• Đây là một ví dụ về niềm tin sai lầm rằng nhà phát triển có thể biết chính xác cách người dùng sử dụng phần mềm

  • Tôi muốn giảm video và việc sử dụng Google, đồng thời cắt bớt hàng megabyte JavaScript
  • Vì một web tốt hơn, chúng ta nên ngừng nhúng video YouTube

• Cần buộc các blogger ngừng dùng GitHub Gist embed

  • Các static site generator như Hugo hỗ trợ code snippet có syntax highlighting
  • Các trang động có thể dùng highlight.js

• Một cách để giảm tổng trọng lượng của embed và cải thiện UX là chặn quảng cáo

  • Có thể dùng Content Security Policies để chặn quảng cáo trên trang

• Với người dùng uBlock, có thể dùng click 2 load như một giải pháp phía người dùng

  • Điều này có thể không hoạt động khi Chrome đang chuyển sang manifest v3

• Có kết quả thử nghiệm cho thấy embed nhẹ làm giảm mức độ tương tác

  • Thời gian tải nhanh hơn lẽ ra phải cải thiện mức độ tương tác, nhưng nếu tương tác giảm với embed nhẹ thì có thể chức năng đã bị hy sinh

• Video nhúng lẽ ra có thể chỉ là phần tử <video> trỏ tới tệp trên máy chủ YouTube

  • Lợi ích thương mại đã cản trở điều đó

• Số lượng embed càng tăng thì dung lượng tải càng tăng tuyến tính

  • Chính sách same-origin lẽ ra phải cho phép dùng lại tài nguyên đã được cache

• Tôi chia sẻ giải pháp của mình như một phương án thay thế cho lite youtube embed

  • Nó mang lại một điểm cân bằng tốt hơn về khả năng tùy biến hoàn toàn