Web Vitals: راهنمای ساده برای بهبود تجربه کاربری وب‌سایت

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

Web Vitals چیست؟

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

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

Core Web Vitals چیست؟

Core Web Vitals زیرمجموعه‌ای از Web Vitals است که بر سه جنبه اصلی تجربه کاربری تمرکز دارد: بارگذاری (Loading)، تعامل‌پذیری (Interactivity) و پایداری بصری (Visual Stability). این معیارها برای تمام صفحات وب قابل اندازه‌گیری هستند و باید توسط همه صاحبان سایت بررسی شوند.

معیارهای فعلی Core Web Vitals عبارت‌اند از:

1. Largest Contentful Paint (LCP):

   • چیست؟ زمان لازم برای بارگذاری محتوای اصلی صفحه (مانند متن یا تصاویر بزرگ).
   • هدف: باید در ۲.۵ ثانیه یا کمتر رخ دهد.
   • چرا مهم است؟ نشان‌دهنده سرعت بارگذاری محتوای اصلی است که برای تجربه کاربری خوب حیاتی است.

2. Interaction to Next Paint (INP):

   • چیست؟ زمان پاسخگویی صفحه به تعاملات کاربر (مانند کلیک یا تایپ).
   • هدف: باید ۲۰۰ میلی‌ثانیه یا کمتر باشد.
   • چرا مهم است؟ تأخیر در پاسخگویی می‌تواند تجربه کاربری را مختل کند.

3. Cumulative Layout Shift (CLS):

   • چیست؟ میزان جابه‌جایی غیرمنتظره عناصر صفحه در حین بارگذاری.
   • هدف: باید ۰.۱ یا کمتر باشد.
   • چرا مهم است؟ جابه‌جایی‌های غیرمنتظره می‌تواند باعث سردرگمی یا کلیک‌های اشتباه کاربران شود.

توضیح تصویر: سه نمودار که آستانه‌های پیشنهادی برای LCP (≤۲.۵ ثانیه)، INP (≤۲۰۰ میلی‌ثانیه) و CLS (≤۰.۱) را نشان می‌دهند.

نکته کلیدی: برای اطمینان از تجربه کاربری خوب، این معیارها باید در صدک ۷۵ (75th percentile) بارگذاری‌های صفحه برای کاربران موبایل و دسکتاپ به اهداف تعیین‌شده برسند. اگر هر سه معیار در این سطح به هدف برسند، صفحه شما به‌عنوان "عبور" (Passing) ارزیابی می‌شود.

چرخه عمر معیارهای Core Web Vitals

معیارهای Core Web Vitals در سه مرحله چرخه عمر قرار می‌گیرند: آزمایشی (Experimental)، در انتظار (Pending) و پایدار (Stable).

توضیح تصویر: نموداری که سه مرحله آزمایشی، در انتظار و پایدار را به‌صورت سه پیکان متوالی نشان می‌دهد.

• آزمایشی: معیارهای جدید در حال توسعه و آزمایش هستند. در این مرحله، ممکن است تغییراتی در تعریف معیار اعمال شود و بازخورد جامعه توسعه‌دهندگان حیاتی است. مثال: INP ابتدا به‌عنوان جایگزینی برای First Input Delay (FID) به‌صورت آزمایشی معرفی شد.
• در انتظار: معیاری که آزمایش‌ها و بازخوردها را پشت سر گذاشته و زمان‌بندی مشخصی برای تبدیل شدن به معیار پایدار دارد. حداقل شش ماه در این مرحله باقی می‌ماند تا اکوسیستم وب فرصت تطبیق داشته باشد.
• پایدار: معیارهای نهایی Core Web Vitals که در ابزارهای گوگل استفاده می‌شوند. این معیارها حداکثر سالی یک‌بار تغییر می‌کنند و هر تغییری در مستندات و CHANGELOG اعلام می‌شود.

وضعیت کنونی معیارها:

• LCP: پایدار
• CLS: پایدار
• INP: پایدار (در سال ۲۰۲۴ جایگزین FID شد)

نکته: معیارهای پایدار ممکن است در آینده با معیارهای بهتری جایگزین شوند، مانند جایگزینی FID با INP.

ابزارهای اندازه‌گیری Core Web Vitals

گوگل ابزارهای مختلفی برای اندازه‌گیری Core Web Vitals ارائه کرده است که به دو دسته واقعی (Field) و آزمایشگاهی (Lab) تقسیم می‌شوند.

ابزارهای واقعی (Field)

این ابزارها داده‌های واقعی کاربران را جمع‌آوری می‌کنند:

• Chrome User Experience Report (CrUX): داده‌های ناشناس کاربران واقعی را برای LCP، INP و CLS جمع‌آوری می‌کند.
• Chrome DevTools: معیارهای عملکرد را نمایش می‌دهد.
• PageSpeed Insights: داده‌های واقعی و آزمایشگاهی را برای Core Web Vitals ارائه می‌کند.
• Search Console (گزارش Core Web Vitals): عملکرد سایت را برای موتور جستجوی گوگل نشان می‌دهد.

توضیح جدول: جدولی که نشان می‌دهد CrUX، Chrome DevTools، PageSpeed Insights و Search Console همگی LCP، INP و CLS را پشتیبانی می‌کنند.

نکته: برای راهنمایی در مورد استفاده از این ابزارها، به راهنمای شروع اندازه‌گیری Web Vitals مراجعه کنید.

چرا مهم است؟ داده‌های CrUX تصویر سریعی از عملکرد سایت ارائه می‌دهد، اما برای تشخیص دقیق مشکلات، توصیه می‌شود از نظارت واقعی کاربران (Real-User Monitoring) استفاده کنید.

اندازه‌گیری Core Web Vitals با جاوااسکریپت

