Web Vitals

فیلیپ والتون

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

Core Web Vitals

Core Web Vitals زیرمجموعه ای از Web Vital ها هستند که برای همه صفحات وب اعمال می شوند، باید توسط همه صاحبان سایت اندازه گیری شوند و در تمام ابزارهای Google ظاهر می شوند. هر یک از Core Web Vitals نمایانگر جنبه‌ای از تجربه کاربر است، در میدان قابل اندازه‌گیری است و تجربه دنیای واقعی یک نتیجه حیاتی کاربر محور را منعکس می‌کند.

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

بزرگترین توصیه های آستانه رنگ محتواییتعامل با توصیه های آستانه رنگ بعدیتوصیه‌های آستانه تغییر طرح‌بندی تجمعی
  • بزرگترین رنگ محتوایی (LCP) : عملکرد بارگذاری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، LCP باید در عرض 2.5 ثانیه از زمانی که صفحه برای اولین بار بارگذاری می شود، رخ دهد.
  • تعامل با رنگ بعدی (INP) : تعامل را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، صفحات باید INP 200 میلی ثانیه یا کمتر داشته باشند.
  • تغییر چیدمان تجمعی (CLS) : ثبات بصری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، باید CLS 0.1 داشته باشد. و یا کمتر.

برای هر یک از این معیارها، برای اطمینان از رسیدن به هدف توصیه شده برای اکثر کاربران خود، یک آستانه خوب برای اندازه گیری صدک 75 بارگذاری صفحه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است.

ابزارهایی که انطباق با Core Web Vitals را ارزیابی می‌کنند، باید صفحه‌ای را مطابق با اهداف توصیه‌شده در صدک ۷۵ برای هر یک از این سه معیار در نظر بگیرند.

چرخه زندگی

معیارهای موجود در مسیر Core Web Vitals یک چرخه حیات شامل سه مرحله آزمایشی، در انتظار و پایدار را طی می‌کنند.

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

هر مرحله طراحی شده است تا به توسعه دهندگان نشان دهد که چگونه باید در مورد هر معیار فکر کنند:

  • معیارهای آزمایشی، هسته های حیاتی وب آینده نگر هستند که ممکن است بسته به آزمایش و بازخورد جامعه همچنان دستخوش تغییرات قابل توجهی باشند.
  • معیارهای معلق هسته های اصلی وب در آینده هستند که مرحله آزمایش و بازخورد را پشت سر گذاشته اند و یک جدول زمانی کاملاً مشخص برای پایدار شدن دارند.
  • معیارهای پایدار مجموعه فعلی Core Web Vitals هستند که Chrome آنها را برای تجربه‌های عالی کاربر ضروری می‌داند.

Core Web Vitals در مراحل چرخه حیات زیر هستند:

  • LCP : پایدار
  • CLS : پایدار
  • INP : پایدار

تجربی

هنگامی که یک متریک در ابتدا توسعه یافته و وارد اکوسیستم می شود، یک متریک آزمایشی در نظر گرفته می شود.

هدف از مرحله آزمایشی، ارزیابی تناسب یک متریک است، ابتدا با کاوش در مسئله ای که باید حل شود، و احتمالاً تکرار در مورد آنچه که معیارهای قبلی ممکن است در پرداختن به آن ناکام بوده باشند. به عنوان مثال، INP در ابتدا به عنوان یک معیار آزمایشی در سال 2022 معرفی شد تا به مسائل عملکرد زمان اجرا وب به طور جامع‌تری نسبت به تاخیر ورودی اول (FID) رسیدگی کند.

مرحله آزمایشی چرخه حیات Core Web Vitals همچنین برای ایجاد انعطاف‌پذیری در توسعه یک معیار با شناسایی اشکالات و حتی بررسی تغییرات در تعریف اولیه آن در نظر گرفته شده است. همچنین این مرحله ای است که در آن بازخورد جامعه از همه مهمتر است.

انتظار

