جان مولر (John Mueller)، یکی از چهره های سرشناس گوگل، اخیراً به یک مطالعه موردی (Case Study) جدید اشاره کرده است که به خوبی توضیح می دهد چرا برخی از تلاش ها برای بهبود LCP (Largest Contentful Paint) در سایت ها با شکست مواجه می شوند. در سایت هایی که چیدمان (Layout) صفحات متغیر است، مرورگر ممکن است روی یک عنصر اشتباه تمرکز کند؛ در نتیجه، تمام بهینه سازی های بعدی شما روی چیزی اعمال می شود که اصلاً از ابتدا عنصر واقعی LCP نبوده است!
این مطالعه موردی در تاریخ ۲۴ ژوئن در وب سایت web.dev منتشر شد و حاصل یک سال تلاش تیم پلتفرم تجارت الکترونیک Nuvemshop برای بهبود شاخص های «هسته حیاتی وب» است. در ابتدای کار، تیم فنی این شرکت گمان می کرد که مشکل اصلی از حجم بالای تصاویر یا تاخیر سرور (Server Latency) است. اما بررسی های عمیق تر، آن ها را به سمت نحوه انتخاب عنصر LCP توسط مرورگر هدایت کرد.
پس از اینکه این تیم توانست انتخاب عنصر صحیح توسط مرورگر، اولویت بندی لود تصاویر، استراتژی بارگذاری تنبل (Lazy Loading) و کش در لبه (Edge Caching) را بهینه سازی کند، Nuvemshop گزارش داد که سهم فروشگاه های دارای نمره LCP «خوب» از ۵۷ درصد به ۹۶ درصد افزایش یافته است!
چگونه مرورگر عنصر اشتباه را انتخاب می کند؟
در پلتفرم Nuvemshop، فروشندگان می توانند بخش های مختلف صفحه اصلی سایت خود را با هر ترتیب و چیدمانی که دوست دارند تنظیم کنند. این آزادی عمل باعث می شود که اسلایدرها (Carousels)، بنرها و شبکه های نمایش محصول (Product Grids) در موقعیت های متفاوتی در قالب های گوناگون ظاهر شوند. طبق این مطالعه موردی، اسلایدرها در ۸۵ درصد از فروشگاه ها حضور داشتند و دقیقاً در همین نقطه بود که اندازه گیری مرورگر دچار اختلال می شد.
ما در تیم طراحی سایت و سئو دانش وب نیز بارها در پروژه های فروشگاهی ایرانی با این سناریو مواجه شده ایم. استفاده از اسلایدرهای سنگین با کدهای جاوااسکریپت و انیمیشن های پیچیده در بالای صفحه (Above the Fold) یکی از رایج ترین دلایل افت سرعت سایت های ایرانی است.
در کیسِ Nuvemshop، ریشه مشکل به افکت های تغییر تصویر (CSS Transitions) در اسلایدرها و بنرها برمی گشت. این افکت های نمایشی باعث می شدند زمان دیده شدن عناصر توسط سیستم تشخیص LCP مرورگر، با تاخیر مواجه شود. در حالی که کاربر واقعی، لود شدن اسلایدر را در همان ابتدا می دید، مرورگر گاهی به اشتباه یک بنر در قسمت های پایین تر صفحه را به عنوان عنصر LCP شناسایی می کرد؛ فقط به این دلیل که آن بنرِ پایینی هیچ افکتِ تاخیرداری نداشت! در نتیجه، تمام تلاش های قبلی این تیم برای بهینه سازی سرعت، روی عناصری متمرکز بود که اصلاً LCP صفحه محسوب نمی شدند.
تحقیقات آن ها سه علت اصلی را برای این مشکل شناسایی کرد:
- افکت های نمایشی (Transitions) تشخیص مرورگر را به فریم اشتباهی موکول می کردند.
- قابلیت «بارگذاری تنبل» (Lazy Loading) باعث تاخیر در لود تصاویری می شد که در بخش بالای صفحه قرار داشتند و باید در لحظه لود می شدند.
- تصاویر حیاتی صفحه فاقد سیگنال های «اولویت بندی لود» بودند.
علاوه بر این، چون این اندازه گیری ها هم در صفحات دسته بندی و هم در صفحات محصول (و نه فقط صفحه اصلی) انجام می شد، راه حل نهایی باید به گونه ای طراحی می شد که در تمام انواع صفحات به درستی کار کند.
: این تصویر چالش فنی را نشان می دهد که در آن استفاده از انیمیشن ها و اسلایدرهای سنگین در بالای صفحه، باعث می شود مرورگر عنصر اشتباهی را به عنوان LCP شناسایی کند و تمام تلاش های بهینه سازی روی عنصر واقعی اعمال نشود
سه راه حل کلیدی برای رفع مشکل LCP
اگرچه این مطالعه موردی به یک تغییر چهارم یعنی استفاده از Edge Caching برای کاهش تاخیر سرور نیز اشاره می کند، اما تنظیمات اصلی برای حل مشکلِ «تشخیص عنصر» شامل سه تغییر ساده اما حیاتی در نحوه رندر و لود شدنِ بخش بالایی صفحه بود. شرکت Nuvemshop هر سه تغییر را در تمام قالب های اصلی و صفحات خود پیاده سازی کرد. این تنظیمات کاملاً سرراست بوده و از بهترین شیوه های استاندارد پرفورمنس وب (Web Performance) پیروی می کنند.
اقدام اول: تیم فنی، کدهای مربوط به انیمیشن ها و افکت های CSS (Transitions) را از بخش های بالایی صفحه حذف کرد تا این عناصر به صورت آنی و لحظه ای نمایش داده شوند. با این کار، مرورگر می توانست بدون هیچ تاخیری آن ها را به عنوان کاندیدای واقعی LCP تشخیص دهد.
اقدام دوم: آن ها ویژگی loading="lazy" (بارگذاری تنبل) را از اولین تصویر در بخش بالای صفحه حذف کردند. مستندات سایت web.dev در این باره بسیار صریح است و همواره هشدار می دهد که استفاده از بارگذاری تنبل برای تصویر LCP یک اشتباه مهلک است، زیرا همیشه به زمان لود صفحه تاخیر اضافه می کند.
نمونه کد قبل و بعد از اصلاح:
<!-- وضعیت قبل (اشتباه) -->
<img src="slide-1.webp" loading="lazy" alt="محصول ویژه">
<!-- وضعیت بعد (صحیح) -->
<img src="slide-1.webp" alt="محصول ویژه">
اقدام سوم: گام نهایی، اضافه کردن ویژگی fetchpriority="high" به تصویری بود که احتمالاً کاندیدای LCP است. این کد به اسکنر پیش بارگذاریِ مرورگر (Preload Scanner) دستور می دهد که این تصویر را با بالاترین اولویت و در سریع ترین زمان ممکن دانلود کند. تیم Nuvemshop اعلام کرد که این سیگنال را با کدهای منطقیِ اعتبارسنجی همراه کرده است تا فقط روی عناصری اعمال شود که واقعاً می توانند LCP باشند. (گوگل توصیه می کند که این ویژگی را فقط برای یک یا دو تصویر کلیدی صفحه استفاده کنید؛ زیرا اگر به مرورگر بگویید «همه چیز اولویت بالایی دارد»، در عمل یعنی «هیچ چیز اولویت ندارد!»).
نمونه کد قبل و بعد از اصلاح:
<!-- وضعیت قبل -->
<img src="slide-1.webp" alt="محصول ویژه">
<!-- وضعیت بعد (صحیح) -->
<img src="slide-1.webp" fetchpriority="high" alt="محصول ویژه">
گزارش های تکمیلی و دستاوردهای Nuvemshop
شرکت Nuvemshop گزارش می دهد که نرخ قبولی کلیِ معیارهای هسته حیاتی وب (Core Web Vitals) در طول یک سال از ۴۸٪ به ۷۲٪ ارتقا یافته است و این بهبود صرفاً محدود به شاخص LCP نبوده است.
این شرکت برای بررسی تاثیر این تغییرات، همان فروشگاه های برزیلی را که هم در ژانویه ۲۰۲۵ و هم در سال ۲۰۲۶ فعال بودند مورد ارزیابی قرار داد. آمارها نشان داد برای بازدیدکنندگان موبایلی که از طریق جستجوی ارگانیک گوگل وارد سایت شده بودند، نرخ تبدیل (Conversion Rate) حدود ۸.۹ درصد و میزان تعامل کاربران با سبد خرید ۸.۴ درصد افزایش یافته است.
البته باید در نظر داشت که این ارقام گزارش های داخلی خود شرکت هستند و آمار فروش بر اساس مقایسه سالانه همان گروه از فروشگاه هاست، نه یک تست کنترل شده آزمایشگاهی. با این حال، Nuvemshop برای اثبات همبستگی بین افزایش سرعت و افزایش فروش، به تحقیقات شرکت Deloitte (که به سفارش گوگل انجام شده بود) استناد می کند؛ تحقیقاتی که نشان داد حتی کاهش ۰.۱ ثانیه ای در زمان لود صفحه، می تواند نرخ تبدیل فروشگاه های خرده فروشی را تا ۸.۴ درصد افزایش دهد.
چرا این موضوع اهمیت دارد؟
قبل از اینکه به جانِ سایت بیفتید و شروع به فشرده سازی و افت کیفیت تصویر اصلی (Hero Image) کنید، دو بار چک کنید و مطمئن شوید عنصری که مرورگر آن را به عنوان LCP می شناسد، همانی است که شما در حال بهینه سازیش هستید! این موضوع به ویژه در سایت هایی که با قالب های آماده و پیچیده ساخته شده اند یا دارای اسلایدرهای سنگین هستند، از اهمیت بسیار بالایی برخوردار است.
بررسی های اخیر منابع معتبر نیز به همین نقطه ختم می شود. با نگاهی به وضعیت Core Web Vitals در پلتفرم های مختلف مدیریت محتوا (CMS)، داده های HTTP Archive نشان داده است که معیار LCP در دنیای واقعی معمولاً زمانی افت می کند که پلتفرمِ سایت، مرورگر را در پیدا کردن تصویر اصلی با کندی مواجه کند یا تصویر اصلی را مجبور کند تا برای لود شدن با ده ها فایلِ پر اولویت دیگر رقابت کند (نه اینکه لزوماً خودِ صفحه خیلی سنگین باشد). «بری پولارد» (Barry Pollard) از متخصصان پرفورمنس وب نیز پیش تر توضیح داده است که چگونه می توان قبل از دست زدن به حتی یک خط کد، ریشه مشکلات LCP را در ابزار PageSpeed Insights ردیابی کرد.
ارتباط بین افزایش فروش و سرعت سایت، برداشت Nuvemshop از داده هاست. معیارهای هسته حیاتی وب تنها یکی از فاکتورهای جزئی در رتبه بندی سئو هستند و گوگل بارها تاکید کرده است که «ارتباط محتوایی با نیاز کاربر» (Relevance) بسیار مهم تر است. بنابراین، داشتن یک فروشگاه سریع تر را باید بیشتر به عنوان یک ابزار قدرتمند برای افزایش رضایت کاربر و افزایش فروش (UX & Conversion) در نظر گرفت تا یک اهرم جادویی برای رتبه گرفتن سریع در گوگل.
نتیجه گیری
این کیس استادی تنها تجربه یک شرکت است و افزایش آمار فروش را باید بیشتر به عنوان یک روند و الگو در نظر گرفت. تکنیک استفاده شده نیز چیز جدیدی نیست؛ سایت web.dev سال هاست که بر اهمیت کشف عناصر اصلی و اولویت بندی لود آن ها تاکید می کند. اما ارزش واقعی این مطالعه موردی در این است که با یک مثال عملی و واقعی نشان می دهد چگونه می توان عنصر حقیقی LCP را در چیدمان هایی که از یک فروشگاه به فروشگاه دیگر تغییر می کنند شناسایی کرد؛ چالشی که در تمام پلتفرم های قابل شخصی سازی از سخت ترین کارهاست.