چگونه WEB VITALS را اندازه گیری کنیم؟

تحریریه منتوریکس
تحریریه منتوریکس
09:45، 1400/02/18
چگونه WEB VITALS را اندازه گیری کنیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه WEB VITALS را اندازه گیری کنیم؟


جمع‌آوری اطلاعات WEB VITALS، اولین گام برای بهبود عملکرد وبسایت شما و درنهایت بالا رفتن امتیاز سئو سایت محسوب می‌شود. یک تحلیل مطلوب، اطلاعات را از داده‌های آزمایشگاهی و داده‌های دنیای واقعی به دست می‌آورد. اندازه‌گیری WEB VITALS نیازمند حداقل تغییرات در کدنویسی است. همچنین برای اندازه‌گیری آن‌ها از ابزارهای رایگان می‌توانید استفاده کنید. در ادامه این مطلب همراه منتوریکس باشید تا با روش‌های اندازه‌گیری Core Web Vitals آشنا شویم.

اگر با Core Web Vitals آشنا نیستید، ابتدا این مطلب را بخوانید.

اندازه‌گیری WEB VITALS با استفاده از داده‌های RUM

RUM مخفف عبارت انگلیسی Real User Monitoring است. ترجمه این عبارت، نظارت بر کاربران می‌شود. در نتیجه نظارت مستقیم بر کاربران واقعی وبسایت، به داده‌های عددی واقعی و نه آزمایشی دست پیدا خواهید کرد. به این طریق می‌توانیم برای بهبود عملکرد وبسایت از داده‌های آزمایشگاهی و واقعی در ترکیب با هم استفاده کنیم. در حقیقت گوگل از همین داده‌ها استفاده می‌کند تا دستیابی به آستانه‌های WEB VITALS وبسایت ما را بسنجد.

اندازه‌گیری WEB VITALS با استفاده از داده‌های RUM

بهترین ابزارهای اندازه گیری Web Vitals

برای شروع آماده شوید

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

ابزار Page Speed Insights یا همان PSI

PSI گزارشی جامع از عملکرد 28 روزه  در سطح صفحه و اوریجن (پروتکل به همراه آدرس و پورت، به زبان ساده همان URL کامل) را ارائه می‌دهد. این ابزار در نهایت به شما راه‌کارهایی برای بهبود عملکرد وبسایت شما ارائه خواهد کرد. اگر به‌دنبال برداشتن اولین قدم در راستای بهبود عملکرد وبسایت خود هستید، ما به شما PSI را پیشنهاد می‌دهیم. PSI بر روی وب به‌عنوان یک API قابل دسترسی است.

ابزار Search Console

سرچ کنسول گزارش عملکرد وبسایت شما را به‌صورت صفحه محور ارائه می‌دهد. این ابزار برای یافتن صفحات یا همان پیج‌هایی که به بهبود نیاز دارند، بسیار مناسب است. برخلاف PSI، گزارش سرچ کنسول شامل داده‌های سابقه عملکرد وبسایت می‌شود. سرچ کنسول فقط بر روی وبسایتی که شما مالک واقعی آن هستید و مالکیت خود را تأیید کنید قابل استفاده است.

ابزار CrUX Dashboard

یک نمونه گزارش از اندازه گیری Web Vitals

ابزار CrUX Dashboard

این ابزار یک داشبورد آماده است که داده‌های CrUX برای اورجینی که شما انتخاب می‌کنید را نشان می‌دهد. عملکرد این ابزار در اولویت قرار دارد و در عرض کمتر از 1 دقیقه اطلاعات را برای شما مهیا می‌کند. در مقایسه با سرچ کنسول و PSI، گزارش CrUX شامل ابعاد و جوانب بیشتری می‌شود. به‌عنوان مثال نوع دستگاه و نوع کانکشن کاربر نیز در این نوع داده مشخص خواهد شد.
لازم به ذکر است که این ابزارها فقط برای مراحل ابتدایی طراحی نشده‌اند. بلکه از آن‌ها می‌توان در تحلیل‌های پیشرفته و شرایط مختلف نیز استفاده کرد. CrUX و همچنین PSI، هر دو به‌صورت API نیز ارائه شده‌اند و می‌توان از آن‌ها برای ساخت داشبورد و گزارش‌های دیگر نیز استفاده کرد.

