Cara Preload Gambar Pada Postingan Dengan rel=”preload” 100% Work!

  • 2 menit durasi baca
  • 03 Apr, 2020
cara membuat preload gambar di blog

Mengalami skor pagespeed insight yang buruk gegara menyematkan gambar ke dalam postingan?
Ya, pengalaman serupa pun dulu pernah saya alami di salah satu blog dengab niche keyword yang mengharuskan saya banyak memasukan gambar didalam postingan. Akibatnya tidak hanya mendapat skor merak di tool cek kecepatan halaman saja namun juga real akses juga terasa loading lambat.

Untuk mengatasinya dulu saya banya mencari referensi bacaan berisi panduan mengatasi loading blog yang berat akibat ukurang gambar yang besar. Karena kebetulan saya pengguna cms wordpress self hosted, singkat cerita permasalahan ini mudah saja diatasi dengan cara install plugin lazy image. Atau jika tidak mau pakai plugin mengingat plugin juga menambah beban load server hosting, kita bisa membuat lazy load secara manual dengan script php yang juga tidak kalah mudah untuk melakukannya.
Tetapi untuk sekarang saya lebih memilih cara yang lebih simpel lagi yakni dengan cara tag html atribut preload image. Tidak perlu repot otak atik code php apalagi harus install plugin yang hanya akan menimbulkan permasalahan baru di urusan load server web hosting saya yang disk kecil ini belum lagi menurut jurnal seo yang saya baca dari para pakar optimasi mesin pencari ‘bule’, lazy-lazyan apapun bentuknya entah javascript, main css, itu bisa berdampak pada mengganggu perenderan googlebot ujungnya berimbas pada ke SEO blog kita.

Cara inipun saya rekomendasikan untuk kalian pemilik web untuk mencobanya khususnya bagi yang kapasitas hostingnya kecil tidak ingin menambah alat apapun lagi hanya untuk urusan gambar. Cara ini juga bisa diterapkan di platform blogger atau cms/framework apapun, code atribut printah preload dapat dikenali oleh hampir semua jenis browser modern termasuk google chrome, mozilla firefox dll.
Bagaimana caranya? Berikut:

Cukup kita ubah penulisan html insert gambar di post dari biasanya <img src=”URL_GAMBAR” alt=”judul gambar” width=”nilai” height=”nilai” /> menjadi dengan preload seperti ini <img rel=”preload” as=”image” src=”URL_GAMBAR” alt=”judul gambar” width=”nilai” height=”nilai” /> itu saja!

Mudah, simpel dan tidak butuh ribet-ribetan menjalankan lazy loading gambar !! Tapi Apakah 100% cara ini work?
Untuk membuktikan apakah atribut preloading ini berfungsi apa tidaknya di website kamu, pembuktianya sebelum pasang cek dulu berapa skor halaman postingan di pagespeed, perhatikan warna kuning/merah yang memberitahukan problem gambar blokir perenderan (Tayangkan gambar dalam format generasi berikutnya) lalu bandingkan dengan setelah memberi preloader, apakah ada perubahan skor?
Sebenarnya ini bisa ditambah css agar kelihatan anu-anuannya, namun sebaiknya tak usah banyak macem-macem karena dengan ini saja semua beres dan kita bisa mulai fokus membuat dan mengisi konten, itu yang terpenting bagi seorang blogger!

Selamat mencoba, semoga bermanfaat.
Salam…