HOTLINE

(0275) 2974 127

CHAT WA 24/7
0859-60000-390 (Sales)
0852-8969-9009 (Support)
Blog

Cara Mempercepat Loading Gambar Pada Website WordPress dengan Lazy Load

Lazy Loading adalah teknik optimasi gambar yang yang bekerja dengan cara menunda (delay) gambar sampai munncul di layar pembaca, dengan artian setelah konten bagian atas sepenuhnya sudah dimuat, maka gambar tidak akan dimuat. Jika pengguna tidak melakukan scroll sepenuhnya, maka gambar yang di bagian bawah halaman tidak akan dimuat. Jadi, Browser tidak akan memuat gambar jika pengguna tidak melakukan scroll ke gambar.

Lazy Loading bekerja hanya memuat gambar jika pengguna menggulir ke lokasi di mana gambar akan terlihat di dalam viewport. Jika tidak, maka gambar tidak akan dimuat.

Keuntungan Lazy Loading

  1. Mempercepat loading gambar
  2. Menghemat bandwidth dan Resource server, Lazy loading akan mengurangi beban server baik dari segi resource maupun bandwidth. Dengan begitu performa website akan menjadi lebih baik
  3. Pengunjung tidak perlu membuang banyak waktu hanya untuk menunggu gambar yang bahkan tidak akan mereka lihat.
  4. Meningkatkan User Experience, Dengan Lazy loading pengalaman pelanggan semakin baik. Terutama untuk mereka yang memiliki koneksi yang cukup buruk.

Plugin Lazy Loading untuk WordPress Terbaik

Menggunakan plugin lazy loading maka menerapkan fitur lazy loading semakin mudah walaupun untuk menambahkan Lazy Loading ke WordPress secara manual. Meski ada plugin khusus untuk menambahkan lazy loading di blog WordPress, fitur ini umumnya tersedia pada plugin caching, plugin kompresi gambar, dan plugin optimasi WordPress lainnya. jika memakai plugin semacam itu harus cek apakah settingan lazy load pada plugin tersebutatau tidak.

Jika tidak ada, beberapa plugin lazy load terbaik berikut ini bisa dijadikan rekomendasi plugin Lazy loading WordPress terbaik, yaitu :

1. WordPress Infinite Scroll – Ajax Load More

 WordPress Infinite Scroll – Ajax Load More digunakan untuk menerapkan lazy load pada scroll postingan, single post, page, komentar, dan elemen halaman lainnya dengan membangun shortcode custom yang diinginkan.

Dengan bantuan query berbasis Ajax, plugin ini dapat dengan mudah diintegrasikan dalam website e-commerce yang menggunakan WooCommerce dan Easy Digital.

2. WP Rocket

WP Rocket merupakan salah satu plugin All in One, plugin ini memiliki banyak fitur seperti caching, minify file, terutama pligin caching dan salah satu fitur yang dimiliki yaitu Lazy Load. Fitur lazy load digunakan pada gambar atau iframe termasuk thumbnail, konten widget, avatar, dan emoji.

Plugin ini merupakan plugin premium dan dapat menggunakan versi gratisnya dengan cara menginstall Lazy Load by WP Rocket. Plugin ini tidak menggunakan library JavaScript, Sehingga memiliki ukuran 10KB.

3. BJ Lazy Load

BJ Lazy load adalah plugin lazy load gratis terbaik yang sederhana, Plugin ini telah memiliki lebih dari 60.000 pemasangan.

BJ Lazy load untuk menerapkan lazy load pada website, Cukup dengan menginstall plugin ini dan mengaktifkannya maka fitur lazy load akan diterapkan secara otomatis. Plugin ini menggantikan semua gambar dan iframe (termasuk video YouTube dan Vimeo) di konten dengan placeholder hingga dilihat.

4. A3 Lazy Load

A3 Lazy Load adalah plugin lazy load gratis untuk menerapkan lazy load pada gambar, video, dan iframe dalam postingan, halaman, widget, thumbnail, dan avatar. Bahkan berfungsi untuk menyematkan postingan dan kompatibel dengan WooCommerce.