بیشتر بخوانید: چطور با CrUX معیارهای Core Web vitals را اندازه بگیریم؟ {آموزش ویدئویی}

جمع‌آوری اطلاعات RUM

با وجود آن‌که گزارش گوگل یا همان CrUX اطلاعات بسیار مفیدی را ارائه می‌دهد و قابل استناد هستند؛ اما شدیداً توصیه می‌کنیم که اطلاعات RUM وبسایت خود را نیز جمع‌آوری کنید. این کار باعث می‌شود تا به جزئیات بیشتری درباره کاربران واقعی وبسایت خود دست پیدا کنید. به این ترتیب می‌توانید فیدبک لحظه‌ای آن‌ها را به دست بیاورید. پس در نتیجه با اتکا به این داده‌ها، بهبود عملکرد وبسایت شما و تشخیص مشکلات آن ساده‌تر خواهد بود.
به یاد داشته باشید داده‌های CrUX تخمینی از داده‌های به دست آمده در طول یک ماه هستند. به همین خاطر جزئیات این داده‌ها در ابزارهای مختلف، متفاوت خواهد بود. به‌عنوان مثال گزارش PSI و سرچ کنسول بر اساس عملکرد 28 روزه وبسایت شما تهیه می‌شود. این در حالی است که مجموعه داده‌های CrUX به‌صورت ماهانه به وجود می‌آید. پس داده‌های شما از هر ابزار ممکن است با دیگری کمی متفاوت باشد.
شما می‌توانید داده‌های RUM را با کمک سرویس اختصاصی RUM جمع‌آوری کنید یا اینکه از ابزار شخصی خودتان استفاده نمایید. سرویس اختصاصی RUM مخصوص جمع‌آوری داده‌های RUM و ارائه گزارش در همین راستا است. برای آنکه از این سرویس در راستای اندازه‌گیری Core Web Vitals استفاده کنید، از سرویس اختصاصی RUM بخواهید تا مانیتورینگ Core Web Vitals را برای شما فعال نماید.
اگر فاقد سرویس اختصاصی RUM هستید، شاید با تغییرات جزئی در تنظیمات سیستم تحلیلی وبسایت خود بتوانید این داده‌های عددی را به دست بیاورید. برای این کار می‌توانید از کتابخانه جاوا اسکریپت، کد  web-vitals را انتخاب کنید. روش دقیق استفاده از این روش را در ادامه به شما عزیزان معرفی خواهیم کرد:

استفاده از Web – Vitals  در کتابخانه جاوا اسکریپت

اگر می‌خواهید به‌جای استفاده از سرویس اختصاصی RUM، ابزار اندازه‌گیری خودتان را اجرا کنید، بهتر است به سراغ Web – vitals در کتابخانه جاوا اسکریپ بروید. Web – Vitals یک کتابخانه کوچک مدولار است که سایز آن به کمتر از 1 کیلوبایت می‌رسد. این کتابخانه می‌تواند به‌عنوان یک API مناسب برای جمع‌آوری داده‌های میدانی در زمینه استانداردهای Web Vitals برای شما عمل کند.
به این ترتیب شاخص‌ها به‌صورت مستقیم تحت‌تأثیر API های مرورگر نیستند؛ بلکه بر آن‌ها اولویت دارند. به‌عنوان مثال برای اندازه‌گیری استاندارد CLS از API مخصوص عدم ثبات پوسته استفاده می‌شود؛ اما زمانی که از کتابخانه Web – Vitals استفاده کنید دیگر لازم نیست نگران باشید که حتماً خودتان یک روش برای اندازه‌گیری این شاخص را اجرا کنید؛ بلکه این کتابخانه می‌تواند از بهترین روش برای اندازه‌گیری این استاندارد استفاده نماید.

جمع‌آوری دیتا

