- Embed `` YouTube bawaan menimbulkan 32 request dan transfer 1,3MB bahkan jika hanya satu yang diletakkan di halaman kosong, sehingga terasa membebani dibanding UI video kecilnya
- Jika beberapa video ditempel, resource tidak dibagikan sehingga bebannya bertambah secara linear; dalam pengukuran Zach Leatherman, 2 embed naik menjadi 2,4MB dan 3 embed menjadi 3,6MB
- Fitur yang pertama kali terlihat hanyalah gambar poster, judul, dan tombol putar besar, sehingga pengalaman yang sama bisa direproduksi dengan lebih ringan memakai Web Component seperti ``
lite-youtube-embed berukuran sekitar 100KB dan membagikan resource antar embed, sehingga meningkatkan kecepatan dan efisiensi tanpa kehilangan fungsi- Karena embed YouTube dipakai sangat luas, mengurangi data sampai hitungan megabyte per embed menjadi optimasi nyata yang juga menurunkan penggunaan listrik dan emisi karbon
Biaya embed `` bawaan
- Jika memilih
Embed dari menu berbagi YouTube, akan diberikan HTML berbasis ``
- Kode bawaan tidak memiliki
loading="lazy", sehingga video di luar layar pun bisa langsung dimuat
- Jika YouTube hanya menambahkan lazy loading ke iframe bawaan, peningkatan performa langsung bisa didapat
- Untuk membuat iframe responsif dan mempertahankan rasio aslinya, iframe embed YouTube bisa ditargetkan langsung lewat CSS
iframe[src^="https://www.youtube.com/embed/";] {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
}
Pengukuran nyata dan kenaikan linear
- Bahkan saat hanya menaruh satu embed YouTube di halaman kosong, biaya pemuatannya tetap besar
-
32 request
- Transfer data 1,3MB
- Waktu muat 2,76 detik pada WiFi penulis
- Zach Leatherman mencatat bahwa seiring jumlah embed bertambah, resource tidak dibagikan sehingga bobotnya meningkat secara linear
- 2 embed: 2,4MB
- 3 embed: 3,6MB
- Saat ini ukurannya tampak sudah lebih besar daripada ketika Zach memeriksanya
UI yang pertama dilihat pengguna itu sederhana
- Elemen yang pertama kali dihadapi pengguna pada embed YouTube terbatas
- Gambar poster video
- Judul video
- Tombol putar besar yang memulai video saat diklik
- UI dan perilaku seperti ini bisa diwujudkan tanpa harus lebih dulu memuat seluruh resource pemutar YouTube
- Sulit menilai klaim bahwa embed yang lebih ringan menurunkan engagement jika metodologi dan datanya tidak dipublikasikan
- Di masa lalu, ketika insinyur YouTube menguji halaman video yang lebih ringan, waktu muat rata-rata justru pernah meningkat
- Halaman yang lebih ringan menjangkau pengguna dengan perangkat berperforma rendah dan koneksi internet lambat
- Penggunaan dari pengguna yang baru menjadi bisa mengakses ini mungkin membuat metrik waktu muat rata-rata terlihat lebih lambat
- Jika hanya melihat waktu muat rata-rata, peningkatan kecepatan nyata per pengguna bisa terlewat
Alternatif: Web Component ``
- lite-youtube-embed buatan Paul Irish, sosok Google yang dikenal di bidang performa, adalah Web Component yang mereproduksi pengalaman embed bawaan dengan lebih ringan
- Deskripsi proyeknya menyebut ia merender seperti embed asli sambil sekitar 224 kali lebih cepat
- Pengalaman pengguna hampir sama dengan embed YouTube bawaan
- Menampilkan gambar poster
- Menampilkan judul
- Menampilkan tombol putar besar
- Memutar video saat diklik
- Perbedaannya ada pada penggunaan dan pembagian resource
- Embed YouTube bawaan: sekitar 1,3MB
- ``: sekitar 100KB
- Bisa berbagi resource antar banyak embed
- Mendapatkan kecepatan, efisiensi, dan perlindungan privasi dasar tanpa kehilangan fungsi
Cara penggunaan dan implementasi terkait
- Caranya adalah mendaftarkan Web Component lewat JavaScript lalu memakai elemen ``
- Bisa lewat instalasi npm, salin langsung, atau tautan CDN
import "https://esm.sh/lite-youtube-embed";;
- Cara yang direkomendasikan README adalah menaruh HTML lebih dulu, lalu memuat skrip secara asinkron untuk menerapkan progressive enhancement
- Agar tetap tampil benar sebelum JavaScript dimuat,
background-image bisa diletakkan di dalam HTML
[Play Video: Keynote (Google I/O '18)](https://youtube.com/watch?v=ogfYd705cRs)
- Ada juga implementasi dan alternatif terkait
2 komentar
lite-youtube-embed - embed YouTube yang lebih cepat
Pendapat di Hacker News
Di platform forum komunitas, mereka mendeteksi embed YouTube dan menggantinya dengan thumbnail proksi yang tidak dimuat sebelum diklik
Hanya karena seseorang di sebuah thread membagikan video YouTube, tidak berarti semua orang yang membuka halaman itu harus mengunduh JavaScript 1MB+ dan bahkan dilacak IP-nya oleh Google
Saya tidak terlalu peduli soal pelacakan, jadi saya memakai thumbnail yang disediakan YouTube apa adanya
Player SoundCloud juga sangat berat
Jika thumbnail di-hotlink, Google masih bisa melacak dari sana juga
Penulis mengatakan tidak percaya ada bukti bahwa versi yang lebih ringan menurunkan engagement, tetapi menurut saya itu sangat mungkin terjadi
Demo proyek lite-youtube-embed yang direkomendasikan punya player ringan dan player biasa; pada versi ringan, waktu hingga video mulai diputar terasa jelas lebih lama
Setiap penambahan 1 milidetik waktu muat akan menurunkan engagement, dan di sini perbedaannya tampak ratusan milidetik atau lebih
https://paulirish.github.io/lite-youtube-embed/
Logika bahwa setiap milidetik itu penting juga berlaku untuk halaman web. Jika pengguna meninggalkan halaman, mereka bahkan tidak akan sampai ke videonya
Selain itu, tidak masalah juga kalau pengguna tidak ingin menonton video. Secara pribadi, saya senang jika halaman web punya ringkasan sehingga saya bisa menghindari video
Saya juga tidak suka dengan perombakan desktop YouTube; terlalu banyak ruang layar dipakai untuk mempromosikan video lain, bukan video yang sebenarnya ingin saya tonton. Saya berharap distraksinya lebih sedikit
Kalau dianalogikan dengan lampu lalu lintas, saya lebih suka lampu yang saya dekati berwarna hijau daripada semua lampu sebentar-sebentar merah
Dari perilaku nyata perusahaan besar, jelas mereka tidak memedulikan hal semacam itu; kalau itu tidak penting bagi mereka, tidak ada alasan bagi kita untuk mengoptimalkannya atas nama mereka
Dalam kasus penggunaan ini bukan masalah besar, tetapi di bagian stack lainnya kita tetap harus memperhatikan performa
Saya tidak tahu bagaimana ini bisa mundur seperti sekarang, dan Google tampaknya makin lama makin merusak hal-hal yang sebelumnya bekerja dengan baik
Bisa berbeda tergantung lingkungan: Firefox, laptop i7-1185G7 berusia sekitar 2 tahun, Windows 11, Edge mode 32-bit yang terus diperbarui dan belum di-reboot selama beberapa minggu
Kesan lambat sebagian besar berasal dari indikator loading yang berputar. Seolah-olah ia mengiklankan dirinya sendiri sebagai lambat
Jeda dari klik hingga pemutaran memang bisa berpengaruh, tetapi untuk mengukur besarnya dengan benar diperlukan pihak berskala seperti YouTube
Mengenai rumor bahwa embed yang lebih ringan menurunkan engagement dan lite-youtube-embed yang diusulkan, pengguna bisa menganggap player yang sedikit saja berbeda tampilan atau perilakunya sebagai sesuatu yang asing dan tidak tepercaya
Pada demo lite-youtube-embed, meski judulnya terlihat, tidak ada tautan untuk menuju halaman YouTube sebenarnya, sehingga bahkan terasa antagonis seolah menghalangi akses ke “konten” aslinya
Tentu fitur itu bisa ditambahkan dengan mudah, tetapi ini mengungkap masalah yang lebih besar
Saya hampir tidak pernah memutar video embed, tetapi kalau saya melakukannya, pengalaman YouTube biasa saja sudah cukup. Jika dibungkus lagi dengan lapisan lain yang tidak jelas, kemungkinan saya mengkliknya akan berkurang
Ungkapan “tidak ada yang dikorbankan” dalam artikel ini adalah contoh pengembang yang keliru mengira mereka tahu bagaimana pengguna memakai perangkat lunak. Kenyataannya, itu selalu hanya dugaan
Saya berharap video berkurang, ketergantungan pada Google di mana-mana berkurang, dan gumpalan JavaScript juga berkurang. Demi web yang lebih baik, semoga video YouTube tidak di-embed sembarangan di mana-mana
https://paulirish.github.io/lite-youtube-embed/
Sekarang setelah tahu, saya berharap player ringan seperti ini juga punya tombol itu. Meski begitu, implementasi ini tidak sepenuhnya memblokir cara mudah untuk mendapatkan tautan
Memang bisa diakses setelah memutar video, tetapi itu bertentangan dengan tujuannya. Saya tidak ingin memutar video, dan juga tidak ingin menunggu sampai video dimuat lalu menjeda dan menekan tombol simpan
Sekarang tinggal membuat para blogger tidak memakai embed GitHub Gist
Hugo, dan mungkin generator situs statis lainnya, sudah mendukung potongan kode dengan syntax highlighting secara bawaan, dan situs yang lebih dinamis pun bisa menghilangkan ketergantungan pada layanan pihak ketiga dengan highlight.js
Memakai iframe yang berat untuk potongan kode kecil itu benar-benar aneh
https://gohugo.io/content-management/syntax-highlighting/
https://highlightjs.org
Meski saya tidak menyukainya, tidak masuk akal untuk “memaksa” orang mengubah situs agar sesuai dengan selera saya
Itu diperbaiki dalam beberapa minggu, tapi saya terkejut karena kondisinya sudah begitu selama bertahun-tahun
Jika bisa memanfaatkan Content Security Policy di halaman, kita bisa memblokir iklan untuk mengurangi bobot total embed dan juga memperbaiki pengalaman pengguna
Info terkait: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
Content-Security-PolicyKarena itu akan mematikan perlindungan CSP terhadap serangan injeksi. Jika memang diperlukan, ada cara-cara yang lebih aman untuk mengizinkan skrip inline
https://content-security-policy.com/
Sepertinya ada bagian besar yang hilang dari cerita bahwa “embed yang lebih ringan menurunkan engagement”
Secara alami, jika waktu muat lebih cepat, engagement seharusnya membaik. Namun jika engagement turun pada embed yang ringan, berarti ada fitur atau perilaku tertentu yang dikorbankan
Tetapi tulisan ini mengatakan tidak ada yang dikorbankan, jadi ada sesuatu yang hilang dalam ceritanya
Di sini juga bisa saja serupa. Berkat embed yang lebih ringan, banyak orang untuk pertama kalinya bisa memuat video, tetapi mereka mungkin keluar pada tahap pemutaran karena perangkat atau koneksinya lambat
Maka orang-orang yang sebelumnya tidak meninggalkan data apa pun karena tidak bisa memuat player sepenuhnya, kini bisa terlihat seolah-olah menaikkan rasio “berhenti menonton video”
Pengguna punya ekspektasi dan toleransi waktu muat yang berbeda tergantung objeknya, dan halaman serta video di dalamnya adalah objek yang berbeda
Waktu muat seluruh halaman juga tidak selalu terikat pada waktu muat embed, dan pemuatan seluruh halaman bisa menutupi waktu muat konten
Metrik yang lebih penting mungkin bukan waktu muat embed, melainkan jeda dari klik sampai pemutaran
Sebagai solusi di sisi pengguna untuk pengguna uBlock, bisa memakai filter click2load
Namun Chrome sedang beralih ke Manifest V3, jadi ini mungkin tidak berfungsi. Bisa merujuk filter dari yokoffing/filterlists
https://raw.githubusercontent.com/yokoffing/filterlists/main...
Pembuat Betterfox ini juga punya filter lain yang berguna di GitHub
Yang saya inginkan hanyalah tautan biasa, jadi dulu saya membuat userscript singkat yang mengubah iframe YouTube di halaman menjadi tautan
Untuk implementasi yang sederhana, hasilnya sangat mengejutkan bagus. Script itu mencari iframe
youtube.com/embeddanyoutube-nocookie.com/embed, mengubahnya menjadi tautanwatch?v=, tetap mempertahankan timestamp, dan jika mau juga bisa menambahkan gambar thumbnailBagian “semakin banyak embed, bobotnya juga bertambah linear. Dua embed 2,4MB, tiga embed 3,6MB” terasa aneh
Saya penasaran kenapa resource ini tidak diambil dari cache. Jika semuanya dimuat dari
www.youtube.com, bukankah menurut same-origin policy resource yang sudah di-cache seharusnya bisa dipakai?Bagian terbaik dari tulisan itu adalah saat dikatakan bahwa setelah beralih ke halaman yang ringan, rata-rata waktu muat halaman justru naik
Setelah dilihat lebih detail, pengguna perangkat kelas bawah dan internet lambat untuk pertama kalinya benar-benar bisa memakai YouTube, dan karena mereka banyak menggunakannya, rata-rata terlihat melambat
Kecepatan penggunaan nyata secara relatif menjadi lebih cepat untuk semua orang, dan menarik bahwa metrik rata-rata kecepatan muat halaman pada akhirnya hanyalah umpan yang tidak bermakna
Dulu saya pernah membuat ekstensi Firefox yang mengubah semua embed YouTube menjadi thumbnail, lalu membuka YouTube saat diklik
Awalnya dibuat karena ponsel tidak punya Flash sementara embed Flash umum dipakai, dan kemudian diperluas hingga menangani embed iframe juga
Dalam kebanyakan kasus, membuka situs web atau aplikasi YouTube penuh juga memberi pengalaman pengguna yang lebih baik daripada jendela embed kecil
Saat itu saya menulisnya sesuai API ekstensi tingkat tinggi yang baru, tetapi dukungan antarversi browser tidak berlanjut sesuai harapan, jadi karena kesal saya tidak memindahkannya ke WebExtension. Membaca tulisan ini membuat saya ingin mem-porting-nya lagi