Embed YouTube Terlalu Berat, dan Bisa Diperbaiki

• Embed YouTube berukuran sekitar 1,3MB dan tidak berbagi resource antar-embed
• Dengan menggunakan web component <lite-youtube>, ukurannya bisa turun menjadi sekitar 100k, berbagi resource, dan tidak mengorbankan fungsi

Embed video YouTube

• Video YouTube bisa di-embed ke dalam situs web
• Di menu Share milik YouTube, jika memilih opsi < > Embed, akan diberikan kode HTML yang berisi <iframe>
• <iframe> kurang baik untuk performa, tetapi cocok untuk konten pihak ketiga yang terlindungi

Usulan untuk meningkatkan performa

• Tambahkan atribut loading="lazy" agar video tidak langsung dimuat saat belum terlihat
• Tambahkan style inline untuk mempertahankan rasio asli video dan membuatnya fleksibel

Masalah pada Embed YouTube saat ini

• Pada halaman yang hanya memiliki satu Embed YouTube, dibutuhkan 32 request, transfer data 1,3MB, dan waktu muat 2,76 detik
• Karena resource tidak dibagikan antar-embed, jumlah transfer data meningkat secara linear seiring bertambahnya jumlah embed

Tampilan dan fungsi

• Embed YouTube menyediakan gambar "poster" video, judul video, dan tombol putar besar
• Fitur-fitur ini bisa diimplementasikan tanpa menggunakan banyak resource

Mengapa dibuat seperti ini?

• Ada laporan bahwa saat embed ringan diuji, tingkat engagement menurun
• Namun, hasil ini terasa bertentangan dengan intuisi dan perlu ditinjau lebih dalam
• Penggunaan resource yang besar juga menjadi masalah dari sisi lingkungan

Solusi: meniru pengalaman embed dengan cara lain

• Ada web component lite-youtube-embed yang dibuat oleh Paul Irish dari Google
• Komponen ini berfokus pada performa visual dan merender sekitar 224 kali lebih cepat
• Sambil tetap menyediakan fungsi yang sama seperti embed bawaan, komponen ini meningkatkan kecepatan, efisiensi, dan privasi bawaan

Cara menggunakan Lite YouTube Embed

1. Hubungkan JavaScript yang menginisialisasi web component
2. Gunakan

• Bisa dipasang dari npm atau disalin ke dalam proyek
• Bisa juga digunakan dengan menautkannya dari CDN

Alternatif

• Versi Shadow DOM (style terlindungi, tetapi sulit di-style)
• Implementasi sendiri
  • Raymond Camden: membangun web component Embed YouTube (versi vanilla dan WebC)
  • Adrian Roselli: web component YouTube dan Vimeo
• Mux: <youtube-video> (sesuai dengan DOM API)
• Port React dan versi resmi Next.js

Ringkasan GN⁺

• Embed YouTube menggunakan banyak resource sehingga berdampak negatif pada performa
• Dengan web component seperti lite-youtube-embed, performa bisa ditingkatkan secara signifikan
• Ini juga bisa memberi dampak positif bagi lingkungan
• Web component lain dengan fungsi serupa juga layak dipertimbangkan

[xguru]

lite-youtube-embed - embed YouTube yang lebih cepat

[GN⁺]

Komentar Hacker News

• Di platform forum komunitas, embed YouTube dideteksi lalu diganti dengan thumbnail proksi yang tidak dimuat sampai diklik

  • Hanya karena seseorang membagikan video YouTube bukan berarti semua pengguna harus mengunduh lebih dari 1MB JavaScript YouTube dan IP mereka dilacak oleh Google

• Penulis tidak percaya bahwa versi ringan mengurangi engagement

  • Sebaliknya, saya sangat percaya itu
  • Pada demo di halaman proyek lite-youtube-embed yang direkomendasikan, versi ringan butuh waktu lebih lama untuk memutar video
  • Semakin waktu muat bertambah dalam hitungan milidetik, semakin engagement menurun

• Tidak mengherankan jika pemutar yang berbeda diperlakukan berbeda oleh pengguna

  • lite-youtube-embed membuat pengguna tidak bisa mengklik ke halaman YouTube yang sebenarnya
  • Ini bisa terlihat sebagai upaya untuk mencegah orang pergi ke sumber asli konten
  • Saya hampir tidak pernah memutar video yang di-embed, tetapi ketika melakukannya saya lebih suka pengalaman YouTube biasa
  • Jika terlihat seperti ada lapisan tambahan, kemungkinan saya mengkliknya jadi lebih kecil

• Ini contoh keyakinan keliru bahwa developer bisa tahu persis bagaimana pengguna memakai software

  • Saya ingin mengurangi penggunaan video dan Google, serta mengurangi megabyte JavaScript
  • Demi web yang lebih baik, embed video YouTube harus dihentikan

• Blogger perlu dipaksa untuk tidak memakai embed GitHub Gist

  • Static site generator seperti Hugo mendukung snippet kode dengan syntax highlighting
  • Situs dinamis bisa menggunakan highlight.js

• Salah satu cara mengurangi bobot total embed dan memperbaiki UX adalah dengan memblokir iklan

  • Content Security Policies bisa digunakan untuk memblokir iklan di halaman

• Sebagai solusi sisi pengguna untuk pengguna ublock, bisa memakai click 2 load

  • Ini mungkin tidak akan berfungsi karena Chrome sedang beralih ke manifest v3

• Ada hasil pengujian bahwa embed ringan memang mengurangi engagement

  • Waktu muat yang cepat seharusnya meningkatkan engagement, tetapi jika engagement turun dengan embed ringan, kemungkinan ada fungsi yang dikorbankan

• Video yang di-embed sebenarnya bisa berupa elemen <video> yang menunjuk ke file di server YouTube

  • Kepentingan komersial menghalanginya

• Semakin banyak jumlah embed, semakin bobotnya bertambah secara linear

  • Same-origin policy seharusnya memungkinkan penggunaan resource yang sudah di-cache

• Sebagai alternatif untuk lite youtube embed, saya membagikan solusi saya

  • Ini menawarkan kompromi yang lebih baik dari sisi kemampuan kustomisasi penuh