Cara mudah membuat loading gambar tidak lemot menggunakan Defer Images

Loading Gambar Tidak Lemot Menggunakan Defer Images - Mungkin hampir semua blogger kesal dengan gambar yang lemot, yang mengurangi kecepata...

Loading Gambar Tidak Lemot Menggunakan Defer Images - Mungkin hampir semua blogger kesal dengan gambar yang lemot, yang mengurangi kecepatan blog. Karena dengan blog yang lemot pengunjung akan berkurang. Penghasilan blog kamu pun akan berkurang gara-gara hal itu. jadi saya akan berikan solusi denggan gambar yang lemot dan menjadi cepat.

Dengan menggunakan defer images Gambar yang ditangguhkan akan didownload setelah pemuatan halaman awal. Gambar yang pada awalnya tidak terlihat pada halaman dapat ditangguhkan sehingga memungkinkan apa yang terlihat dimuat dengan lebih cepat.

Deferring Images untuk halaman yang lebih cepat

Artikel ini akan menjelaskan cara sederhana untuk Defer Images tanpa loading jQuery atau lazy load.Salah satu alasan utama mengapa halaman memuat dengan perlahan adalah gambar. Tidak ada pengguna internet dimanapun yang belum melihat gambar, perlahan loading dari atas ke bawah.

Bahkan saat pengguna mengamati gambar yang loading secara perlahan, seringkali ada beberapa gambar di bawah halaman yang tidak terlihat oleh pengguna itu, dan semuanya juga dimuat.

Semua gambar ini bersaing untuk bandwidth yang sama dengan sumber halaman Anda seperti css dan javascript. Ini berarti gambar menghalangi penggunaan bagian web Anda yang awalnya terlihat kepada pengguna secepat mungkin.

Lazy Loading Sering Di Gunakan Untuk Mempercepat Gambar Tapi Kurang efectif

Cara utama pengembang dan webmaster telah memecahkan masalah ini adalah melalui sebuah metode yang disebut Lazy Loading

Gambar Lazy Loading adalah solusi dimana pengguna menggulir ke bawah halaman, gambar dimuat sesuai kebutuhan. Ada banyak hal indah tentang pemuatan Lazy dan saya sering menggunakannya, namun memiliki beberapa masalah ...
- Pemuatan malas dapat menyebabkan masalah kinerja.
- Lazyloading tidak memberikan solusi yang layak untuk beberapa halaman web.
- Pembebanan malas tidak ideal untuk kinerja seluler.

Mari kita bahas Kegunaan Deferring Images

Saat halaman web diterjemahkan ke dalam browser, browser akan mencoba mendownload semua gambar yang dapat ditemukannya di halaman. Jika ada dua gambar di halaman tersebut, maka akan mendownload dua gambar. Jika ada seratus gambar di halaman itu akan mendownload semua seratus.

Ini adalah perilaku browser default. Ini harus meminta dan mendownload semua gambar.
Satu-satunya cara yang andal untuk ini (untuk semua browser) adalah dengan mengelabui browser agar berpikir bahwa gambar itu tidak ada.

Cara yang dilakukan di Lazy Loading dan di tempat lain adalah dengan memberikan gambar bawaan yang kecil di html kita, lalu ubah gambar default itu via javascript ke gambar sebenarnya yang ingin kita tampilkan.

Ketika halaman awalnya dimuat, browser akan mendapatkan "gambar palsu" satu kali dan kemudian itu merupakan satu-satunya gambar yang dilihat browser, jadi apakah Anda memiliki satu gambar atau seratus, itu tidak masalah karena browser sudah didownload Gambar palsu

Script gambar ditandai seperti ...

<img src="fake.png" data-src="real-image.png"/>

Ketika halaman awalnya dimuat, browser akan mendapatkan "gambar palsu" satu kali dan kemudian itu merupakan satu-satunya gambar yang dilihat browser, jadi apakah Anda memiliki satu gambar atau seratus, itu tidak masalah karena browser sudah didownload Gambar palsu

Kemudian melalui javascript kita menukar gambar palsu dengan yang asli.
Bila browser melihat bahwa ada gambar baru di html, sekarang akan mendownloadnya.

Langkah yang relatif sederhana ini bisa memberikan hasil yang menakjubkan. Saya baru saja membuat halaman yang membutuhkan waktu delapan detik untuk memuat turun kurang dari satu detik hanya dengan menggunakan metode ini (kami akan menjelaskan metode ini secara keseluruhan di bawah ini dengan kode contoh)

Memahami pemuatan halaman Dengan Cara Defer Images

Untuk memahami bagaimana, kapan dan metode Defer Images yang digunakan, kita perlu memahami bagaimana sebuah halaman dimuat. Ini adalah pengetahuan yang baik untuk dimiliki dan hanya perlu satu atau dua menit untuk membaca.

Sebelum Di Defer

Gambar di atas menunjukkan pemuatan halaman web kecil. Halaman ini memiliki gambar utama, beberapa gambar lainnya, file css dan file javascript.

Di halaman yang agak khas ini, setiap sumber daya tunggal bersaing untuk diunduh pada saat bersamaan.

Yang benar adalah, satu-satunya hal yang perlu diunduh adalah barang-barang di atas garis putus-putus. Ini adalah "paro atas" atau bagian yang semula terlihat dari halaman.

Artinya bagi pengguna untuk melihat konten lipatan diatas, kita hanya butuh html, css, javascript, dan gambar utamanya.

Mari kita lihat bagaimana kita bisa membuat halaman ini dimuat dua kali (atau lebih) lebih cepat dari sekarang. Kita harus...

- Hanya muat gambar utama

- Defer sisa gambar

 Begitu kita melakukan itu, kita melihat bahwa peristiwa pageload dapat terjadi pada bagian beban yang jauh lebih awal.

Sesudah Di Defer

Sekarang kita baru saja memotong halaman yang memuat 12 item sebelum halaman dimuat ke halaman yang hanya memuat empat hal sebelum pageload event.

Ini berarti iklan adsense saya dapat muncul lebih cepat, pengguna saya dapat membeli barang dengan lebih cepat, dan Google menganggap saya hebat.

Mari kita menjadi nyata Anda tahu dan saya tahu bahwa halaman Anda memiliki puluhan dan puluhan gambar, tidak sedikit yang terwakili di sini. Jangan salah, metode ini bisa membuat halaman Anda lebih cepat.

Langkah-langkah menggunakan Defer Images 

Untuk melakukan ini kita perlu menandai gambar kita dan menambahkan javascript kecil dan sangat sederhana. Saya akan menunjukkan metode yang sebenarnya saya gunakan untuk situs ini dan lainnya. Ini menggunakan gambar dasar 64, tapi jangan biarkan hal itu membuat Anda takut.

Html yang di gunakan :

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="Url Gambar Mu disini">

Javascript Yang di gunakan

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

Untuk javascript nya kamu bisa meletakannya tepat sebelum tag body akhir di html Anda.

Terima kasih sudah membaca artikel berjudul : Loading Gambar Tidak Lemot Menggunakan Defer Images semoga artikel saya bisa bermanfaat..