Nuvemshop'un resim önceliklendirme stratejisi, LCP'de% 68 iyileşme ve% 8,9 daha fazla dönüşüm sağladı

Federico Iglesias
Federico Iglesias
Jesus Biaggioni
Jesus Biaggioni
Kaio Graco Cardamone
Kaio Graco Cardamone
Lucas Demarchi
Lucas Demarchi
Mari Viana
Mari Viana

Yayınlanma tarihi: 24 Haziran 2026

Nuvemshop (İspanyolca konuşulan Latin Amerika'da Tiendanube olarak bilinir), bölgedeki lider e-ticaret platformudur ve 180.000'den fazla online mağazaya güç verir. Satıcılar, mağazalarını birden fazla tema ve dinamik içerik düzenlemeleriyle özelleştirdiğinden bu çeşitlilikte hızlı sayfa yüklemeleri sağlamak benzersiz teknik zorluklar ortaya çıkarıyor.

  • Largest Contentful Paint (LCP) sağlığı%68 iyileşti. Bir yıl içinde% 57'den% 96'ya yükselerek mağazaların, gerçek kullanıcılar için görüntü alanının üst kısmındaki içerikleri oluşturma biçiminde büyük bir değişiklik olduğunu gösterdi.
  • Core Web Vitals geçme oranı% 48'den%72'ye yükseldi. Bu, her 4 mağazadan yaklaşık 3'ünün artık Google'ın temel performans eşiğini karşıladığı anlamına geliyor.
  • Alışveriş etkileşiminde ölçülebilir iyileşme: Ocak 2025 ve Ocak 2026'da etkin olan aynı Brezilya mağazaları grubunu analiz eden Google organik arama mobil ziyaretçileri şunları gösterdi:
    • Dönüşüm oranında (oturumdan ücretli siparişe) %8,9 artış
    • Sepet etkileşim oranında (oturumdan sepete) %8,4 artış
  • LCP iyileştirmelerinin en belirgin olduğu yerlerle tutarlı olarak en büyük kazanımlar mobil cihazlarda elde edildi.

Bu sonuçlar, Google tarafından yaptırılan Deloitte araştırmasıyla (37 markada 30 milyondan fazla oturum) uyumludur. Bu araştırmada, yükleme hızında 0,1 saniyelik iyileşmenin perakende dönüşüm oranlarını %8,4 artırabileceği tespit edilerek yatırımlarımızın yönü doğrulanmıştır.

Sorun: Dinamik e-ticaret düzenlerinde LCP tespiti

2025'in başında mağazalarımızın yalnızca% 48'i Core Web Vitals eşiklerini geçmişti ve% 57'sinin LCP puanları iyi durumdaydı. İlk hipotezimiz, resim ağırlığı veya sunucu gecikmesiydi. Yanlış bilgi verdik.

Binlerce mağazada PageSpeed Insights analizi yaparak platformumuzun, satıcıların ana sayfa bölümlerini dinamik olarak düzenlemesine olanak tanıdığını keşfettik: Dönen öğeler, banner'lar, ürün ızgaraları ve özel modüller herhangi bir sırada görünebilir.

Bu esneklik, öngörülemeyen bir soruna yol açtı: Doğru öğe her zaman LCP olarak tanımlanmıyordu. Vitrinlerimizin %85'ini oluşturan carousellerin bulunduğu mağazalarda, sayfanın farklı ekranlarda ve cihazlarda nasıl oluşturulduğuna bağlı olarak, bazen ilk carousel resmi yerine görünüm alanında daha aşağıda bulunan bir banner LCP olarak işaretleniyordu. Bu durum, optimizasyon çalışmalarımızın amaçlanan etkiyi yaratmadığı anlamına geliyordu: Aslında LCP öğeleri olmayan öğeleri optimize ediyorduk.

Tipik SaaS platformlarından farklı olarak, yalnızca ana sayfayı düzeltemezdik. Mevcut mağazaları bozmadan veya yaratıcı özgürlüğü kısıtlamadan her türlü tema yapılandırması, bölüm düzenlemesi ve satıcı özelleştirmesiyle çalışan bir çözüme ihtiyacımız vardı.

Dinamik yerleşimler, LCP öğesi seçimini nasıl etkiler?

PageSpeed Insights analizi ve gerçek kullanıcı izleme sayesinde, öğeler tarayıcının EİÇ algılama algoritması tarafından görünür hale geldiğinde carousellerdeki ve banner'lardaki CSS geçişlerinin geciktiğini tespit ettik. Kullanıcılar ilk olarak döner öğenin yüklendiğini düşünse de tarayıcı bazen ikinci bölümdeki bir banner'ı LCP öğesi olarak işaretliyordu. Bunun nedeni, bu öğenin görünürlüğünün geçiş efektleriyle gecikmemesiydi.

Üç temel neden belirledik:

  • Öğeler görünür kabul edildiğinde CSS geçişleri gecikiyordu ve LCP algılaması yanlış kareye itiliyordu.
  • Görüntü alanının üst kısmındaki ve hemen yüklenmesi gereken resimlere geç yükleme uygulandı.
  • Öncelik sinyallerinin eksik olması, en önemli resimlerin önce yüklenmediği anlamına geliyordu.

Ayrıca, LCP ölçümlerinin önemli bir kısmının yalnızca ana sayfalardan değil, kategori ve ürün sayfalarından geldiğini de tespit ettik. Bu da düzeltmelerimizin tüm yüksek trafikli sayfa türlerinde tutarlı bir şekilde uygulanması gerektiği anlamına geliyordu.

Uygulama: Üç temel nedeni büyük ölçekte düzeltme

Nedenler belirlendikten sonra düzeltmeler kolayca yapıldı. Bu değişiklikleri tüm temel temalarda ve sayfa türlerinde tutarlı bir şekilde uyguladık ancak yeni sorunlar oluşturmamak için her birinin kapsamını dikkatli bir şekilde belirlememiz gerekti.

  • İlk konumdaki bölümler için CSS geçişleri kaldırıldı. Sayfada ilk görünen bölümler artık hemen oluşturuluyor. Böylece tarayıcı, bu bölümleri yapay gecikmeler olmadan LCP adayları olarak algılıyor.
  • Görüntü alanının üst kısmındaki resimlerden geç yükleme kaldırıldı. İlk bölümdeki resimlerde, kaynak yükleme gecikmesini önlemek için loading="lazy" öğesini koşullu olarak kaldırırız. Bu özelliği yalnızca ilk konumdaki bölümlerdeki ilk resimle sınırlamaya özen gösterdik:

    <!-- Before -->
    <img src="slide-1.webp" loading="lazy" alt="Featured product">
    <!-- After -->
    <img src="slide-1.webp" alt="Featured product">
    
  • Açık öncelik sinyalleri eklendi. fetchpriority="high" ekleyerek tarayıcının önceden yükleme tarayıcısına LCP resminin en yüksek öncelikli kaynak olduğunu bildiririz. Böylece, düzen ve oluşturma tamamlanmadan önce resmin daha erken bulunup indirilmesini sağlarız. Öncelikli sinyallerin yalnızca öğe gerçekten LCP adayı olabileceği bir konumda olduğunda uygulanmasını sağlamak için doğrulama mantığı ekledik: Çok fazla resme fetchpriority="high" eklemek, her şey yüksek öncelikli olduğunda hiçbir şeyin yüksek öncelikli olmaması nedeniyle ters etki yaratır.

    <!-- Before -->
    <img src="slide-1.webp" alt="Featured product">
    <!-- After -->
    <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
    
  • Uç önbelleğe alma sayesinde gecikme azaltıldı. Önbelleğe alma, yükleme sürelerini azaltmak için etkili bir yöntemdir ancak e-ticarette gerçek bir risk taşır: Güncel olmayan fiyatlandırma ve envanter verilerinin sunulması, müşteri güvenini ve geliri doğrudan etkiler. İşletme metriklerini performans verileriyle birlikte izleyerek, satıcı veya alıcı deneyimine zarar verebilecek içerikleri hiçbir zaman önbelleğe almadığımızdan emin olurken önbellek isabet oranlarını en üst düzeye çıkararak bu konuya dikkatli bir şekilde yaklaştık.

Etki ve sonuçlar: %57 ila% 96 LCP iyileşmesi

Metrik (Ocak 2025 - Ocak 2026) Göreceli iyileşme
LCP (iyi) +%68 (%57 - %96)
Core Web Vitals (geçme oranı) +%50 (%48 - %72)
Dönüşüm oranı (oturumdan ücretli siparişe) - mobil Google organik +%8,9
Alışveriş sepeti etkileşimi (oturumdan alışveriş sepetine) - mobil Google organik +%8,4
Değerler, Nuvemshop ve Tiendanube'un bölgesel operasyonlarında ortalaması alınmış, yıllık göreli iyileşmeyi gösterir.

Bu iyileştirmeler, Nuvemshop ve Tiendanube'u Brezilya, Arjantin ve Meksika'da performans açısından 1 numaralı e-ticaret platformu haline getirdi.

Önemli noktalar ve değerlendirme sonrası düşünceler

Nuvemshop'un yüksek düzeyde özelleştirilebilir mimarisi nedeniyle standart optimizasyon kılavuzlarından yararlanamadık. Asıl sorun, resim ağırlığı veya sunucu gecikmesi değildi: Tarayıcılar, CSS geçişleri, eksik öncelik sinyalleri ve görüntü alanının üst kısmındaki resimlere uygulanan geç yükleme nedeniyle beklenmedik öğeleri LCP olarak seçiyordu.

Temel nedenleri anladığımızda düzeltme işlemi kolay oldu: İlk konumdaki bölümlerden geçişleri kaldırdık, görüntü alanının üst kısmındaki resimlerden geç yüklemeyi kaldırdık ve açık öncelik sinyalleri ekledik. Bu yaklaşımı tüm temel temalarda, sayfa türlerinde ve platformumuzdaki 180.000'den fazla mağazada tutarlı bir şekilde uyguladık.

Sonuçlar kendilerini kanıtlıyor: LCP geçme oranları% 57'den %96'ya yükseldi, genel Core Web Vitals geçme oranları% 48'den %72'ye çıktı ve satıcılar ölçülebilir kazanımlar elde etti: Dönüşüm oranında% 8,9, mobil cihazlarda ise alışveriş sepeti etkileşiminde% 8,4 artış. Hızlı vitrinler yalnızca teknik bir başarı değildir, aynı zamanda satıcıların başarısını doğrudan etkiler.