Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Menunda Pemuatan Iframe Untuk Optimasi Loading Blog

Baca juga:

Sebagaimana kita ketahui bahwa iframe adalah salah satu element blog yang menyumbangkan loading pada halaman blog. Namun kadang sebuah blog memerlukan sebuah iframe untuk menampilkan sebuah widget ataupun lainnya. Tentunya hal ini (iframe) harus kita cari solusinya agar pemuatannya tidak menghambat loading blog. Iframe biasanya digunakan untuk menampilkan widget pihak ketiga seperti chatbox, follower box, ataupun untuk menampilkan video Youtube, video Vimeo, bahkan untuk menampilkan Google Maps.

Untuk itu, kini iframe bisa diatasi dengan cara defer atau ditunda pemuatan iframe-nya sehingga tidak mengganggu loading blog. Ini sudah saya coba pada blog ini yang bisa Anda lihat pada chatbox Shoutmix dan widget Google Friend Connect di sidebar (jika saya belum merubahnya lagi hehehe....).

Sebenarnya defer iframe ini sama dengan defer image dan javascript-nya seperti di bawah ini.


<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

Silahkan simpan kode javascript tadi di atas kode </body>. Namun jika Anda sudah menggunakan hosting javascript untuk defer js, Anda cukup menambahkan kode di bawah ini di hosting javascript blog Anda.


var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} }

Dan untuk menampilkan iframe-nya seperti di bawah ini:

Umumnya kode html iframe seperti di bawah ini, saya contohkan dengan iframe dari video Youtube.


<iframe width="560" height="315" src="https://www.youtube.com/embed/jlQVAlmXqoE" frameborder="0" allowfullscreen></iframe>

Setelah Anda memasang javascript defer iframe di atas, maka untuk pemasangan iframe tinggal merubah kode src="" menjadi data-src="" sehingga kode html iframe di atas menjadi seperti di bawah ini.


<iframe width="560" height="315" data-src="https://www.youtube.com/embed/jlQVAlmXqoE" frameborder="0" allowfullscreen></iframe>

Dan untuk meyakinkan, saya pasangkan iframe video Youtube di atas di halaman ini di bawah ini dan silahkan coba rasakan loading halaman ini.


Source kode: https://varvy.com/pagespeed/defer-videos.html

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar