Lazy load embedded Youtube video dengan Lazysizes adalah salah satu cara yang efektif untuk meningkatkan kecepatan loading laman blog secara drastis dan sekaligus manaikkan skor SEO di Lighthouse. Sebelumnya saya pernah menulis tentang Defer Parsing Video Youtube untuk tujuan yang sama.
Lazysizes adalah self-initializing lazyloader yang bisa dibilang cepat, junk-free dan juga SEO-friendly untuk image, termasuk untuk responsive images yang memakai srcset, dan bisa pula dipakai untuk lazy load iframe. Artinya lazysizes juga bisa dipakai untuk lazy loading Youtube video yang dipasang di dalam sebuah tulisan.
Mengapa penting melakukan lazy load, karena satu saja embeded YouTube video bisa memuat hingga 400KB data, bahkan sebelum pengunjung laman blog menekan tombol play. Youtube juga memaksa browser membuat permintaan http tambahan. Di laman dengan lebih banyak video, beban ekstra itu semakin nyata dalam memperlambat kecepatan loading laman.
Untuk melakukan lazy load pada Embedded Youtube Video dengan Lazysizes, silahkan pasang scriptnya yang petunjuknya bisa dibaca pada tulisan Lazysizes Untuk Lazy Loading Image pada Blogger dan WordPress
Jika sudah terpasang, lakukan langkah sebagai berikut untuk Lazy Load Embedded Youtube Video
Skor Performance dan SEO sebelum dan setelah melakukan lazy load Youtube video, bisa dilakukan dengan memakai Lighthouse pada Chrome DevTools:
Dengan membandingkan skor performance Lighthouse sebelum dan setelah melakukan lazy load Youtube video, Anda bisa mendapat gambaran seberapa besar pengaruh keberadaan embedded Youtube video pada skor blog. Tanpa lazy load, sangat tidak dianjurkan untuk mengebed Youtube video di tulisan. Selamat mencoba.
Lazysizes adalah self-initializing lazyloader yang bisa dibilang cepat, junk-free dan juga SEO-friendly untuk image, termasuk untuk responsive images yang memakai srcset, dan bisa pula dipakai untuk lazy load iframe. Artinya lazysizes juga bisa dipakai untuk lazy loading Youtube video yang dipasang di dalam sebuah tulisan.
Mengapa penting melakukan lazy load, karena satu saja embeded YouTube video bisa memuat hingga 400KB data, bahkan sebelum pengunjung laman blog menekan tombol play. Youtube juga memaksa browser membuat permintaan http tambahan. Di laman dengan lebih banyak video, beban ekstra itu semakin nyata dalam memperlambat kecepatan loading laman.
Untuk melakukan lazy load pada Embedded Youtube Video dengan Lazysizes, silahkan pasang scriptnya yang petunjuknya bisa dibaca pada tulisan Lazysizes Untuk Lazy Loading Image pada Blogger dan WordPress
Jika sudah terpasang, lakukan langkah sebagai berikut untuk Lazy Load Embedded Youtube Video
- Buka video Youtube yang hendak dipasang di blog.
- Klik 'SHARE', klik 'Embed', copy kodenya
<iframe width="560" height="315" src="https://www.youtube.com/embed/-XD3P9xyDkQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> - Untuk membuat Youtube video lazy load dengan Lazysizes, ganti kode di atas dengan kode di bawah ini, yaitu dengan menambahkan
data-sebelumsrc, dan menambahkanclass="lazyload"pada script:
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/-XD3P9xyDkQ" frameborder="0" class="lazyload" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Skor Performance dan SEO sebelum dan setelah melakukan lazy load Youtube video, bisa dilakukan dengan memakai Lighthouse pada Chrome DevTools:
- Buka tulisan yang telah memakai lazysizes dengan Chrome
- Klik "View", klik "Developer", lalu klik "Developer Tools"
- Klik "Run Audits". Tunggu sampai proses audit selesai dilakukan, yang bisa memakan waktu agak lama.
Dengan membandingkan skor performance Lighthouse sebelum dan setelah melakukan lazy load Youtube video, Anda bisa mendapat gambaran seberapa besar pengaruh keberadaan embedded Youtube video pada skor blog. Tanpa lazy load, sangat tidak dianjurkan untuk mengebed Youtube video di tulisan. Selamat mencoba.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.