Core Web Vitals را از ترافیک واقعی درست کن، نه از اسکرین‌شات Lighthouse

Core Web Vitals از ۲۰۲۱ سیگنال رتبه‌بندی هم شده، ولی دلیل درست‌کردنش ساده‌تر از سئو است. صفحه دیر رنگ می‌شود، کلیک معطل می‌ماند، چیدمان زیر دست کاربر می‌جهد. محصول هنوز فرصت حرف‌زدن پیدا نکرده که کاربر رفته.

سه عدد را جدا نگه دار. Largest Contentful Paint، Interaction to Next Paint، و Cumulative Layout Shift. هر کدام باگ جداست. یک اسکرین Lighthouse سبز روی وای‌فای دفتر هیچ‌کدام را تضمین نمی‌کند.

هر متریک دقیقاً چه چیزی را می‌سنجد

LCP زمان رسیدن بزرگ‌ترین عنصر داخل viewport است. معمولاً تصویر هیرو، بلوک تیتر، یا فریم پوستر ویدیو. آستانه «خوب» همان ۲٫۵ ثانیه روی دستگاه و شبکه واقعی است، نه روی مک‌بوک وصل به روتر دفتر.

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

FID دیگر متریک اصلی نیست. شکاف اولین کلیک تا شروع کار نخ اصلی را می‌سنجید و هدف دوران خودش زیر ۱۰۰ میلی‌ثانیه بود. چیزی که Chrome حالا جدی می‌گیرد INP است: پاسخ تعامل‌ها در طول عمر صفحه. آستانه خوب INP حدود ۲۰۰ میلی‌ثانیه است. بالاتر از آن معمولاً یعنی تسک طولانی، جاوااسکریپت اضافی، یا طوفان hydration.

CLS جابه‌جایی غیرمنتظره محتوای دیده‌شده را نمره می‌دهد. زیر ۰٫۱ قابل قبول است. مقصرهای همیشگی: تصویر بدون ابعاد، فونت وب، بنر دیر تزریق‌شده، و تبلیغ. اگر کاربر دکمه را می‌زند و دکمه رفته زیر انگشتش، این CLS است نه «حس کاربر».

آزمایشگاه دروغ نمی‌گوید؛ سؤال غلط می‌پرسد

هر دو را نگه دار، ولی وزن‌شان یکی نیست.

ردیابی Performance در Chrome DevTools و Lighthouse برای بازتولید آزمایشگاهی خوب‌اند. گزارش Core Web Vitals در Search Console و داده CrUX می‌گوید کاربر واقعی چه دیده. اگر attribution روی ترافیک خودت لازم است، کتابخانه web-vitals را در پروداکشن بگذار، نه یک اسکریپت ثالث که خودش نخ اصلی را بند بیاورد.

نمره آزمایشگاه می‌تواند سبز باشد و LCP موبایل در فیلد قرمز. بهینه‌سازی را روی فیلد قفل کن. صفحه‌ای که ترافیک ندارد ارزش هفته مهندسی ندارد.

اول LCP، چون خالی‌بودن صفحه را کاربر می‌فهمد

ترتیب بردها تقریباً ثابت است.

تصویر یا فونتی را preload کن که واقعاً در viewport اول نقاشی می‌شود. همه‌چیز را preload نکن؛ اولویت را رقیق می‌کنی.

تصویر را به عرض نمایش فشرده کن. AVIF یا WebP با fallback معقول. یک PNG سه‌مگابایتی را با edge function درمان نکن.

CSS بلااستفاده و اسکریپت همزمان ثالث را از بالای صفحه بردار. پک آیکون غول‌پیکر همان کار را می‌کند که یک کتابخانه چت.

در Next.js با App Router، گره LCP باید در HTML اول باشد. Server Component یا استریم هیرو معمولاً از کاروسل فقط-کلاینت سریع‌تر است. فریم اول ایستا، hydration بعدتر. کش CDN برای هیروی استاتیک را دست‌کم نگیر، ولی کش جای تصویر اشتباه را نمی‌گیرد.

INP یعنی نخ اصلی شلوغ است

تسک‌های بلند را بشکن. `scheduler.yield` جایی که پشتیبانی می‌شود، یا خردکردن باندل، نه یک `requestIdleCallback` تزئینی دور همه‌چیز.

باندل را آنالیز کن. حدس نزن کدام پکیج سنگین است. اسکریپت‌های غیربحرانی، آنالیتیکس و ویجت چت، را تا بعد از hydration یا تا اولین تعامل عقب بینداز.

