Cara Embed CodePen Dengan Lazy Load

Pada dasarnya kode embed (iframe) codepen sudah menerapkan teknik off-screen atau yang lebih umum dengan lazy load. Itu dapat anda lihat dari atribut loading="lazy" yang ada pada iframe tersebut.

<iframe height="300" style="width: 100%;" scrolling="no" title="Fixed Share Button" src="https://codepen.io/cordialblogger/embed/BaLwwWQ?default-tab=result" frameborder="no"
loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/cordialblogger/pen/BaLwwWQ">
  Fixed Share Button</a> by CordialBlogger (<a href="https://codepen.io/cordialblogger">@cordialblogger</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Akan tetapi lazy loading yang diterapkan masih merupakan teknik off-screen yang paling dasar dan tidak cukup untuk menghindarkan website anda terdampak oleh sumber daya pihak ketiga.

Jadi saya akan memaparkan sedetail mungkin cara menyematkan (embed) codepen di website/blog dengan script lazy load yang jauh lebih baik.[ads id="ads1"]

Embed Codepen Dengan Lazy Load (Iframe Mode)

Langkah 1. Modifikasi kode embed (iframe) codepen dengan menambahkan class="iframe-style codepen-lazyload" dan hapus inline css dari iframe tersebut sehingga terlihat seperti berikut.

<iframe class="iframe-style codepen-lazyload" scrolling="no" title="Fixed Share Button" src="https://codepen.io/cordialblogger/embed/BaLwwWQ?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/cordialblogger/pen/BaLwwWQ">
  Fixed Share Button</a> by CordialBlogger (<a href="https://codepen.io/cordialblogger">@cordialblogger</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Langkah 2. Dibagian url embed ubah kode src menjadi data-src.

<iframe class="iframe-style codepen-lazyload" scrolling="no" title="Fixed Share Button" data-src="https://codepen.io/cordialblogger/embed/BaLwwWQ?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/cordialblogger/pen/BaLwwWQ">
  Fixed Share Button</a> by CordialBlogger (<a href="https://codepen.io/cordialblogger">@cordialblogger</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Langkah 3. Bungkus iframe container baru yang saya sediakan di bawah ini.

<div class="cordial-iframe-container">
<iframe class="iframe-style codepen-lazyload" scrolling="no" title="Fixed Share Button" data-src="https://codepen.io/cordialblogger/embed/BaLwwWQ?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/cordialblogger/pen/BaLwwWQ">
  Fixed Share Button</a> by CordialBlogger (<a href="https://codepen.io/cordialblogger">@cordialblogger</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
</div>

Langkah 4. Pasang kode embed atau iframe codepen beserta css dan script lazy load berikut ini di postingan melalui edit html.

//kode embed disini
  <style>
      .cordial-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-style {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
  </style>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.codepen-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.codepen-lazyload');
            for (var i = 0; i < iframes.length; i++) {
                if (lazyPen[i].getAttribute('data-src')) {
                    lazyPen[i].setAttribute('src', lazyPen[i].getAttribute('data-src'));
                }
            }
        }
    })
</script>

Selesai, dengan script lazy load tersebut dampak sumber daya pihak ketiga (plugin codepen) akan teratasi sepenuhnya dan tidak akan menambah total blocking time di website anda.

Kemudian kode css akan menangani masalah fleksibilitas dengan menjadikan iframe 100% responsif di semua ukuran layar.

Jika anda ingin menyematkan (embed) codepen dengan kode html yang direkomendasikan oleh codepen.io, silahkan ikuti tutorial yang ke dua berikut ini.

Embed Codepen Dengan Lazy Load (HTML Mode)

Pilih codepen yang ingin anda sematkan.
Klik tombol <embed>.
Pilih mode HTML yang direkomendasikan oleh CodePen.
Copy kode kemudian pasang di blog anda melalui edit html.
Kemudian, untuk menambahkan efek lazy load, ganti script codepen dengan script lazy load berikut ini.

<script type="text/javascript">
var codepenLazyload=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false===adsenseLazyload||0!=document.body.scrollTop&&false===adsenseLazyload)&&(!function(){var e=document.createElement("script");
e.type="text/javascript",
e.async=true,
e.src="https://cpwebassets.codepen.io/assets/embed/ei.js";
var a=document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(e,a)}(),codepenLazyload=true)},true);
</script>

Cara mana yang lebih baik? Kedua cara embed codepen dengan lazy load tersebut sama-sama baik dan terbukti sudah terbukti dapat menjaga pagespeed blog atau website anda tetap optimal, tetapi jika saya harus memilih, saya akan memilih cara yang pertama.