بهترین شیوه ها برای اندازه گیری میدانی web vitals

مقدمه‌

داشتن توانایی اندازه گیری و گزارش وب ویتالز برای تشخیص و بهبود عملکرد و سرعت سایت در طول زمان بسیار مهم است. بدون داده های میدانی ، نمی توان به طور قطعی دانست که آیا تغییراتی که در سایت خود ایجاد می کنید در واقع به نتایج دلخواه خود می رسد یا خیر.

بسیاری از ارائه دهندگان ابزارهای تجزیه و تحلیل نظارت واقعی کاربر (RUM) از معیارهای Core Web Vitals به خوبی پشتیبانی می کنند.اگر در حال حاضر از یکی از این ابزارهای تجزیه و تحلیل RUM استفاده می کنید ، می‌توانید ببینید صفحات سایت شما تا چه حد آستانه های توصیه شده Core Web Vitals را برآورده می کنند.

این راهنما بهترین شیوه ها، برای اندازه گیری میدانی معیارهای Core Web Vitals را مورد بحث قرار می دهد.

از معیارها یا رویدادهای سفارشی استفاده کنید

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

• معیار سفارشی را تعریف یا ثبت کنید (در صورت لزوم).
• مقدار معیار را به وسیله کد جاوا اسکریپت در frontend سایت خود محاسبه کنید.
• مقدار متریک را به ابزار تجزیه و تحلیل خود ارسال کنید .

برای کسب اطلاعات بیشتر درمورد مراحل 1 و 3 باید به مستندات اندازه گیری میدانی web vitals خود رجوع کنید و برای مرحله 2 می توانید از کتابخانه جاوا اسکریپت web-vitals برای محاسبه ارزش هر یک از معیارهای Core Web Vitals استفاده کنید.