در React و Next.js هزینه hydration اغلب بزرگ‌ترین برد INP است. مسیر اول نباید کل اپ را به کلاینت بفرستد. ویجت ثانویه را طوری بساز که کلیک دکمه اصلی معطل آن نماند.

CLS را با جا رزرو کن، نه با امید

برای تصویر و embed عرض و ارتفاع یا جعبه `aspect-ratio` بگذار. جای بنر را از قبل خالی کن. چیزی را بالای محتوای نقاشی‌شده تزریق نکن.

فونت را با `font-display: swap` یا `optional` بیاور و متریک fallback را نزدیک فونت اصلی نگه دار تا پرش خط کمتر شود. swap بدون متریک نزدیک، خودش CLS می‌سازد.

حلقه هفتگی، نه پروژه سه‌ماهه

بدترین URLها را از Search Console بیاور. روی throttle موبایل میان‌رده در DevTools بازتولید کن. گره LCP و تسک‌های بلند اطراف اولین ورودی را مشخص کن. یک تغییر بفرست: تصویر، عقب‌انداختن اسکریپت، یا ابعاد. داده فیلد را در پنجره کرال بعدی دوباره ببین.

دنبال اسکرین‌شات بی‌نقص Lighthouse نرو وقتی LCP موبایل هنوز بالای چهار ثانیه است. عددی که مهم است تجربه URLهایی است که ترافیک دارند.

چه چیز را عمداً کنار بگذار

مسیرهایی که کسی باز نمی‌کند. پیچیدگی edge وقتی هیرو هنوز فایل خام است. جمله‌ی «گوگل الگوریتم را عوض کرد» وقتی چیدمان هنوز زیر هدف لمس می‌پرد.

Core Web Vitals اسم تشخیصی است برای باگ تجربه در پروداکشن. مسیر بحرانی را درست کن و روی دستگاه واقعی دوباره بسنج.

در Next.js کجا را دست بزن

`next/image` با `priority` فقط برای همان گره LCP. بقیه تصویرها lazy بمانند. اگر `priority` را به گالری هم بدهی، دوباره همان اشتباه preload همگانی را کرده‌ای.

فونت را با `next/font` خود-میزبان کن تا درخواست اضافه به دامنه فونت، اتصال جدا نسازد. اگر فونت سوم شخص اجباری است، وزن‌های بلااستفاده را نیاور. دو وزن معمولاً کافی است؛ پنج وزن برای یک صفحه بازاریابی تجمل است.

اسکریپت ثالث را با استراتژی بعد از تعامل یا بعد از بارگذاری بیاور. ابزار تگ منیجر که خودش چهار اسکریپت دیگر تزریق می‌کند، اغلب هم LCP را عقب می‌اندازد هم INP را خراب می‌کند. هر دامنه جدید را در نمودار آبشار ببین و بپرس این درخواست برای اولین رنگ لازم است یا برای گزارش هفته بعد.

صفحه بازاریابی را تا جایی که کوکی و هدر لازم ندارد ایستا نگه دار. یک `cookies()` یا `headers()` بی‌دلیل در layout ریشه، کل زیردرخت را دینامیک می‌کند و کش را از صفحه می‌گیرد. این باگ معماری است که بعداً به‌اشتباه پای «کندی ری‌اکت» نوشته می‌شود.

سنجش را به عادت منتشر کردن وصل کن

قبل از ادعا، URL را نام ببر. صفحه اصلی، یک مقاله، یک مسیر داشبورد. برای هر کدام گره LCP را از پنل Performance بردار، نه از حس خودت. اگر گره یک اسپینر کلاینت است، مشکل متریک نیست؛ مشکل این است که محتوا منتظر جاوااسکریپت مانده.

در پروداکشن نمونه‌برداری کافی است. لازم نیست هر کلیک را به سرویس سنگین بفرستی. p75 را جدا برای موبایل نگه دار. میانگین روی دسکتاپ، موبایل ضعیف را قایم می‌کند و دقیقاً همان‌جاست که فیلد قرمز می‌شود.

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

پرسش‌های کوتاه

داده آزمایشگاه را دور بریزم؟ نه. برای پیدا کردن گره LCP و تسک بلند لازم است. تصمیم اولویت را با فیلد بگیر.

INP را با کم‌کردن انیمیشن درست می‌کنم؟ اگر انیمیشن تسک بلند روی نخ اصلی است بله. بیشتر وقت‌ها مشکل حجم جاوااسکریپت مسیر اول است.

یک نمره کلی برای هر سه کافی است؟ نه. هر کدام مالک جدا دارد: تصویر و HTML اول، نخ اصلی، پایداری چیدمان.