Lazy Loading
Saat menggunakan platform online seperti website, kecepatan loading dan optimasi menjadi sangat penting, dengan pengguna yang semakin menuntut kecepatan dan responsivitas.
Untuk alasan ini, pola desain halaman yang dikenal sebagai lazy loading semakin penting. Tetapi apa sebenarnya lazy loading (pemuatan tertunda) itu?
Itulah yang akan kita bahas di bawah.
Apa itu Lazy Loading?
Secara khusus, lazy loading adalah teknik, sebuah pola desain pemrograman yang diterapkan pada website, di mana elemen dan sumber daya tidak dimuat sepenuhnya, melainkan dieksekusi langsung atau on-demand sesuai dengan penggunaan oleh pengguna, menghasilkan "pemuatan tertunda" dari konten.
Dengan cara ini, sumber daya dioptimalkan dan konten seperti teks, video, gambar, dan materi lainnya hanya dimuat ketika diperlukan, meningkatkan kecepatan, penggunaan memori dan pemrosesan, responsivitas, dan waktu pemuatan. Ini berbeda dengan pemuatan penuh, di mana situs atau halaman dimuat sepenuhnya, bahkan jika pengguna tidak menggunakan setiap elemen.
Keuntungan umum lazy loading
Karena tujuan utama lazy loading adalah mengoptimalkan pemuatan elemen hanya ketika digunakan, ada banyak keuntungan yang dapat dirangkum sebagai:
- Kecepatan dalam menampilkan elemen utama dari sebuah website.
- Peningkatan signifikan dalam pengalaman pengguna di situs (UX).
- Peningkatan performa pada perangkat seluler, terutama ketika mereka memiliki sumber daya koneksi jaringan terbatas; dengan Lazy Loading aktif akan memungkinkan browsing pada halaman yang, dalam kondisi cakupan buruk seperti itu, jika tidak akan tidak feasible.
- Optimasi keseluruhan dan total sumber daya seperti CPU, RAM, dan baterai pada perangkat seluler.
- Peningkatan dwell time pada halaman kita, dengan tidak memiliki masalah pemuatan, secara tidak langsung diterjemahkan ke peningkatan ranking.
- Penurunan bounce rate.
Demikian pula, pendekatan pemrograman lazy loading memiliki keuntungan dan kebaruan dari sudut pandang yang lebih teknis, seperti:
- Lazy loading sepenuhnya kompatibel dengan framework JS seperti React dan Angular, serta platform CMS seperti WordPress. Bahkan, baru-baru ini dilaporkan bahwa lazy loading untuk gambar akan disertakan secara default di WordPress versi 5.5.
- Berkat API IntersectionObserver, ia tidak menyembunyikan gambar dari mesin pencari.
- Dukungan untuk berbagai jenis konten seperti gambar dan sumber daya berkelas responsive.
- Memungkinkan gambar situs untuk diindeks, yang vital untuk SEO.
- Ini adalah sumber daya 100% SEO Friendly, karena secara langsung dan tidak langsung meningkatkan banyak poin kunci dalam SEO.
Bagaimana cara mengimplementasikan lazy loading di WordPress?
Jika kita memiliki situs di WordPress, kita harus tahu bahwa kita memiliki keuntungan besar karena ada banyak solusi untuk mengimplementasikan lazy loading di halaman kita agar dimuat jauh lebih cepat. Tangkapan layar di bawah ini menunjukkan beberapa solusi yang mungkin kita miliki di repositori plugin:
Tampilan plugin WordPress paling menonjol untuk mengimplementasikan lazy loading.
Untuk melaksanakan implementasi ini, kita memiliki beberapa opsi:
- Pilih plugin lazy loading khusus seperti "Lazy loader", "a3 lazy load"...
- Pilih plugin optimasi web seperti "WP Rocket", yang sudah memiliki opsi ini disertakan secara default bersama dengan peningkatan lainnya.
Aspek SEO terkait Lazy Loading
Kita sudah tahu misi utama dari pemuatan tertunda dan keuntungan utamanya, dan bagaimana itu mempengaruhi peningkatan performa halaman, UX, dan SEO kita.
Sekarang, penggunaan cerdas dari pemuatan tertunda harus dilakukan untuk memaksimalkannya, karena jika digunakan secara tidak tepat dapat menyebabkan efek sebaliknya.
Misalnya, lazy loading menggunakan cache untuk meningkatkan kecepatan, jadi jika terlalu banyak konten disimpan di sana, perlambatan atau kesalahan dapat terjadi jika tidak diimplementasikan dengan benar, bahkan mencegah Google mengindeks halaman dan elemen, yang dapat memiliki efek serius pada ranking situs. Beberapa tips:
- Optimalkan cache dan gunakan dengan cerdas.
- Gunakan Google Search Console untuk memverifikasi konten yang di-crawl Google di situs.
- Tambahkan teks ALT untuk membuat setiap gambar dapat diindeks oleh Google.
- Selalu manfaatkan API IntersectionObserver.
- Tambahkan atribut loading ke iframe atau konten yang disematkan dari halaman atau sumber lain, berkat fungsi Blink LazyLoad dari browser Chrome. Berlaku untuk gambar, foto, video, teks, dan konten lainnya.
Lazy loading dan UX
Saat berurusan dengan website, baik optimasi teknis maupun umum untuk menawarkan pengalaman pengguna (UX) yang baik sangat penting, sehubungan dengan waktu pemuatan, responsivitas, penggunaan sumber daya, dan perilaku umum. Jika sebuah situs tidak terlalu responsif, bounce rate-nya akan tinggi, dan jika menawarkan pengalaman pengguna yang buruk, itu akan mempengaruhi traffic, visibilitas, dan bahkan SEO-nya.
Dengan pemuatan tertunda, tujuannya adalah untuk meningkatkan UX situs secara dramatis dalam satu langkah, dengan memuat kontennya secara progresif dan ketika pengguna membutuhkannya saat mereka menggulir halaman, baik gambar atau teks, yang mengoptimalkan penggunaan sumber daya dibandingkan dengan memuat seluruh platform, mungkin menampilkan elemen yang tidak penting bagi pengguna.
Lazy loading native (HTML) di Chrome
Menunjukkan pentingnya yang diberikan Google untuk UX, sejak 2020 dan dimulai dengan versi 75 browser Chrome-nya, dimungkinkan untuk menambahkan lazy loading native ke tag halaman HTML dan konten multimedianya seperti foto, video, antara lain.
Dengan cara ini, dengan menambahkan atribut HTML lazy loading secara otomatis, browser Chrome memahami bahwa konten halaman akan dimuat sesuai dengan navigasi pengguna dan tidak semua sekaligus, meningkatkan kecepatan dan responsivitas. Untuk menggunakannya, atribut loading dengan nilai lazy ditambahkan ke setiap tag dari sumber daya visual dan multimedia, serta iframe:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Sumber daya ini dapat digunakan baik dalam gambar, yang merupakan bagian besar dari informasi yang perlu diunduh browser, dan dalam iframe; ingat bahwa kita menggunakan ini untuk menyematkan sumber daya eksternal ke dalam situs kita.
Penting untuk menyoroti penggunaan dalam iframe, karena ini dapat merepresentasikan titik pemuatan kritis pada situs kita.
Di sisi negatif, lazy loading native hanya kompatibel dengan Chrome, meskipun penggunaannya dapat diimplementasikan di browser lain melalui pustaka yang kompatibel, jika tidak ada dukungan seperti yang terjadi di Mozilla Firefox.
Penggunaan Lazy loading
Seperti yang telah kami komentari, lazy loading berfokus pada penundaan pemuatan elemen pada halaman untuk mengoptimalkan responsnya. Dalam pengertian ini, penggunaan yang diberikan pada alat tersebut berfokus pada semua sumber daya visual, meskipun penekanan ditempatkan pada gambar, video, dan iframe yang dapat menyertakan dokumen dan file lainnya, semua melalui modifikasi tag dan inklusi atribut loading dengan nilai lazy, mengoptimalkan kecepatan umum situs bahkan jika memiliki elemen berat atau konten multimedia besar.
Apakah Anda memiliki pertanyaan tentang lazy loading atau ingin mengimplementasikannya dalam proyek Anda? Kami siap membantu Anda!
Dokumentasi dan Referensi:
Penulis: David Kaufmann
Saya telah menghabiskan lebih dari 10 tahun terakhir benar-benar terobsesi dengan SEO — dan jujur saja, saya tidak mau menukarnya dengan apa pun.
Karier saya mencapai level baru ketika saya bekerja sebagai senior SEO specialist untuk Chess.com — salah satu dari 100 website paling banyak dikunjungi di seluruh internet. Bekerja di skala seperti itu, di jutaan halaman, puluhan bahasa, dan di salah satu SERPs paling kompetitif yang ada, mengajari saya hal-hal yang tidak akan pernah bisa diberikan oleh kursus atau sertifikasi mana pun. Pengalaman itu mengubah cara pandang saya tentang seperti apa SEO yang benar-benar hebat — dan menjadi fondasi bagi semua yang saya bangun setelahnya.
Dari pengalaman itu, saya mendirikan SEO Alive — sebuah agency untuk brand yang serius menggarap pertumbuhan organik. Kami tidak di sini untuk menjual dashboards dan laporan bulanan. Kami di sini untuk membangun strategi yang benar-benar menggerakkan hasil, menggabungkan yang terbaik dari SEO klasik dengan dunia baru yang menarik dari Generative Engine Optimization (GEO) — memastikan brand Anda tidak hanya muncul di tautan biru Google, tetapi juga di dalam jawaban yang dihasilkan AI yang dikirimkan ChatGPT, Perplexity, dan Google AI Overviews kepada jutaan orang setiap harinya.
Dan karena saya tidak bisa menemukan tool yang menangani kedua dunia itu dengan benar, saya membangunnya sendiri — SEOcrawl, sebuah platform enterprise SEO intelligence yang menyatukan rankings, audit teknis, pemantauan backlinks, kesehatan crawl, dan pelacakan visibilitas brand di AI dalam satu tempat. Inilah platform yang selalu saya harap pernah ada.
Temukan lebih banyak konten dari penulis ini
