وب وایتل‌های اصلی؛ راهنمای عملی LCP، INP و CLS

چرا این سه سنجه مهم هستند

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

Largest Contentful Paint (LCP)

LCP زمان بارگذاری بزرگ‌ترین عنصر بالای صفحه را اندازه می‌گیرد. هدف زیر ۲٫۵ ثانیه است.

• تصویر قهرمان و استایل‌شیتِ مؤثر روی آن را از قبل پیش‌بارگذاری کن.
• تصاویر را با ابعاد درست و فرمت مدرن تحویل بده.
• اسکریپت‌های شخص ثالثِ بلاک‌کننده را از مسیر بحرانی حذف کن.

INP یا فاصله تا Paint بعدی

INP جایگزین FID شده و بدترین پاسخ به تعامل کاربر را اندازه می‌گیرد. حد خوب ۲۰۰ میلی‌ثانیه است.

• کارهای طولانی روی ترد اصلی را زیر ۵۰ میلی‌ثانیه نگه دار.
• کارهای غیرضروری را تا بعد از تعاملی‌شدن صفحه عقب بینداز.
• به‌جای اجرای هندلر گران روی هر رویداد، آن را debounce کن.

Cumulative Layout Shift (CLS)

CLS به صفحه‌هایی پاداش می‌دهد که هنگام بارگذاری نمی‌پرند. امتیاز زیر ۰٫۱ خوب محسوب می‌شود.

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

چطور کارت را چک کنی

برای یک بررسی سریع از Lighthouse استفاده کن و بعد آن را با داده‌ی میدانی CrUX ترافیک واقعی خودت مقایسه کن. عملکرد میدانی همان چیزی است که موتور جست‌وجو نهایتاً می‌بیند.

جمع‌بندی

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