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ölgenin önde gelen e-ticaret platformudur ve 180.000'den fazla online mağazaya destek verir. Satıcılar, vitrinlerini birden fazla tema ve dinamik içerik düzenlemesiyle özelleştirdiğinden, bu çeşitlilikte hızlı sayfa yüklemeleri sağlamak benzersiz teknik zorluklar ortaya çıkarır.

  • Largest Contentful Paint (LCP) sağlığı %68 iyileşerek bir yılda %57'den %96'ya yükseldi. Bu da mağazaların, görüntü alanının üst kısmındaki içeriği gerçek kullanıcılar için oluşturma biçiminde büyük bir değişiklik olduğunu gösteriyor.
  • Core Web Vitals geçme oranı %48'den %72'ye yükseldi. Bu, yaklaşık 4 mağazadan 3'ünün artık Google'ın temel performans eşiğini karşıladığı anlamına geliyor.
  • Alışveriş etkileşimi ölçülebilir şekilde arttı: Ocak 2025 ve Ocak 2026'da aktif olan Brezilya mağazalarının aynı kohortu analiz edildiğinde, Google organik aramadan gelen mobil ziyaretçilerde şu artışlar görüldü:
    • Dönüşüm oranında (oturumdan ücretli siparişe) %8,9 artış
    • Alışveriş sepeti etkileşim oranında (oturumdan alışveriş sepetine) %8,4 artış
  • LCP iyileştirmelerinin en önemli olduğu yerlerle tutarlı olarak en büyük kazançlar 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 bir iyileşmenin perakende dönüşüm oranlarını %8,4 artırabileceği tespit edilmiştir.Bu da yatırımlarımızın yönünü doğrulamaktadır.

Zorluk: Dinamik e-ticaret düzenlerinde LCP algılama

2025'in başında mağazalarımızın yalnızca %48'i Core Web Vitals eşiklerini geçti ve %57'si sağlıklı LCP puanlarına sahipti. İlk hipotezimiz, resim ağırlığı veya sunucu gecikmesiydi. Hatalı olduğumuzu fark ettik.

Binlerce mağazanın PageSpeed Insights analizini incelediğimizde, platformumuzun satıcılara ana sayfa bölümlerini dinamik olarak düzenleme imkanı sunduğunu gördük. Bu sayede, satıcılar bantları, banner'ları, ürün tablolarını ve özel modülleri istedikleri sırada gösterebiliyor.

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, bantlı mağazalarda, sayfanın farklı ekranlarda ve cihazlarda nasıl oluşturulduğuna bağlı olarak, bazen ilk bant resmi yerine görüntü alanının daha alt kısmındaki bir banner LCP olarak işaretleniyordu. Bu durum, optimizasyon çalışmalarımızın istenen etkiyi yaratmadığı anlamına geliyordu: Aslında LCP öğesi olmayan öğeleri optimize ediyorduk.

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

Dinamik düzenler LCP öğesi seçimini nasıl etkiler?

PageSpeed Insights analizi ve gerçek kullanıcı izleme yoluyla, öğeler tarayıcının LCP algılama algoritması tarafından görünür hale geldiğinde bantlar ve banner'lardaki CSS geçişlerinin geciktiğini keşfettik. Kullanıcılar bandın ilk olarak yüklendiğini algılasa da tarayıcı bazen ikinci bölümdeki bir banner'ı LCP öğesi olarak işaretledi. Bunun nedeni, bu öğenin görünürlüğünün geçiş efektleri nedeniyle gecikmemesiydi.

Üç temel neden tespit ettik:

  • Öğeler görünür kabul edildiğinde CSS geçişleri gecikiyor ve LCP algılaması yanlış kareye yönlendiriliyordu.
  • Görüntü alanının üst kısmında hemen yüklenmesi gereken resimlere geç yükleme uygulandı.
  • Öncelik sinyallerinin eksik olması, en önemli resimlerin ilk olarak 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 geniş ölçekte düzeltme

Nedenler belirlendikten sonra düzeltmeler kolayca yapıldı. Bu ilkeleri tüm temel temalara ve sayfa türlerine tutarlı bir şekilde uyguladık ancak yeni sorunlar oluşmaması için her birinin dikkatli bir şekilde kapsamını belirlememiz gerekti.

  • İlk konumdaki bölümler için CSS geçişleri kaldırıldı. Sayfada ilk olarak görünen bölümler artık hemen oluşturulur. Böylece tarayıcı, bu bölümleri yapay gecikmeler olmadan LCP adayları olarak algılar.
  • 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" özelliğini koşullu olarak kaldırıyoruz. Bu değişikliği yalnızca ilk konumdaki bölümlerde yer alan ilk resimle sınırlı tuttuk:

    <!-- Before -->
    <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product"
    !-- After --
    img src="s>lide-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 işlemi tamamlanmadan önce resmin daha erken keşfedilip indirilmesini sağlarız. Öncelik sinyallerinin yalnızca öğe gerçekten LCP adayı olabileceği bir konumdayken geçerli olması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 öncelikli olmayacağı için ters etki yaratır.

    <!-- Before -->
    <img src="slide-1.webp" alt="Fe>a<tured produc>t<"
    !-- After --
    img src="slide-1.webp" fetchpriority>="high" alt="Featured product"
    
  • Uç önbelleğe alma sayesinde daha düşük gecikme süresi. Önbelleğe alma, yükleme sürelerini azaltmak için etkilidir ancak e-ticarette gerçek bir risk taşır: Eski fiyatlandırma ve envanter verilerinin sunulması, müşteri güvenini ve geliri doğrudan etkiler. Bu konuya dikkatle yaklaştık. Performans verilerinin yanı sıra işletme metriklerini de izledik. Satıcı veya alıcı deneyimine zarar verebilecek içerikleri hiçbir zaman önbelleğe almadığımızdan emin olurken önbellek isabet oranlarını da en üst düzeye çıkardık.

Etki ve sonuçlar: LCP'de %57 ila %96 iyileşme

Metrik (Ocak 2025 - Ocak 2026) Göreceli iyileştirme
LCP (iyi) +%68 (%57 ila %96)
Core Web Vitals (geçme oranı) +%50 (%48 ila %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 bölgesel operasyonlarının ortalaması alınarak hesaplanan, yıldan yıla karşılaştırma bazında göreceli iyileşmeyi temsil eder.

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

Önemli çıkarımlar ve proje sonrası değerlendirmeler

Nuvemshop'un yüksek düzeyde özelleştirilebilir mimarisi, standart optimizasyon stratejilerine güvenemeyeceğimiz anlamına geliyordu. 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ıktan sonra düzeltme işlemi basitti: İlk konumdaki bölümlerden geçişleri kaldırmak, görüntü alanının üst kısmındaki resimlerden geç yüklemeyi kaldırmak ve açık öncelik sinyalleri eklemek. Bu yaklaşımı tüm temel temalar, sayfa türleri ve platformumuzdaki 180.000'den fazla mağazada tutarlı bir şekilde uyguladık.

Sonuçlar her şeyi açıklıyor: LCP geçiş oranları %57'den %96'ya yükseldi, genel Core Web Vitals geçiş oranları %48'den %72'ye çıktı ve satıcılar ölçülebilir kazançlar elde etti: Dönüşüm oranında %8,9 artış ve mobil cihazlarda alışveriş sepeti etkileşiminde %8, 4 artış. Hızlı vitrinler yalnızca teknik bir başarı değil, aynı zamanda satıcıların başarısını doğrudan etkileyen bir faktördür.