- بهینه سازی سایت
- زمان 6 دقیقه
محمد صادقیWeb Vitals چیست
بهینه سازی سایت برای کیفیت تجربه کاربر رمز موفقیت طولانی مدت هر سایتی در وب است. Web Vital می تواند به شما کمک کند تا کمیت های سایت خود را بسنجید و برای بهبود و ارتقاء سایت راهکارهایی به شما ارائه خواهد داد. وب ویتال یکی دیگر از ابتکار های گوگل است که یک راهنمای یک پارچه در خصوص سیگنال هایی است که وابسته به ارتقای کیفیت تجربه ی کاربری در وب است. گوگل در طی سالیان متوالی ناچار به فراهم آوردن ابزار های متنوع بود تا بتواند این امکان را فراهم سازد تا گزارش و مقیاسی از نحوه ی عملکرد خود در وب داشته باشید. امروز از سری مقالات تیک4 قصد داریم شما را با وب ویتال بیشتر آشنا کنیم. با مقاله Web Vitals چیست باما همراه باشید.
تعریف Core Web Vitals
Core Web Vitals زیرمجموعه‌ای از وب ویتال ها هستند که در تمام صفحات وب به کار می‌روند. هرکدام از Core Web Vitals بیانگر وجه مجزایی از تجربه کاربران هستند که در یک زمینه قابل‌اندازه‌گیری است و بازتابی از یک تجربه واقعی از بازخورد یک کاربر را به شما ارائه می دهد. متریک های سازنده Core Web Vitals در حال حاضر کامل نیستند و در گذر زمان این متریک ها کامل تر خواهند شد.
سه بخش اصلی Core Web Vitals
- لودینگ
- تعامل
- ثبات بینایی
- Largest Contentful Paint (LCP): معیاری برای اندازه گیری عملکرد بارگذاری سایت می باشد. برای کسب رضایت کاربری در این بخش نیاز است تا سرعت لود صفحه از زمان باز شدن اولیه ی آن ۲.۵ ثانیه باشد.
- First Input Delay (FID) ، معیاری برای اندازه گیری تعاملات در یک سایت می باشد. که برای جلب رضایت کاربری در این محور نیاز است تا صفحات FID زمانی کمتر از ۱۰۰ میلی ثانیه داشته باشند. با استفاده از این بخش شما به راحتی می توانید تاثیر اولیه ی سایتتان بر کاربر در مبحث تعاملات و هم چنین ریسپانسیو بودن را مورد بحث قرار دهید.
- Cumulative Layout Shift (CLS) معیاری برای اندازه گیری ثبات بینایی می باشد و برای جلب رضایت کاربری نیاز است تا CLS هر صفحه کمتر از ۰.۱ باشد.
در مورد هرکدام از متریک‌های بالا، برای اطمینان از رسیدن به هدف توصیه شده برای اغلب کاربران خود، طبق تقسیم بندیهای مربوط به دستگاه موبایل و کامپیوتر، حد نصاب اندازه‌گیری 75 درصد از بارگذاری صفحه مناسب می باشد. ابزارهای ارزیابی Core Web Vitals باید رسیدن آن به اهداف توصیه‌شده در 75 درصد را برای هر سه متریک بالا بررسی کنند.
ابزارهایی برای اندازه‌گیری و گزارش Core Web Vitals
گوگل معتقد است که Core Web Vitals برای تمام تجارب وب مهم هستند. درنتیجه به آشکارسازی این متریک‌ها در همه ابزارهای معروف، متعهد است. در ادامه مقاله وب ویتال چیست به شما خواهیم آموخت که چگونه ابزارهای گوگل از Core Web Vitals پشتیبانی میکنند.
ابزارهای زمینه‌ای برای اندازه‌گیری Core Web Vitals
گزارش تجربی کاربران کروم یا Chrome User Experience report داده‌های اندازه‌گیری هر Core Web Vital را از بین کاربران واقعی و ناشناس جمع‌آوری می کند. این داده‌ها به صاحبان سایت اطلاعاتی در مورد عملکرد کاربر بدون نیاز به ابزاردستی را میدهد همچنین تحلیلی در مورد صفحات سایت و ابزارهایی مانند دیدگاه‌ها در مورد سرعت صفحه و کنسول‌های جستجو ارائه می دهد.
| CLS | FID | LCP | ابزارها |
| ✔ | ✔ | ✔ | Chrome User Experience Report |
| ✔ | ✔ | ✔ | PageSpeed Insights |
| ✔ | ✔ | ✔ | Search Console (Core Web Vitals report) |
داده تهیه‌شده توسط Chrome User Experience report یک‌راه سریع برای ارزیابی عملکرد سایت‌ها را پیشنهاد می‌کند اما جزئیات مربوط به دورسنجی هر نمای صفحه که اغلب برای تشخیص، نشان دادن و واکنش سریع به پسرفت‌ها ضروری است را تهیه نمی‌کند. درنتیجه، ما شدیداً توصیه می‌کنیم که سایت‌ها مانیتورینگ کاربر واقعی خودشان را تنظیم کنند.
اندازه‌گیری Core Web Vitals در جاوا اسکریپت
با استفاده از API های استاندارد شبکه می‌توان هرکدام از Core Web Vitals را در جاوا اسکریپت اندازه‌گیری کرد. ساده‌ترین راه برای اندازه‌گیری همه Core Web Vitals استفاده از کتابخانه 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 به یک نقطه نهایی تحلیلی، تنظیم کردید چنان چه صفحات شما به حد نصاب توصیه‌شده برای حداقل 75 درصد از ویزیت‌های صفحه رسیده باشند، به قدم بعدی که جمع‌آوری و گزارش آن داده‌هاست بروید.
در حالیکه برخی تولیدکنندگان تحلیل‌گر از متریک‌های Core Web Vitals خودسرانه پشتیبانی میکنند، اما ابزارهای همان‌ها هم ویژگی اصلی و عمومی متریک را برای اندازه‌گیری Core Web Vitals ندارند.
یک مثال از این مورد گزارش web Vitals است که به صاحبان سایت این اجازه را میدهد که با استفاده از تحلیلگرهای کروم Core Web Vitals خود را اندازه‌گیری کنند.
همچنین شما می‌توانید بدون نوشتن هیچ کدی و با استفاده از Web Vitals Chrome Extension هر Core Web Vitals را گزارش دهید. این گستردگی از کتابخانه web Vitals برای اندازه‌گیری هرکدام از این متریک‌ها استفاده می‌کند و وقتی کاربران یک شبکه را جستجو میکنند آن‌ها را به ایشان نشان میدهد. این گستردگی می‌تواند در درک عملکرد سایت شما، سایت رقبای شما و کل شبکه، مفید باشد. با ادامه مقاله Web Vitals چیست همراه ما باشید.
| ابزارها | LCP | FID | CLS |
|---|---|---|---|
| web-vitals | ✔ | ✔ | ✔ |
| Web Vitals Extension | ✔ | ✔ | ✔ |
به‌عبارت‌دیگر، توسعه‌دهندگان که ترجیح می‌دهند که از این متریک‌ها مستقیماً از طریق API های بنیادی وب اندازه‌گیری کنند. در قسمت های بعدی مقالات وب ویتال آموزش خواهیم داد.
- Measure LCP in JavaScript
- Measure FID in JavaScript
- Measure CLS in JavaScript
ابزارهای کتابخانه ای برای اندازه‌گیری Core Web Vitals
در حالیکه تمام Core Web Vitals اولین و مهم‌ترین متریک‌های زمینه‌ای هستند، بسیاری از آن‌ها در کتاببخانه ها هم قابل‌اندازه‌گیری‌اند.
اندازه‌گیری کتابخانه ایی بهترین روش برای آزمودن عملکرد ویژگی‌ها در حین توسعه و قبل از انتشار آن‌ها برای کاربران است. همچنین بهترین راه برای گرفتن رگرسیون‌های عملکرد قبل از اینکه اتفاق بیفتد، هست.
ابزارهای زیر را می‌توان برای اندازه‌گیری Core Web Vitals در محیط کتابخانه ایی استفاده کرد:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | ✔ | ✘ (use TBT instead) | ✔ |
| Lighthouse | ✔ | ✘ (use TBT instead) | ✔ |
ابزارهایی مانند لایت هاوس که صفحات را در محیط شبیه‌سازی‌شده و بدون کاربر بارگذاری میکنند، نمی‌توانند FID (بدون ورودی کاربر) اندازه‌گیری کنند. بااین‌حال، متریک زمان بلوکه کردن کامل (TBT) یک وسیله قابل‌اندازه‌گیری کتابخانه ای و یک پروکسی عالی برای FID است. بهینه‌سازی عملکردها که TBT را در کتابخانه ارتقاء میدهد باید FID را درزمینهٔ هم ارتقاء دهد.
در حالیکه اندازه‌گیری کتابخانه ای بخش مهمی از رسیدن به تجارب بزرگ است، اما جایگزین اندازه‌گیری زمینه‌ای نیست.
عملکرد یک سایت می‌تواند تا حد زیادی بر اساس قابلیت‌های دستگاه کاربران، شرایط شبکه آن‌ها، دیگر فرایندهای اجرایی در دستگاه و چگونگی تعامل آن‌ها با صفحه متفاوت باشد. درواقع، هرکدام از متریک‌های Core Web Vitals می‌تواند امتیازی متأثر از تعامل کاربر داشته باشد. فقط اندازه‌گیری زمینه‌ای می‌تواند تصویر کامل و دقیقی بگیرد.
توصیه‌هایی برای ارتقاء امتیازات شما
ابتدا شما Core Web Vitals را اندازه‌گیری و محدوده‌هایی را برای پیشرفت مشخص می‌کنید، در قدم بعدی آن را بهینه‌سازی می‌کنید. راهنمای زیر توصیه‌هایی را جهت چگونگی بهینه‌سازی صفحات شما برای Core Web Vitals پیشنهاد میدهد که در قسمت های بعدی مقالات وب ویتال آموزش خواهیم داد.
- Optimize LCP
- Optimize FID
- Optimize CLS
Web Vitals های دیگر
در حالیکه Core Web Vitals متریک‌های بنیادی برای درک و رسیدن به تجربه بزرگ کاربر هستند، اما متریک‌های vital دیگری هم وجود دارند.
این 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 در تمامی صفحات مطرح است و در میان ابزارهای مرتبط گوگل قابل‌مشاهده است. تغییرات این متریک‌ها تأثیر گسترده خواهد داشت، همچنین توسعه‌دهندگان باید تعاریف و آستانه‌هایی را برای مداوم بودن Core Web Vitals پیش‌بینی کنند، اخبار قبلی خود را به‌روزرسانی کنند و یک هماهنگی قابل پیش‌بینی سالیانه داشته باشند.
Web Vitals های دیگر اغلب زمینه یا ابزار خاصی است که ممکن است بسیار باتجربه‌تر از Core Web Vitals باشند. بدین لحاظ ممکن است تعاریف و آستانه آن‌ها با فرکانس‌های بزرگ‌تر تغییر کند. در این گزارش تغییرات عمومی، تغییرات مربوط به همه Web Vitals ها به‌روشنی مکتوب شده است.
امیدواریم از مقاله Web Vitals چیست بهره کافی را برده باشید. از قسمت دیدگاه ها باما همراه باشید.
دیدگاه خود را بیان کنید