وقتی تیم Chrome تشخیص می‌دهد که یک معیار آزمایشی بازخورد کافی دریافت کرده و کارآمدی خود را ثابت کرده است، به یک معیار معلق تبدیل می‌شود. به عنوان مثال، INP در سال 2023 از وضعیت آزمایشی به وضعیت معلق ارتقا یافت و قصد داشت در نهایت FID را بازنشسته کند.

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

پایدار

هنگامی که یک معیار کاندید Core Web Vital نهایی شود، به یک معیار پایدار تبدیل می شود. این زمانی است که متریک می تواند به Core Web Vital تبدیل شود.

معیارهای پایدار به طور فعال پشتیبانی می شوند و می توانند در معرض رفع اشکال و تغییرات تعریف باشند. معیارهای Stable Core Web Vitals بیش از یک بار در سال تغییر نخواهد کرد. هرگونه تغییر در Core Web Vital به وضوح در اسناد رسمی متریک و همچنین در گزارش تغییرات متریک اعلام خواهد شد. Core Web Vitals نیز در هر ارزیابی گنجانده شده است.

معیارهای پایدار لزوما دائمی نیستند. یک متریک پایدار را می توان بازنشسته کرد و با معیار دیگری جایگزین کرد که منطقه مشکل را به طور مؤثرتری بررسی می کند. این دقیقاً همان چیزی است که برای FID اتفاق افتاد زیرا INP در سال 2024 به یک معیار اصلی Core Web Vital پایدار تبدیل شد.

Core Web Vitals را اندازه گیری و گزارش دهید

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

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

گزارش تجربه کاربر Chrome داده‌های اندازه‌گیری کاربر واقعی و ناشناس را برای هر Core Web Vital جمع‌آوری می‌کند. این داده ها به صاحبان سایت اجازه می دهد تا به سرعت عملکرد خود را بدون نیاز به تنظیم دستی تجزیه و تحلیل برای صفحات خود ارزیابی کنند و ابزارهایی مانند PageSpeed ​​Insights و گزارش Core Web Vitals کنسول جستجو را تقویت می کند.

LCP INP CLS
گزارش تجربه کاربر Chrome
PageSpeed ​​Insights
کنسول جستجو (گزارش Core Web Vitals)

داده‌های ارائه‌شده توسط Chrome User Experience Report راهی سریع برای ارزیابی عملکرد سایت ارائه می‌کند، اما تله‌متری دقیق در هر بازدید از صفحه را که اغلب برای تشخیص دقیق، نظارت و واکنش سریع به رگرسیون‌ها ضروری است، ارائه نمی‌کند. در نتیجه، ما قویاً توصیه می کنیم که سایت ها نظارت بر کاربر واقعی خود را تنظیم کنند.

اندازه گیری حیاتی وب اصلی در جاوا اسکریپت

هر یک از Core Web Vitals را می توان در جاوا اسکریپت با استفاده از APIهای وب استاندارد اندازه گیری کرد.

ساده ترین راه برای اندازه گیری تمام Core Web Vitals استفاده از کتابخانه جاوا اسکریپت web-vitals است، یک بسته API کوچک و آماده برای تولید که هر معیار را به گونه ای اندازه گیری می کند که دقیقاً با نحوه گزارش ابزارهای Google مطابقت دارد.

با کتابخانه web-vitals ، اندازه‌گیری هر متریک به اندازه فراخوانی یک تابع ساده است (برای استفاده کامل و جزئیات API به مستندات مراجعه کنید):

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

پس از پیکربندی سایت خود برای استفاده از کتابخانه web-vitals برای اندازه گیری و ارسال داده های Core Web Vitals خود به یک نقطه پایانی تجزیه و تحلیل، گام بعدی این است که آن داده ها را جمع آوری و گزارش دهید تا ببینید آیا صفحات شما حداقل برای حداقل آستانه های توصیه شده را برآورده می کنند یا خیر. 75 درصد بازدید از صفحه

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

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