حتماً باید از داده‌های جمع‌آوری شده توسط Web – vitals گزارش تهیه کنید. اگر این کار را انجام ندهید، هیچ‌گاه متوجه نمی‌شوید که چطور باید از این داده‌ها استفاده کنید. برای این کار می‌توانید از a generic API endpoint، Google Analytics یا گوگل تگ منیجر Google Tag Manager کمک بگیرید. اگر به جز این سه ابزار، از ابزار دیگری برای تهیه گزارش استفاده می‌کنید، از همان کمک بگیرید. در غیر این صورت باید گفت که Google Analytics یک ابزار رایگان و بسیار مناسب برای این کار است. 
برای آنکه بتوانید ابزار مناسب را انتخاب کنید، باید در نظر داشته باشید که چه استفاده‌ای از این اطلاعات و دیتا می‌خواهید بکنید. مشاغل بزرگ معمولاً زمانی به بیشترین موفقیت دست پیدا می‌کنند که به فکر ارتقاء و بهبود تمامی سازمان خود و نه فقط بخش خاصی باشند. این یعنی باید به فکر ارائه یک گزارش کامل و جامع باشید.

تفسیر داده‌های عددی

مثال کاملی از گرازش Core web Vitals و تفسیر داده‌ها

تفسیر داده‌های عددی

در حین تفسیر داده‌های عددی باید به روند توزیع آن نیز دقت کنید. داده‌های عددی حاصل از RUM نشان‌دهنده طیف گسترده‌ای از عملکرد هستند. به‌عنوان مثال برخی افراد یک تجربه سریع و برخی دیگر تجربه آهسته از وبسایت شما را دارند. به همین خاطر داده‌ها طیف گسترده‌ای از اعداد را به شما ارائه می‌دهند. البته با کمک جمع‌بندی کلی و خلاصه‌سازی داده‌ها می‌توان این تفاوت در رفتار را پوشش داد.
در ارتباط با Web Vitals باید بدانید که گوگل برای تشخیص اینکه استانداردهای یک وبسایت به آستانه مدنظر رسیده است یا نه، فقط از درصد مطلوب تجربه کاربر استفاده می‌کند و اصلاً آمارهای متوسط را در نظر نمی‌گیرد. مخصوصا زمانی که بخواهد در گزارش خود یک شاخص را در آستانه مطلوب قرار دهد، باید حتماً 75 درصد بازدید‌های انجام شده از وبسایت در سطح آستانه مطلوب قرار داشته باشند.

اندازه‌گیری Web Vitals با استفاده از داده‌های آزمایشگاهی

به داده‌های آزمایشگاهی، داده‌های مصنوعی نیز گفته می‌شود. این داده‌ها در شرایط کنترل شده به دست می‌آیند و ارتباطی با شرایط واقعی که کاربر تجربه می‌کند ندارد. برخلاف داده‌های RUM، داده‌های آزمایشگاهی با کمک شرایط از پیش تعیین شده به دست می‌آیند. پس از این داده‌ها در روند کار توسعه‌دهنده و پروسه continuous integration استفاده می‌شود. LightHouse و همچنین WebPage Test جزء ابزارهایی هستند که می‌توانند داده‌های آزمایشگاهی و مصنوعی را به دست بیاورند.

بیشتر بخوانید: ابزارهای اندازه گیری WEB VITALS کدامند؟

ملاحظات نهایی

اگر شرایط شبکه، نوع دستگاهی که کاربر از آن استفاده می‌کند و موقعیت جغرافیایی که کاربر در آن قرار دارد با شرایط آزمایشگاهی تفاوت داشته باشد، داده‌های RUM و داده‌های آزمایشگاهی با یکدیگر تفاوت فاحشی خواهند داشت. به همین خاطر برای اندازه‌گیری Web Vitals metrics باید یک سری ملاحظات را در نظر داشته باشید:

Cumulative Layout Shift یا همان CLS

مقدار اندازه‌گیری شده این شاخص در شرایط آزمایشگاهی به‌مراتب کمتر از مقداری است که در داده‌های RUM مشاهده می‌شود. CLS در حقیقت جمع امتیاز کل تغییرات پوسته برای هر تغییر غیرمنتظره در مدت زمانی است که کاربر صفحه وبسایت شما را مرور می‌کند. «مدت زمانی که کاربر صفحه وبسایت شما را مرور می‌کند» یک متغییر است. همچنین زمان بارگذاری صفحه وبسایت در شرایط واقعی با آزمایشگاهی تفاوت دارد.

