وب حیاتی – Web Vitals

• بزرگترین رنگ محتوایی (LCP) :عملکرد بارگذاری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، LCP باید در عرض ۲.۵ ثانیه از زمانی که صفحه برای اولین بار بارگذاری می شود، رخ دهد.
• تاخیر ورودی اول (FID) : تعامل را اندازه می گیرد . برای ارائه یک تجربه کاربری خوب، صفحات باید FID ۱۰۰ میلی ثانیه یا کمتر داشته باشند.
• تغییر چیدمان تجمعی (CLS) : ثبات بصری را اندازه گیری می کند . برای ارائه یک تجربه کاربری خوب، صفحات باید CLS 0.1 و یا کمتر داشته باشند.

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

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

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

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

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

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

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

اندازه گیری Core Web Vitals در JavaScript

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

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

با کتابخانه 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);

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

در حالی که برخی از ارائه دهندگان تجزیه و تحلیل از معیارهای 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 برای اندازه‌گیری هر یک از این معیارها و نمایش آن‌ها به کاربران هنگام مرور وب استفاده می‌کند.

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

همچنین، توسعه‌دهندگانی که ترجیح می‌دهند این معیارها را مستقیماً از طریق APIهای وب زیربنای اندازه‌گیری کنند.

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

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

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

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

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

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

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

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

• LCP را بهینه کنید
• FID را بهینه کنید
• CLS را بهینه کنید

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

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

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

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

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

توسعه وب حیاتی #

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

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

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

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