Memperbaiki konten yang lambat dimuat
Proses menunda pemuatan konten tidak penting atau tidak terlihat, yang biasanya disebut sebagai "pemuatan lambat", merupakan performa umum dan praktik terbaik UX. Untuk informasi lebih lanjut, lihat panduan Dasar-Dasar Web untuk pemuatan lambat gambar dan video. Namun, jika tidak diterapkan dengan benar, cara ini dapat menyembunyikan konten dari Google secara tidak sengaja. Dokumen ini menjelaskan cara memastikan Google dapat meng-crawl dan mengindeks konten yang lambat dimuat.
Memuat konten saat terlihat di area pandang
Untuk memastikan Google melihat semua konten di halaman Anda, pastikan implementasi pemuatan lambat Anda memuat semua konten yang relevan setiap kali terlihat di area pandang. Berikut beberapa contoh tentang cara melakukannya:
- Pemuatan lambat native untuk gambar dan iframe
- IntersectionObserver API dan polyfill
- Library JavaScript yang mendukung pemuatan data saat data memasuki area pandang
Pastikan untuk menguji implementasi Anda.
Mendukung pemuatan dengan penomoran halaman untuk scrolling tanpa batas
Jika Anda menerapkan pengalaman scrolling tanpa batas, pastikan hal tersebut juga mendukung pemuatan dengan penomoran halaman. Pemuatan dengan penomoran halaman penting bagi pengguna karena mereka dapat membagikan dan berinteraksi kembali dengan konten Anda. Selain itu, Google dapat menampilkan link ke titik tertentu dalam konten tersebut, bukan di bagian atas halaman scrolling tanpa batas.
Untuk mendukung pemuatan dengan penomoran halaman, berikan link unik ke setiap bagian yang dapat dibagikan dan dimuat secara langsung oleh pengguna. Sebaiknya gunakan History API untuk memperbarui URL ketika konten dimuat secara dinamis.
Uji
Setelah disiapkan, pastikan implementasi Anda berfungsi dengan benar. Salah satu caranya adalah dengan menggunakan skrip Puppeteer untuk menguji implementasi Anda secara lokal. Puppeteer adalah library Node.js untuk mengontrol Chrome headless. Untuk menjalankan skrip, Anda memerlukan Node.js. Gunakan perintah berikut untuk memeriksa skrip dan menjalankannya:
git clone https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h
Setelah skrip dijalankan, tinjau gambar screenshot yang dihasilkan secara manual untuk memastikan gambar tersebut berisi semua konten yang akan dapat dilihat dan diindeks oleh Google.
Anda juga dapat menggunakan Alat Inspeksi URL di Search Console untuk melihat apakah semua gambar telah dimuat. Periksa screenshot dan HTML yang dirender untuk memastikan gambar Anda dimuat.