Deferring Images That Have Been Published

Seperti kita ketahui bahwa image merupakan salah satu faktor yang menjadikan beban pada loading blog. Untuk itu kita harus benar-benar mengoptimasi gambar supaya tidak terlalu membebani blog.

Dan trik yang paling umum dan banyak dipakai untuk mengatasi loading image ini salah satunya yaitu jquery lazy loading. Nah kali ini saya akan share sebuah trik untuk mengatasi loading image ini tanpa memakai plugin lazy loading, namun memakai sebuah javascript sederhana. Prinsipnya sama dengan plugin lazy loading, namun tanpa menyertakan perhitungan posisi scroll.

Javascript ini hanya untuk defer image atau menunda pemuatan gambar dan menampilkannya sehabis semua element web termuat. Trik ini saya temukan di web Feedthebot milik +Patrick Sexton. Untuk selengkapnya mengenai hal ini silahkan baca postingannya di url di bawah ini.

Source: http://www.feedthebot.com/pagespeed/defer-images.html

Namun pada postingan Feedthebot tersebut tidak menjelaskan cara mengatasi atau cara memakai trik tersebut untuk gambar-gambar yang sudah dipublish. Jika postingan blognya gres beberapa postingan sih mungkin tidak menjadi persoalan alasannya kita sanggup mengedit postingannya satu per satu. Namun bagaimana kalau postingannya sudah ratusan? 

Nah kali ini saya akan melengkapi trik dari Feedthebot untuk deferring image tersebut untuk image yang sudah dipublish secara otomatis tanpa harus mengeditnya satu per satu.

Untuk hal tersebut tentunya kita memerlukan dukungan jquery, akhirnya!. Namun jangan khawatir, jquery ini kecil sekali.

Sebagaimana dijelaskan di Feedthebot, trik ini sebetulnya memanipulasi peramban dengan memakai image tipuan berupa sebuah titik transparan kecil 1px x 1px dengan size hanya 26 bytes untuk ditampilkan sebelum semua element blog termuat. Dan kalau semua element sudah berhasil dimuat maka image sesungguhnya akan ditampilkan.

Biasanya sebuah html image akan ibarat berikut:

 <img src="your-image-here">

Dan untuk memakai trik defer image ini kita akan menciptakan tipuan html image dan kita memakai html image ibarat berikut:

 <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

Perhatikan instruksi berikut dari instruksi di atas:

 src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

Itu yaitu image tipuan untuk ditampilan peramban sebelum semua element blog termuat. Dan javascript untuk menampilkan image sesungguhnya sehabis semua element termuat ibarat berikut ini, silahkan simpan di atas instruksi </body>

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

Lantas bagaimana kalau kita ingin mengimplementasikan trik ini pada image yang sudah ada di blog?

Untuk mengimplementasikan trik di atas untuk semua image yang ada di blog, kita tidak perlu mengedit image satu per satu. Kita akan menambahkan image tipuan pada image yang sudah ada dan mengganti src pada image orisinil menjadi data-src supaya javascript defer image-nya sanggup berfungsi. Kita akan memakai sebuah jquery yang kecil sekali untuk melaksanakan hal tersebut.

Silahkan gunakan script di bawah ini yang sudah saya gabungkan antara jquery untuk menambahkan image tipuan pada image yang sudah ada dan mengganti src pada image orisinil menjadi data-src dengan javascript defer image. 

 <script type='text/javascript'>
 //<![CDATA[
 $("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
 function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
 //]]>
 </script>

Anda hanya perlu memakai script di atas (kodenya sudah saya minify) dan simpan di atas instruksi </body> dan Anda tidak perlu melaksanakan apa-apa lagi dan lakukan hal ibarat biasa saat mengupload atau menampilkan image gres di blog.

Script di atas akan otomatis menambahkan image tipuan pada semua image yang sudah ada dan mengganti src pada image orisinil menjadi data-src dan menampilkan kembali image aslinya sehabis semua element blog termuat.

Dan ibarat yang dijelaskan di Feedthebot, dengan memakai trik ini maka iklan Adsense sanggup tampil lebih cepat sehingga lebih menguntungkan untuk publisher Adsense alasannya pengunjung blog sanggup melihat iklannya lebih cepat terutama untuk iklan yang dipasang di header, di atas postingan, atau di sidebar paling atas.

Sumber https://www.kompiajaib.com/

Share this post