Ekran Dışı Görüntüleri Ertele: Bu Google Deniz Feneri Fırsatı Nasıl Düzeltilir?

Sitenizin performansını ölçmek çoğu zaman başarılı veya başarısız bir iş olmuştur. Bunun nedeni, mevcut araçların bize o sitenin performansıyla ilgili olarak kullanıcının deneyimi hakkında doğru bir fikir vermemesidir. Ancak Google Lighthouse, bu dezavantajların birçoğunu giderir ve geliştirme iş akışınıza sığdırabilmenizi sağlar. Lighthouse'daki 'fırsatlardan' biri, WordPress'te ekran dışı görüntüleri ertelemektir. İyi haber şu ki bunu başarmak çok kolay.

Bu gönderi için, hem kod hem de eklentiler kullanarak WordPress'te ekran dışı görüntülerin nasıl erteleneceğine 🔎 bakacağız. İlk olarak, Google Lighthouse ile ilgili birkaç terimi açıklığa kavuşturmamız gerekiyor, ardından Ekran dışı görüntüleri ertele metriğinin öncelikler listenizde nereye oturması gerektiği hakkında konuşmalıyız.

Denetim tavsiyesi ile fırsat arasındaki fark

WordPress'te ekran dışı görüntüleri nasıl ertelediğinize girmeden önce, bu talimatın Google Lighthouse'a nasıl yerleştirildiğini anlamak önemlidir. Bu bir denetim tavsiyesinden ziyade bir performans 'fırsatı'. İşte fark:

• Denetim tavsiyesi . Bu, Google Lighthouse'daki puanlarınız üzerinde kesin bir etkiye sahip olacaktır ve bu metriklere öncelik vermelisiniz.
• fırsatlar Bunların bir miktar önemi olsa da denetim puanlarınızı etkilemeyecektir. Bu nedenle, onları ikincil bir endişe olarak düşünebilirsiniz.

Ekran dışı görüntüleri ertele metriği bir fırsattır. Bu, hala bir etkisi olabileceği anlamına gelir, ancak puanınız daha fazla yükselemediğinde bakabileceğiniz bir şeydir.

Ekran dışı görüntüleri ertele – bir tanım

Web siteniz muhtemelen sayfalarınızın tüm bölümlerinde resimler kullanacaktır. Bunlardan bazıları 'ekranın üst kısmında' görüntülenecektir, yani kaydırmaya gerek kalmadan ekranda. Bu nedenle, ekran dışı görüntüler diğer her şeyi temsil eder.

Ekran dışı görüntüleri ertele metriği, aşağıdaki dört kriterden herhangi birini karşılayan görsel öğeleri ifade eder:

• Bir resim, görünür sayfa alanının altından başlamalı ve bu alanın üç katı yükseklikte bitmelidir.
• Çok küçük resimler (boyutu 0,02 MB'tan küçük olanlar), Ekran dışı resimleri ertele metriğini hesaba katmaz.
• Yüklemesi 50ms'den uzun süren sayfalar bu fırsatı tetikleyecektir.
• Sayfanız bir yükleme özelliği tanımlıyorsa, Ekran dışı görüntüleri ertele'yi hiç görmezsiniz. Spoiler uyarısı: Şimdi loading="lazy" konusunda rahat olun!

Dahası, çok sayıda ekran dışı görüntüye sahip bir sitenin, En Büyük İçerikli Boyama (LCP) puanlarının düşük olduğunu görebilirsiniz. Bu, daha sonra ele alacağımız Google Lighthouse 10'da kafa karıştırıcı bir değişikliği gündeme getiriyor.

Etkileşim Süresini İyileştirme (TTI) amortismana tabi tutulmuş bir metriktir

Google Lighthouse'un eski sürümlerinde, ekran dışı görüntüleri erteleme TTI'ı etkiledi. Ancak, Google artık bunu amortismana tabi tutulmuş bir metrik olarak görüyor. Bunun %10'luk ağırlığı, Kümülatif Düzen Kaymasına (CLS) aktarılan genel Performans denetim puanını verdi ve şimdi %25 ağırlık sağlıyor [1][2] .

Bu, görüntüleri ekran dışına erteleseniz de ertelemeseniz de, bir düzen kaymasına neden olmayacağından, bir sorunu beraberinde getirir. Bu nedenle, ekran dışı görüntüleri erteleyin , tam bir denetim önerisi olmaktan çok artık yalnızca bir fırsattır.

Google Lighthouse neden ekran dışı görüntüleri ertelemenizi isteyecek?

Erteleme ekran dışı görüntülerin küme düşmesine rağmen, yükleme hızı ve performans için hala biraz önemi var. Hangi aracı seçerseniz seçin, tamamen yüklenmiş ekran dışı görüntülerin etkisini saniyeler içinde görebilirsiniz:

Bu metrik CLS veya TTI'yi etkilemese de LCP üzerinde bir etkisi olabilir - çoğu durumda küçük de olsa. Görüntüleri yalnızca ihtiyacınız olduğunda yüklemeniz gerektiğini de hatırlatırız. Sonra, nedenini tartışacağız.

Neden tüm resimlerinizi aynı anda yüklememelisiniz?

Konuşma sırasında hepimiz 'işbirliği ilkesi' üzerinde çalışırız. Bu bir sosyal bilimler dersi değil, bu yüzden burada çok fazla ayrıntıya girmeyeceğiz. Ancak, bu konseptin ekran dışı görüntüleri ertele metriği için önemli olan önemli bir yönü vardır. "Grice'in nicelik ilkesi", yalnızca bağlam oluşturmak için ihtiyaç duyduğunuz kadar bilgi vermeniz gerektiğini belirtir.

Bu neden önemli? Çünkü çok fazla bilgi verirseniz, bu dinleyicinin aşırı yüklenmesine (diğer sorunların yanı sıra) neden olabilir.

Bu nedenle, sitenizin tüm resimlerini de bir kerede yüklememelisiniz! Bunun birkaç somut nedeni var:

• Bir kullanıcı ekran dışı görüntüleri görmez ve aksi takdirde ekrandaki öğeler için ihtiyaç duyacağınız kaynakları kullanır.
• Ekran dışı görüntülerin yüklenmesi, zayıf bir Kullanıcı Deneyimine (UX) katkıda bulunabilir çünkü bir sayfa, görünüm alanında kayda değer hiçbir şey olmadan yüklenecektir.
• Kullanıcı için bu, onlara finansal olarak da mal olabilir. Örneğin, Wi-Fi yerine mobil veri kullanırken ekran dışı görüntüleri ertelemeyen bir siteye göz atan birini düşünün.

Google Lighthouse'un UX'e ve algılanan performansın onu nasıl etkilediğine odaklandığı göz önüne alındığında, yukarıdakilerin tümünü anlamak çok önemlidir. İyi haber şu ki, ekran dışı görüntüleri ertelemenin basit bir yolu var.

Sitenizdeki ekran dışı görüntüleri nasıl erteleyebilirsiniz?

Cevap: yavaş yükleme. Bu, ekran dışı görüntülerin sitenizin algılanan performansı üzerindeki etkisini azaltmanın en basit ve etkili yoludur. Daha da iyisi, çoğu tarayıcı geç yüklemeyi destekler:

Ancak, Firefox yalnızca görüntüler için yavaş yüklemeyi destekler; bu, Satır İçi Çerçeveler için uygulamayı seçerseniz önemli olacaktır. Yine de, bunu uygulamak için birkaç yolunuz var. Ana yaklaşım, bir <img> veya <iframe> öğesi içinde HTML loading özniteliğini kullanır. Üç farklı değer kullanma seçeneğine sahip olacaksınız:

• eager Bu, tarayıcıya önce bu görüntüleri yüklemesini söyleyecektir. Bu varsayılan seçenektir ve onu hiç dahil etmemek kadar iyidir, çünkü resimler sayfanın neresinde olursa olsun her zaman işlenecektir.
• lazy Bu, görüntü alanından sabit kodlanmış bir mesafeye ulaşana kadar bir görüntünün veya iframe'in yüklenmesini erteleyecektir. Kesin mesafe tarayıcılar arasında farklılık gösterebilir ve ayrıca her zaman resim boyutlarını da belirtmek isteyeceksiniz.
• auto Tarayıcı, iş için en iyi seçeneği seçecektir.

Bunu uygulamak beklediğiniz kadar basit:

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

Elbette burada ön uçta görülecek bir şey yok çünkü görüntü zaten ekran dışında ve görünmez olacak.

Hızlandırılmış Mobil Sayfaları (AMP) kullanmayı seçerseniz amp-img öğesini kullanarak yavaş yüklemeyi otomatik olarak uygulayabilirsiniz. Diğer platformlar söz konusu olduğunda, modüller veya eklentiler, yavaş yüklemeyi uygulamanın en iyi yoludur.

WordPress'te ekran dışı görüntüleri ertelemek isterseniz, bunu yapmak için özel bir eklenti kullanmak isteyeceksiniz. Varsayılan olarak, WordPress tüm resimler için yavaş yükleme uygular, ancak bu geniş fırça tam olarak ihtiyaçlarınızı karşılamayabilir.

Sitenize yavaş yükleme eklemek için WordPress eklentilerini kullanma

WordPress'e herhangi bir ekstra işlevsellik eklemek istediğinizde, bir eklenti her zaman en iyi seçeneğinizdir. Tembel yükleme söz konusu olduğunda, bu da geçerli olabilir.

WordPress, yavaş yükleme eklemenize yardımcı olabilecek bir dizi eklentiye sahiptir, ancak hepsi eşit değildir. Örneğin, bazılarının puanları ve incelemeleri düşük, diğerleri çok fazla güncelleme almıyor ve hatta bazıları doğru düzeyde işlevsellik sağlayamıyor. Bununla birlikte, hem görüntü sıkıştırma hem de yavaş yükleme söz konusu olduğunda Optimole malları teslim edebilir.

Bu, Optimole'un genel olarak neler yapabileceğinin bir özeti olmayacak – kardeş sitemiz Themeisle size bunu gösterebilir. Bunun yerine, görüntüleri tembel bir şekilde yüklemek için sahip olduğunuz hızlı ve zahmetsiz seçenekleri vurgulayacağız. Doğru seçenekleri bulmak için Medya > Optimole > Ayarlar ekranına gidin, ardından Görüntüleri ölçekle ve yavaş yükleme geçiş anahtarını bulun. Bunun açık olduğundan emin olmak isteyeceksiniz:

Bunu yaptığınızda, Gelişmiş > Lazyload bölümünde birçok seçenek kullanıma sunulacaktır:

Bu size üzerinde çalışabileceğiniz değerli bir dizi seçenek sunar. Örneğin, resimleriniz için bir yer tutucuyu etkinleştirebilir, tarayıcıda yerel veya klasik yavaş yükleme arasında geçiş yapabilir, resim ölçeklemeyi etkinleştirebilir ve daha fazlasını yapabilirsiniz.

Ancak, daha fazla araştırmak isteyeceğiniz iki ayar vardır. İlki, belirli sayıda görüntüyü yüklemeden hariç tutmanıza izin verir. Varsayılan değer üçtür, ancak bunu ekranın üst kısmında ne kadar resim varsa o kadar ayarlayabilirsiniz. Bu, sitedeki tüm resimler için geç yükleme uygulayacağınız anlamına gelir:

Diğer harika özellik, arka plan resimlerini tembel yüklemenize yardımcı olacak CSS seçicileri belirleme yeteneğidir:

Bu size, tüm yavaş yükleme deneyimini ihtiyaçlarınıza ve Lighthouse puanınıza göre özelleştirmeniz için bir yol sağlar, ancak bir miktar esnekliği korur. Üstelik, Optimole'un ücretsiz sürümü ile yukarıdakilerin tümü mümkün!

Sonuç 🧐

Görüntüler ekranda değilse yüklemenize gerek yoktur. Yavaş yükleme gibi bir çözüm olmadan, sitenizin yüklenmesi için gereken süreyi uzatmış olursunuz. Ayrıca performansla ilgili en önemli ölçütlerden bazılarını da etkileyecektir. Google Lighthouse'un Ekran dışı görüntüleri ertele fırsatı, size bir tür yavaş yüklemeyi uygulamaya zorlama fırsatı verir ve bunu yapmanın birçok kodsuz yolu vardır.

Örneğin, Optimole, WordPress'te ekran dışı görüntüleri ertelemenize yardımcı olacak en iyi eklentilerden biridir. Seçenekleri, WordPress'in benimsediği küresel 'her zaman açık' yaklaşımından daha belirgin bir şekilde ayarlayabilirsiniz. Ancak, önbelleğe alma eklentileri gibi bunu yapmanıza yardımcı olan başka eklentiler de vardır. Kodlama yolu bile basittir ve daha da iyisi, neredeyse her tarayıcıdan destek alırsınız.

Optimole, WordPress'te ekran dışı görüntüleri erteleme yönteminiz olacak mı? Aşağıdaki yorumlar bölümünde düşüncelerinizi bizimle paylaşın!