نمونه کد زیر نشان می دهد که چگونه می توان این معیارها را در کد ردیابی کرد و آنها را به یک سرویس تجزیه و تحلیل ارسال کرد.

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics({name, value, id}) {
  const body = JSON.stringify({name, value, id});
  // 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);

گزارش موثر داده ها

هنگامی که مقادیر مربوط به هر یک از معیارهای Core Web Vitals را محاسبه کرده وبه سرویس تجزیه و تحلیل خود ارسال کرده اید ، مرحله بعدی ایجاد یک گزارش یا داشبورد با نمایش اطلاعات جمع آوری شده است.

برای اطمینان از اینکه سایت شما آستانه های توصیه شده Core Web Vitals را برآورده کرده است ، به گزارش کاملی نیاز دارید تا ارزش هر معیار را در صدک 75 نشان دهد. Web Vitals Report نمونه ای از این تکنیک است که از Google Analytics استفاده می کند.

نکته: کتابخانه جاوا اسکریپت web-vitals یک شناسه برای هر نمونه اندازه گیری شده ارائه می دهد که امکان ایجاد توزیع در اکثر ابزارهای تجزیه و تحلیل را فراهم می کند.

داده های خود را در زمان مناسب ارسال کنید

برخی از معیارهای عملکرد را می توان پس از اتمام بارگذاری صفحه محاسبه کرد ، در حالی که برخی دیگر (مانند CLS) در طول عمر صفحه در نظر گرفته می‌شوند. این امر می تواند مشکل ساز باشد ، زیرا رویدادها قبل از beforeunload و unload صفحه قابل اعتماد نیستند (مخصوصاً در تلفن همراه) و استفاده از آنها توصیه نمی شود.

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

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

نظارت بر عملکرد در طول زمان

بعد از به روز رسانی تجزیه و تحلیل خود برای پیگیری و گزارش معیارهای Core Web Vitals، گام بعدی این است که چگونه تغییرات سایت شما بر عملکرد در طول زمان تأثیر می گذارد.

تغییرات را نسخه بندی کنید

یک روش غیرقابل اعتماد برای ردیابی و استقرار تغییرات تکیه بر نتایج معیارها بلافاصله از توسعه در سایت است. بدون در نظر گرفتن این نکته که بسیاری از تغییرات ممکن است به دلایل زیادی مانند CDN و … نتیجه درستی به شما ندهند.

یک روش بسیار بهتر این است که یک نسخه منحصر به فرد برای هر تغییر ایجاد کنید و سپس آن نسخه را در ابزار تجزیه و تحلیل خود ردیابی کنید. اکثر ابزارهای تجزیه و تحلیل از تنظیم نسخه پشتیبانی می کنند.

آزمایش کنید

با ردیابی همزمان چندین نسخه (یا آزمایش) می توانید نسخه را یک قدم جلوتر ببرید.

با انجام آزمایش در تجزیه و تحلیل خود ، می توانید تغییر تجربی را در زیرمجموعه ای از کاربران خود اعمال کنید و عملکرد آن تغییر را با عملکرد کاربران مقایسه کنید. پس از اطمینان از اینکه تغییر واقعاً عملکرد را بهبود می بخشد ، می توانید آن را در اختیار همه کاربران قرار دهید.

گروه های آزمایشی همیشه باید روی سرور تنظیم شوند. از هرگونه آزمایش یا ابزار تست A/B که روی مشتری اجرا می شود خودداری کنید زیرا می تواند برای زمان LCP شما مضر باشد.

اطمینان حاصل کنید که اندازه گیری بر عملکرد تأثیر منفی نمی گذارد

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

هنگام استقرار کد تجزیه و تحلیل RUM در سایت تولیدی خود ، همیشه از این اصول پیروی کنید

تجزیه و تحلیل خود را به تعویق بیندازید

کد تجزیه و تحلیل همیشه باید به صورت غیر همزمان و بدون انسداد بارگذاری شود و به طور کلی باید آخرین بارگذاری باشد. اگر کد تحلیلی خود را به صورت مسدود کننده بارگذاری کنید ، می تواند بر LCP تأثیر منفی بگذارد.

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

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

کارهای طولانی ایجاد نکنید

کد تجزیه و تحلیل اغلب در پاسخ به ورودی کاربر اجرا می شود ، اما اگر کد تجزیه و تحلیل شما در حال انجام بسیاری از اندازه گیری های DOM یا استفاده از سایر API های پردازنده است ، کد تجزیه و تحلیل خود می تواند باعث پاسخ دهی ضعیف شود. علاوه بر این ، اگر فایل جاوا اسکریپت حاوی کد تجزیه و تحلیل شما بزرگ باشد ، اجرای آن فایل می تواند موضوع اصلی را مسدود کرده و بر FID تأثیر منفی بگذارد.

از API های بدون انسداد استفاده کنید

API هایی مانند sendBeacon () و requestIdleCallback () به طور خاص برای اجرای وظایف غیر مهم به گونه ای طراحی شده اند که وظایف مهم کاربران را مسدود نمی کند. این API ها ابزارهای خوبی برای استفاده در کتابخانه تجزیه و تحلیل RUM هستند.

به طور کلی ، همه کدهای تجزیه و تحلیل باید با استفاده از sendBeacon () API (در صورت موجود بودن) ارسال شوند ، و همه کدهای اندازه گیری تحلیلی باید در دوره های بیکاری اجرا شود.

بیش از آنچه نیاز دارید ردیابی نکنید

مرورگر بسیاری از داده های عملکرد را در معرض دید عموم قرار می دهد ، اما این که داده ها در دسترس هستند لزوما به این معنی نیست که شما باید آنها را ضبط کرده و به سرورهای تجزیه و تحلیل خود ارسال کنید.

به عنوان مثال ، Resource Timing API داده های زمان بندی دقیق را برای هر منبع بارگذاری شده در صفحه شما ارائه می دهد. با این حال ، بعید است که همه این داده ها لزوماً در بهبود عملکرد مفید باشند.