Menunda Pemuatan Iframe Untuk Optimasi Loading Blog

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, video 4Shared, 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:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments