Tunda Gambar Di Luar Layar: Cara Memperbaiki Peluang Google Lighthouse Ini

Mengukur kinerja situs Anda sering kali merupakan pekerjaan yang berhasil atau gagal. Ini karena alat yang tersedia tidak memberi kami wawasan yang tepat tentang pengalaman pengguna relatif terhadap kinerja situs tersebut. Namun, Google Lighthouse memperbaiki banyak kelemahan ini, dan membuatnya agar Anda dapat memasukkannya ke dalam alur kerja pengembangan Anda. Salah satu 'peluang' dalam Lighthouse adalah menunda gambar di luar layar di WordPress. Kabar baiknya adalah ini mudah dicapai.

Untuk postingan ini, kita akan melihat 🔎 cara menunda gambar di luar layar di WordPress menggunakan kode dan plugin. Namun pertama-tama, kita harus memperjelas beberapa istilah tentang Google Lighthouse, lalu membahas di mana metrik gambar di luar layar Tunda harus berada di daftar prioritas Anda.

Perbedaan antara rekomendasi audit dan peluang

Sebelum kita membahas bagaimana Anda menunda gambar di luar layar di WordPress, penting untuk memahami bagaimana instruksi ini masuk ke dalam Google Lighthouse. Ini adalah 'peluang' kinerja daripada rekomendasi audit. Inilah perbedaannya:

• Rekomendasi audit . Ini akan memiliki dampak yang pasti pada skor Anda dalam Google Lighthouse, dan Anda harus memberikan metrik ini perhatian Anda sebagai prioritas.
• Peluang . Meskipun ini masih memiliki beberapa kepentingan, namun tidak akan memengaruhi skor audit Anda. Dengan demikian, Anda dapat menganggap mereka sebagai perhatian sekunder.

Metrik Tunda gambar di luar layar adalah peluang. Ini berarti itu masih dapat berdampak, tetapi itu adalah sesuatu yang dapat Anda lihat setelah skor Anda tidak dapat meningkat lagi.

Tunda gambar di luar layar – sebuah definisi

Situs web Anda kemungkinan akan menggunakan gambar di semua bagian halaman Anda. Beberapa di antaranya akan menampilkan 'above the fold' – yaitu, di layar tanpa perlu menggulir. Dengan demikian, gambar di luar layar mewakili yang lainnya.

Metrik Tunda gambar di luar layar mengacu pada elemen visual yang memenuhi salah satu dari empat kriteria berikut:

• Gambar harus dimulai di bawah area halaman yang terlihat, dan berakhir tiga kali tinggi area ini.
• Gambar super kecil (berukuran kurang dari 0,02 MB) tidak akan diperhitungkan dalam metrik Tunda gambar di luar layar .
• Halaman yang membutuhkan waktu lebih dari 50 md untuk dimuat akan memicu peluang.
• Jika halaman Anda menentukan atribut pemuatan, Anda tidak akan melihat Tunda gambar di luar layar sama sekali. Lansiran spoiler: biasakan diri dengan loading="lazy" sekarang!

Terlebih lagi, Anda mungkin menemukan bahwa situs dengan banyak gambar di luar layar akan mendapatkan skor Cat Konten Terbesar (LCP) yang buruk. Ini memunculkan perubahan yang membingungkan pada Google Lighthouse 10, yang akan kita bahas selanjutnya.

Meningkatkan Waktu Untuk Interaktif (TTI) adalah metrik terdepresiasi

Di versi Google Lighthouse yang lebih lama, Tunda gambar di luar layar memengaruhi TTI. Namun, Google sekarang menganggap ini sebagai metrik terdepresiasi. Bobot 10% ini memberikan skor audit Kinerja keseluruhan yang dialihkan ke Pergeseran Tata Letak Kumulatif (CLS) dan sekarang memberikan bobot 25% [1][2] .

Ini menimbulkan masalah, terlepas dari apakah Anda melakukan atau tidak menunda gambar di luar layar, ini tidak akan menyebabkan perubahan tata letak. Oleh karena itu, inilah mengapa Tunda gambar di luar layar sekarang hanya sebagai peluang, bukan rekomendasi audit penuh.