A3 Lazy Load mengklaim “Plugin lazy load dengan berfitur paling lengkap, Dan sangat mudah untuk mengatur plugin ini”. Plugin ini untuk memilih apakah akan memuat skripnya di header atau footer dan mengabaikan gambar atau video.

Beberapa fitur yang ada di plugin a3 lazy load antara lain :

  1. Mengaktifkan lazy load pada konten, widget, pot thumbnail, atau gravatar saja
  2. Exclude image berdasarkan class CSS atau URL tertentu
  3. Lazy load pada inframe
  4. Menambahkan lazy load pada horizontal scrolling
  5. Mengaktifkan lazy load hanya pada home page, pos, halaman, halaman kategori dll
  6. Mengatur letak script lazy load, di footer atau header
  7. Kompatibel dengan layanan Photon dari jetpack

5. Autoptimize

Autoptimes adalah salah satu plugin optimasi terbaik WordPress yang bisa dipakai untuk meningkatkan kecepatan loading blog WordPress. Fitur-fitur yang terdapat di plugin ini mulai dari mengoptimalkan CSS, Javascript, dan HTML, hingga lazy loading image.

Untuk mengaktifkan fitur ini mmasuk ke menu SETTING → AUTOPTIMIZE → IMAGES, lalu centang opsi Lazy-Load Images. Namun, di plugin ini menunya sedikit terbatas meski bisa mengatur gambar man saja yang akan diabaikan.

Sealain menu Autoptimize, plugin optimasi WordPress lain yang memiliki fitur lazy loading adalah Hummingbird, JCH Optimize, dan WP-Optimize.

6. Smush – Compress, Optimize and Lazy Load Images

Smush dari WPMUDEV  adalah salah satu plugin kompresi gambar terbaik untuk wordpress. Plugin ini bisa mengoptimalkan gambar dan membuat ukuran gambar lebih kecil. Dengan begitu gambar bisa di load lebih cepat tanpa banyak mempengaruhi kualitas gambar. Plugin ini tidak memiliki batasan berapa banyak gambar yang bisa dioptimasi, tidak seperti kebanyakan plugin optimasi gambbar yang memiliki pemakaian terbatas.

Smush juga memiliki fitur lazy loading yang diaktifkan dengan satu langkah mudah. Cukup dengan masuk menu SMUSH → DASHBOARD → LAZY LOAD, lalu klik ACTIVATE untuk mulai menambahkan lazy loading di blog WordPress.

Meski Smush masih di tahap Beta namun fiturnya berjalan dengan baik. Beberapa di antaranya adalah mengatur format gambar di load dengan lazy load, mengaktifkan lazy load di beberapa tempat saja (konten, widget, thumbnail dan gravatar), mengatur image placeholder, mengatur letak script lazy load (footer atau header).

Selain Smush plugin gambar WordPress lain yang memiliki fitur lazy loading images adalah Images Optimization & Lazy Load by Optimole, EWWW Image Optimizer dan Imagify.

Jadilah yang pertama untuk memberi nilai
Risa Y

Recent Posts

Ingin Membuat Website E-Commerce Yang Menarik? Perhatikan Tips Ini

Design website toko online tidak hanya soal estetika, tapi juga UX yang bagus secara keseluruhan.…

16 hours ago

Apa Saja Jenis Proyek yang Bisa Dikerjakan UX Designer? Yuk Simak Di Sini

Sebelum memulai karir Anda sebagai desainer UX, Anda harus membuat portofolio yang mencakup semua pengalaman…

2 days ago

Aktifkan Keep-Alive Untuk Meningkatkan Performa Website Anda

Keep-Alive memungkinkan browser pengunjung Anda mendownload semua konten (JavaScript, CSS, gambar, video, dll) melalui koneksi…

3 days ago

Baca Ini Untuk Pelajari Apa Saja Job Description Web Developer

Job description seorang web developer adalah membuat situs web menggunakan berbagai bahasa pemrograman. Tanggung jawab…

4 days ago

Rekomendasi Tools A/B Testing untuk Meningkatkan Conversion Rate

Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…

5 days ago

Ingin Menjadi UX Designer? Coba Pelajari Apa Saja Tugasnya!

UX design merupakan singkatan dari User Experience design atau desain pengalaman pengguna. Istilah ini sering…

7 days ago