Google Arama Savunucusu John Mueller, belirli En Büyük İçerikli Boya (LCP) iyileştirmelerinin neden genellikle sonuç vermediğini açıklayan yeni bir vaka analizini vurguladı. Mağazadan mağazaya değişen bir düzende tarayıcı yanlış öğeye odaklanabilir ve bu da sonraki tüm optimizasyonların baştan beri LCP olmayan bir hedefe yönelmesine neden olur.
Vaka analizi, 24 Haziran’da web.dev’de yayınlandı ve e-ticaret platformu Nuvemshop’ta bir yıl süren Core Web Vitals çalışmalarını detaylandırıyor. İlk olarak ekip, görüntü ağırlığı veya sunucu gecikmesinin ana sorun olduğundan şüphelendi. Ancak analizleri, tarayıcının LCP öğesini nasıl seçtiğine işaret etti. Öğe seçimini, görüntü önceliğini, tembel yüklemeyi ve uç önbelleğe almayı optimize ettikten sonra Nuvemshop, iyi LCP puanına sahip mağazalarının oranının %57’den %96’ya çıktığını bildirdi.
Sorun, atlıkarıncalar ve banner’lardaki CSS geçişlerinden kaynaklanıyordu. Bu geçişler, öğelerin tarayıcının LCP algılamasına görünür hale gelmesini geciktiriyordu. Alışveriş yapanlar atlıkarıncanın önce yüklendiğini görürken, tarayıcı bazen sayfanın daha aşağısındaki bir banner’ı LCP öğesi olarak tanımlıyordu çünkü görünürlüğü bir geçişle gecikmiyordu. Sonuç olarak, önceki optimizasyon çabaları hiçbir zaman LCP olmayan öğelere odaklanmıştı.
Nuvemshop, temel LCP düzeltmeleri olarak üç değişiklik uyguladı: üst bölümlerden CSS geçişlerini kaldırmak (böylece anında görüntülenip LCP adayı olarak tanınmalarını sağlamak), üst bölümlerdeki ilk görselden loading='lazy' özniteliğini kaldırmak ve olası LCP görseline fetchpriority='high' eklemek. Bu ayarlamalar, web performansı en iyi uygulamalarını takip ediyor ve Nuvemshop’un iyi LCP puanına sahip mağaza oranını önemli ölçüde artırdı.
