تاریخ انتشار: ۲۴ ژوئن ۲۰۲۶
Nuvemshop (که در امریکای لاتین اسپانیایی‌زبان با نام Tiendanube شناخته می‌شود) پلاتفرم تجارت الکترونیک پیشرو در منطقه است که بیش‌از ۱۸۰٬۰۰۰ فروشگاه آنلاین را پشتیبانی می‌کند. با سفارشی‌سازی ویترین فروشگاه‌ها توسط فروشندگان ازطریق چندین زمینه و چیدمان‌های محتوای پویا، اطمینان از بارگیری سریع صفحه در این تنوع، چالش‌های فنی منحصربه‌فردی را ایجاد می‌کند.
- سلامت «بزرگ‌ترین نقاشی دارای محتوا» (LCP) ۶۸٪ بهبود یافت، از ۵۷٪ به ۹۶٪ در یک سال، که نشان‌دهنده تغییر عمده‌ای در نحوه پرداز زدن محتوا توسط فروشگاه‌ها در بالای ناحیه نمایش برای کاربران واقعی است.
- نرخ قبولی «معیارهای کلیدی اصلی وب» از ۴۸٪ به ۷۲٪ افزایش یافت، یعنی تقریباً ۳ فروشگاه از هر ۴ فروشگاه اکنون آستانه عملکرد پایه Google را برآورده می‌کنند.
- تعامل خرید به‌طور قابل‌اندازه‌گیری بهبود یافت: با تجزیه‌وتحلیل همان گروه از
فروشگاه‌های برزیلی فعال در ژانویه ۲۰۲۵ و ژانویه ۲۰۲۶، بازدیدکنندگان تلفن همراه از
جستجوی طبیعی Google نشان دادند:
- افزایش ۸٫۹٪ در نرخ تبدیل (جلسه به سفارش پرداخت‌شده)
- ٪۸٫۴ افزایش در نرخ تعامل سبد خرید (جلسه به سبد خرید)
- تلفن همراه بیشترین سود را به‌همراه داشت، که با جایی که بهبودهای LCP بیشترین اهمیت را داشتند مطابقت دارد.
این نتایج با پژوهش Deloitte که به‌سفارش Google انجام شده است (بیش‌از ۳۰ میلیون جلسه در ۳۷ نمانام) مطابقت دارد. این پژوهش نشان داد که بهبود ۰٫۱ ثانیه‌ای در سرعت بار کردن می‌تواند نرخ تبدیل خرده‌فروشی را تا ٪۸٫۴ افزایش دهد، که این امر جهت سرمایه‌گذاری‌های ما را تأیید می‌کند.
چالش: تشخیص LCP در چیدمان‌های پویای تجارت الکترونیک
در آغاز سال ۲۰۲۵، فقط ۴۸٪ از فروشگاه‌های ما از آستانه‌های «معیارهای کلیدی اصلی وب» عبور کردند، و ۵۷٪ امتیازهای LCP سالمی داشتند. فرضیه اولیه ما وزن تصویر یا تأخیر سرور بود. اشتباه کردیم.
ازطریق تجزیه‌وتحلیل PageSpeed Insights در هزاران فروشگاه، متوجه شدیم که پلتفرم ما به فروشندگان اجازه می‌دهد بخش‌های صفحه اصلی را به‌صورت پویا ترتیب دهند: گردونه‌ها، برنماها، شبکه‌های محصول، و ماژول‌های سفارشی می‌توانند به هر ترتیبی ظاهر شوند.
این انعطاف‌پذیری مشکل پیش‌بینی‌نشده‌ای را ایجاد کرد: عنصر مناسب همیشه به‌عنوان LCP شناسایی نمی‌شد. در فروشگاه‌های دارای گردونه، که ۸۵٪ از ویترین‌های ما را تشکیل می‌دادند، گاهی‌اوقات برچسب LCP به‌جای اولین تصویر گردونه به برنمایی که در پایین‌تر از نمای اَشکال قرار داشت اختصاص داده می‌شد، که این امر به نحوه رندر شدن صفحه در صفحه‌نمایش‌ها و دستگاه‌های مختلف بستگی داشت. این یعنی تلاش‌های ما برای بهینه‌سازی تأثیر موردنظر را نداشت: ما عناصری را بهینه‌سازی می‌کردیم که درواقع عناصر LCP نبودند.
برخلاف پلاتفرم‌های معمول SaaS، نمی‌توانستیم فقط صفحه اصلی را اصلاح کنیم. ما به راه‌حلی نیاز داشتیم که در همه پیکربندی‌های ممکن برای زمینه‌ها، چیدمان بخش‌ها، و سفارشی‌سازی‌های فروشندگان کار کند، بدون اینکه فروشگاه‌های موجود را خراب کند یا آزادی خلاقانه را محدود کند.
چیدمان‌های پویا چگونه بر انتخاب عنصر LCP تأثیر می‌گذارند
ازطریق تجزیه‌وتحلیل PageSpeed Insights و نظارت کاربر واقعی، متوجه شدیم که انتقال‌های CSS در گردونه‌ها و برنماها زمانی‌که عناصر برای الگوریتم تشخیص LCP مرورگر قابل‌مشاهده شدند، به‌تأخیر افتادند. Even though users perceived the carousel as loading first, the browser sometimes marked a banner in the second section as the LCP element—because that element's visibility wasn't delayed by transition effects.
سه علت ریشه‌ای را شناسایی کردیم:
- انتقال‌های CSS وقتی عناصر قابل‌مشاهده درنظر گرفته می‌شدند به‌تأخیر می‌افتادند، که باعث می‌شد تشخیص LCP به قاب اشتباهی منتقل شود.
- بار کردن کُند برای تصاویر بالای ناحیه نمایش که باید فوراً بار می‌شدند اعمال شد.
- نبود سیگنال‌های اولویت به این معنی بود که مهم‌ترین تصاویر ابتدا بار نمی‌شدند.
همچنین متوجه شدیم که بخش قابل‌توجهی از اندازه‌گیری‌های LCP از صفحات دسته‌بندی و محصول به‌دست آمده است، نه فقط از صفحه‌های اصلی، به این معنی که اصلاحات ما باید به‌طور مداوم در همه انواع صفحات پربازدید اعمال می‌شد.
پیاده‌سازی: رفع سه علت ریشه‌ای در مقیاس بزرگ
با شناسایی علت‌ها، رفع مشکل ساده بود. ما آن‌ها را به‌طور یکسان در همه زمینه‌های اصلی و انواع صفحه‌ها اعمال کردیم، اما هرکدام نیاز به تعیین دقیق محدوده داشت تا از ایجاد مشکلات جدید جلوگیری شود.
- انتقال‌های CSS برای بخش‌های موقعیت اول برداشته شد. بخش‌هایی که ابتدا در صفحه ظاهر می‌شوند اکنون بلافاصله پرداز می‌شوند، که باعث می‌شود مرورگر آن‌ها را به‌عنوان نامزدهای LCP بدون تأخیر مصنوعی شناسایی کند.
بار کردن کُند را از تصاویر بالای نمای دید برداشته‌ایم. برای تصاویر در بخش اول،
loading="lazy"را به‌طور مشروط برمی‌داریم تا تأخیر بارگیری منبع را حذف کنیم. ما دقت کردیم که این را فقط به اولین تصویر در بخش‌های جایگاه اول محدود کنیم:<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"نشان‌های اولویت صریح اضافه شد. با افزودن
fetchpriority="high"، به اسکنر پیش‌بارگیری مرورگر می‌گوییم که تصویر LCP منبعی با اولویت بالا است و به آن اجازه می‌دهیم زودتر، قبل‌از پایان چیدمان و پردازش، کشف و بارگیری شود. منطق اعتبارسنجی را اضافه کردیم تا مطمئن شویم سیگنال‌های اولویت فقط زمانی اعمال می‌شوند که عنصر واقعاً در موقعیتی باشد که بتواند نامزد LCP باشد: افزودنfetchpriority="high"به تعداد زیادی تصویر نتیجه معکوس خواهد داشت، زیرا اگر همه چیز اولویت بالایی داشته باشد، هیچ چیز اولویت ندارد.<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- After -- img src="slide-1.webp" fetchpriority>="high" alt="Featured product"کاهش تأخیر ازطریق ذخیره‌سازی موقت لبه‌ای. ذخیره‌سازی در حافظه نهان برای کاهش زمان بارگیری مؤثر است، اما در تجارت الکترونیک، ریسک واقعی دارد: ارائه قیمت‌های قدیمی و داده‌های موجودی مستقیماً بر اعتماد مشتری و درآمد تأثیر می‌گذارد. ما با نظارت بر سنجه‌های کسب‌وکار درکنار داده‌های عملکرد، با دقت به این موضوع پرداختیم و نرخ‌های موفقیت حافظه پنهان را به حداکثر رساندیم و درعین‌حال اطمینان حاصل کردیم که هرگز محتوایی را که می‌تواند به تجربه فروشنده یا خریدار آسیب برساند، در حافظه پنهان ذخیره نکنیم.
تأثیر و نتایج: از ۵۷٪ تا ۹۶٪ بهبود LCP
| سنجه (ژانویه ۲۰۲۵ تا ژانویه ۲۰۲۶) | بهبود نسبی |
|---|---|
| LCP (خوب) | +٪۶۸ (٪۵۷ تا ٪۹۶) |
| معیارهای کلیدی اصلی وب (نرخ قبولی) | +٪۵۰ (٪۴۸ تا ٪۷۲) |
| نرخ تبدیل (جلسه به سفارش پولی) — Google طبیعی در تلفن همراه | ۸٫۹+٪ |
| تعامل با سبد خرید (جلسه به سبد خرید) — Google عادی در تلفن همراه | ۸٫۴+٪ |
این بهبودها Nuvemshop و Tiendanube را به‌عنوان پلاتفرم تجارت الکترونیک شماره ۱ ازنظر عملکرد در برزیل، آرژانتین، و مکزیک قرار داد.
نکات کلیدی و بازتاب‌های کالبدشکافی
معماری بسیار قابل‌سفارشی‌سازی Nuvemshop به این معنی بود که نمی‌توانستیم به کتاب‌های راهنمای بهینه‌سازی استاندارد تکیه کنیم. مشکل واقعی وزن تصویر یا تأخیر سرور نبود: مشکل این بود که مرورگرها به‌دلیل انتقال‌های CSS، سیگنال‌های اولویت ازدست‌رفته، و بار کردن کُند اعمال‌شده روی تصاویر در بالای نمای دید، عناصر غیرمنتظره‌ای را به‌عنوان «بزرگ‌ترین نقاشی دارای محتوا» انتخاب می‌کردند.
وقتی علل ریشه‌ای را فهمیدیم، اصلاح آن ساده بود: حذف انتقال‌ها از بخش‌های موقعیت اول، حذف بارکردن کُند از تصاویر بالای نمای هدف، و افزودن سیگنال‌های اولویت صریح. این را به‌طور یکسان در همه زمینه‌های اصلی، انواع صفحه، و بیش‌از ۱۸۰٬۰۰۰ فروشگاه در پلاتفرممان اعمال کردیم.
نتایج گویای همه‌چیز است: نرخ قبولی LCP از ۵۷٪ به ۹۶٪ رسید، نرخ قبولی کلی «معیارهای کلیدی اصلی وب» از ۴۸٪ به ۷۲٪ جهش کرد، و فروشندگان شاهد دستاوردهای قابل‌اندازه‌گیری بودند: افزایش ۸٫۹٪ در نرخ تبدیل و افزایش ۸٫۴٪ در تعامل با سبد خرید در تلفن همراه. ویترین‌های سریع فقط یک دستاورد فنی نیستند، بلکه مستقیماً موفقیت فروشنده را هدایت می‌کنند.