Cara Gambar & Avatar Komentar Supaya Lazy Loading Otomatis

Lazy loading image / avatar atau gambar komentator wordpress bisa sangat mempengaruhi kecepatan loading blog Anda. Karena berdasarkan data yang dikumpulkan chrome dan browser lain, gambarlah penyebab loading website lambat. Gambar merupakan resource yang paling banyak digunakan, lebih lama dirender, serta mau tidak mau dibutuhkan untuk keperluan deskripsi suatu halaman. Tentu halaman akan nampak membosankan jika melulu teks tanpa diperindah gambar yang deskriptif.
Belum lagi gambar avatar, yaitu gambar komentator default wordpress. Meskipun ukurannya kecil, tapi tetap saja membuat loading blog lambat karena jumlah http request yang banyak. Apalagi jika halaman tersebut mengandung banyak sekali komentar dan tidak dibatasi jumlahnya. Untuk mengatasi lazy load memang sudah umum bisa menggunakan script lazy load seperti lazysizes.js atau plugin lazy load wordpress. Tapi pengalaman saya sendiri rata-rata plugin justru malah membuat gambar blog tidak diindex dan tampil di google.

Kebanyakan plugin lazy load image menggunakan kode … img data-src=”…” ketimbang img src=”…” untuk menampilkan gambar. Cara ini ada efek buruknya. karena penggunaan kode seperti itu membuat gambar tidak dihitung dalam sitemap (yoast seo). Dan juga sangat beresiko tidak diindex google hingga tidak muncul pada halaman SERPs. Maka dari itu saya lebih suka alternatif lazy load untuk gambar yang lebih sederhana, tanpa plugin dan mudah diterapkan.

Loading =”lazy” Alternatif Lazy Load Gambar / Iframe

Baru-baru ini para developer browser sudah menggodok tambahan atribut “loading” untuk gambar dan iframe. Tujuannya jelas supaya browser mampu membaca atribut tersebut, lalu menerapkan kapan image atau gambar akan ditampilkan sesuai nilai loading tersebut. Loading sendiri memiliki 3 nilai yaitu:

• auto: browser yang akan menentukan secara otomatis gambar ditampilkan lazy load atau tidak
• eager: gambar langsung ditampilkan, alias ga pake lazy load
• lazy: gambar akan ditampilkan belakangan / lazy load setelah halaman dirender atau ketika scroll ke bagian gambar.

Jadi untuk ke depannya untuk memuat gambar dengan lazy load cukup menggunakan kode berikut:

<img src="URL_ke_gambar.jpg" loading="lazy" width="300" height="150" />

Begitu pula untuk lazy load iframe atau embed video, selengkapnya sudah saya tulis pada Mengatasi Video Youtube Terpotong pada tampilan mobile.
Cara lazy loading image / iframe ini lebih murah, tanpa javascript dan tanpa plugin sekalipun dan tidak ada lagi warning defer offscreen image. Satu satunya kendala adalah atribut loading=”lazy” ini belum digunakan sebagai standar pada seluruh browser. Pada Chrome sendiri sudah bisa diterapkan sejak Chrome versi 75. Namun ke depannya saya yakin atribut ini akan digunakan pada seluruh browser. Dan saat inipun sebenarnya browser populer seperti Firefox, Opera, Safari sudah hampir mendukung atribut ini, dengan catatan versi terbarunya ya. Selengkapnya bisa dilihat daftar browser yang sudah mendukung atribut loading di sini.

Lazy Load Image & Avatar Otomatis tanpa Plugin

Dengan menggunakan atribut loading di atas Anda bisa membuat avatar gambar komentar secara lazyload. Tapi bagaimana caranya? Sebab tidak mungkin mengubah url gambar avatar satu persatu. Caranya gampang saja, dengan menggunakan kode ini:

<?php
function lazy_loading_untuk_gambar_avatar( $avatar ) {
// blog.finderonly.net tambah lazy load image avatar
$avatar = str_replace( '<img ', '<img loading="lazy" ', $avatar );
return $avatar;
}
add_filter( 'get_avatar', 'lazy_loading_untuk_gambar_avatar' );
?>

Dari dashboard admin bisa masuk ke Tampilan / Appearance -> Theme Editor, lalu cari Theme Functions atau functions.php. Lalu tambahkan kode di atas pada baris terakhir, dan jangan lupa save. Maka dengan otomatis semua gambar avatar sudah ditambahkan atribut loading=”lazy”. Hasilnya akan nampak seperti pada gambar di atas, atau Anda bisa view-source kodenya langsung. Lalu bagaimana cara menambah atribut loading=”lazy” pada gambar dalam postingan? Untuk artikel baru Anda bisa menambahkan secara manual atribut loading=”lazy” pada setiap gambar. Ubah mode Visual editor ke Code Editor. Atau lebih mudah lagi menggunakan plugin Search & Replace. Silahkan instal pluginnya, masuk ke tab “Search & Replace”. Pada kolom Search for, isi dengan “<img”. Pada kolom Replace with, isi dengan <img loading=”lazy”. Jangan lupa select table “POST” pada database Anda. Maka otomatis semua image akan ditambakan atribut loading=”lazy”. Selamat mencoba…