Defer Gambar Agar Loading Blog Cepat – Bukan Lazy Load

Cara defer gambar agar loading blog cepat!? – Gambar merupakan konten yang akan semakin memperkaya pada halaman website kita. Namun ukuran meta data gambar yang besar dapat mempengaruhi kecepatan pemuatan halaman pada saat browser pengguna sedang melakukan render.

Untuk mengatasi masalah ukuran gambar yang besar biasanya dilakukan dengan teknik Lazy Load atau memuat gambar secara malas dan bertahap ketika halaman di gulir kebawah. Melakukan defer gambar dengan cara lazy loading atau jQuery, menurut saya pribadi kurang efektif. Kenapa saya bisa mengatakan kurang efektif?, karena besaran meta data gambar tetap terbaca oleh bot dan browser.

Cara Defer Gambar Agar Loading Blog Cepat

 

Inilah yang membuat kecepatan loading halaman kurang maksimal karena saat proses perenderan halaman kita, request yang dilakukan browser atau bot akan dilayanai oleh server secara utuh. Penghitungan metrik dari seluruh file dari halaman blog atau website kita termasuk file gambar sangat berpengaruh bagi kecepatan loading. Yang pada akhirnya kurang bersahabat dengan perangkat mobile.





Masalah umum pada loading gambar

Banyak pemilik website dan web developer telah mengatasi permasalah keceepatan loading halaman yang berhubungan dengan gambar ini menggunakan cara ataupun teknik yang sering disebut lazy loading dengan jQuery.

Lazy loading atau memuat gambar dengan teknik MALAS menggunakan jQuery adalah bekerja saat pengguna menggulir halaman ke bawah. Gambar yang dimuat atau loading hanya yang diperlukan oleh tampilan pada browser.

Mungkin penggunaan teknik Lazy loading dengan JQuery memiliki efek bagus ketika diterapkan pada halaman website/blog yang kita kelola. Akan tetapi, menurut uji coba yang telah saya lakukan, teknik gambar Lazy loading memiliki beberapa masalah antar lain:

  • Gambar Lazy loading dengan jQuery dapat mempengaruhi performa website.
  • Lazy loading bukan solusi terbaik untuk mengatasi masalah kecepatan muat halaman.
  • Teknik Lazy loading tidak ideal untuk performa blog/website kita pada perangkat seluler/mobile.

Cara Defer Gambar Agar Loading Blog Cepat Tanpa jQuery

Menunda atau cara defer gambar tanpa menggunakan jQuery, menurut pengalaman saya pribadi jauh lebih sederhana dan efektif jika dibandingkan dengan teknik Lazy loading jquery yang rumit dan kurang efektif. Cara menunda pemuatan gambar yang telah saya terapkan pada blog ideatoz.com ini lebih efektif mengatasi masalah kecepatan loading halaman.

Baca juga: Cara mempercepat loading blog WordPress

Sebelum mengulas lebih panjang lebar tentang cara defer gambar agar loading blog lebih cepat tanpa jQuery. Mari kita bahas fungsi dan cara kerja dari teknik defer yang telah saya terapkan untuk blog ini.

fungsi dan cara kerja sebagai berikut

  • Gambar dimuat saat ada reaksi gulir dari pengguna.
  • Ukuran data terbaca browser lebih kecil karena kita menggunakan gambar palsu.
  • Meminimalisir request.

Cara kerja defer gambar tanpa Jquery

Menunda pemuatan gambar tanpa Jquery ini berfungsi dengan baik pada semua browser, adapun cara kerja defer gambar yang sederhana ini kita menggunakan teknik kamuflase gambar.  Yaitu kita menerapkan gambar palsu sebelum gambar asli. Yang mana gambar palsu memiliki nilai request 0 (enol) teknik ini dapat mengurangi ukuran besar data pada halaman website atau blog saat terbaca bot atau browser pengguna.

Baca juga: Cara defer video agar loading blog cepat

