وب ویتال چیست؟

مقدمه

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

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

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

Core Web Vitals چیست؟

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

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

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

ابزارهای ارزیابی Core Web Vitals

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

ابزارهای میدانی برای وب ویتال های اصلی

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

ابزار	LCP	FID	CLS
Chrome User Experience Report	✔	✔	✔
PageSpeed Insights	✔	✔	✔
سرچ کنسول (Core Web Vitals report)	✔	✔	✔

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

ارزیابی Core Web Vitals در جاوا اسکریپت

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

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

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

اگر نوشتن کد و برنامه نویسی برای استفاده از کتابخانه web vitals برایتان سخت است می‌توانید از افزونه کروم web vitals استفاده کنید که تمامی‌ ارزیابی معیارهای آن، بر اساس همین کتابخانه است. این افزونه می‌تواند در ارزیابی سرعت سایت خودتان و حتی سایت‌های رقیب شما مفید باشد.

	LCP	FID	CLS
کتابخانه web vitals	✔	✔	✔
افزونه کروم web vitals	✔	✔	✔

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

معیارهای وب ویتال از مهمترین و قابل اعتماد‌ترین پارامترها برای بررسی سرعت در سایت هستند که علاوه بر ابزارهای ارزیابی بالا، آزمایشگاه‌هایی برای ارزیابی آنها توسط گوگل ایجاد شده‌اند، در این آزمایشگاه‌ها تست‌های شبیه سازی شده‌ای برای بررسی پارامترها انجام می‌گیرد که می‌توان گفت نتیجه ای تقریباً قابل اعتماد دارند.

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

	LCP	FID	CLS
Chrome DevTools	✔	✘ استفاده از TBT*	✔
Lighthouse	✔	✘ استفاده از TBT*	✔

ابزارهایی مانند Lighthouse که صفحات را در یک محیط شبیه‌سازی شده بدون کاربر بارگذاری می‌کنند، نمی‌توانند FID را اندازه‌گیری کنند (ورودی کاربر وجود ندارد). با این حال، معیار کل زمان مسدودسازی (TBT) قابل اندازه‌گیری آزمایشگاهی است و یک جایگزینی عالی برای FID است.

البته این نکته را فراموش نکنید که ابزارهای آزمایشگاهی نمی‌توانند به صورت 100% جایگزینی برای ابزاری‌های آنالیز میدانی باشند، این نکته در کشور ما ایران می‌تواند بسیار حائز اهمیت باشد.

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

توصیه هایی برای بهبود امتیاز معیارهای web vitals

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

• بهود LCP
• بهبود FID
• بهبود CLS (به زودی )

سایر web vitals ها

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

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

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

اینفوگرافیک: Core Web Vitals (وب ویتال)

تکامل و بهبود web vitals

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

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

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

برای همه وب ویتال ها، تغییرات به وضوح در این CHANGELOG گوگل ثبت می‌شوند.

سوالات متداول مفاهیم web vitals

وب ویتال چیست؟

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

core web vitals چیست ؟

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

چه معیارهای دیگری در وب ویتال وجود دارد؟

معیارهای Time to First Byte (TTFB) و First Contentful Paint (FCP) هر دو پارامترهای بارگذاری هستند و هر دو در تشخیص مسائل مربوط به LCP مفید هستند. و معیارهایی مانند Total Blocking Time (TBT) و Time to Interactive (TTI) معیارهای آزمایشگاهی هستند که در درک و تشخیص مسائل احتمالی که بر FID تأثیر می‌گذارد بسیار مهم هستند.