شاخص‌های حیاتی وب در عمل

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

سه عددی که اهمیت دارند

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

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

بزرگ‌ترین علت کند بودن LCP

در بیشتر سایت‌های فارسی که بررسی کرده‌ایم، عنصر LCP یک تصویر بالای صفحه است و مشکل هم همیشه یکی از این سه چیز است:

1. تصویر بی‌دلیل بزرگ است و در قالبی قدیمی ذخیره شده.

2. تصویر با بارگذاری تنبل علامت خورده، در حالی که بالای صفحه است.

3. فونت فارسی پیش از رسم متن، رندر را مسدود می‌کند.

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

چه کاری واقعاً جواب می‌دهد

• تصویر بالای صفحه را با اولویت بالا و بدون بارگذاری تنبل بفرستید.

• قالب مدرن (WebP یا AVIF) را با اندازه‌های چندگانه سرو کنید.

• فونت را با display=swap و پیش‌بارگذاری زیرمجموعه‌ی فارسی بدهید.

• عرض و ارتفاع تصویر را همیشه در HTML بنویسید تا چیدمان نلرزد.

هر تصویری که کاربر پیش از اسکرول می‌بیند، بخشی از زمان بارگذاری است؛ هر تصویری که نمی‌بیند، نباید باشد.

CLS و ریشه‌ی واقعی‌اش

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

/* ابعاد را رزرو کنید تا چیدمان پیش از بارگذاری تصویر تثبیت شود */
.cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* جانشینی فونت را بدون پرش اندازه انجام دهید */
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-fa.woff2") format("woff2");
  font-display: swap;
  size-adjust: 100%;
}

اگر aspect-ratio را روی هر تصویر محتوایی بگذارید، بخش بزرگی از CLS بدون هیچ کار دیگری از بین می‌رود.

INP: جایی که جاوااسکریپت هزینه می‌دهد

INP جانشین FID شد و سخت‌گیرتر است: نه فقط نخستین تعامل، بلکه بدترین تعامل در طول بازدید. اگر رشته‌ی اصلی مشغول باشد، کاربر کلیک می‌کند و چیزی نمی‌بیند.

• کاهش حجم جاوااسکریپت بار اولیه

• شکستن کارهای طولانی به قطعه‌های کوچک‌تر

• انتقال محاسبه‌ی سنگین به وب‌ورکر

• حذف شنونده‌های رویداد تکراری

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

یک محاسبه‌ی سرانگشتی

اگر بودجه‌ی زمانی صفحه را T در نظر بگیریم و سهم شبکه را از آن کم کنیم، بودجه‌ی رندر همان چیزی است که برای رسیدن به آستانه‌ی LCP باقی می‌ماند.

چه چیزی را اندازه بگیریم

داده‌ی میدانی را از گزارش تجربه‌ی کاربر بگیرید و داده‌ی آزمایشگاهی را برای بازتولید اشکال. این دو جایگزین هم نیستند: یکی می‌گوید کاربر چه دید، دیگری می‌گوید چرا.

راهنمای مکمل: چک‌لیست سئوی فنی و برای مرجع بیرونی مستندات web.dev.

@آرش کاویانی این سنجش‌ها را روی سه پروژه‌ی واقعی تکرار کرده است 📊