Apa itu lazy loading iframe? Sederhananya lazy loading iframe merupakan teknik defer offscreen yang diterapkan pada elemen iframe di situs web menggunakan javascript guna mengontrol perenderan browser terhadap semua iframe yang ada di situs web.
Secara eksplisit lazy loading iframe bertujuan untuk menunda iframe di balik layar dan menunda download resource yang ada pada iframe ketika halaman dimuat, kemudian akan ditampilkan ketika pengguna menavigasi halaman ke arah iframe, dengan demikian situs web dapat dimuat dengan cepat.Dengan lazy load iframe, website anda akan terhindar dari dampak langsung resource yang disematkan di dalam iframe yang pada akhirnya juga akan memangkas waktu eksekusi javascrip dan total blocking time (TBT) ketika browser merender halaman web anda.
Saya fikir penjelasan di atas sudah cukup untuk memberikan alasan mengapa website anda sangat membutuhkan lazy load iframe, sekarang saya akan langsung membawa anda ke script lazy loading iframe lengkap dengan cara install (menggunakannya).
Script Lazy Loading Iframe
<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
if ("IntersectionObserver" in window) {
var iframes = document.querySelectorAll("iframe.iframes-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.iframes-lazyload');
for (var i = 0; i < iframes.length; i++) {
if (lazyIfrm[i].getAttribute('data-src')) {
lazyIfrm[i].setAttribute('src', lazyIfrm[i].getAttribute('data-src'));
}
}
}
})
//]]></script>[ads id="ads1"]
Install script lazy loading iframe di atas kedalam template blog anda. Jika kamu pemula pasang atas letakkan script lazy loading iframe tepat di atas kode penutup body </body>.
Kode CSS
<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>
Install atau pasang kode css ke dalam template blog anda, letakkan diantara tag <head> dan </head> atau untuk pengguna blogspot letakkan kode css sebelum kode ]]></b:skin> di dalam template blog anda dan tanpa tag <style>.Selanjutnya adalah tag iframe, agar script lazy load iframe ini berfungsi, dibutuhkan pengaturan khusus pada iframe yakni menambahkan
class name iframes-lazyload dan iframe-style untuk fleksibilitas iframe, kemudian ubah juga kode src dalam tag iframe menjadi data-src.Jika sebelum iframe anda tidak memiliki class maka anda harus menambahkannya sendiri, berikut ini adalah contoh iframe yang sudah di setting untuk lazy loading iframe.
Iframe CodePen.io
<div class="cordial-iframe-container"> <iframe class="iframe-style iframes-lazyload" title="#PureCSS - Fashion Woman" data-src="https://codepen.io/AsyrafHussin/embed/jOZaNVE?default-tab=html%2Cresult" frameborder="0" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/AsyrafHussin/pen/jOZaNVE"> #PureCSS - Fashion Woman</a> by Asyraf Hussin (<a href="https://codepen.io/AsyrafHussin">@AsyrafHussin</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> </div>
Iframe JsFiddle.net
<div class="cordial-iframe-container">
<iframe class="iframe-style iframes-lazyload"
data-src="//jsfiddle.net/p3rtLw7q/embedded/html,css,result/"
allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>
</div>
Iframe Facebook
<div class="cordial-iframe-container">
<iframe class="iframe-style iframes-lazyload"
data-src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2Fkopassus.komandoo%2Fvideos%2F379172693697799"
frameborder="0"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
Iframe YouTube
<div class="cordial-iframe-container">
<iframe class="iframe-style iframes-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>
Apa yang berbeda? Pada umumnya tag iframe dari plugin pihak ketiga tidak ada class, terdapat inline css di dalamnya dan masih menggunakan kode src untuk memanggil resource, sedangkan pada iframe yang sudah di setting untuk lazy load class baru telah ditambahkan dan inline css juga dihilangkan serta mengubah src menjadi data-src.Kemudian ditambahkan juga container baru untuk mengatur agar tidak terjadi pergeseran posisi iframe ketika disematkan, hanya itu saja berbeda. Setelah kode iframe disetting sedemikian rupa, barulah kode iframe siap untuk disematkan ke website atau blog anda.
Selain ke empat (4) iframe yang di contohkan di atas, script lazy loading iframe juga bisa anda gunakan untuk iframe (kode embed) plugin lainnya seperti iframe map, posingan facebook atau juga untuk iframe comment form di blogspot.
Catatan: Class name
iframe-style tag iframe merupakan class yang saya seragamkan untuk beberapa iframe seperti yang saya contohkan di atas, jika anda ingin menyematkan iframe dengan ukuran tinggi dan lebar yang spesifik, anda dapat mengubah class name iframe-style pada tag iframe dan mengatur ulang css pada class name tersebut.
Keutamaan Script Lazy Loading Iframe
- Mempertahankan performa blog (website) anda agar tetap optimal.
- Menjaga blog anda terdampak oleh sumber daya pihak ketiga.
- Mengurangi total blocking time dan waktu eksekusi javascript.
- Responsibilitas dan fleksibilitas tinggi.
- Support di banyak jenis browser.
- Mudah digunakan karena script lazy loading iframe ini merupakan satu untuk semua iframe (multi fungsi).
Jika kamu menemukan kelebihan yang lain dari script lazy loading iframe ini, harap segera beri tahu admin melalui telegram blog cordialblogger (lihat di sidebar). Selamat mencoba dan sampai jumpa kembali di cordialblogger.com, semoga berhasil.