بهینه سازی برای کیفیت تجربه کاربر، کلید موفقیت بلندمدت هر سایتی در وب است. چه مالک کسب و کار، چه بازاریاب یا توسعه دهنده باشید، 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 ثانیه از زمانی که صفحه برای اولین بار بارگذاری می شود، رخ دهد.
- تاخیر ورودی اول (FID) : تعامل را اندازه می گیرد. برای ارائه یک تجربه کاربری خوب، صفحات باید FID 100 میلی ثانیه یا کمتر داشته باشند.
- تغییر چیدمان تجمعی (CLS) : ثبات بصری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، صفحات باید CLS 0.1 داشته باشند. و یا کمتر.
برای هر یک از معیارهای بالا، برای اطمینان از رسیدن به هدف توصیه شده برای اکثر کاربران خود، یک آستانه خوب برای اندازه گیری صدک 75 بارگذاری صفحه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است.
ابزارهایی که انطباق با Core Web Vitals را ارزیابی می‌کنند، باید یک صفحه را در صورتی که به اهداف توصیه‌شده در صدک ۷۵ برای همه سه معیار بالا برسند، در نظر بگیرند.
چرخه زندگی
معیارهای موجود در مسیر Core Web Vitals یک چرخه حیات شامل سه مرحله آزمایشی، در انتظار و پایدار را طی می‌کنند.
جدول زیر نشان می دهد که تمام Core Web Vital در حال حاضر در چرخه عمر خود کجا هستند:
هر مرحله طراحی شده است تا به توسعه دهندگان نشان دهد که چگونه باید در مورد هر معیار فکر کنند:
- معیارهای آزمایشی، هسته های حیاتی وب آینده نگر هستند که ممکن است بسته به آزمایش و بازخورد جامعه همچنان دستخوش تغییرات قابل توجهی باشند.
- معیارهای معلق هسته های اصلی وب در آینده هستند که مرحله آزمایش و بازخورد را پشت سر گذاشته اند و یک جدول زمانی کاملاً مشخص برای پایدار شدن دارند.
- معیارهای پایدار مجموعه فعلی Core Web Vitals هستند که Chrome آنها را برای تجربه‌های عالی کاربر ضروری می‌داند.
تجربی
هنگامی که یک متریک در ابتدا توسعه یافته و وارد اکوسیستم می شود، یک متریک آزمایشی در نظر گرفته می شود.
هدف از مرحله آزمایشی، ارزیابی تناسب یک متریک است، ابتدا با کاوش در مسئله ای که باید حل شود، و احتمالاً در مورد آنچه که معیارهای قبلی ممکن است در پرداختن به آن شکست خورده باشند، تکرار شود. به عنوان مثال، تعامل با رنگ بعدی (INP) در ابتدا به عنوان یک معیار آزمایشی برای رسیدگی به مسائل عملکرد زمان اجرا موجود در وب به طور جامع‌تر از تاخیر ورودی اول (FID) توسعه یافت.
مرحله آزمایشی چرخه حیات Core Web Vitals همچنین برای ایجاد انعطاف‌پذیری در توسعه یک معیار با شناسایی اشکالات و حتی بررسی تغییرات در تعریف اولیه آن در نظر گرفته شده است. همچنین این مرحله ای است که در آن بازخورد جامعه از همه مهمتر است.
انتظار
وقتی تیم Chrome تشخیص می‌دهد که یک معیار آزمایشی بازخورد کافی دریافت کرده و کارآمدی خود را ثابت کرده است، به یک معیار معلق تبدیل می‌شود. معیارهای معلق در این مرحله حداقل به مدت شش ماه نگه داشته می شوند تا به اکوسیستم زمان برای سازگاری داده شود. تنها مانع باقیمانده برای پیشروی یک متریک فراتر از فاز معلق این است که تا پایان دوره انتقال صبر کنید. بازخورد جامعه جنبه مهمی از این مرحله باقی می ماند، زیرا توسعه دهندگان بیشتری شروع به استفاده از معیار می کنند.
پایدار
هنگامی که یک معیار کاندید Core Web Vital نهایی می‌شود، به یک معیار پایدار تبدیل می‌شود - برای معیارهایی که در مسیر Core Web Vitals هستند، این به این معنی است که این معیار به Core Web Vital تبدیل می‌شود.
معیارهای پایدار به طور فعال پشتیبانی می شوند و ممکن است در معرض رفع اشکال و تغییرات تعریف باشند. معیارهای Stable Core Web Vitals بیش از یک بار در سال تغییر نخواهد کرد. هر گونه تغییر در Core Web Vital به وضوح در اسناد رسمی متریک و همچنین در CHANGELOG اندازه گیری اعلام می شود. 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 | FID | 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, onFID, 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);
onFID(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 | FID | CLS | |
|---|---|---|---|
| وب حیاتی | ✔ | ✔ | ✔ |
| برنامه افزودنی Web Vitals | ✔ | ✔ | ✔ |
همچنین، توسعه‌دهندگانی که ترجیح می‌دهند این معیارها را مستقیماً از طریق APIهای وب زیرین اندازه‌گیری کنند، می‌توانند برای جزئیات پیاده‌سازی به این راهنمای متریک مراجعه کنند:
ابزارهای آزمایشگاهی برای اندازه گیری Core Web Vitals
در حالی که تمام Core Web Vitals، قبل از هر چیز، معیارهای میدانی هستند، بسیاری از آنها در آزمایشگاه نیز قابل اندازه گیری هستند.
اندازه‌گیری آزمایشگاهی بهترین راه برای آزمایش عملکرد ویژگی‌ها در حین توسعه است - قبل از اینکه برای کاربران عرضه شوند. همچنین بهترین راه برای گرفتن رگرسیون عملکرد قبل از وقوع است.
ابزارهای زیر را می توان برای اندازه گیری Core Web Vitals در یک محیط آزمایشگاهی مورد استفاده قرار داد:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | ✔ | ✘ (به جای آن از TBT استفاده کنید) | ✔ |
| فانوس دریایی | ✔ | ✘ (به جای آن از TBT استفاده کنید) | ✔ |
در حالی که اندازه‌گیری آزمایشگاهی بخش ضروری ارائه تجربیات عالی است، جایگزینی برای اندازه‌گیری میدانی نیست.
عملکرد یک سایت بر اساس قابلیت های دستگاه کاربر، شرایط شبکه آنها، سایر فرآیندهای ممکن در دستگاه و نحوه تعامل آنها با صفحه می تواند به طور چشمگیری متفاوت باشد. در واقع، هر یک از معیارهای Core Web Vitals می تواند امتیاز خود را تحت تأثیر تعامل کاربر قرار دهد. فقط اندازه گیری میدانی می تواند تصویر کامل را با دقت ثبت کند.
توصیه هایی برای بهبود نمرات شما
هنگامی که Core Web Vitals را اندازه‌گیری کردید و زمینه‌های بهبود را شناسایی کردید، گام بعدی بهینه‌سازی است. راهنماهای زیر توصیه های خاصی را برای نحوه بهینه سازی صفحات خود برای هر یک از Core Web Vitals ارائه می دهند:
سایر موارد حیاتی وب
در حالی که Core Web Vitals معیارهای حیاتی برای درک و ارائه یک تجربه کاربری عالی هستند، معیارهای حیاتی دیگری نیز وجود دارد.
این سایر موارد حیاتی وب اغلب به عنوان معیارهای پراکسی یا تکمیلی برای Core Web Vitals عمل می‌کنند تا به ثبت بخش بزرگ‌تری از تجربه یا کمک به تشخیص یک مشکل خاص کمک کنند.
برای مثال، معیارهای Time to First Byte (TTFB) و First Contentful Paint (FCP) هر دو جنبه‌های حیاتی تجربه بارگیری هستند و هر دو در تشخیص مشکلات مربوط به LCP (به ترتیب زمان‌های پاسخ سرور آهسته یا منابع مسدودکننده رندر ) مفید هستند. .
به طور مشابه، معیاری مانند زمان انسداد کل (TBT) یک معیار آزمایشگاهی است که در تشخیص و تشخیص مسائل بالقوه تعاملی که بر FID و INP تأثیر می‌گذارد، حیاتی است. با این حال، بخشی از مجموعه Core Web Vitals نیست زیرا قابل اندازه‌گیری در میدان نیستند، و همچنین یک نتیجه کاربر محور را منعکس نمی‌کنند.
توسعه وب حیاتی
Web Vitals و Core Web Vitals بهترین سیگنال‌های موجود توسعه‌دهندگان را برای اندازه‌گیری کیفیت تجربه در سرتاسر وب نشان می‌دهند، اما این سیگنال‌ها بی‌نقص نیستند و باید انتظار پیشرفت‌ها یا اضافات آینده را داشت.
Core Web Vitals مربوط به تمام صفحات وب است و در ابزارهای مرتبط Google قابل مشاهده است. تغییرات در این معیارها تأثیر گسترده ای خواهد داشت. به این ترتیب، توسعه‌دهندگان باید انتظار داشته باشند که تعاریف و آستانه‌های Core Web Vitals پایدار باشند و به‌روزرسانی‌ها اطلاع قبلی و یک آهنگ سالانه قابل پیش‌بینی داشته باشند.
سایر موارد حیاتی وب اغلب مختص زمینه یا ابزار هستند و ممکن است آزمایشی تر از Core Web Vitals باشند. به این ترتیب، تعاریف و آستانه آنها ممکن است با فراوانی بیشتری تغییر کند.
برای همه موارد حیاتی وب، تغییرات به وضوح در این CHANGELOG عمومی ثبت خواهد شد.