سرعت سایت فقط یک عدد نیست؛ Core Web Vitals را طوری بهتر کنیم که کاربر حسش کند

مدیر سایت اسکرین‌شات امتیاز ۹۲ را می‌فرستد، اما همان روز سه مشتری می‌گویند دکمه خرید روی موبایل دیر واکنش می‌دهد. تناقضی وجود ندارد: ابزار یک اجرای کنترل‌شده را دیده و مشتری، گوشی میان‌رده، اینترنت شلوغ و اسکریپت‌های واقعی را تجربه کرده است.

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

یک اصلاح واقعی چه شکلی است؟

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

سه نشانه، سه مسئله متفاوت

LCP زمان دیده‌شدن محتوای اصلی را نشان می‌دهد؛ تصویر قهرمان سنگین، فونت مسدودکننده یا پاسخ کند سرور معمولاً پشت آن است. INP از تأخیر تعامل می‌گوید و اغلب با جاوااسکریپت طولانی و کار زیاد در رشته اصلی بدتر می‌شود. CLS جابه‌جایی ناگهانی است؛ همان لحظه‌ای که کاربر قصد لمس دکمه دارد و بنر تازه‌بارگذاری‌شده آن را هل می‌دهد.

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

داده آزمایشگاهی را با داده واقعی قاطی نکنید

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

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

اولویت را با اثر و ریسک تعیین کنید

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

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

خروجی یک پروژه سرعت حرفه‌ای

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

منبع رسمی: راهنمای Web Vitals در web.dev