رفع تأخیر تصویر اصلی صفحه محصول
تصویر زود دانلود میشد اما تا اجرای کامل اسکریپت گالری نامرئی میماند؛ گلوگاه در نمایش بود، نه شبکه.
قبل۶٫۵۳ ثانیهLCP صفحه محصول با گالری ۱۴ تصویری
بعد۲٫۱۸ ثانیهLCP همان سناریو پس از اصلاح
وضعیت اولیه
در صفحات محصول یک فروشگاه، تصویر اصلی بزرگترین عنصر قابل مشاهده بود اما wrapper گالری با opacity صفر رندر میشد. تصویر حدود ۱٫۶ ثانیه دانلود و چیدمان شده بود، ولی تا بارگذاری jQuery و آغاز FlexSlider روی صفحه paint نمیشد. بنابراین بهینهسازی حجم یا CDN بهتنهایی علت اصلی را رفع نمیکرد.
روش بررسی
- اندازهگیری LCP واقعی با PerformanceObserver و شبیهسازی شبکه و CPU موبایل
- مقایسه زمان پایان دانلود تصویر با لحظه paint شدن آن
- آزمون روی محصول تکتصویری و چندتصویری برای جداکردن اثر گالری
- کنترل CLS و رفتار thumbnailها پیش و پس از تغییر
اقدامات انجامشده
- نمایش فوری تصویر اول با CSS محدود به صفحه محصول
- پنهانکردن موقت تصاویر بعدی تا پیش از آمادهشدن اسلایدر
- طراحی selector بهگونهای که پس از ساختهشدن FlexSlider خودبهخود از مسیر خارج شود
- حفظ قالب و فایلهای اصلی برای کاهش ریسک و سازگاری بهتر با بهروزرسانی
مقایسه قبل و بعد
| شاخص | قبل | بعد |
|---|---|---|
| محصول تکتصویری | LCP برابر ۴٫۰۵ ثانیه | ۱٫۷۰ ثانیه |
| محصول ۱۴ تصویری | LCP برابر ۶٫۵۳ ثانیه | ۲٫۱۸ ثانیه |
| پایداری چیدمان | مقدار پایه ثبت شد | بدون رگرسیون ناشی از این اصلاح |
| پنج محصول تصادفی | وابسته به اجرای کامل گالری | LCP بین ۰٫۵۷ تا ۱٫۷۰ ثانیه با کش گرم |
درباره اندازهگیری: آزمون اصلی با پروفایل نزدیک به Pixel 5، محدودسازی چهاربرابری CPU و شبکه ۱٫۶Mbps انجام شد. داده آزمایشگاهی با تجربه همه کاربران برابر نیست، اما مقایسه قبل و بعد در شرایط ثابت علت را تأیید کرد.
اثر عملی تغییر
تصویر اصلی صفحه محصول پیش از آمادهشدن کامل گالری نمایش داده شد. بهبود LCP در آزمون آزمایشگاهی با شرایط یکسان اندازهگیری شد.
خدمت مرتبط را ببینید ←