Mengapa Google Lighthouse akan meminta Anda untuk menunda gambar di luar layar

Terlepas dari degradasi Tunda gambar di luar layar , ini masih memiliki beberapa kepentingan untuk kecepatan dan kinerja pemuatan. Anda dapat melihat dampak dari gambar di luar layar yang terisi penuh dalam hitungan detik dengan alat apa pun yang Anda pilih:

Meskipun metrik ini tidak memengaruhi CLS atau TTI, metrik ini dapat berdampak pada LCP – meskipun kecil dalam banyak kasus. Ini juga merupakan pengingat yang baik bahwa Anda hanya boleh memuat gambar saat diperlukan. Selanjutnya, kita akan membahas alasannya.

Mengapa Anda tidak harus memuat semua gambar Anda sekaligus

Dalam percakapan, kita semua bekerja berdasarkan 'prinsip kerja sama'. Ini bukan pelajaran ilmu sosial, jadi kami tidak akan menjelaskan secara detail di sini. Namun, ada aspek penting dari konsep ini yang penting bagi metrik Tunda gambar di luar layar . 'Grice's maxim of quantity' menyatakan bahwa Anda hanya boleh mengungkapkan informasi sebanyak yang Anda butuhkan untuk membangun konteks.

Mengapa ini penting? Karena jika Anda memberikan terlalu banyak informasi, hal ini dapat menyebabkan kelebihan pendengar (di antara masalah lainnya.)

Karena itu, Anda juga tidak boleh memuat semua gambar situs sekaligus! Ini karena beberapa alasan kuat:

• Seorang pengguna tidak akan melihat gambar di luar layar, dan sebaliknya mereka akan menggunakan sumber daya yang Anda perlukan untuk elemen di layar.
• Memuat gambar di luar layar dapat menyebabkan Pengalaman Pengguna (UX) yang buruk, karena halaman akan dimuat tanpa ada catatan yang terjadi di area pandang.
• Bagi pengguna, ini mungkin juga merugikan mereka secara finansial. Misalnya, pertimbangkan seseorang menjelajah ke situs yang tidak menunda gambar di luar layar saat menggunakan data seluler, bukan Wi-Fi.

Mengingat fokus Google Lighthouse adalah pada UX dan bagaimana kinerja yang dirasakan memengaruhinya, semua hal di atas sangat penting untuk dipahami. Kabar baiknya adalah ada cara mudah untuk menunda gambar di luar layar.

Cara menunda gambar di luar layar di situs Anda

Jawabannya adalah: loading lambat. Ini adalah cara paling mudah dan efektif untuk mengurangi dampak gambar di luar layar pada performa situs Anda. Lebih baik lagi, sebagian besar browser mendukung pemuatan lambat:

Namun, Firefox hanya mendukung pemuatan lambat untuk gambar, yang penting jika Anda memilih untuk mengimplementasikannya untuk Inline Frames. Namun, Anda memiliki sejumlah cara untuk mengimplementasikannya. Pendekatan utama menggunakan atribut loading HTML di dalam elemen <img> atau <iframe> . Anda akan mendapatkan opsi untuk menggunakan tiga nilai berbeda:

• eager . Ini akan memberi tahu browser untuk memuat gambar-gambar ini terlebih dahulu. Ini adalah opsi default, dan sama baiknya dengan tidak menyertakannya sama sekali, karena gambar akan selalu dirender di mana pun itu berada di halaman.
• lazy . Ini akan menunda pemuatan gambar atau iframe hingga mencapai jarak hard-coded dari viewport. Jarak yang tepat dapat berbeda antara browser, dan Anda juga ingin selalu menentukan dimensi gambar juga.
• auto . Browser akan memilih opsi terbaik untuk pekerjaan itu.

Ini semudah menerapkan seperti yang Anda harapkan:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Tentu saja, tidak ada yang bisa dilihat di bagian depan di sini, karena gambarnya akan berada di luar layar dan tidak terlihat.

Jika memilih untuk menggunakan Accelerated Mobile Pages (AMP), Anda dapat menerapkan pemuatan lambat secara otomatis menggunakan elemen amp-img . Ketika datang ke platform lain, modul atau plugin adalah cara terbaik untuk menerapkan pemuatan lambat.

