جمع آوری داده ها در وب سایت شما اولین گام برای بهبود آنهاست. یک تجزیه و تحلیل جامع داده های عملکرد را از محیط های واقعی و آزمایشگاهی جمع آوری می کند. اندازه‌گیری Web Vitals به حداقل تغییرات کد نیاز دارد و می‌تواند با استفاده از ابزار رایگان انجام شود.
اندازه گیری حیاتی وب با استفاده از داده های RUM
داده‌های نظارت واقعی کاربر (RUM) که به داده‌های میدانی نیز معروف است، عملکرد تجربه شده توسط کاربران واقعی سایت را ثبت می‌کند. داده‌های RUM همان چیزی است که Google برای تعیین اینکه آیا یک سایت آستانه‌های پیشنهادی Core Web Vitals را برآورده می‌کند یا خیر، استفاده می‌کند.
شروع کردن
اگر راه اندازی RUM ندارید، ابزارهای زیر به سرعت اطلاعاتی در مورد عملکرد واقعی سایت شما در اختیار شما قرار می دهند. همه این ابزارها بر اساس یک مجموعه داده اصلی ( گزارش تجربه کاربر Chrome ) هستند، اما موارد استفاده کمی متفاوت دارند:
- Chrome DevTools با مجموعه داده CrUX در نمای متریک زنده پانل عملکرد یکپارچه می شود. با مقایسه تجربه محلی خود با تجربیات کاربر واقعی در همان صفحه، می توانید تصمیم آگاهانه تری در مورد اینکه کجا تلاش های اشکال زدایی خود را متمرکز کنید، بگیرید. اگر به دنبال یک اقدام واحد برای شروع اندازه‌گیری و بهبود بخش‌های حیاتی وب سایت خود هستید، توصیه می‌کنیم از پانل عملکرد Chrome DevTools استفاده کنید.
- PageSpeed Insights (PSI) عملکرد مجموع سطح صفحه و سطح مبدا را در 28 روز گذشته گزارش می دهد. علاوه بر این، پیشنهاداتی در مورد چگونگی بهبود عملکرد ارائه می دهد. PSI در وب و به عنوان یک API در دسترس است.
- کنسول جستجو داده های عملکرد را بر اساس هر صفحه گزارش می دهد. این باعث می شود که برای شناسایی صفحات خاصی که نیاز به بهبود دارند مناسب باشد. برخلاف PageSpeed Insights، گزارش کنسول جستجو شامل داده‌های عملکرد تاریخی است. کنسول جستجو فقط برای سایت‌هایی قابل استفاده است که مالک آنها هستید و مالکیت آنها را تأیید کرده‌اید.
- داشبورد CrUX یک داشبورد از پیش ساخته شده است که داده‌های CrUX را برای منبع انتخابی شما نمایش می‌دهد. این بر روی Data Studio ساخته شده است و فرآیند راه اندازی حدود یک دقیقه طول می کشد. در مقایسه با PageSpeed Insights و Search Console، گزارش داشبورد CrUX شامل ابعاد بیشتری است—به عنوان مثال، داده ها را می توان بر اساس دستگاه و نوع اتصال تجزیه کرد.
شایان ذکر است که اگرچه ابزارهای ذکر شده قبلاً برای «شروع به کار» با اندازه‌گیری Web Vitals مناسب هستند، اما می‌توانند در زمینه‌های دیگر نیز مفید باشند. به طور خاص، هر دو CrUX و PSI به عنوان یک API در دسترس هستند و می توانند برای ساخت داشبورد و سایر گزارش ها استفاده شوند.
داده های RUM را جمع آوری کنید
اگرچه ابزارهای مبتنی بر CrUX نقطه شروع خوبی برای بررسی عملکرد Web Vitals هستند، ما قویاً توصیه می کنیم آن را با RUM خود تکمیل کنید. داده‌های RUM که خودتان جمع‌آوری می‌کنید می‌توانند بازخورد دقیق‌تر و فوری‌تری در مورد عملکرد سایت شما ارائه دهند. این امر شناسایی مسائل و آزمایش راه حل های ممکن را آسان تر می کند.
شما می توانید داده های RUM خود را با استفاده از یک ارائه دهنده RUM اختصاصی یا با تنظیم ابزار خود جمع آوری کنید.
ارائه دهندگان RUM اختصاصی در جمع آوری و گزارش داده های RUM تخصص دارند. برای استفاده از Core Web Vitals با این خدمات، از ارائه دهنده RUM خود در مورد فعال کردن نظارت بر Core Web Vitals برای سایت خود سؤال کنید.
اگر ارائه‌دهنده RUM ندارید، ممکن است بتوانید با استفاده از کتابخانه جاوا اسکریپت web-vitals ، تنظیمات تجزیه و تحلیل موجود خود را برای جمع‌آوری و گزارش این معیارها افزایش دهید. در ادامه این روش با جزئیات بیشتر توضیح داده می شود.
کتابخانه جاوا اسکریپت web-vitals
اگر راه‌اندازی RUM خود را برای Web Vitals پیاده‌سازی می‌کنید، ساده‌ترین راه برای جمع‌آوری اندازه‌گیری‌های Web Vitals استفاده از کتابخانه JavaScript web-vitals است. web-vitals یک کتابخانه کوچک و مدولار (~2KB) است که یک API مناسب برای جمع‌آوری و گزارش هر یک از معیارهای Web Vitals قابل اندازه‌گیری در میدان فراهم می‌کند.
معیارهایی که Web Vitals را تشکیل می‌دهند همگی مستقیماً توسط APIهای عملکرد داخلی مرورگر در معرض نمایش قرار نمی‌گیرند - بلکه بیشتر بر روی آنها ساخته شده‌اند. به عنوان مثال، تغییر چیدمان تجمعی (CLS) با استفاده از Layout Instability API پیاده سازی می شود. با استفاده از web-vitals ، نیازی نیست خودتان نگران اجرای این معیارها باشید. همچنین تضمین می‌کند که داده‌هایی که جمع‌آوری می‌کنید با روش‌شناسی و بهترین شیوه‌ها برای هر معیار مطابقت دارند.
برای اطلاعات بیشتر در مورد پیاده‌سازی web-vitals ، به مستندات و بهترین روش‌ها برای اندازه‌گیری Web Vitals در راهنمای میدانی مراجعه کنید.
تجمیع داده ها
ضروری است که اندازه گیری های جمع آوری شده توسط web-vitals را گزارش دهید. اگر این داده ها اندازه گیری شود اما گزارش نشود، هرگز آن را نخواهید دید. اسناد web-vitals شامل نمونه‌هایی است که نحوه ارسال داده‌ها را به یک نقطه پایانی API عمومی ، Google Analytics یا Google Tag Manager نشان می‌دهد.
اگر قبلاً یک ابزار گزارش مورد علاقه دارید، از آن استفاده کنید. در غیر این صورت، گوگل آنالیتیکس رایگان است و می توان از آن برای این منظور استفاده کرد.
هنگام در نظر گرفتن اینکه از کدام ابزار استفاده کنید، فکر کردن به اینکه چه کسی باید به داده ها دسترسی داشته باشد مفید است. کسب‌وکارها معمولاً زمانی به بزرگترین عملکرد دست می‌یابند که کل شرکت، به جای یک بخش، به بهبود عملکرد علاقه‌مند باشد. برای یادگیری نحوه خرید از بخش‌های مختلف، به «تثبیت سرعت وب‌سایت به صورت متقابل» مراجعه کنید.
تفسیر داده ها
هنگام تجزیه و تحلیل داده های عملکرد، توجه به دنباله های توزیع مهم است. داده‌های RUM اغلب نشان می‌دهند که عملکرد به‌طور گسترده‌ای متفاوت است—بعضی از کاربران تجربیات سریع و برخی دیگر تجربه‌های آهسته دارند. با این حال، استفاده از میانه برای خلاصه کردن داده ها می تواند این رفتار را پنهان کند.
با توجه به Web Vitals، گوگل از درصد تجربیات "خوب" به جای آماری مانند میانگین ها یا میانگین ها استفاده می کند تا تعیین کند آیا یک سایت یا صفحه آستانه های توصیه شده را برآورده می کند یا خیر. به طور خاص، برای اینکه یک سایت یا صفحه به‌عنوان آستانه‌های Core Web Vitals در نظر گرفته شود، 75٪ از بازدیدکنندگان صفحه باید آستانه "خوب" را برای هر معیار برآورده کنند.
اندازه گیری حیاتی وب با استفاده از داده های آزمایشگاهی
داده های آزمایشگاهی که به عنوان داده های مصنوعی نیز شناخته می شوند، از یک محیط کنترل شده جمع آوری می شوند تا کاربران واقعی. برخلاف داده‌های RUM، داده‌های آزمایشگاهی را می‌توان از محیط‌های پیش‌تولید جمع‌آوری کرد و بنابراین در جریان‌های کاری توسعه‌دهنده و فرآیندهای یکپارچه‌سازی مداوم گنجانید. نمونه هایی از ابزارهایی که داده های مصنوعی را جمع آوری می کنند Lighthouse و WebPageTest هستند.
ملاحظات
همیشه بین داده‌های RUM و داده‌های آزمایشگاه تفاوت‌هایی وجود خواهد داشت – به‌ویژه اگر شرایط شبکه، نوع دستگاه یا مکان محیط آزمایشگاه به‌طور قابل‌توجهی با شرایط کاربران متفاوت باشد. با این حال، هنگامی که صحبت از جمع آوری داده های آزمایشگاهی به ویژه معیارهای Web Vitals می شود، چند ملاحظه خاص وجود دارد که باید به آنها توجه کرد:
- بزرگترین رنگ محتوای (LCP) اندازه‌گیری شده در محیط‌های آزمایشگاهی می‌تواند با موارد اندازه‌گیری شده در میدان با داده‌های RUM به دلیل تأخیر در بارگیری صفحه (از طریق تغییر مسیرها، تأخیر اتصال به سرور، یا داده‌های ذخیره نشده)، محتوای متفاوت نشان داده شده به کاربران مختلف متفاوت باشد. بسته به صفحه نمایش یا به دلایل دیگر (از جمله بنرهای کوکی، شخصی سازی).
- تغییر چیدمان تجمعی (CLS) اندازه گیری شده در محیط های آزمایشگاهی می تواند به طور مصنوعی کمتر از CLS مشاهده شده در داده های RUM باشد. بسیاری از ابزارهای آزمایشگاهی فقط صفحه را بارگذاری می‌کنند - آنها با آن تعامل ندارند. در نتیجه، آنها فقط تغییرات طرح‌بندی را که در زمان بارگذاری اولیه صفحه رخ می‌دهند، ثبت می‌کنند. در مقابل، CLS اندازه‌گیری شده توسط ابزار RUM، تغییرات طرح‌بندی غیرمنتظره‌ای را که در کل طول عمر صفحه رخ می‌دهد، ثبت می‌کند.
- تعامل با رنگ بعدی (INP) را نمی توان در محیط های آزمایشگاهی اندازه گیری کرد زیرا به تعامل کاربر با صفحه نیاز دارد. در نتیجه، زمان مسدود کردن کل (TBT) پروکسی آزمایشگاهی توصیه شده برای INP است. TBT "مدت کل زمان بین First Contentful Paint و Time to Interactive را که طی آن صفحه از پاسخگویی به ورودی کاربر مسدود می شود" اندازه گیری می کند. اگرچه INP و TBT متفاوت محاسبه می شوند، اما هر دو بازتابی از یک رشته اصلی مسدود شده در طول فرآیند بوت استرپ هستند. هنگامی که رشته اصلی مسدود می شود، مرورگر در پاسخ به تعاملات کاربر با تاخیر مواجه می شود.
ابزار سازی
از این ابزارها می توان برای جمع آوری اندازه گیری های آزمایشگاهی Web Vitals استفاده کرد:
- Chrome DevTools Core Web Vitals را برای یک صفحه معین در نمای سنجه‌های زنده پانل عملکرد اندازه‌گیری و گزارش می‌کند. این نما هنگام ایجاد تغییرات کد، بازخورد عملکرد زمان واقعی را به توسعه دهندگان ارائه می دهد.
- Lighthouse Lighthouse در مورد LCP، CLS و TBT گزارش می دهد و همچنین بهبودهای احتمالی عملکرد را برجسته می کند. Lighthouse در Chrome DevTools به‌عنوان یک بسته npm در دسترس است و همچنین می‌تواند با استفاده از Lighthouse CI در جریان‌های کاری یکپارچه‌سازی پیوسته گنجانده شود.
- WebPageTest شامل Web Vitals به عنوان بخشی از گزارش استاندارد خود است. WebPageTest برای جمع آوری اطلاعات در مورد Web Vitals تحت شرایط خاص دستگاه و شبکه مفید است.