Dipublikasikan: 24 Juni 2026
Nuvemshop (dikenal sebagai Tiendanube di Amerika Latin yang berbahasa Spanyol) adalah platform e-commerce terkemuka di wilayah 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.
- Kualitas 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: Dengan menganalisis kohor yang sama dari
toko-toko di Brasil 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 8,4% dalam rasio engagement keranjang (sesi ke keranjang)
- Perangkat seluler mendorong peningkatan terbesar, konsisten dengan peningkatan LCP yang paling signifikan.
Hasil ini sejalan dengan riset Deloitte yang ditugaskan oleh Google (lebih dari 30 juta sesi di 37 brand), yang menemukan bahwa peningkatan kecepatan pemuatan sebesar 0,1 dtk 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 ukuran 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, petak 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% dari 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 bisa hanya memperbaiki halaman beranda. Kami memerlukan solusi yang berfungsi di setiap kemungkinan konfigurasi tema, pengaturan bagian, dan penyesuaian penjual, tanpa merusak toko yang ada atau membatasi kebebasan berkreasi.
Pengaruh tata letak dinamis terhadap pemilihan elemen LCP
Melalui analisis PageSpeed Insights dan pemantauan pengguna sungguhan, 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 penyebab utama:
- Transisi CSS tertunda saat elemen dianggap terlihat, sehingga mendorong deteksi LCP ke frame yang salah.
- Pemuatan lambat diterapkan ke gambar di bagian atas area pandang yang perlu segera dimuat.
- Tidak adanya sinyal prioritas berarti gambar yang paling penting tidak dimuat terlebih dahulu.
Kami juga mendapati bahwa sebagian besar pengukuran LCP berasal dari halaman kategori dan halaman produk, bukan hanya halaman beranda, yang berarti perbaikan kami perlu diterapkan secara konsisten di semua jenis halaman dengan traffic tinggi.
Implementasi: memperbaiki tiga akar masalah dalam skala besar
Setelah penyebabnya diidentifikasi, perbaikannya menjadi mudah. Kami menerapkannya secara konsisten di semua tema inti dan jenis halaman, tetapi masing-masing memerlukan cakupan yang cermat untuk menghindari timbulnya masalah baru.
- Menghapus transisi CSS untuk bagian posisi pertama. Bagian yang muncul pertama kali di halaman kini langsung dirender, sehingga browser mendeteksinya sebagai kandidat LCP tanpa penundaan buatan.
Menghapus pemuatan lambat dari gambar di bagian atas area pandang. Untuk gambar di bagian pertama, kita menghapus
loading="lazy"secara bersyarat untuk menghilangkan penundaan pemuatan resource. Kami berhati-hati untuk membatasi cakupan ini hanya pada gambar pertama di bagian posisi pertama:<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"Menambahkan sinyal prioritas eksplisit. Dengan menambahkan
fetchpriority="high", kita memberi tahu pemindai pramuat browser bahwa gambar LCP adalah resource prioritas utama, sehingga gambar tersebut dapat ditemukan dan didownload lebih cepat, sebelum tata letak dan rendering selesai. Kami menambahkan logika validasi untuk memastikan sinyal prioritas hanya berlaku saat elemen benar-benar berada di posisi yang dapat menjadi kandidat LCP: Menambahkanfetchpriority="high"ke terlalu banyak gambar akan menjadi kontraproduktif, karena jika semuanya berprioritas tinggi, tidak ada yang menjadi prioritas.<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- 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 usang secara langsung memengaruhi kepercayaan dan pendapatan pelanggan. Kami melakukan pendekatan ini dengan hati-hati, yaitu dengan memantau metrik bisnis bersama data performa, memaksimalkan rasio cache ditemukan, sekaligus memastikan kami tidak pernah meng-cache konten yang dapat membahayakan pengalaman penjual atau pembeli.
Dampak dan hasil: Peningkatan LCP dari 57% menjadi 96%
| Metrik (Januari 2025 hingga Januari 2026) | Peningkatan relatif |
|---|---|
| LCP (baik) | +68% (57% hingga 96%) |
| Core Web Vitals (tingkat kelulusan) | +50% (48% hingga 72%) |
| Rasio konversi (sesi ke pesanan berbayar) — Google organik seluler | +8,9% |
| Interaksi keranjang (sesi ke keranjang) — Google organik seluler | +8,4% |
Peningkatan ini menempatkan Nuvemshop dan Tiendanube sebagai platform e-commerce dengan peringkat performa #1 di Brasil, Argentina, dan Meksiko.
Poin-poin penting dan refleksi post-mortem
Arsitektur Nuvemshop yang sangat dapat disesuaikan berarti kami tidak dapat mengandalkan playbook pengoptimalan standar. Masalah sebenarnya bukanlah 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 ke gambar di bagian atas area pandang.
Perbaikannya mudah setelah kami memahami penyebab utamanya: Menghapus transisi dari bagian posisi pertama, menghapus pemuatan lambat dari gambar di bagian atas area pandang, dan menambahkan sinyal prioritas eksplisit. Kami menerapkan hal ini secara konsisten di semua tema inti, jenis halaman, dan lebih dari 180.000 toko di platform kami.
Hasilnya terlihat jelas: tingkat kelulusan LCP meningkat dari 57% menjadi 96%, tingkat kelulusan Core Web Vitals secara keseluruhan melonjak dari 48% menjadi 72%, dan penjual memperoleh keuntungan yang terukur: peningkatan rasio konversi sebesar 8,9% dan peningkatan interaksi keranjang sebesar 8,4% di perangkat seluler. Etalase yang cepat bukan hanya pencapaian teknis, tetapi juga secara langsung mendorong kesuksesan penjual.