Google Arama Avukatı John Mueller, En Büyük İçerikli Boya geliştirmelerinin neden çoğu zaman sonuç üretemediğini açıklayan yeni bir vaka çalışmasının altını çiziyor. Mağazaya göre değişen bir düzende tarayıcı yanlış öğeye odaklanabilir ve bu da sonraki tüm optimizasyonların ilk etapta hiçbir zaman LCP olmayan bir şeyi hedeflemesine neden olabilir.
Vaka çalışması 24 Haziran'da web.dev'de yayınlandı ve e-ticaret platformu Nuvemshop'ta bir yıllık Core Web Vitals çalışmasını ayrıntılarıyla anlatıyor. Başlangıçta ekip, ana sorunların görüntü ağırlığı veya sunucu gecikmesi olduğundan şüpheleniyordu. Ancak analizleri onları tarayıcının LCP öğesini nasıl seçtiğine yönlendirdi. Öğe seçimini, görüntü önceliğini, yavaş yüklemeyi ve uç önbelleğe almayı optimize ettikten sonra Nuvemshop, iyi LCP puanlarına sahip mağazalarının payının %57'den %96'ya yükseldiğini bildirdi.
Yanlış Unsur Nasıl Seçilir?
Nuvemshop'ta satıcılar ana sayfa bölümlerini tercih ettikleri sıraya göre düzenleyebilirler; böylece karuseller, bannerlar ve ürün tabloları farklı temalarda çeşitli konumlarda görünür. Vaka çalışmasına göre, vitrinlerin %85'inde karuseller mevcuttu ve ölçümde bu noktada bir sorunla karşılaşıldı.
Sorun, atlı karıncalar ve banner'lardaki CSS geçişlerinden kaynaklanıyordu. Bu geçişler, öğeler tarayıcının LCP algılamasında görünür hale geldiğinde gecikti. Alışveriş yapanlar ilk önce atlıkarıncanın yüklendiğini görürken, görünürlüğü bir geçiş nedeniyle gecikmediği için tarayıcı ara sıra daha aşağıda bir banner'ı LCP öğesi olarak tanımlıyordu. Sonuç olarak Nuvemshop'a göre önceki optimizasyon çalışmaları hiçbir zaman LCP olmayan öğelere odaklandı.
Soruşturma üç ana nedeni belirledi. Geçişler, algılamayı yanlış kareye itiyordu, geç yükleme, hemen yüklenmesi gereken ekranın üst kısmındaki görüntüleri geciktiriyordu ve kritik görüntülerde öncelik sinyalleri yoktu. Ayrıca ölçümler yalnızca ana sayfalardan değil, hem kategori hem de ürün sayfalarından kaynaklanıyordu; dolayısıyla çözümün farklı sayfa türlerinde etkili olması gerekiyordu.
Üç LCP Düzeltmesi
Vaka çalışması dördüncü bir değişiklik olan gecikmeyi azaltmak için uç önbelleğe almayı içeriyor. Ancak temel öğe algılama ayarlamaları, sayfanın üst kısmının nasıl oluşturulacağı ve yükleneceği konusunda üç değişiklik içeriyordu. Nuvemshop, ana temaları ve sayfa türlerinde üç değişikliği de uyguladı. Bu ayarlamalar, yaygın web performansı en iyi uygulamalarına uygun olarak basittir.
Ekip, anında görüntülenmeleri için CSS geçişlerini üst bölümlerden kaldırdı ve tarayıcının bunları gecikmeden LCP adayları olarak tanımasını sağladı.
Onlar da çekti loading="lazy" bu üst bölümlerdeki ilk görüntünün dışında. web.dev'in kendi rehberliği bu konuda açık sözlüdür ve her zaman yükleme gecikmesine neden olacağı için LCP görüntüsünün geç yüklenmesine karşı uyarıda bulunur.
<!-- Before -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" loading="lazy" alt="Featured product">
<!-- After -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" alt="Featured product">
Son parça şuydu fetchpriority="high" tarayıcının önyükleme tarayıcısına onu daha erken yakalamasını söyleyen olası LCP görüntüsünde. Nuvemshop, bunu doğrulama mantığına dahil ettiğini, böylece sinyalin yalnızca öğenin gerçekten LCP adayı olabileceği yerde ateşlendiğini söylüyor. Google'ın tavsiyesi, bu özelliği bir veya iki önemli görsel için ayırmanızdır; çünkü her şey yüksek öncelikliyse hiçbir şey öncelikli değildir.
<!-- Before -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" alt="Featured product">
<!-- After -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" fetchpriority="high" alt="Featured product">
Başka Ne Nuvemshop Raporları
Nuvemshop, yalnızca LCP rakamının değil, genel Önemli Web Verileri geçiş oranının da yıl boyunca %48'den %72'ye yükseldiğini bildirdi.
Şirket, hem Ocak 2025'te hem de 2026'da aktif olan aynı Brezilya mağazalarını inceledi. Google organik arama yoluyla gelen mobil ziyaretçiler için dönüşüm oranında %8,9'luk bir artış ve alışveriş sepeti etkileşiminde %8,4'lük bir artış rapor ediyor.
Bunların kişisel olarak bildirilen rakamlar olduğunu ve alışveriş rakamlarının kontrollü bir test değil, o grubun yıldan yıla karşılaştırması olduğunu unutmayın. Nuvemshop, Google tarafından yaptırılan ve 0,1 saniyelik yük dışı kalma süresinin kısaltılmasının perakende dönüşümünü %8,4 oranında artırabileceğini ortaya koyan Deloitte araştırmasına dayanarak yönünü hız çalışmasına bağlıyor.
Bu Neden Önemli?
Başka bir kahraman görselini sıkıştırmadan önce, tarayıcının gerçekte LCP olarak değerlendirdiği öğeyi optimize ettiğinizden emin olun. Bu özellikle şablon odaklı veya karusel ağırlıklı düzenlerde geçerli olmayabileceği için önemlidir.
Son zamanlardaki haberimiz de aynı noktaya iniyor. CMS platformlarındaki Önemli Web Verileri'ne bakıldığında, HTTP Arşivi verileri, gerçek dünyadaki LCP'nin, bir platform tarayıcının ana görüntüyü keşfetmesine izin vermede yavaşladığında veya bu görüntüyü yalnızca bir sayfa ağır olduğunda değil, çok sayıda diğer yüksek öncelikli kaynakla rekabet etmeye zorladığında bozulma eğiliminde olduğunu gösterdi. Barry Pollard ayrıca herhangi bir koda dokunmadan önce PageSpeed Insights'ta bir LCP sorununun nasıl takip edileceğini de anlattı.
Dönüşüm bağlantısı Nuvemshop'un verilere ilişkin yorumunu yansıtır. Önemli Web Verileri yalnızca küçük bir sıralama faktörüdür ve Google, alaka düzeyinin daha önemli olduğunu vurgulamıştır; bu nedenle, daha hızlı bir mağazanın, bir sıralama aracı olarak değil, bir alışveriş deneyimi kazancı olarak okunması daha iyidir.
İleriye Bakış
Bu yalnızca bir şirketin kendi bildirdiği deneyimdir, dolayısıyla alışveriş kazanımlarını en iyi şekilde yönlendirici olarak okumak gerekir. Web.dev yıllardır bu tür keşif ve öncelikli çalışmaları savunduğu için tekniğin kendisi de yeni değil. Vaka çalışmasının eklediği şey, herhangi bir özelleştirilebilir platformun zor kısmı olan, bir mağazadan diğerine değişen düzenler genelinde gerçek LCP öğesinin tanımlanmasına yönelik çalışılmış bir örnektir.
Öne Çıkan Resim: Victoriatudosi/Shutterstock
Bir yanıt yazın