جمع آوری داده ها در وب سایت شما اولین گام برای بهبود آنهاست. یک تجزیه و تحلیل جامع داده های عملکرد را از محیط های واقعی و آزمایشگاهی جمع آوری می کند. اندازه‌گیری Web Vitals به حداقل تغییرات کد نیاز دارد و می‌تواند با استفاده از ابزار رایگان انجام شود.
اندازه گیری حیاتی وب با استفاده از داده های RUM
داده‌های نظارت واقعی کاربر (RUM) که به داده‌های میدانی نیز معروف است، عملکرد تجربه شده توسط کاربران واقعی سایت را ثبت می‌کند. داده‌های RUM همان چیزی است که Google برای تعیین اینکه آیا یک سایت آستانه‌های پیشنهادی Core Web Vitals را برآورده می‌کند یا خیر، استفاده می‌کند.
شروع شدن
اگر راه اندازی RUM ندارید، ابزارهای زیر به سرعت اطلاعاتی در مورد عملکرد واقعی سایت شما در اختیار شما قرار می دهند. همه این ابزارها بر اساس یک مجموعه داده اساسی ( گزارش تجربه کاربر Chrome ) هستند، اما موارد استفاده کمی متفاوت دارند:
- PageSpeed Insights (PSI) : PageSpeed Insights در مورد عملکرد مجموع سطح صفحه و سطح مبدا در 28 روز گذشته گزارش می‌دهد. علاوه بر این، پیشنهاداتی در مورد چگونگی بهبود عملکرد ارائه می دهد. اگر به دنبال یک اقدام واحد برای شروع اندازه گیری و بهبود بخش حیاتی وب سایت خود هستید، توصیه می کنیم از PSI برای ممیزی سایت خود استفاده کنید. PSI در وب و به عنوان یک API در دسترس است.
- کنسول جستجو : کنسول جستجو داده های عملکرد را بر اساس هر صفحه گزارش می کند. این باعث می شود که برای شناسایی صفحات خاصی که نیاز به بهبود دارند مناسب باشد. برخلاف PageSpeed Insights، گزارش کنسول جستجو شامل داده‌های عملکرد تاریخی است. کنسول جستجو فقط برای سایت‌هایی قابل استفاده است که مالک آنها هستید و مالکیت آنها را تأیید کرده‌اید.
- داشبورد CrUX : داشبورد 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 یک کتابخانه کوچک و مدولار (~1KB) است که یک 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 می شود، چند ملاحظه خاص وجود دارد که باید به آنها توجه کرد:
- تغییر چیدمان تجمعی (CLS): تغییر چیدمان تجمعی اندازه گیری شده در محیط های آزمایشگاهی می تواند به طور مصنوعی کمتر از CLS مشاهده شده در داده های RUM باشد. CLS به عنوان "مجموع کل نمرات تغییر چیدمان فردی برای هر تغییر غیرمنتظره چیدمان که در طول کل طول عمر صفحه رخ می دهد" تعریف می شود. با این حال، طول عمر یک صفحه معمولاً بسته به اینکه توسط یک کاربر واقعی بارگیری می شود یا یک ابزار اندازه گیری عملکرد مصنوعی، بسیار متفاوت است. بسیاری از ابزارهای آزمایشگاهی فقط صفحه را بارگذاری می کنند - آنها با آن تعامل ندارند. در نتیجه، آنها فقط تغییرات طرح‌بندی را که در زمان بارگذاری اولیه صفحه رخ می‌دهند، ثبت می‌کنند. در مقابل، CLS اندازه‌گیری شده توسط ابزار RUM، تغییرات طرح‌بندی غیرمنتظره‌ای را که در کل طول عمر صفحه رخ می‌دهد، ثبت می‌کند.
- تاخیر ورودی اول (FID): تاخیر ورودی اول را نمی توان در محیط های آزمایشگاهی اندازه گیری کرد زیرا به تعامل کاربر با صفحه نیاز دارد. در نتیجه، زمان مسدود کردن کل (TBT) پروکسی آزمایشگاهی توصیه شده برای FID است. TBT "مدت کل زمان بین First Contentful Paint و Time to Interactive را که طی آن صفحه از پاسخگویی به ورودی کاربر مسدود می شود" اندازه گیری می کند. اگرچه FID و TBT به طور متفاوت محاسبه می شوند، اما هر دو بازتابی از یک رشته اصلی مسدود شده در طول فرآیند بوت استرپ هستند. هنگامی که رشته اصلی مسدود می شود، مرورگر در پاسخ به تعاملات کاربر با تاخیر مواجه می شود. FID تاخیری را که در اولین باری که کاربر سعی می کند با یک صفحه ارتباط برقرار کند، در صورت وجود، اندازه گیری می کند.
ابزار سازی
از این ابزارها می توان برای جمع آوری اندازه گیری های آزمایشگاهی Web Vitals استفاده کرد:
- برنامه افزودنی Web Vitals Chrome: برنامه افزودنی Web Vitals Chrome Core Web Vitals (LCP، FID و CLS) را برای یک صفحه مشخص اندازه گیری و گزارش می کند. این ابزار در نظر گرفته شده است تا هنگام ایجاد تغییرات کد، بازخورد عملکرد زمان واقعی را به توسعه دهندگان ارائه دهد.
- Lighthouse: فانوس دریایی در مورد LCP، CLS و TBT گزارش می دهد و همچنین بهبودهای احتمالی عملکرد را برجسته می کند. Lighthouse در Chrome DevTools، به عنوان یک برنامه افزودنی کروم، و به عنوان یک بسته npm در دسترس است. Lighthouse همچنین می تواند از طریق Lighthouse CI در جریان های کاری یکپارچه سازی پیوسته گنجانده شود.
- WebPageTest: WebPageTest شامل Web Vitals به عنوان بخشی از گزارش استاندارد خود است. WebPageTest برای جمع آوری اطلاعات در مورد Web Vitals تحت شرایط خاص دستگاه و شبکه مفید است.