معیارهای Core Web Vitals

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

بیان مساله

Web Vital ابتکاری از طرف Google برای ارائه راهنمایی واحد برای شاخص‌های کیفی است که برای ارائه یک تجربه کاربری عالی در وب‌سایت ضروری می‌باشند.

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

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

Core Web Vitals

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

معیارهای تشکیل دهنده Core Web Vital با گذشت زمان تکامل یافته‌اند و در ادامه هم تکامل خواهند یافت. مجموعه فعلی برای سال ۲۰۲۰ بر سه جنبه از تجربه کاربر متمرکز است – بارگذاری، تعامل و ثبات بصری – و شامل معیارهای زیر (و آستانه‌های مربوط به آن‌ها) است:

Largest Contentful Paint (LCP): این شاخص بارگیری را اندازه‌گیری می‌کند. برای ایجاد یک تجربه کاربری مناسب، LCP باید کمتر از ۲.۵ ثانیه از شروع بارگیری صفحه رخ دهد

First Input Delay (FID): این شاخص تعامل را اندازه‌گیری می‌کند. برای ایجاد یک تجربه کاربری مناسب، این شاخص در صفحات باید ۱۰۰ میلی ثانیه یا کمتر باشد.

Cumulative Layout Shift (CLS): ثبات بصری را اندازه‌گیری می‌کند. برای ایجاد یک تجربه کاربری مناسب، این شاخص در صفحات باید ۰.۱ یا کمتر باشد.

برای اطمینان از کیفیت سایت و کسب تجربه کاربری مناسب، می‌بایست در ۷۵ درصد از بازدیدها در هر صفحه در دسکتاپ و موبایل امتیاز مناسب برای شاخص‌ها به دست آید.

ابزاری که Core Web Vital را محاسبه می‌کنند، صفحه‌ای را مناسب تشخیص خواهند داد که در ۷۵ درصد بازدیدها، امتیاز لازم در ۳ شاخص مذکور را کسب کند.

ابزار اندازه‌گیری و گزارش‌دهی در مورد Core Web Vital

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

ابزار عملیاتی برای اندازه‌گیری Core Web Vitalها

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

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

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

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

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

import {getCLS, getFID, getLCP} 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});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

import {getCLS, getFID, getLCP} 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});

}

getCLS(sendToAnalytics);

getFID(sendToAnalytics);

getLCP(sendToAnalytics);

هنگامی که از کتابخانه vitals برای اندازه‌گیری و ارسال داده‌های Core Web Vital به اند پوینت(end point) تجزیه و تحلیل استفاده می‌کنید، گام بعدی جمع‌آوری و گزارش در مورد آن داده‌ها است تا ببینید آیا صفحات شما آستانه‌های پیشنهادی را در ۷۵ درصد بازدیدها از صفحات را برآورده می‌کنند.

همچنین می‌توانید بدون نوشتن کدی با استفاده از افزونه Chrome Vension Web Vital در مورد هر یک از Core Web Vitalها گزارش بگیرید. این برنامه افزودنی از کتابخانه web-vitals برای اندازه‌گیری هر یک از این معیارها و نمایش آن‌ها به کاربران هنگام مرور وب استفاده می‌کند. این افزونه برای درک وضعیت سایت شما، سایت‌های رقبای شما و به طور کلی وب بسیار مفید است.

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

در حالی که همه Core Web Vitalها، در درجه اول، معیارهای عملیاتی وب هستند، اما بسیاری از آن‌ها در آزمایشگاه نیز قابل اندازه‌گیری هستند. اندازه‌گیری آزمایشگاه بهترین روش برای آزمایش عملکرد ویژگی‌ها در حین توسعه است – قبل از اینکه این ویژگی‌ها برای کاربران منتشر شود. همچنین بهترین روش برای گرفتن رگرسیون عملکرد قبل از وقوع است.

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

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

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

بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS)

بهینه‌سازی معیار بزرگترین عنصر محتوا (LCP)

بهینه‌سازی معیار تاخیر ورودی اول (FID)

Web Vitalsهای دیگر

در حالی که Core Web Vital معیارهای اساسی برای درک و ارائه یک تجربه کاربری عالی هستند، معیارهای حیاتی دیگری نیز وجود دارد. این سایر Web Vitalها غالباً به عنوان معیارهای مکمل Core Web Vitalها به شما کمک می‌کنند تا قسمت بیشتری از تجربه را در نظر بگیرید یا به تشخیص مسئله خاصی کمک کنید.

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

به طور مشابه ، معیارهایی مانند Total Blocking Time (TBT) و Time to Interactive (TTI) معیارهای آزمایشگاهی هستند که برای تشخیص مسائل تعاملی که بر FID تأثیر می گذارند بسیار مهم هستند. با این حال، آن‌ها بخشی از مجموعه Core Web Vital نیستند زیرا قابل اندازه‌گیری نیستند، و همچنین نتیجه‌ای بر اساس کاربر را نشان نمی دهند.

تکامل Web Vitals

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

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

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

برای همه Web Vitalها، تغییرات به طور دقیق در اینجا بیان می‌شوند.

منبع:

https://web.dev/vitals/