First Input Delay یا همان FID

FID از معیارهای اصلی Core Web Vitals است

 بسیاری از ابزارهای آزمایشگاهی فقط زمان بارگذاری صفحه و نه تعامل و ارتباط با آن را اندازه‌گیری می‌کنند. در نتیجه این ابزارهای آزمایشگاهی فقط قادرند تا تغییرات غیرمنتظره پوسته را در طول زمان ابتدایی بارگذاری صفحه وبسایت شما اندازه‌گیری کنند. این در حالی است که داده RUM مقدار CLS را تا زمانی که کاربر در حال تعامل با صفحه وبسایت شما است را اندازه‌گیری می‌کند. به زبان ساده از ابتدا تا انتهای حضور کاربر در وبسایت باید مدنظر قرار بگیرد.

بیشتر بخوانید: چگونه CLS را بهینه کنیم؟

First Input Delay یا همان FID

شاخص تأخیر اولین ورودی را نمی‌توان در شرایط آزمایشگاهی اندازه‌گیری کرد. برای اندازه‌گیری این شاخص نیاز به تعامل و ارتباط کاربر با وبسایت است. به همین خاطر Total Blocking Time یا همان TBT می‌تواند یک پراکسی جایگزین آزمایشگاهی برای اندازه‌گیری شاخص تأخیر اولین ورودی باشد.
TBT فاصله زمانی بین First Contentful Paint یا همان اولین نمایش محتوایی تا زمان تعامل یا همان Time To Interactive در طول مدتی که انسداد صفحه در برابر پاسخ ورودی کاربر ایجاد شده است را اندازه‌گیری می‌کند. با وجود آنکه روش اندازه‌گیری TBT با روش اندازه‌گیری FID تفاوت دارد؛ اما هر دو بازتابی از زمان انسداد اصلی در طول پروسه بوت استرپ (bootstrap) هستند. زمانی که thread اصلی بلاک شده باشد، مرورگر در پاسخ به تعامل کاربر، دچار تأخیر خواهد شد. در عین حال تأخیر اولین ورودی نیز، هر تاخیری که در اولین تعامل کاربر با وبسایت ایجاد می‌شود را اندازه‌گیری می‌کند. پس می‌توان گفت که TBT و FID هر دو عملکردی مشابه دارند. به همین خاطر می‌توان از TBT به جای FID در شرایط آزمایشگاهی استفاده کرد.

بیشتر بخوانید: تأخیر ورودی اول (FID) چیست؟

ابزارهای مورد استفاده

برای جمع‌آوری داده‌های آزمایشگاهی می‌توانید از ابزارهای زیر استفاده کنید:

افزونه کروم Web Vitals

این افزونه شاخص‌های LCP، FID و CLS را برای یک صفحه اندازه‌گیری کرده و گزارشی جامع برای آن‌ها ارائه می‌دهد. این افزونه فیدبک لحظه‌ای عملکرد کاربر را پس از تغییرات کد به توسعه‌دهنده نشان می‌دهد.

LightHouse

این ابزار شاخص‌های LCP، CLS و TBT را اندازه‌گیری می‌کند. همچنین در نهایت راه‌کارهای احتمالی برای بهبود عملکرد این شاخص‌ها را نیز به توسعه‌دهنده ارائه می‌دهد. این ابزار به‌صورت افزونه کروم و Chrome DevTools و همچنین پکیج Npm قابل استفاده است.

ابزار Web Page Test

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

جمع بندی

در این مطلب سعی کردیم بهترین ابزارهای اندازه گیری Web Vitals را به شما معرفی کنیم که به وسیله‌ی آن می‌توانید WEB VITALS را اندازه گیری کنید. اگر به سئو تکنیکال و مبحث Core Web Vitals علاقمند هستید دیگر مطالب این بخش را هم بخوانید.

تحریریه منتوریکس
تحریریه منتوریکس

این مطالب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف