Menunda Pemuatan Iframe Untuk Meningkatkan Secara Optimal Loading Blog

Sebagaimana kita ketahui bahwa iframe ialah 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 semoga pemuatannya tidak menghambat loading blog. Iframe biasanya dipakai untuk menampilkan widget pihak ketiga menyerupai chatbox, follower box, ataupun untuk menampilkan video Youtube, video Vimeo, bahkan untuk menampilkan Google Maps.

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

Sebenarnya defer iframe ini sama dengan defer image dan javascript-nya menyerupai 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 isyarat javascript tadi di atas isyarat </body>. Namun jikalau Anda sudah memakai hosting javascript untuk defer js, Anda cukup menambahkan isyarat 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 menyerupai di bawah ini:

Umumnya isyarat html iframe menyerupai di bawah ini, aku 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 isyarat src="" menjadi data-src="" sehingga isyarat html iframe di atas menjadi menyerupai di bawah ini.

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

Dan untuk meyakinkan, aku 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


Sumber https://www.kompiajaib.com/

Share this post