Cara Menggunakan Lazy Loading Untuk Mendapatkan Hasil Kecepatan Seluler Yang Sempurna

Apakah situs Anda lulus uji kecepatan situs seluler Google? Tidak? Anda mungkin ingin melihat gambar pemuatan lambat.

Performa situs web sangat penting. Jika blog atau situs web Anda lambat dimuat, itu sangat buruk bagi pengalaman pengguna.

Tidak ada yang akan menunggu lima atau sepuluh detik untuk memuat situs Anda. Kecepatan internet atau kecepatan unduh harus cepat. Situs web yang lambat akan meningkatkan rasio pentalan Anda dan menurunkan rasio konversi Anda.

Saat Anda melakukan uji kecepatan situs web untuk situs Anda, kecepatan desktop Anda biasanya baik-baik saja. Namun, bagaimana kinerja laman Anda untuk uji kecepatan seluler?

Persiapkan untuk pengguna seluler

Sebagian besar program blog dan situs web dibangun dengan cukup baik untuk tampilan desktop.

Mereka menggunakan desain responsif untuk menghadirkan versi seluler.

Meskipun ini adalah solusi praktis, ini memiliki kelemahan yang signifikan.

Jika situs Anda responsif, itu akan berfungsi di perangkat seluler.

Namun ukuran file gambar Anda adalah untuk desktop, sehingga kecepatan situs seluler Anda jauh lebih lambat.

Jika Anda melakukan tes Google Pagespeed Insights, hasil Anda mungkin masuk akal dan berwarna hijau untuk desktop, tetapi terlihat seperti ini untuk versi seluler Anda.

Ketika Anda mempertimbangkan bahwa separuh, atau bahkan lebih, pengunjung situs web Anda menggunakan perangkat seluler, Anda benar-benar perlu meningkatkan waktu muat halaman dan kecepatan seluler.

Google bergerak untuk menggunakan indeks mobile-first sebagai faktor peringkat.

Ada banyak layanan uji kecepatan situs web gratis yang dapat Anda gunakan untuk pemantauan kinerja.

Namun, tidak semua aplikasi speedtest mengukur kecepatan situs seluler. Jadi jangan diyakinkan oleh hasil yang baik untuk kecepatan halaman situs desktop Anda.

WebpageTest memungkinkan Anda memilih versi seluler yang berbeda, jadi ini merupakan alternatif dari Google.

Selalu pastikan Anda dapat memeriksa versi seluler Anda karena perangkat terhubung dengan kecepatan koneksi Internet yang jauh lebih lambat.

Jika hasil Anda tidak memuaskan, Anda harus bekerja.

Bagaimana Anda meningkatkan kinerja ponsel Anda?

Banyak faktor yang menyebabkan kecepatan situs lambat di desktop dan seluler.

File Javascript dan CSS dapat dimuat terlalu awal dan memblokir rendering. Jika Anda menggunakan WordPress, Anda dapat memperbaikinya dengan mudah menggunakan plugin caching.

Anda mungkin memiliki masalah dengan host web Anda yang menyebabkan TTFB (Time To First Byte) Anda sedikit lebih tinggi dari setengah detik.

Namun, sebagian besar host paling banyak hanya 10 hingga 20 persen di atas waktu ini, yang bukan merupakan masalah besar.

Masalah terbesar hampir selalu adalah gambar dan iframe. Saat Anda menambahkan gambar ke postingan, gambar tersebut tidak dikompresi, diukur, atau diformat untuk seluler.

Anda dapat menggunakan plugin untuk membantu. Smush adalah plugin populer untuk mengompresi gambar saat Anda mengunggah. Hasilnya akan sedikit meningkatkan versi desktop Anda, tetapi bukan versi seluler Anda.

Untuk meningkatkan waktu muat halaman di seluler, Anda perlu menayangkan gambar yang jauh lebih kecil. Tapi ini melibatkan banyak pekerjaan.

Sampai saat ini, solusi terbaik adalah memiliki versi seluler terpisah dari situs Anda atau menggunakan halaman AMP. Either way, semua gambar di situs yang ada harus diganti dengan gambar Next-Gen.

Pekerjaan yang terlibat dalam salah satu solusi bisa memakan waktu berminggu-minggu atau berbulan-bulan, tergantung pada ukuran situs Anda.

Untuk sebagian besar pemilik situs, jika Anda tidak tahu tentang API pengamat persimpangan atau img src, atribut data src, class lazy, tag img, atau class img, maka Anda tidak akan membuat situs seluler baru.

Mari kita hadapi itu. Semuanya terlalu sulit dan memakan waktu.

Bacaan lebih lanjut: Cara menghentikan formulir kontak dan spam komentar

Menerapkan perilaku pemuatan lambat

Untungnya, ada cara mudah untuk memperbaiki waktu muat halaman seluler Anda. Jawabannya adalah membuat semua gambar Anda dimuat dengan malas.

Lazy loading menunda pengiriman gambar sampai pembaca membutuhkannya. Saat pembaca menggulir halaman web, gambar di bawah yang dapat dilihat ditahan.

Dengan melakukan itu, waktu muat awal untuk sebuah halaman sangat berkurang dari waktu untuk memuat cepat. Ada banyak plugin dan solusi untuk menambahkan lazy loading ke blog atau website Anda.

Menjalankan tes beban malas

Selama beberapa minggu terakhir, saya telah menguji beta cara baru untuk membuat situs seluler bekerja.

Anda mungkin pernah mendengar tentang jaringan pengiriman konten, pemuatan lambat, dan gambar layar yang ditangguhkan.

Jika belum, mereka adalah elemen yang hanya menampilkan gambar saat halaman dimuat dan saat pengguna menggulir halaman ke bawah. Anda mungkin telah melihat ini beraksi di situs seperti Medium.

