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

معیارهای ضروری برای یک سایت سالم

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

مقدمه

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

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

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

Core Web Vitals

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

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

بزرگترین ترسیم محتوایی LCP

پارامتر بزرگترین ترسیم محتوایی LCP سرعت بارگذاری سایت از شروع اولین درخواست را اندازه گیری می‌کند. برای درک تجربه کاربری بهتر این زمان باید کمتر از 2.5 ثانیه باشد.درواقع LCP مدت زمان ارسال درخواست تا اولین ترسیم بصری صفحه می ‌باشد.

Largest Contentful Paint (LCP)
وب ویتال چیست؟
Largest Contentful Paint (LCP)

تاخیراولین تعامل FID

پارامتر تاخیر اولین ورودی FID زمان اولین امکان تعامل کاربر با صفحه شما را اندازه گیری می کند،منظور از تعامل هر کنش کاربر مانند کلیک بر روی المان ها و … است. برای ارائه تجربه کاربری خوب ، حداکثر زمان این پارامتر 100 میلی ثانیه است،بدین مفهوم که در 100 میلی ثانیه بعد از لود بصری امکان تعامل برای کاربر فراهم شود.

First Input Delay (FID)
وب ویتال چیست؟
Largest Contentful Paint (LCP)

ثبات بصری CLS

پارامتر پایداری بصری در فرایند لود CLS معیار اندازه گیری رسیدن صفحه به ثبات بصری است. به زبان ساده تر این پارامتر مدت زمانی را که صفحه به ثبات بصری و گرافیکی می‌رسد رااندازه گیری می کند. برای درک تجربه کاربری بهتر باید این زمان کمتر از یک دهم باشد.

CLS به تعیین تعداد دفعاتی که کاربران تغییر چیدمان غیر منتظره را تجربه می کنند ، کمک می کند – CLS پایین به تضمین لذت بخش بودن صفحه کمک می کند.

Cumulative Layout Shift
وب ویتال چیست؟
Cumulative Layout Shift (CLS)

در هر یک از پارامترهای فوق برای رسیدن به هدف تعیین شده باید حداقل 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 در سرچ کنسول نیز استفاده کنید.

ابزارLCPFIDCLS
Chrome User Experience Report
PageSpeed Insights
سرچ کنسول (Core Web Vitals report)
جدول شماره 1: ابزارهای مختلف برای ارزیابی وب ویتال ها

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

LCPFIDCLS
کتابخانه web vitals
افزونه کروم web vitals
جدول شماره 2 : کتابخانه و افزونه کروم وب ویتال

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

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

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

LCPFIDCLS
Chrome DevToolsاستفاده از TBT*
Lighthouseاستفاده از TBT*
جدول شماره 3 : ابزارهای آزمایشگاهی اندازه گیری وب ویتال ها (*منظور از TBT عبارت Total Blocking Time است)

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

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

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

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

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

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

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

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

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

5 4 آرا
امتیاز دهی مقاله
عضویت
به من اعلان بده
نام قابل نمایش شما
آدرس ایمیل
2 دیدگاه‌ها
بازخورد برخط
نمایش همه دیدگاه ها

سلام عالی بود و واقعا جامع و کامل کاش زودتر تکمیل کنید