Jika Anda ingin menunda gambar di luar layar di WordPress, Anda perlu menggunakan plugin khusus untuk melakukannya. Secara default, WordPress mengimplementasikan lazy loading untuk semua gambar, tetapi kuas lebar ini mungkin tidak sesuai dengan kebutuhan Anda.

Menggunakan plugin WordPress untuk menambahkan pemuatan malas ke situs Anda

Kapan pun Anda ingin menambahkan fungsionalitas tambahan apa pun ke WordPress, sebuah plugin selalu menjadi pilihan terbaik Anda. Dalam hal pemuatan lambat, ini juga bisa terjadi.

WordPress memiliki sejumlah plugin yang dapat membantu Anda menambah lazy loading, tetapi tidak semuanya sama. Misalnya, beberapa memiliki peringkat dan ulasan yang buruk, yang lain tidak mendapatkan banyak pembaruan, dan beberapa bahkan tidak dapat memberikan tingkat fungsionalitas yang tepat. Namun, Optimole dapat memberikan hasil yang baik dalam hal kompresi gambar dan pemuatan lambat.

Ini tidak akan menjadi ikhtisar tentang apa yang dapat dilakukan Optimole secara umum – situs saudara kami Themeisle dapat menunjukkannya kepada Anda. Sebagai gantinya, kami akan menyoroti opsi cepat dan bebas rasa sakit yang Anda miliki untuk memuat gambar dengan malas. Untuk menemukan opsi yang tepat, buka layar Media > Optimole > Pengaturan , lalu cari gambar Skala dan sakelar sakelar beban malas . Anda akan ingin memastikan ini aktif:

Setelah Anda melakukan ini, sejumlah besar opsi akan tersedia di bagian Lanjutan > Lazyload :

Ini memberi Anda serangkaian opsi yang berharga untuk dikerjakan. Misalnya, Anda dapat mengaktifkan placeholder untuk gambar Anda, beralih antara pemuatan lambat browser asli atau klasik, mengaktifkan penskalaan gambar, dan banyak lagi.

Namun, ada dua setelan yang ingin Anda selidiki lebih lanjut. Yang pertama memungkinkan Anda mengecualikan sejumlah gambar dari pemuatan. Standarnya adalah tiga, tetapi Anda dapat menyetel ini ke banyak gambar yang Anda miliki di paro atas. Ini berarti Anda akan menerapkan pemuatan malas untuk semua gambar di situs:

Fitur keren lainnya adalah kemampuan untuk menentukan pemilih CSS untuk membantu Anda memuat gambar latar dengan malas:

Ini memberi Anda cara untuk menyesuaikan seluruh pengalaman pemuatan lambat berdasarkan kebutuhan dan skor Lighthouse Anda, namun tetap mempertahankan beberapa fleksibilitas. Terlebih lagi, semua hal di atas dimungkinkan dengan versi gratis dari Optimole!

Kesimpulan 🧐

Jika gambar tidak ada di layar, Anda tidak perlu memuatnya. Tanpa solusi seperti pemuatan lambat, Anda dapat memperpanjang waktu yang diperlukan untuk memuat situs Anda. Ini juga akan memengaruhi beberapa metrik terpenting yang terkait dengan kinerja. Peluang Tunda gambar di luar layar Google Lighthouse memberi Anda dorongan untuk menerapkan semacam pemuatan lambat, dan ada banyak cara bebas kode untuk melakukannya.

Misalnya, Optimole adalah salah satu plugin terbaik untuk membantu Anda menunda gambar di luar layar di WordPress. Anda dapat menyetel opsi dengan kekhususan yang lebih besar daripada pendekatan global 'selalu aktif' yang dilakukan WordPress. Namun, ada plugin lain yang juga membantu Anda melakukan ini, seperti plugin caching. Bahkan jalur pengkodean sangat mudah, dan lebih baik lagi, Anda mendapatkan dukungan dari hampir setiap browser.

Apakah Optimole akan menjadi metode Anda untuk menunda gambar di luar layar di WordPress? Bagikan pemikiran Anda dengan kami di bagian komentar di bawah!