اصلاح LCP صفحه محصول؛ وقتی تصویر دانلود شده اما دیده نمی‌شود

اختلاف زمان دریافت و نمایش

پوشش گالری با opacity صفر شروع می‌شد. تصویر حدود ۱٫۶ ثانیه آماده بود، ولی دیده‌شدن آن به jQuery و آغاز FlexSlider وابسته می‌ماند. زمان پایان دریافت با لحظهٔ نمایش مقایسه شد تا محل انتظار مشخص شود.

LCP با PerformanceObserver در سناریوی موبایل اندازه‌گیری شد. محصول تک‌تصویری و چندتصویری جدا بررسی شدند و پایداری چیدمان و بندانگشتی‌ها هم در آزمون بودند.

تغییر محدود در نمایش اولیه

تصویر اول با CSS محدود به صفحهٔ محصول پیش از آماده‌شدن گالری نمایش داده شد. تصاویر بعدی تا زمان مناسب پنهان ماندند و selector پس از ساخت اسلایدر از مسیر خارج شد. فایل‌های اصلی قالب حفظ شدند تا تغییر به همین رفتار محدود بماند.

در آزمون اصلی، پروفایل نزدیک به Pixel 5، محدودسازی چهاربرابری CPU و شبکهٔ ۱٫۶Mbps استفاده شد. نتیجهٔ آزمایشگاهی به معنی تجربهٔ یکسان همهٔ کاربران نیست.

نتیجهٔ ثبت‌شده

LCP محصول تک‌تصویری از ۴٫۰۵ به ۱٫۷۰ ثانیه و محصول ۱۴ تصویری از ۶٫۵۳ به ۲٫۱۸ ثانیه رسید. پنج محصول دیگر با کش گرم جدا بررسی شدند؛ این نتیجه نباید با شرایط آزمون اصلی مخلوط شود. جزئیات در جدول آمده است.

اگر گالری شما هم دیر دیده می‌شود

ابتدا دریافت فایل را از تأخیر نمایش جدا کنید. سپس رفتار تصاویر بعدی و تغییر چیدمان را کنترل کنید. راهنمای سنجش سرعت برای ثبت شرایط و خدمت بهبود عملکرد برای بررسی مسیر واقعی سایت شما در دسترس‌اند.

جدول نتیجه‌های ثبت‌شده

چرا دریافت سریع‌تر فایل به‌تنهایی کافی نبود؟

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

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

اطلاعات مناسب برای بررسی گالری دیگر

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