Lazy Load Video YouTube

Pernahkah kamu berfikir tentang seberapa penting penerapan lazy load pada video youtube yang disematkan kedalam konten website/blog? Ya, kamu benar penerapan lazy load pada video youtube yang disematkan ke website tentu sangat penting, karena ia akan menjaga performa website tetap optimal.

Maka dari itu kali ini saya akan membagikan script lazy load video youtube kepada teman-teman blogger secara cuma-cuma. Ini merupakan script terbaik untuk lazy load video youtube dan sudah terbukti dapat menjaga performa website/blog tetap optimal meskipun banyak video youtube yang disematkan.

Belum percaya? Coba perhatikan perbandingan hasil analisis berikut ini sebelum dan sesudah menggunakan script lazy load video youtube.[ads id="ads1"]

Analisis

Dibawah ini adalah performa awal website sebelum menyematkan video youtube ke dalamnya. Terlihat waktu eksekusi javascript yang dibutuhkan browser untuk merender halaman hanya 0,1 detik.

Kemudian setelah disematkan video youtube tanpa lazy load, semuanya berubah derastis, tidak hanya waktu eksekusi javascript yang bertambah, waktu respons server awal, waktu interaktif dan total bloking time juga meningkat.

Sekarang coba perhatikan hasil analisis setelah menerapkan lazy load pada video youtube berikut ini. Performa awal website saya nyaris tidak berubah sama sekali dari performa awalnya sebelum menyematkan video youtube.

Hal itu dikarenakan script lazy load video youtube menunda spenuhnya perenderan video oleh browser hingga pengguna melakukan interktif (menscroll halaman).

Bagaimana tertarik untuk menggunakan lazy load video youtube? Jika iya, jangan pakai lama langsung saja comot script lazy load video youtube nya dibawah ini.

Script Lazy Load Video Youtube

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.cordial-lazyload");
            var iframeObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && entry.target.src.length == 0) {                    
                        entry.target.src = entry.target.dataset.src;
                        iframeObserver.unobserve(entry.target);
                    }
                });
            });

            iframes.forEach(function (iframe) {
                iframeObserver.observe(iframe);
            });
        } else {
            var iframes = document.querySelector('iframe.cordial-lazyload');

            for (var i = 0; i < iframes.length; i++) {
                if (lazyVids[i].getAttribute('data-src')) {
                    lazyVids[i].setAttribute('src', lazyVids[i].getAttribute('data-src'));
                }
            }
        }
    })
</script>

Kode HTML (Embed)

<div class="youtube-iframe-container">
    <iframe class="youtube-video iframe-video cordial-lazyload" 
        data-src="https://www.youtube.com/embed/nH6Cn_Hq_mE"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

CSS

<style>
    .youtube-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

Keterangan

Untuk menggunakan lazy loading youtube di atas, kamu tidak perlu merubah kode apapun, kecuali pada bagian url video yang ingin di sematkan.
Url harus berasal dari kode semat (embedded) video youtube, bukan url watch.
Jika sudah mendapatkan url embedded video youtube, ganti url pada bagian kode html lazy loading dengan url video yang anda inginkan.
Kemudian install script lazy loading youtube, beserta kode html dan css ke postingan blog anda melalui edit html.

Selesai, silahkan uji performa halaman web menggunakan Lighthouse atau Google Pagespeed Insights atau Webdev Measure untuk memastikan lazy loading youtube berfungsi dengan baik.

Untuk melihat demo lazy load video youtube silahkan buka url dibawah ini di browser anda.

Demo: https://cordialdemo.blogspot.com/2022/05/demo-lazy-load-video.html