همچنین می‌توانید در مورد هر یک از Core Web Vitals بدون نوشتن هیچ کدی با استفاده از Web Vitals Chrome Extension گزارش دهید. این برنامه افزودنی از کتابخانه web-vitals برای اندازه‌گیری هر یک از این معیارها و نمایش آن‌ها به کاربران هنگام مرور وب استفاده می‌کند.

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

LCP INP CLS
وب حیاتی
برنامه افزودنی Web Vitals

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

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

ابزارهای آزمایشگاهی برای اندازه گیری Core Web Vitals

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

اندازه گیری آزمایشگاهی بهترین راه برای آزمایش عملکرد ویژگی ها در طول توسعه است. همچنین بهترین راه برای گرفتن رگرسیون عملکرد قبل از وقوع است.

ابزارهای زیر را می توان برای اندازه گیری Core Web Vitals در یک محیط آزمایشگاهی مورد استفاده قرار داد:

LCP INP CLS
Chrome DevTools (به جای آن از TBT استفاده کنید)
فانوس دریایی (به جای آن از TBT استفاده کنید)

ابزارهایی مانند Lighthouse که صفحات را در یک محیط شبیه سازی شده بدون کاربر بارگذاری می کنند، نمی توانند INP را اندازه گیری کنند زیرا ورودی کاربر را ندارند. با این حال، معیار زمان انسداد کل (TBT) قابل اندازه گیری آزمایشگاهی است و یک پروکسی قابل قبول برای مسائل INP است که ممکن است به دلیل اختلاف در موضوع اصلی در هنگام راه اندازی باشد. بهینه سازی عملکرد که TBT را در آزمایشگاه بهبود می بخشد باید INP را در این زمینه بهبود بخشد. برای راهنمایی بیشتر، به توصیه هایی برای بهبود امتیازات خود مراجعه کنید.

اگرچه اندازه‌گیری آزمایشگاهی بخش ضروری ارائه تجربیات عالی است، اما جایگزینی برای اندازه‌گیری میدانی نیست. عملکرد یک سایت بر اساس قابلیت های دستگاه کاربر، شرایط شبکه آنها، سایر فرآیندهایی که ممکن است در دستگاه در حال اجرا باشد و نحوه تعامل آنها با صفحه می تواند به شدت متفاوت باشد. در واقع، هر یک از معیارهای Core Web Vitals می تواند امتیاز خود را تحت تأثیر تعامل کاربر قرار دهد. فقط اندازه گیری میدانی می تواند تصویر کامل را با دقت ثبت کند.

توصیه هایی برای بهبود نمرات شما

راهنماهای زیر توصیه های خاصی را برای نحوه بهینه سازی صفحات خود برای هر یک از Core Web Vitals ارائه می دهند:

سایر موارد حیاتی وب

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

این دیگر Web Vitals اغلب به عنوان معیارهای پراکسی یا مکمل برای Core Web Vitals عمل می‌کنند تا به ثبت بخش بزرگ‌تری از تجربه یا کمک به تشخیص یک مشکل خاص کمک کنند.

برای مثال، Time to First Byte (TTFB) و First Contentful Paint (FCP) هر دو جنبه‌های حیاتی تجربه بارگیری هستند و هر دو در تشخیص مشکلات مربوط به LCP (به ترتیب زمان‌های پاسخ سرور آهسته یا منابع مسدودکننده رندر ) مفید هستند.

به طور مشابه، معیاری مانند زمان مسدود کردن کل (TBT) یک معیار آزمایشگاهی حیاتی برای تشخیص و تشخیص مسائل بالقوه تعاملی است که می‌تواند بر INP تأثیر بگذارد. با این حال، بخشی از مجموعه Core Web Vitals نیست، زیرا قابل اندازه‌گیری در میدان نیست و یک نتیجه کاربر محور را منعکس نمی‌کند.

تغییرات در Web Vitals

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

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

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

برای همه Web Vitals، تغییرات در این تغییرات عمومی ثبت شده است.