Cara Lazy load Video YouTube di Blog

Daftar Isi

Cara Lazy load Video YouTube di Blog - Buat kamu yang suka embed video YouTube di blog pasti sadar kalau video YouTube itu akan secara otomatis dimuat (di-load) setiap kali halaman dibuka. Dan, tentu saja itu berpengaruh ke performa kecepatan blog. Untuk lebih simpelnya, silahkan perhatikan gambar di bawah ini:

Dapat kamu lihat kan bahwa dengan metode embed biasa, video YouTube yang kamu embed akan langsung memuat semua script bawaan dari YouTube yang akhirnya membuat loading blog kita semakin berat.

Solusi untuk masalah tersebut, kamu bisa menerapkan lazy load pada video YouTube yang kamu embed.

Gimana caranya? Yuk kita bahas bareng-bareng.

1. Apa itu Lazy Load Video YouTube?

Lazy load adalah sebuah script yang berfungsi melakukan penundaan pemuatan sampai ada trigger yang membuat pemuatan terjadi. (GeeksforGeeks.org)

Dalam konteks video YouTube ini, lazy load akan membuat video YouTube tidak dulu memuat script-script bawaan embed dari YouTube dan baru memuatnya kalau pengguna/ pengunjung blog kamu menekan tombol play di video tersebut.

Apakah ini bertentangan dengan pihak YouTube?

Seharusnya sih nggak, karena kita nggak sama sekali melakukan hal ilegal seperti mengubah total script bawaan YouTube. Bahkan, script bawaannya hampir tidak berubah sama sekali.

Kita masih akan menggunakan IFrame dari YouTube  untuk melakukannya. Kita hanya akan menambahkan sedikit sentuhan CSS di dalamnya sehingga hasilnya Iframe hanya akan memuat thumbnailnya saja kalau tidak di klik oleh pengguna.

2. Cara Memasang Lazy Load Video YouTube

Untuk memasang lazy load video YouTube kamu hanya perlu menggunakan script berikut ini:

<iframe width="100%" height="480" src="https://www.youtube.com/embed/GMlGHCroDpA" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/GMlGHCroDpA?autoplay=1><img src=https://img.youtube.com/vi/GMlGHCroDpA/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition' title='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition" ></iframe>

Setelah itu, silahkan kamu ganti kode yang ditandai warna kuning dengan kode unik video kamu. Cara dapat kode unik tahu kode unik gimana? Kamu bisa menemukannya di URL Video.

Itu adalah contoh kode unik dari suatu video. Biasanya kode unik itu berada di belakang parameter (v=).

Selanjutnya, silahkan kamu ganti juga kode yang ditandai warna biru telor asin dengan judul video yang mau kamu embed. Untuk bagian ini sebenernya untuk faktor SEO aja, kalaupun nggak diganti sebenarnya nggak masalah.

Sudah, deh. Sekarang tinggal kamu pasang di blog/ website kamu.

Contoh Hasilnya

Untuk hasilnya seperti apa? Kamu bisa lihat sendiri contohnya di bawah ini.

Dan untuk hasilnya di Google Pagespeed Insights bisa kamu cek disini: Google Pagespeed Insights for YouTube LazyLoad. Atau biar lebih simpel lagi, kamu bisa perhatikan gambar di bawah ini.

Kelihatan kan gimana perbedaan sebelum dan sesudahnya?

Nah, mungkin itu aja yang bisa saya jelasin tentang cara lazy load video YouTube di blog. Kalau ada yang kurang jelas, boleh ditanyakan lewat komentar. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya.