چگونه استراتژی اولویت‌بندی تصاویر Nuvemshop منجر به بهبود ۶۸ درصدی در LCP و افزایش ۸.۹ درصدی نرخ تبدیل شد؟

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

منتشر شده: ۲۴ ژوئن ۲۰۲۶

Nuvemshop (که در آمریکای لاتین اسپانیایی زبان با نام Tiendanube شناخته می‌شود) پلتفرم پیشرو تجارت الکترونیک در منطقه است که بیش از ۱۸۰،۰۰۰ فروشگاه آنلاین را پشتیبانی می‌کند. با توجه به اینکه فروشندگان، ویترین فروشگاه‌های خود را از طریق تم‌های متعدد و تنظیمات محتوای پویا سفارشی می‌کنند، تضمین بارگذاری سریع صفحات در این تنوع، چالش‌های فنی منحصر به فردی را به همراه دارد.

• سلامت Largest Contentful Paint (LCP) در عرض یک سال، ۶۸٪ بهبود یافت و از ۵۷٪ به ۹۶٪ رسید که نشان‌دهنده‌ی تغییر عمده‌ای در نحوه‌ی رندر محتوا در بالای صفحه‌ی نمایش برای کاربران واقعی است.
• نرخ قبولی Core Web Vitals از ۴۸٪ به ۷۲٪ افزایش یافت ، به این معنی که تقریباً از هر ۴ فروشگاه، ۳ فروشگاه اکنون به آستانه عملکرد پایه گوگل رسیده‌اند.
• تعامل خرید به طور قابل توجهی بهبود یافت: با تجزیه و تحلیل همان گروه از فروشگاه‌های برزیلی فعال در ژانویه ۲۰۲۵ و ژانویه ۲۰۲۶، بازدیدکنندگان موبایل از جستجوی ارگانیک گوگل موارد زیر را نشان دادند:
  • ۸.۹٪ افزایش در نرخ تبدیل (از بازدید به سفارش پرداخت‌شده)
  • ۸.۴٪ افزایش در نرخ تعامل سبد خرید (از هر بازدید تا سبد خرید)
• موبایل بیشترین سود را به همراه داشت ، که با بهبودهای قابل توجه LCP مطابقت دارد.

این نتایج با تحقیقات Deloitte که به سفارش گوگل انجام شده (بیش از 30 میلیون جلسه در 37 برند) همسو است، که نشان می‌دهد بهبود 0.1 ثانیه‌ای در سرعت بارگذاری می‌تواند نرخ تبدیل خرده‌فروشی را 8.4 درصد افزایش دهد و جهت سرمایه‌گذاری‌های ما را تأیید کند.

چالش: تشخیص LCP در طرح‌بندی‌های پویای تجارت الکترونیک

در آغاز سال ۲۰۲۵، تنها ۴۸٪ از فروشگاه‌های ما از آستانه‌های Core Web Vitals عبور کردند و ۵۷٪ امتیاز LCP سالمی داشتند. فرضیه اولیه ما حجم تصاویر یا تأخیر سرور بود. ما اشتباه می‌کردیم.

از طریق تجزیه و تحلیل PageSpeed ​​Insights در هزاران فروشگاه، متوجه شدیم که پلتفرم ما به فروشندگان اجازه می‌دهد بخش‌های صفحه اصلی را به صورت پویا مرتب کنند: چرخ و فلک‌ها، بنرها، شبکه‌های محصول و ماژول‌های سفارشی می‌توانند به هر ترتیبی ظاهر شوند.

این انعطاف‌پذیری یک مشکل پیش‌بینی‌نشده را ایجاد کرد: عنصر درست همیشه به عنوان LCP شناسایی نمی‌شد. در فروشگاه‌هایی که چرخ و فلک داشتند، که ۸۵٪ از فروشگاه‌های ما را تشکیل می‌دادند، بسته به نحوه رندر صفحه در صفحه نمایش‌ها و دستگاه‌های مختلف، بنری که در قسمت پایین صفحه نمایش قرار داشت، گاهی اوقات به جای تصویر اول چرخ و فلک، به عنوان LCP علامت‌گذاری می‌شد. این بدان معنا بود که تلاش‌های بهینه‌سازی ما اثر مورد نظر را نداشت: ما عناصری را بهینه‌سازی می‌کردیم که در واقع عناصر LCP نبودند.

برخلاف پلتفرم‌های SaaS معمولی، ما نمی‌توانستیم فقط صفحه اصلی را اصلاح کنیم. ما به راه‌حلی نیاز داشتیم که در تمام پیکربندی‌های ممکن قالب، چیدمان بخش‌ها و سفارشی‌سازی فروشگاه‌ها، بدون ایجاد اختلال در فروشگاه‌های موجود یا محدود کردن آزادی خلاقیت، کار کند.

چگونه طرح‌بندی‌های پویا بر انتخاب المان LCP تأثیر می‌گذارند

از طریق تحلیل PageSpeed ​​Insights و نظارت بر کاربران واقعی، متوجه شدیم که انتقال CSS در carouselها و بنرها، زمانی که عناصر برای الگوریتم تشخیص LCP مرورگر قابل مشاهده می‌شدند، با تأخیر مواجه می‌شد. اگرچه کاربران carousel را به عنوان عنصری که ابتدا در حال بارگذاری است، در نظر می‌گرفتند، مرورگر گاهی اوقات بنری را که در بخش دوم قرار داشت، به عنوان عنصر LCP علامت‌گذاری می‌کرد - زیرا مشاهده آن عنصر توسط جلوه‌های انتقال به تأخیر نمی‌افتاد.

ما سه علت ریشه‌ای را شناسایی کردیم:

