apa-itu-lazy-loading

Tahukah Anda bahwa 47% pengguna berharap kalau halaman dimuat dalam 2 detik atau kurang? Kecepatan halaman sangat penting dalam dunia marketing digital saat ini karena sejumlah alasan. Yuk ketahui lebih detail tentang Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO

Pengguna yang tidak dapat membuka situs Anda atau yang merasa frustasi dengan prosesnya, memiliki kemungkinan besar untuk meninggalkan brand Anda atau postingan blog Anda dan mencari di situs lain.

Bagi kebanyakan orang, jumlah waktu yang dibutuhkan untuk sampai ke situs Anda adalah pengalaman pertama mereka dengan brand Anda. Membebani mereka dengan kecepatan halaman yang lambat merupakan cara yang pasti untuk memulai hubungan dengan langkah yang salah. Anda bahkan berisiko menonaktifkan pengguna berulang (repeat users) dan pelanggan agar tidak berkonversi lagi.

Di situlah lazy loading berperan. Lazy loading adalah salah satu dari sejumlah pengoptimalan kecepatan halaman penting yang dapat Anda lakukan untuk meningkatkan kinerja dan memberi diri Anda peluang terbaik untuk mengkonversi pengguna baru.

Apa Itu Lazy Loading?

Lazy loading, singkatnya adalah memungkinkan Anda untuk menunda pemuatan elemen halaman yang lambat hingga halaman Anda selesai dirender. Ini adalah cara untuk memastikan pengguna masuk ke situs Anda (dan tidak terpental atau bounce) sebelum melakukan suatu aktivitas berat untuk memuat beberapa yang lebih besar, non-critical, below-the-fold elements di webpage Anda.

Idenya di sini adalah untuk mempersingkat panjang dari jalur rendering penting (critical rendering path) atau lamanya waktu yang dibutuhkan pengguna untuk mencapai laman Largest Contentful Paint (LCP). Largest Contentful Paint adalah cara yang bagus untuk menyampaikan load speed. Ini juga cara yang penting untuk mengatakan karena mewakili pemahaman Google tentang load speed.

Largest Contentful Pain menandai titik di timeline pemuatan halaman saat konten utama halaman kemungkinan besar telah dimuat. LCP selalu menjadi elemen penting dalam page speed dan pengalaman pengguna. 

apa-itu-lazy-loading-1

Anda dapat menganggap Core Web Vitals yang diperkenalkan Google pada Mei 2020 sebagai persyaratan dasar untuk site’s technical health, suatu indikator yang digunakan Google untuk mengevaluasi UX (user experience) suatu halaman.

apa-itu-lazy-loading-2

Kecepatan, untuk beberapa waktu telah menjadi faktor peringkat Google yang penting tetapi perilisan dari Core Web Vitals dan pre-announcement Page Experience Update menunjukkan pergeseran penting dalam roll page speed akan berperan dalam mendapatkan traffic organik di masa mendatang.

Dua komponen terakhir dari Core Web Vitals, yakni First Input Delay (FID) dan Cumulative Layout Shift (CLS), berkaitan dengan cara pengguna berinteraksi dengan halaman setelah mereka membukanya. Untuk tujuan kita di sini, ini adalah komponen pertama, Largest Contentful Paint, yang mana lazy loading benar-benar berdampak. 

Bagaimana Cara Mengetahui Apakah Situs Anda Membutuhkan Lazy Loading

Situs Anda lambat bukan berarti Anda harus menerapkan lazy loading. Pendekatan yang lebih baik untuk pengoptimalan kecepatan halaman adalah dengan menjalankan situs Anda melalui alat performa kecepatan halaman, seperti PageSpeed ​​Insights atau GTmetrix.

apa-itu-lazy-loading-3

Di sana Anda akan mendapatkan sejumlah rekomendasi yang mungkin atau mungkin tidak membutuhkan penerapan lazy loading untuk gambar tetapi pasti akan menyertakan elemen lain dari pengoptimalan kecepatan halaman seperti:

  • Mengaktifkan kompresi Gzip
  • Meminimalkan JavaScript, CSS, dan HTML
  • Mengurangi pengalihan (redirects)
  • Menghapus JavaScript yang memblokir render
  • Memanfaatkan cache browser
  • Meningkatkan waktu respons server
  • Menggunakan content distribution network (CDN)
  • Mengoptimalkan gambar dan video

Idenya di sini adalah untuk memprioritaskan item yang memberi situs Anda peluang terbaik untuk meningkatkan kecepatan halaman atau keuntungan terbesar secara keseluruhan. Jika Anda kebetulan melihat rekomendasi “defer offscreen images“, di situlah lazy loading untuk gambar ikut berperan.

apa-itu-lazy-loading-4

Anda juga dapat menggunakan laporan Core Web Vitals baru di Search Console untuk mendapatkan gambaran menyeluruh tentang halaman mana di situs Anda yang memiliki masalah LCP.

apa-itu-lazy-loading-5

Google mendefinisikan LCP yang “baik” dalam waktu empat detik atau lebih pendek:

apa-itu-lazy-loading-6

Sekali lagi, hanya karena LCP halaman tertentu lebih lama dari 4 detik, bukan berarti Anda perlu menerapkan lazy loading. Namun laporan ini dapat mengarahkan Anda ke tempat-tempat di situs Anda yang kinerjanya sangat lambat. Dari sana, dengan menggunakan beberapa alat kecepatan yang baru saja kita diskusikan, Anda dapat menjalankan diagnostik pada individual page dan melihat apakah “menunda gambar di luar layar” (deferring offscreen images) menandakan perlunya lazy loading.

Cara Menerapkan Lazy Loading

Jika Anda mencoba menerapkan lazy loading sendiri, berikut tips pertama kami: jangan lakukan! Pengecualian di sini adalah jika Anda adalah pengembang yang berpengalaman. Atau, jika Anda seorang pengembang amatir yang memiliki kemampuan untuk menerapkan lazy loading di staging site dan uji terpisah atas skor kecepatan baru Anda terhadap live site Anda. 

Untuk pengguna WordPress, ada sejumlah plugin praktis yang membantu implementasi lazy loading, yang paling menonjol di antaranya adalah Lazy Load dan Smush. Smush secara khusus adalah solusi pengoptimalan gambar all-in-one yang memberi Anda kompresi gambar, lazy loading, dan konversi gambar berikutnya, yang semuanya penting untuk image SEO.

apa-itu-lazy-loading-7

Bergantung pada content management system (CMS) Anda (WordPress, Shopify, Bigcommerce, Webflow), lazy loading mungkin tidak semudah menerapkan plugin. Shopify misalnya, merekomendasikan implementasi lazy loadingnya sendiri,  sedangkan Bigcommerce memiliki plugin pihak ketiga sendiri yang mendukung lazy loading pada tema umum, seperti Stencil dan Blueprint.

Setelah membaca terkait apa itu lazy loading, apakah kalian mendapatkan insight? Komen yuk di kolom komentar 🙂

Bagi Anda yang masih bingung bagaimana cara membuat website, tenang saja. Kami punya solusinya. Anda bisa langsung cek ke Jetorbit guna memenuhi kebutuhan pembuatan website Anda. Selain itu, kami juga menyediakan VPS dan bisa Anda cek di sini.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rata rata rating 5 / 5. Jumlah rate 2

Yuk Rate 5 Artikel Ini!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Bagikan:

Leave a Comment