Ditulis oleh: Ditulis pada: 1/28/2016
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