منتشر شده: ۴ مه ۲۰۲۰
بهینهسازی برای کیفیت تجربه کاربری، کلید موفقیت بلندمدت هر سایتی در وب است. چه صاحب کسبوکار، بازاریاب یا توسعهدهنده باشید، Web Vitals میتواند به شما در سنجش تجربه سایتتان و شناسایی فرصتهای بهبود کمک کند.
نمای کلی
Web Vitals ابتکاری از سوی گوگل برای ارائه راهنماییهای یکپارچه برای سیگنالهای کیفیتی است که برای ارائه یک تجربه کاربری عالی در وب ضروری هستند.
گوگل در طول سالها ابزارهای متعددی را برای اندازهگیری و گزارش عملکرد ارائه کرده است. برخی از توسعهدهندگان در استفاده از این ابزارها متخصص هستند، در حالی که برخی دیگر، فراوانی ابزارها و معیارها را برای همگام شدن با آنها چالشبرانگیز یافتهاند.
صاحبان سایت نباید برای درک کیفیت تجربهای که به کاربران خود ارائه میدهند، متخصص عملکرد باشند. طرح Web Vitals با هدف سادهسازی چشمانداز و کمک به سایتها برای تمرکز بر معیارهایی که بیشترین اهمیت را دارند، یعنی Core Web Vitals ، ارائه شده است.
نکات ضروری وب
Core Web Vitals زیرمجموعهای از Web Vitals هستند که در تمام صفحات وب اعمال میشوند، باید توسط همه صاحبان سایت اندازهگیری شوند و در تمام ابزارهای گوگل نمایش داده شوند. هر یک از Core Web Vitals جنبهای متمایز از تجربه کاربری را نشان میدهد، در محل قابل اندازهگیری است و منعکسکننده تجربه واقعی از یک نتیجه حیاتی کاربر محور است.
معیارهایی که Core Web Vitals را تشکیل میدهند، به مرور زمان تکامل مییابند. مجموعه فعلی بر سه جنبه از تجربه کاربری - بارگذاری ، تعامل و پایداری بصری - تمرکز دارد و شامل معیارهای زیر (و آستانههای مربوط به آنها) است:
- بزرگترین رنگ محتوا (LCP) : عملکرد بارگذاری را اندازهگیری میکند. برای ارائه یک تجربه کاربری خوب، LCP باید ظرف ۲.۵ ثانیه از زمان شروع بارگذاری صفحه رخ دهد.
- تعامل تا رنگ بعدی (INP) : میزان تعامل را اندازهگیری میکند. برای ارائه یک تجربه کاربری خوب، صفحات باید INP برابر با ۲۰۰ میلیثانیه یا کمتر داشته باشند.
- تغییر چیدمان تجمعی (CLS) : پایداری بصری را اندازهگیری میکند. برای ارائه یک تجربه کاربری خوب، صفحات باید CLS برابر با 0.1 یا کمتر داشته باشند.
برای اطمینان از اینکه به هدف توصیهشده برای این معیارها برای اکثر کاربران خود میرسید، آستانه خوبی برای اندازهگیری، صدک ۷۵ام بارگذاری صفحات است که در دستگاههای تلفن همراه و دسکتاپ تقسیمبندی شده است.
ابزارهایی که انطباق با Core Web Vitals را ارزیابی میکنند، باید در صورتی که صفحهای اهداف توصیهشده در صدک ۷۵ را برای هر سه معیار Core Web Vitals برآورده کند، آن را به عنوان صفحهی پذیرفتهشده در نظر بگیرند.
چرخه حیات
معیارهای موجود در مسیر Core Web Vitals چرخه عمری را طی میکنند که شامل سه مرحله است: آزمایشی، در انتظار و پایدار.
هر مرحله به گونهای طراحی شده است که به توسعهدهندگان نشان دهد چگونه باید در مورد هر معیار فکر کنند:
- معیارهای تجربی، معیارهای حیاتی هسته وب (Core Web Vitals) احتمالی هستند که بسته به آزمایش و بازخورد جامعه، ممکن است همچنان دستخوش تغییرات قابل توجهی شوند.
- معیارهای در حال بررسی، Core Web Vitals های آینده هستند که مرحله آزمایش و بازخورد را پشت سر گذاشتهاند و یک جدول زمانی مشخص برای پایدار شدن دارند.
- معیارهای پایدار، مجموعه فعلی Core Web Vitals هستند که کروم آنها را برای تجربیات کاربری عالی ضروری میداند.
Core Web Vitals در مراحل چرخه عمر زیر قرار دارند:
تجربی
وقتی یک معیار برای اولین بار توسعه داده میشود و وارد اکوسیستم میشود، یک معیار آزمایشی در نظر گرفته میشود.
هدف از مرحله آزمایشی، ارزیابی تناسب یک معیار است، ابتدا با بررسی مسئلهای که باید حل شود، و احتمالاً تکرار مواردی که معیارهای قبلی ممکن است در پرداختن به آنها شکست خورده باشند. به عنوان مثال، تعامل با رنگ بعدی (INP) در ابتدا به عنوان یک معیار آزمایشی برای پرداختن به مسائل عملکرد زمان اجرا که در وب وجود دارد، به طور جامعتر از تأخیر ورودی اول (FID) توسعه داده شد.
مرحله آزمایشی چرخه حیات Core Web Vitals همچنین با هدف ایجاد انعطافپذیری در توسعه یک معیار با شناسایی اشکالات و حتی بررسی تغییرات در تعریف اولیه آن در نظر گرفته شده است. همچنین این مرحلهای است که بازخورد جامعه در آن بسیار مهم است.
در حال بررسی
وقتی تیم کروم تشخیص دهد که یک معیار آزمایشی بازخورد کافی دریافت کرده و اثربخشی خود را ثابت کرده است، به یک معیار در حال بررسی تبدیل میشود. برای مثال، INP در سال ۲۰۲۳ از وضعیت آزمایشی به در حال بررسی ارتقا یافت با این هدف که در نهایت FID کنار گذاشته شود.
معیارهای در حال بررسی حداقل به مدت شش ماه در این مرحله نگه داشته میشوند تا به اکوسیستم زمان لازم برای سازگاری داده شود. بازخورد جامعه همچنان جنبه مهمی از این مرحله است، زیرا توسعهدهندگان بیشتری شروع به استفاده از این معیار میکنند.
پایدار
وقتی یک معیار کاندید Core Web Vital نهایی میشود، به یک معیار پایدار تبدیل میشود. این زمانی است که آن معیار میتواند به یک Core Web Vital تبدیل شود.
معیارهای پایدار به طور فعال پشتیبانی میشوند و میتوانند در معرض رفع اشکال و تغییرات تعریف قرار گیرند. معیارهای Core Web Vitals پایدار بیش از یک بار در سال تغییر نخواهند کرد. هرگونه تغییر در Core Web Vitals به طور واضح در اسناد رسمی معیار و همچنین در گزارش تغییرات معیار اعلام خواهد شد. Core Web Vitals نیز در هر ارزیابی گنجانده میشوند.
ابزارهایی برای اندازهگیری و گزارش Core Web Vitals
گوگل معتقد است که Core Web Vitals برای همه تجربیات وب بسیار مهم است. در نتیجه، متعهد است که این معیارها را در تمام ابزارهای محبوب خود نمایش دهد. بخشهای بعدی جزئیات ابزارهایی را که از Core Web Vitals پشتیبانی میکنند، شرح میدهند.
ابزارهای میدانی برای اندازهگیری Core Web Vitals
گزارش تجربه کاربری کروم ، دادههای اندازهگیری کاربر واقعی و ناشناس را برای هر Core Web Vital جمعآوری میکند. این دادهها به صاحبان سایت این امکان را میدهد که بدون نیاز به تجزیه و تحلیل دستی صفحات خود، عملکرد خود را به سرعت ارزیابی کنند و ابزارهایی مانند Chrome DevTools ، PageSpeed Insights و گزارش Core Web Vitals کنسول جستجو را پشتیبانی میکنند.
| ال سی پی | آی ان پی | سی ال اس | |
| گزارش تجربه کاربری کروم | |||
| ابزارهای توسعه کروم | |||
| بینشهای سرعت صفحه | |||
| کنسول جستجو (گزارش Core Web Vitals) |
دادههای ارائه شده توسط گزارش تجربه کاربری کروم، راهی سریع برای ارزیابی عملکرد سایتها ارائه میدهد، اما اندازهگیری دقیق و بر اساس بازدید هر صفحه را که اغلب برای تشخیص دقیق، نظارت و واکنش سریع به رگرسیونها ضروری است، ارائه نمیدهد. در نتیجه، اکیداً توصیه میکنیم که سایتها نظارت بر کاربر واقعی خود را راهاندازی کنند.
اندازهگیری Core Web Vitals در جاوا اسکریپت
هر یک از 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 به یک نقطهی پایانی تحلیلی استفاده کند، مرحلهی بعدی جمعآوری و گزارشدهی آن دادهها است تا ببینید آیا صفحات شما آستانههای توصیهشده برای حداقل ۷۵٪ بازدیدهای صفحه را برآورده میکنند یا خیر.
در حالی که برخی از ارائه دهندگان تجزیه و تحلیل، پشتیبانی داخلی از معیارهای Core Web Vitals دارند، حتی آنهایی که این پشتیبانی را ندارند، باید ویژگیهای معیار سفارشی اولیهای را در ابزار خود بگنجانند که به شما امکان میدهد Core Web Vitals را در ابزار خود اندازهگیری کنید.
توسعهدهندگانی که ترجیح میدهند این معیارها را مستقیماً با استفاده از APIهای وب زیربنایی اندازهگیری کنند، میتوانند از این راهنماهای معیار برای جزئیات پیادهسازی استفاده کنند:
برای راهنمایی بیشتر در مورد اندازهگیری این معیارها با استفاده از سرویسهای تحلیلی محبوب یا ابزارهای تحلیلی داخلی خودتان، به بهترین شیوهها برای اندازهگیری Web Vitals در این زمینه مراجعه کنید.
ابزارهای آزمایشگاهی برای اندازهگیری Core Web Vitals
در حالی که همه Core Web Vitals، در درجه اول، معیارهای میدانی هستند، بسیاری از آنها در آزمایشگاه نیز قابل اندازهگیری هستند.
اندازهگیری آزمایشگاهی بهترین روش برای آزمایش عملکرد ویژگیها در طول توسعه است - قبل از اینکه برای کاربران منتشر شوند. همچنین بهترین راه برای تشخیص پسرفت عملکرد قبل از وقوع آنهاست.
ابزارهای زیر میتوانند برای اندازهگیری Core Web Vitals در محیط آزمایشگاهی استفاده شوند:
| ال سی پی | آی ان پی | سی ال اس | |
|---|---|---|---|
| ابزارهای توسعه کروم | |||
| فانوس دریایی | (به جای آن از TBT استفاده کنید) |
اگرچه اندازهگیری آزمایشگاهی بخش مهمی از ارائه تجربیات عالی است، اما جایگزینی برای اندازهگیری میدانی نیست.
عملکرد یک سایت میتواند بسته به قابلیتهای دستگاه کاربر، شرایط شبکه او، سایر فرآیندهایی که ممکن است روی دستگاه در حال اجرا باشند و نحوه تعامل او با صفحه، به طور قابل توجهی متفاوت باشد. در واقع، امتیاز هر یک از معیارهای Core Web Vitals میتواند تحت تأثیر تعامل کاربر قرار گیرد. تنها اندازهگیری میدانی میتواند تصویر کاملی را به طور دقیق ثبت کند.
توصیههایی برای بهبود نمرات شما
راهنماهای زیر توصیههای خاصی برای چگونگی بهینهسازی صفحات شما برای هر یک از موارد حیاتی اصلی وب ارائه میدهند:
روشهای زیادی برای بهبود Core Web Vitals وجود دارد و هر رویکرد با سطوح مختلفی از تأثیر، ارتباط و سهولت استفاده برای هر موقعیتی ارائه میشود. برای مشاهده فهرست کوتاهی از بهترین توصیههای تیم کروم، به «موثرترین راهها برای بهبود Core Web Vitals» مراجعه کنید.
سایر موارد ضروری وب
در حالی که Core Web Vitals معیارهای حیاتی برای درک و ارائه یک تجربه کاربری عالی هستند، معیارهای پشتیبانی دیگری نیز وجود دارند.
این معیارهای دیگر میتوانند به عنوان نماینده - یا به عنوان معیارهای تکمیلی برای سه مورد حیاتی اصلی وب - عمل کنند تا به درک بخش بزرگتری از تجربه یا تشخیص یک مشکل خاص کمک کنند.
برای مثال، معیارهای زمان اولین بایت (TTFB) و اولین رنگآمیزی محتوا (FCP) هر دو جنبههای حیاتی تجربه بارگذاری هستند و هر دو در تشخیص مشکلات LCP (به ترتیب زمان پاسخگویی کند سرور یا منابع مسدودکننده رندر ) مفید هستند.
به طور مشابه، معیاری مانند زمان کل مسدودسازی (TBT) یک معیار آزمایشگاهی است که در تشخیص و شناسایی مشکلات تعاملی بالقوه که میتوانند بر INP تأثیر بگذارند، حیاتی است. با این حال، این معیار بخشی از مجموعه Core Web Vitals نیست زیرا آنها قابل اندازهگیری میدانی نیستند و همچنین منعکسکننده یک نتیجه کاربر محور نیستند.
تغییرات در Web Vitals
شاخصهای حیاتی وب (Web Vitals) و هسته اصلی وب (Core Web Vitals) بهترین سیگنالهای موجود برای توسعهدهندگان امروزی جهت سنجش کیفیت تجربه کاربری در سراسر وب هستند، اما این سیگنالها بینقص نیستند و باید انتظار بهبودها یا اضافات بیشتری در آینده را داشت.
Core Web Vitals به تمام صفحات وب مربوط میشود و در ابزارهای مرتبط گوگل نمایش داده میشود. تغییرات در این معیارها تأثیر گستردهای خواهد داشت؛ به همین دلیل، توسعهدهندگان باید انتظار داشته باشند که تعاریف و آستانههای Core Web Vitals پایدار باشند و بهروزرسانیها از قبل اطلاعرسانی شده و ریتم سالانه قابل پیشبینی داشته باشند.
سایر Web Vitals اغلب مختص به زمینه یا ابزار هستند و ممکن است تجربیتر از Core Web Vitals باشند. به همین دلیل، تعاریف و آستانههای آنها ممکن است با فرکانس بیشتری تغییر کند.
برای همه Web Vitals، تغییرات به وضوح در این CHANGELOG عمومی مستند خواهند شد.