• انتقال CSS زمانی که عناصر قابل مشاهده در نظر گرفته می‌شدند، به تأخیر می‌افتاد و تشخیص LCP را به فریم اشتباه سوق می‌داد.
• بارگذاری تنبل روی تصاویری که در بالای صفحه نمایش قرار داشتند و نیاز به بارگذاری فوری داشتند، اعمال شد.
• نبود سیگنال‌های اولویت به این معنی بود که مهم‌ترین تصاویر ابتدا بارگذاری نمی‌شوند.

ما همچنین دریافتیم که بخش قابل توجهی از اندازه‌گیری‌های LCP از صفحات دسته‌بندی و محصول حاصل می‌شود، نه فقط صفحات اصلی، به این معنی که اصلاحات ما باید به طور مداوم در تمام انواع صفحات پربازدید اعمال شود.

پیاده‌سازی: رفع سه علت ریشه‌ای در مقیاس بزرگ

با شناسایی علل، اصلاحات ساده بودند. ما آنها را به طور مداوم در تمام قالب‌های اصلی و انواع صفحات اعمال کردیم، اما هر کدام نیاز به برنامه‌ریزی دقیق داشتند تا از ایجاد مشکلات جدید جلوگیری شود.

• انتقال‌های CSS برای بخش‌هایی که در جایگاه اول قرار دارند حذف شد. بخش‌هایی که در صفحه اول ظاهر می‌شوند، اکنون بلافاصله رندر می‌شوند و تضمین می‌کنند که مرورگر آنها را به عنوان نامزدهای LCP بدون تأخیر مصنوعی تشخیص دهد.

• بارگذاری تنبل از تصاویر بالای صفحه نمایش حذف شد. برای تصاویر بخش اول، ما به صورت مشروط loading="lazy" حذف کردیم تا تأخیر بارگذاری منابع از بین برود. ما مراقب بودیم که این مورد فقط به تصویر اول در بخش‌های با موقعیت اول اعمال شود:

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

• سیگنال‌های اولویت صریح اضافه شد. با اضافه کردن fetchpriority="high" ، به اسکنر پیش‌بارگذاری مرورگر می‌گوییم که تصویر LCP یک منبع با اولویت بالا است و اجازه می‌دهد زودتر، قبل از اتمام طرح‌بندی و رندر، کشف و دانلود شود. ما منطق اعتبارسنجی را اضافه کردیم تا اطمینان حاصل کنیم که سیگنال‌های اولویت فقط زمانی اعمال می‌شوند که عنصر واقعاً در موقعیتی باشد که می‌تواند کاندید LCP باشد: اضافه کردن fetchpriority="high" به تصاویر زیاد نتیجه‌ی معکوس خواهد داشت، زیرا اگر همه چیز اولویت بالا داشته باشد، هیچ چیز اولویت بالایی نخواهد داشت.

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

• کاهش تأخیر از طریق ذخیره‌سازی لبه‌ای. ذخیره‌سازی برای کاهش زمان بارگذاری مؤثر است، اما در تجارت الکترونیک، یک خطر واقعی را به همراه دارد: ارائه داده‌های قیمت‌گذاری و موجودی قدیمی مستقیماً بر اعتماد و درآمد مشتری تأثیر می‌گذارد. ما با نظارت بر معیارهای تجاری در کنار داده‌های عملکرد، به این موضوع با دقت نزدیک شدیم و نرخ موفقیت در ذخیره‌سازی را به حداکثر رساندیم و در عین حال اطمینان حاصل کردیم که هرگز محتوایی را که می‌تواند به تجربه فروشنده یا خریدار آسیب برساند، ذخیره‌سازی نمی‌کنیم.

تأثیر و نتایج: از ۵۷٪ تا ۹۶٪ بهبود LCP

این پیشرفت‌ها، Nuvemshop و Tiendanube را به عنوان پلتفرم تجارت الکترونیک شماره ۱ از نظر عملکرد در برزیل، آرژانتین و مکزیک قرار داد.

نکات کلیدی و تأملات پس از مرگ

معماری بسیار قابل تنظیم Nuvemshop به این معنی بود که ما نمی‌توانستیم به کتاب‌های راهنمای بهینه‌سازی استاندارد تکیه کنیم. مشکل واقعی وزن تصویر یا تأخیر سرور نبود: مشکل این بود که مرورگرها به دلیل انتقال CSS، سیگنال‌های اولویت از دست رفته و بارگذاری تنبل اعمال شده بر روی تصاویر در بالای صفحه نمایش، عناصر غیرمنتظره را به عنوان LCP انتخاب می‌کردند.

وقتی ریشه مشکلات را فهمیدیم، رفع آنها ساده بود: حذف انتقال‌ها از بخش‌های اول صفحه، حذف بارگذاری تنبل از تصاویر بالای صفحه نمایش و اضافه کردن سیگنال‌های اولویت‌دار صریح. ما این کار را به طور مداوم در تمام قالب‌های اصلی، انواع صفحات و بیش از ۱۸۰،۰۰۰ فروشگاه موجود در پلتفرم خود اعمال کردیم.

نتایج گویای همه چیز هستند: نرخ قبولی LCP از ۵۷٪ به ۹۶٪ افزایش یافت، نرخ قبولی کلی Core Web Vitals از ۴۸٪ به ۷۲٪ افزایش یافت و فروشندگان شاهد دستاوردهای قابل اندازه‌گیری بودند: افزایش ۸.۹٪ در نرخ تبدیل و افزایش ۸.۴٪ در تعامل با سبد خرید در موبایل. فروشگاه‌های سریع فقط یک دستاورد فنی نیستند، بلکه مستقیماً موفقیت فروشندگان را رقم می‌زنند.