Saat pertama kali mengunjungi sebuah situs, sebuah gambar akan tampak kabur selama sepersekian detik. Mereka disebut gambar placeholder.

Kemudian gambar muncul dengan jelas dalam sekejap.

Ini adalah tindakan pemuatan lambat. Saat pengguna menggulir ke bawah halaman, gambar tidak dimuat sampai dibutuhkan.

Itu membuat halaman bekerja sangat cepat, terutama di perangkat seluler. Lazy loader dapat diterapkan ke sejumlah gambar di halaman web.

Tapi masih ada satu elemen yang hilang dari solusi ini. Gambar tidak dalam format Next-Gen.

Untungnya, sekarang ada solusinya, jadi Anda tidak perlu mengganti semua gambar Anda. Optimole adalah plugin WordPress yang melakukan banyak pekerjaan berat.

Tidak hanya malas memuat gambar, tetapi juga mengganti gambar Anda dengan URL gambar baru yang memberikan gambar Next-Gen.

Selain itu, ini mengubah ukuran gambar dengan cepat.

Menguji Optimole

Saya melakukan banyak tes, dan setiap kali saya memeriksa halaman, skornya sangat tinggi pada tes kecepatan seluler Google.

Salah satu pengujian saya adalah dengan halaman web lebar penuh yang berisi sepuluh gambar besar yang tidak terkompresi dan tidak berukuran.

Dengan kata lain, saya baru saja meletakkan setumpuk gambar besar di halaman dan menerbitkannya. (Gambar-gambar itu milik Pixabay, jadi tidak perlu atribusi creative commons.)

Halaman itu sangat besar sehingga saya tidak bisa menunjukkan gambarnya kepada Anda. Jadi, saya akan menunjukkannya kepada Anda dalam sebuah video.

Ketika saya menguji halaman di Google, inilah hasilnya.

Tidak mengherankan, mengingat ukuran semua gambar.

Kemudian saya mengaktifkan Optimole. Anda dapat melihat pengaturan yang saya gunakan di bawah ini. Itu saja yang harus Anda lakukan.

Jadi apa hasilnya?

Untuk desktop, skor sempurna.

Untuk seluler, skornya nyaris sempurna.

Di GTmetrix, skor kembali mendekati sempurna.

Ingatlah bahwa ini adalah hasil dunia nyata untuk halaman yang penuh dengan gambar besar dalam resolusi tinggi.

Menginstal plugin dan mendapatkan kunci API hanya membutuhkan waktu beberapa menit, dan hanya beberapa detik untuk mengaktifkan pengaturan.

Jadi dalam waktu kurang dari lima menit, saya memiliki laman dan situs seluler yang nyaris sempurna.

Pelajari lebih lanjut tentang Optimole

Untuk melihat plugin beraksi di dunia nyata, kunjungi situs web CodeinWP. Itu berjalan di Optimole, sehingga Anda dapat menjalankan tes pada kecepatan situsnya.

Anda dapat memeriksa situs Anda dengan membuka situs web Optimole.

Klik tombol Periksa Situs saya dan masukkan URL situs Anda. Anda akan melihat daftar semua gambar Anda dan penghematan yang dapat dilakukan di situs web Anda.

Jika Anda memiliki situs kecil, tersedia plugin versi gratis. Tetapi jika Anda memiliki situs yang besar, Anda mungkin ingin mempertimbangkan opsi premium.

Anda membutuhkan waktu lebih lama untuk membaca artikel ini daripada waktu yang dibutuhkan untuk membuat situs web Anda berjalan sangat cepat untuk pengunjung seluler Anda. Jadi tunggu apa lagi?

Lebih banyak alternatif pemuatan malas

Jika Anda tidak ingin menyiapkan pengiriman gambar Nextgen CDN, ada banyak opsi gratis yang dapat Anda gunakan.

WordPress sekarang menyertakan pemuatan malas secara default. Namun, Anda memiliki sedikit kendali atas cara kerjanya. Biasanya lebih baik menggunakan plugin sehingga Anda dapat menyempurnakan kinerjanya.

Smush adalah plugin WordPress yang populer dan gratis untuk mengurangi gambar saat Anda memuatnya ke perpustakaan media Anda.

Tetapi memiliki opsi untuk mengaktifkan pemuatan malas. Saya telah mencobanya di beberapa situs saya, dan berfungsi dengan sempurna. Cukup aktifkan opsi, dan Anda selesai.

A3 Lazy Load adalah plugin gratis lainnya. Saya telah menggunakannya sejak lama di banyak situs saya, termasuk yang ini.

Yang saya suka tentang itu adalah saya bisa menyempurnakan banyak opsi. Ini memiliki opsi untuk mengecualikan widget, yang memecahkan beberapa masalah lompatan dengan beberapa tema.

BJ Lazy Load sudah ada sejak lama. Ini memiliki lebih dari 90.000 pengguna. Namun, belum diperbarui dalam beberapa saat.

Lazy Load adalah plugin gratis dengan 60.000 pemasangan. Ini adalah komponen gratis dari WP Rocket, yang merupakan solusi lengkap untuk pengoptimalan kecepatan situs.

Satu plugin terakhir adalah Lazy Load for Videos. Ini adalah alat yang bagus untuk digunakan jika Anda memiliki banyak video Youtube di situs Anda.

Pilihan yang luar biasa! Sekarang Anda tidak memiliki alasan sama sekali untuk memiliki situs web seluler yang lambat.

Catatan: Saya tidak memiliki afiliasi dengan produk ini. Ulasan Optimole saya didasarkan pada pengalaman saya sebagai pengguna.

Bacaan lebih lanjut: Pemeriksa Situs Web Gratis dan Alat SEO