Cara strategi pemrioritasan gambar Nuvemshop menghasilkan peningkatan LCP sebesar 68% dan konversi 8,9% lebih banyak

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

Dipublikasikan: 24 Juni 2026

Nuvemshop (dikenal sebagai Tiendanube di Amerika Latin yang berbahasa Spanyol) adalah platform e-commerce terkemuka di kawasan tersebut, yang mendukung lebih dari 180.000 toko online. Dengan penjual yang menyesuaikan etalase mereka melalui beberapa tema dan pengaturan konten dinamis, memastikan pemuatan halaman yang cepat di seluruh keragaman ini menghadirkan tantangan teknis yang unik.

• Kesehatan Largest Contentful Paint (LCP) meningkat 68%, dari 57% menjadi 96% dalam satu tahun, yang mencerminkan perubahan besar dalam cara toko merender konten di bagian atas area pandang untuk pengguna sebenarnya.
• Tingkat kelulusan Core Web Vitals melonjak dari 48% menjadi 72%, yang berarti hampir 3 dari 4 toko kini memenuhi nilai minimum performa dasar Google.
• Engagement belanja meningkat secara terukur: Menganalisis kelompok toko Brasil yang sama yang aktif pada Januari 2025 dan Januari 2026, pengunjung seluler dari penelusuran organik Google menunjukkan:
  • Peningkatan rasio konversi sebesar 8,9% (sesi ke pesanan berbayar)
  • Peningkatan rasio engagement keranjang sebesar 8,4% (sesi ke keranjang)
• Perangkat seluler mendorong keuntungan terbesar, yang konsisten dengan tempat peningkatan LCP paling signifikan.

Hasil ini selaras dengan riset Deloitte yang dilakukan oleh Google (lebih dari 30 juta sesi di 37 merek), yang menemukan bahwa peningkatan kecepatan pemuatan sebesar 0,1 detik dapat meningkatkan rasio konversi retail sebesar 8,4%, yang memvalidasi arah investasi kami.

Tantangan: Deteksi LCP dalam tata letak e-commerce dinamis

Pada awal tahun 2025, hanya 48% toko kami yang lulus nilai minimum Core Web Vitals, dan 57% memiliki skor LCP yang baik. Hipotesis awal kami adalah bobot gambar atau latensi server. Kami salah.

Melalui analisis PageSpeed Insights di ribuan toko, kami menemukan bahwa platform kami memungkinkan penjual mengatur bagian halaman beranda secara dinamis: carousel, banner, kisi produk, dan modul kustom dapat muncul dalam urutan apa pun.

Fleksibilitas ini menimbulkan masalah yang tidak terduga: elemen yang tepat tidak selalu diidentifikasi sebagai LCP. Di toko dengan carousel, yang mewakili 85% etalase kami, banner yang lebih jauh di area pandang terkadang ditandai sebagai LCP, bukan gambar carousel pertama, bergantung pada cara halaman dirender di berbagai layar dan perangkat. Artinya, upaya pengoptimalan kami tidak memberikan efek yang diinginkan: Kami mengoptimalkan elemen yang sebenarnya bukan elemen LCP.

Tidak seperti platform SaaS pada umumnya, kami tidak dapat memperbaiki halaman beranda saja. Kami memerlukan solusi yang berfungsi di setiap kemungkinan konfigurasi tema, pengaturan bagian, dan penyesuaian penjual, tanpa merusak toko yang ada atau membatasi kebebasan kreatif.

Pengaruh tata letak dinamis terhadap pemilihan elemen LCP

Melalui analisis PageSpeed Insights dan pemantauan pengguna sebenarnya, kami menemukan bahwa transisi CSS pada carousel dan banner tertunda saat elemen terlihat oleh algoritma deteksi LCP browser. Meskipun pengguna menganggap carousel dimuat terlebih dahulu, browser terkadang menandai banner di bagian kedua sebagai elemen LCP—karena visibilitas elemen tersebut tidak tertunda oleh efek transisi.

Kami mengidentifikasi tiga akar penyebab:

