Şu anda neye ihtiyaç var onu belirleyin; işaretlemeye ilk görünme zamanı karıştırmayın
Lazy loading bir kaynağı gerektiği ana kadar kritik olmayan olarak işaretler. Sınıflandırmayı gerçek yolculuğa göre yapın: ilk görünüm için gerekli öğeler, katın altındaki medya, isteğe bağlı gömmeler ve sonraki rota ya da panel için gereken kod. CMS konumu tek başına yeterli kanıt değildir; bir resim bir şablonda ekranda dışı olabilirken başka bir şablonda merkezi olabilir.
Soğuk açılışları küçük bir telefonda ve tipik bir masaüstünde gözden geçirin. Ayrıca kampanya bağlantılarını ve sayfa içi demetleri (anchor link) test edin; bunlar ziyaretçiyi sayfanın daha aşağısına indirebilir. Bu inceleme, kaydırma tetiklemeli bir isteğe gerek olmadan neyin hazır olması gerektiğini söyler.
Başlangıç görevi, görünen gezinme, ana metin ve ilk anlamlı görsel hemen erişilebilir olmalıdır.
Alt sayfa galerileri, haritalar, sosyal gömmeler, ekran dışı oynatıcılar ve seçilmeyen özellikler için kod yaygın adaylardır.
Hero’u ve ilk görünümü koruyun
Sayfa açıldığında görünmesi muhtemel içeriği lazy-load ile yüklemeyin. Google bununla ilgili uyarılarda bulunur ve web.dev’in odaklı analizi, ilk görünüm görüntülerinin tembel yüklenmesinin LCP'yi geciktirebileceğini gösterir. LCP öğesi bir hero, ürün görseli, poster veya metin olabilir; tahmin etmeyin, her önemli şablonda doğrulayın.
Doğrulanmış bir LCP görüntüsünü eager (hemen) yükleyin. Testler keşfedilebilir kritik bir görselin ağ dikkatini kaybettiğini gösterirse, ona yönelik yüksek fetch-priority ipucunu test edin. Bu bir komut değil, bir ipucudur. Kritik bir CSS arka plan görseli tarayıcı ayrıştırıcısı tarafından doğrudan keşfedilemeyeceği için erken preload gerektirebilir; bu durumu ölçün.
Listing sayfalarında öne çıkarılan görsellerin CMS ve eklenti varsayılanlarının yanlışlıkla lazy olarak işaretlenip işaretlenmediğini kontrol edin.
Sadece masaüstü tasarım önizlemesi değil, soğuk mobil ve masaüstü yüklemelerini kullanın.
Medya gelmeden önce alan ayırın
Cumulative Layout Shift (CLS), görünen içeriğin beklenmedik şekilde hareket etmesidir. Yüklenmesi ertelenmiş, bilinen yüksekliği olmayan bir görsel, bir okuyucu taramaya başlarken veya bir düğmeye uzanırken metni ve kontrolleri itebilir. Bu yalnızca bir metrik sorunu değil, bir etkileşim riskidir.
Görseller ve videolar için doğru width ve height (genişlik ve yükseklik) öznitelikleri ekleyin veya CSS aspect-ratio ile şekli ayırın. Bir bileşenin son ayak izine (footprint) sahip bir yer tutucu (placeholder) kullanın. Üçüncü taraf bir çerçeve için yüksekliğini ayırın ve net bir yükleniyor veya kullanılamıyor durumu gösterin.
Mümkünse medya boyutlarını varlıkla birlikte saklayın; karışık biçimli resimler için genel bir oran güvenilir değildir.
Kaydırın, filtreleyin, panelleri açın, mobil cihazı döndürün ve geri navigasyonu kullanarak sonraki kaymaları bulun.
İçeriği keşfedilebilir ve etkileşimleri anlaşılır tutun
Google Search Central, Google'ın sayfalarda kaydırma veya tıklama yapmadığını belirtir. Önemli lazy-yüklenmiş içerik görünür olduğunda yüklenmelidir ve render edilmiş HTML beklenen içerik veya medya URL'lerini açığa çıkarmalıdır. Uygulama sonrası temsilî sayfaları Search Console'da inceleyin.
Indexlenebilir bir sonsuz liste (infinite list), her kalıcı bölüm için sayfalı (paginated) bir rota gerektirir: kalıcı benzersiz URL, o URL'de kararlı içerik ve dizi boyunca bağlantılar. Bu ayrıca insanların geri dönebileceği paylaşılabilir bir yer sağlar.
Bir eylem içerik gösterdiğinde, kontrolün klavye ile çalışır kalmasını sağlayın ve sonucun anlaşılır olmasını temin edin. Odak taşımayan anlamlı bir güncelleme (ör. 'sonuçlar yüklendi') için durumu programatik olarak açığa vurun ki yardımcı teknolojiler bunu odak değiştirmeden duyurabilsin.
Ürün detayları, makale içeriği, uygunluk bilgileri ve görev talimatları ziyaretçi bir eylem gerçekleştirdikten sonra var olmamalıdır.
Gerekli ödeme veya kimlik doğrulama kontrollerini geciktirmeyin. Ödeme, kimlik ve üçüncü taraf betikleri için nitelikli güvenlik ve uyumluluk incelemeleri yaptırın.
En kırılgan olmayan mekanizmayı kullanın
Sıradan ekran dışı resimler ve iframe'ler için tarayıcının yerel lazy loading genellikle basit bir başlangıçtır. Tarayıcı, görünüm alanına yakın olduğunda isteğin ne zaman başlayacağına karar verir; bu mesafe garanti değildir. window load olayı lazy kaynaklar tamamlanmamışken tetiklenebilir.
İsimlendirilmiş bir bileşen özel aktivasyon gerektiriyorsa—örneğin, görünmeden hemen önce pahalı bir paneli mount etmek—Intersection Observer kullanın. Observer'ı dar tutun ve hızlı kaydırma için işi yeterince erken başlatın. İlk olmayan rotalar veya isteğe bağlı özellikler için kod parçalama (code splitting) kullanın; bunu mevcut görevi geciktirmek için bahane yapmayın.
Ek davranış test edilmiş bir ihtiyacı çözmüyorsa, basit bir kaynağı data-attribute'larla, birkaç script ve bir kütüphane ile değiştirmeyin.
İsteğe bağlı bir gömme içerik için kalıcı bir spinner yerine net bir geri dönüşüm (fallback) veya yokluk durumu olmalıdır.
Ölçün, yayınlayın ve birlikte düzeltin
Aynı URL'ler, önbellek durumu, görünüm alanı ve kullanıcı yolunda bir temel (baseline) ile adayı (candidate) karşılaştırın. Mümkünse soğuk, kısıtlı mobil testler ve gerçek cihaz kontrolleri kullanın. LCP, görünen sıra, layout shift'ler, medya hataları, render edilmiş HTML ve temel eylemleri kaydedin. Alan verisi (field data), laboratuvar testlerini tamamlar.
Geri alınabilir, şablon kapsamlı bir değişiklik yayınlayın. Eager'dan deferred'a taşınan varlıkları, dağıtım referansını, önbellek eylemini, sahibini ve ilk geri alma adımını kaydedin. Eğer LCP tembelleşir veya bir dönüşüm yolu eksik kalırsa, o kritik varlıktan kuralı kaldırın ve tekrar doğrulayın. Tema, CMS, görüntü-servisi, tag veya gömme değişikliklerinden sonra yeniden kontrol edin.
Mevcut-durum raporlaması veya uyarıdan ziyade bozuk deneyimi önlemeye ve düzeltmeye odaklanın.
Her görüntüyü site çapında yeniden ayarlamadan önce etkilenen şablon ayarını geri çevirin.