Web Vitals

فیلیپ والتون

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

بررسی اجمالی

Web Vitals ابتکاری توسط Google برای ارائه راهنمایی یکپارچه برای سیگنال های با کیفیت است که برای ارائه یک تجربه کاربری عالی در وب ضروری است.

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

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

Core Web Vitals

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

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

بزرگترین توصیه های آستانه رنگ محتواییتعامل با توصیه های آستانه رنگ بعدیتوصیه‌های آستانه تغییر طرح‌بندی تجمعی
  • بزرگترین رنگ محتوایی (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.

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

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

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

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

تجربی

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

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

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

انتظار

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

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

پایدار

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

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

ابزارهایی برای اندازه گیری و گزارش 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 های وب زیرین که هر متریک را به گونه ای اندازه گیری می کند که دقیقاً با نحوه گزارش آن ها توسط همه افراد مطابقت داشته باشد. ابزارهای گوگل که قبلا فهرست شده بودند.

با کتابخانه 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 استفاده کنید)

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

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

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

راهنماهای زیر توصیه های خاصی را برای نحوه بهینه سازی صفحات خود برای هر یک از Core 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 باشند. به این ترتیب، تعاریف و آستانه آنها ممکن است با فراوانی بیشتری تغییر کند.

برای همه موارد حیاتی وب، تغییرات به وضوح در این CHANGELOG عمومی ثبت خواهد شد.