• Transisi CSS tertunda saat elemen dianggap terlihat, sehingga mendorong deteksi LCP ke frame yang salah.
• Pemuatan lambat diterapkan pada gambar di bagian atas area pandang yang perlu dimuat segera.
• Sinyal prioritas yang tidak ada berarti gambar yang paling penting tidak dimuat terlebih dahulu.

Kami juga menemukan bahwa sebagian besar pengukuran LCP berasal dari halaman kategori dan produk, bukan hanya halaman beranda, yang berarti perbaikan kami harus diterapkan secara konsisten di semua jenis halaman dengan traffic tinggi.

Implementasi: memperbaiki tiga akar penyebab dalam skala besar

Setelah penyebabnya diidentifikasi, perbaikannya cukup mudah. Kami menerapkannya secara konsisten di semua tema inti dan jenis halaman, tetapi setiap perbaikan memerlukan cakupan yang cermat untuk menghindari pembuatan masalah baru.

• Menghapus transisi CSS untuk bagian posisi pertama. Bagian yang muncul pertama di halaman kini dirender segera, sehingga memastikan browser mendeteksinya sebagai kandidat LCP tanpa penundaan buatan.

• Menghapus pemuatan lambat dari gambar di bagian atas area pandang. Untuk gambar di bagian pertama, kami menghapus loading="lazy" secara kondisional untuk menghilangkan penundaan pemuatan resource. Kami berhati-hati untuk hanya mencakup gambar pertama di bagian posisi pertama:

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• Menambahkan sinyal prioritas eksplisit. Dengan menambahkan fetchpriority="high", kami memberi tahu pemindai pramuat browser bahwa gambar LCP adalah resource prioritas utama, sehingga dapat ditemukan dan didownload lebih cepat, sebelum tata letak dan rendering selesai. Kami menambahkan logika validasi untuk memastikan sinyal prioritas hanya berlaku jika elemen tersebut benar-benar berada di posisi yang dapat menjadi kandidat LCP: Menambahkan fetchpriority="high" ke terlalu banyak gambar akan kontraproduktif, karena jika semuanya berprioritas tinggi, tidak ada yang berprioritas tinggi.

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

• Mengurangi latensi melalui edge caching. Caching efektif untuk mengurangi waktu pemuatan, tetapi dalam e-commerce, caching memiliki risiko nyata: Menyajikan data harga dan inventaris yang tidak berlaku secara langsung memengaruhi kepercayaan dan pendapatan pelanggan. Kami menangani hal ini dengan hati-hati dengan memantau metrik bisnis bersama data performa, memaksimalkan rasio hit cache sekaligus memastikan kami tidak pernah menyimpan cache konten yang dapat membahayakan pengalaman penjual atau pembeli.

Dampak dan hasil: Peningkatan LCP dari 57% menjadi 96%

Peningkatan ini menempatkan Nuvemshop dan Tiendanube sebagai platform e-commerce peringkat performa #1 di Brasil, Argentina, dan Meksiko.

Poin-poin penting dan refleksi pasca-mortem

Arsitektur Nuvemshop yang sangat dapat disesuaikan berarti kami tidak dapat mengandalkan panduan pengoptimalan standar. Masalah sebenarnya bukan bobot gambar atau latensi server: Masalahnya adalah browser memilih elemen yang tidak terduga sebagai LCP karena transisi CSS, sinyal prioritas yang tidak ada, dan pemuatan lambat yang diterapkan pada gambar di bagian atas area pandang.

Perbaikannya cukup mudah setelah kami memahami akar penyebabnya: Hapus transisi dari bagian posisi pertama, hapus pemuatan lambat dari gambar di bagian atas area pandang, dan tambahkan sinyal prioritas eksplisit. Kami menerapkannya secara konsisten di semua tema inti, jenis halaman, dan lebih dari 180.000 toko di platform kami.

Hasilnya sudah jelas: Tingkat kelulusan LCP meningkat dari 57% menjadi 96%, tingkat kelulusan Core Web Vitals secara keseluruhan melonjak dari 48% menjadi 72%, dan penjual mengalami keuntungan yang terukur: Peningkatan 8,9% dalam rasio konversi dan peningkatan 8,4% dalam engagement keranjang di perangkat seluler. Etalase yang cepat bukan hanya pencapaian teknis, tetapi juga secara langsung mendorong kesuksesan penjual.