Jadi, pada saat browser sedang render halaman kita, yang terbaca adalah gambar pertama  (gambar palsu), artinya bot akan membaca nilai gambar tersebut adalah dengan nilai enol. Inilah yang menjadi sebab kenapa loading blog ideatoz.com bisa lebih cepat!

Ilustrasi teknik defer gambar menggunakan gambar kamuflase yang terlebih dahulu kita konvert menggunakan PNG base64, ilustrasinya adalah sebagai berikut:

src="gambar palsu/kamuflase" data-src="gambar asli"

Contoh penerapan pada HTML gambar palsu sebelum gambar asli seperti berikut ini:

<img src="data:image/png;base64,R0lGODlhAAAAAAD/ACwAAAAAAQABAAACABs=" data-src="Link-Gambar asli-milik-Anda">

contoh diatas adalah menggunakan gambar kamuflase /palsu yang telah diconvert sebelumnya menggunakan PNG base64 dengan nilai request 0 enol.

Untuk menunda atau defer pemuatan gambar asli diperlukan skrip/javascript yang telah saya dapat dari varvy.com dan harus diletakkan pada baris sebelum body tutup. Skripnya sebagai berikut:

<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>

Contoh penempatan Skrip defer gambar, untuk pengguna blog wordpress silakan cari pada bagian footer.php

<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>
</body>
</html>

Cara penggunaan skrip defer atau menunda pemuatan gambar ini sangat cocok digunakan untuk badge (Copyscape, DMCA,dll), link sponsor dengan gambar, tombol berbagi dan gambar-gambar lainnya. Untuk defer gambar pada posting ada skrip lain, jadi silakan tunggu update berikutnya.

Demikian sedikit info tentang cara defer gambar agar loading blog cepat, semoga bermanfaat. Jika anda memiliki ide lain silakan berbagi pada kolom komentar.

 





Mohammad Aziz Ditulis Oleh

5 Komentar

  1. Fery ferlangga mengatakan:

    script di atas untuk blogger kok ada yang error ya mas , tetapi pas saya parse script nya bisa . apakah script tersebut masih bekerja kalau di parse thanks

    1. Mohammad Aziz mengatakan:

      Sebenarnya gak usah di parse mas, untuk blogger tetap bekerja script di atas saya sudah test untuk blogspot juga. Tinggal nambahkan kode seperti berikut:

      //<![CDATA[
      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;
      //]]>
      
  2. Ipan N mengatakan:

    gan saya pakek template blog buatan agan yang super speed tapi kenapa header nya ada di sebelah kanan ya?

    1. Mohammad Aziz mengatakan:

      Header bisa di edit via CSS om, tambahkan aja margin atau float. Soalnya template itu sepenuhnya belum sempurna. Jadi coba diutak atik nambahin Margin atau float. Ukuran banner width/lebar 890px tinggi bisa menyesuaikan (auto) untuk template tersebut. Jadi fungsinya bisa untuk ADS. Jika memungkinkan silakan beritau Urlnya agar saya bisa bantu. Tanpa melihat saya tidak tau permasalahannya ada dimana??.

    2. Mohammad Aziz mengatakan:

      Maaf gan , ternyata udah ente cantumkan, klo masalah itu sudah umum gan, soalnya pake template custom, untuk mengatasi masalah tersebut, silakan hapus widget header1, sama Navbar1 bawaan blogger. Edit html temukan kode

      <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' visible='true'>
      <b:widget id='header1' locked='true' title='header' type='header' visible='true'>
      

      ganti locked=’true’ menjadi locked=’false’ agar mudah menghapus melalui widget. atau klo agan tidak ragu biasa langsung hapus dari edit HTML template, cari kode seperti di atas hingga </b:widget> sesuai dengan widget yang akan dihapus. Jika tidak dihapus akan terdapat duplikasi Heading h1. juga tampilan kurang menarik

Buat Komentar Anda