برای اندازه‌گیری دقیق‌تر، می‌توانید از APIهای وب و کتابخانه web-vitals استفاده کنید. این کتابخانه سبک و آماده برای استفاده در محیط‌های واقعی است و معیارهای LCP، INP و CLS را به‌صورت دقیق اندازه‌گیری می‌کند.

مثال کد:

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // استفاده از sendBeacon یا fetch برای ارسال داده‌ها
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

مراحل بعدی: پس از تنظیم کتابخانه، داده‌ها را به یک ابزار تجزیه‌وتحلیل (Analytics) ارسال کنید تا بررسی کنید آیا صفحات شما در ۷۵٪ بازدیدها به آستانه‌های پیشنهادی می‌رسند یا خیر. برای جزئیات بیشتر، به مستندات web-vitals مراجعه کنید.

روش جایگزین: اگر ترجیح می‌دهید از APIهای وب مستقیماً استفاده کنید، به راهنماهای زیر مراجعه کنید:

نکته: داده‌های جاوااسکریپت ممکن است با داده‌های CrUX متفاوت باشد. برای اطلاعات بیشتر، به تفاوت‌های CrUX و RUM مراجعه کنید.

ابزارهای آزمایشگاهی (Lab)

ابزارهای آزمایشگاهی برای تست عملکرد در حین توسعه و قبل از انتشار به کاربران مناسب‌اند:

• Chrome DevTools: LCP، INP و CLS را اندازه‌گیری می‌کند.
• Lighthouse: LCP و CLS را اندازه‌گیری می‌کند، اما برای INP از Total Blocking Time (TBT) به‌عنوان معیار جایگزین استفاده می‌کند.

توضیح جدول: جدولی که نشان می‌دهد Chrome DevTools از LCP، INP و CLS پشتیبانی می‌کند، اما Lighthouse از TBT به‌جای INP استفاده می‌کند.

هشدار: ابزارهایی مانند Lighthouse که صفحات را در محیط شبیه‌سازی‌شده بدون تعامل کاربر بارگذاری می‌کنند، نمی‌توانند INP را اندازه‌گیری کنند. TBT یک معیار آزمایشگاهی است که به بهبود INP در دنیای واقعی کمک می‌کند.

چرا هر دو مهم‌اند؟ اندازه‌گیری آزمایشگاهی برای تشخیص مشکلات قبل از انتشار ضروری است، اما فقط اندازه‌گیری واقعی (Field) تصویر کاملی از تجربه کاربران ارائه می‌دهد، زیرا عوامل مختلفی مانند دستگاه، شبکه و تعاملات کاربر بر معیارها تأثیر می‌گذارند.

توصیه‌هایی برای بهبود Core Web Vitals

برای بهینه‌سازی Core Web Vitals، راهنماهای زیر توصیه‌های عملی ارائه می‌دهند:

• بهینه‌سازی LCP: کاهش زمان بارگذاری محتوای اصلی با بهینه‌سازی سرور، منابع رندر-بلاک‌کننده و کش.
• بهینه‌سازی INP: بهبود پاسخگویی با کاهش زمان اجرای جاوااسکریپت و بهینه‌سازی تعاملات کاربر.
• بهینه‌سازی CLS: کاهش جابه‌جایی‌های غیرمنتظره با تنظیم ابعاد تصاویر و تبلیغات.

برای تأثیرگذارترین روش‌ها، به موثرترین راه‌های بهبود Core Web Vitals مراجعه کنید.

سایر معیارهای Web Vitals

علاوه بر Core Web Vitals، معیارهای دیگری نیز برای تشخیص مشکلات یا تکمیل تجربه کاربری وجود دارند:

• Time to First Byte (TTFB): زمان دریافت اولین بایت از سرور. برای تشخیص مشکلات سرور یا رندر-بلاکینگ مفید است.
• First Contentful Paint (FCP): زمان نمایش اولین محتوای صفحه. به تشخیص مشکلات بارگذاری کمک می‌کند.
• Total Blocking Time (TBT): معیار آزمایشگاهی برای شناسایی مشکلات تعامل‌پذیری که ممکن است روی INP تأثیر بگذارد.

این معیارها به‌عنوان مکمل Core Web Vitals عمل می‌کنند، اما چون در دنیای واقعی قابل اندازه‌گیری نیستند یا مستقیماً نتیجه کاربرمحور را نشان نمی‌دهند، جزو Core Web Vitals نیستند.

تغییرات در Web Vitals

Web Vitals و Core Web Vitals بهترین معیارهای موجود برای اندازه‌گیری کیفیت تجربه کاربری هستند، اما کامل نیستند و ممکن است در آینده بهبود یابند یا تغییر کنند:

• Core Web Vitals: پایدار هستند و تغییرات آن‌ها حداکثر سالی یک‌بار با اطلاع قبلی و در یک برنامه منظم انجام می‌شود.
• سایر Web Vitals: ممکن است بیشتر تغییر کنند، زیرا اغلب خاص‌تر یا آزمایشی هستند.
• مستندات تغییرات: همه تغییرات در CHANGELOG ثبت می‌شوند.

نتیجه‌گیری

Web Vitals و به‌ویژه Core Web Vitals ابزارهای کلیدی برای بهبود تجربه کاربری وب‌سایت شما هستند. با تمرکز بر LCP، INP و CLS، استفاده از ابزارهای واقعی و آزمایشگاهی، و اعمال بهینه‌سازی‌های پیشنهادی، می‌توانید سرعت، تعامل‌پذیری و پایداری سایت خود را بهبود دهید. نظارت مداوم بر داده‌های واقعی و آزمایشگاهی به شما کمک می‌کند تا تجربه‌ای سریع و کاربرپسند ارائه دهید.