علامت‌گذاری و اندازه‌گیری با استفاده از API زمان‌بندی کاربر (User Timing)
API زمان‌بندی کاربر (User Timing) یک ویژگی است که توسط مرورگرها فراهم شده است و به توسعه‌دهندگان این امکان را می‌دهد که عملکرد برنامه‌های وب خود را با پیگیری زمان‌های مشخصی که توسط کاربر تعریف می‌شوند (علامت‌ها) و اندازه‌گیری زمان لازم برای انجام وظایف یا عملیات خاص (اندازه‌گیری‌ها) تحلیل کنند. این ویژگی به‌ویژه در زمینه بهینه‌سازی عملکرد کاربرد دارد، زیرا دیدگاه‌های دقیق‌تری از عملکرد بخش‌های مختلف یک صفحه وب یا اپلیکیشن وب از منظر کاربر فراهم میکند.
علامت‌ها و اندازه‌گیری‌های زمان در API زمان‌بندی کاربر چیستند؟
علامت‌ها (Marks) زمان‌های سفارشی هستند که توسط توسعه‌دهنده در نقاط مختلف کد قرار داده می‌شوند، در حالی که اندازه‌گیری‌ها (Measures) نشان‌دهنده زمان بین دو علامت هستند. این زمان‌ها می‌توانند به‌طور مثال مدت زمانی که یک بخش خاص از صفحه بارگذاری می‌شود، مدت زمانی که کاربر باید منتظر بماند تا یک تعامل خاص آماده شود، یا مدت زمان اجرای یک تابع را اندازه‌گیری کنند.
علامت‌ها لحظات خاص در زمان را نشان می‌دهند، مانند زمانی که یک رویداد شروع می‌شود و اندازه‌گیری‌ها فاصله زمانی بین دو علامت را نشان می‌دهند. با ترکیب این دو ابزار، توسعه‌دهندگان تصویری دقیق از چگونگی تأثیر عملکرد بر تجربه کاربر به دست می‌آورند و می‌توانند نقاط ضعف یا ناکارآمدی‌ها را شناسایی کنند.
چرا علامت‌گذاری و اندازه‌گیری زمان کاربر اهمیت دارند؟
مانیتورینگ دقیق عملکرد: بر خلاف اندازه‌گیری‌های سنتی مانند زمان بارگذاری صفحه یا زمان کلی رندر، علامت‌ها و اندازه‌گیری‌ها به توسعه‌دهندگان این امکان را می‌دهند که لحظات دقیق در جریان کاربر را شبیه‌سازی کنند. برای مثال، می‌توانید زمان لازم برای تکمیل ارسال یک فرم یا مدت زمان اجرای یک انیمیشن خاص را پیگیری کنید.
رفع مشکلات با دقت بیشتر: با داده‌های زمان‌بندی کاربر، توسعه‌دهندگان به‌راحتی می‌توانند تشخیص دهند که مشکل عملکرد در کجا رخ می‌دهد. اگر یک تعامل خاص خیلی طول بکشد، استفاده از علامت‌ها و اندازه‌گیری‌ها می‌تواند کمک کند تا بدانید که تاخیر به دلیل درخواست‌های شبکه، اجرای جاوااسکریپت یا مشکلات رندرینگ است، که این موضوع به رفع مشکل کمک میکند.
بهبود تجربه کاربری: با اندازه‌گیری دقیق تعاملات حیاتی کاربر، توسعه‌دهندگان می‌توانند وب‌سایت‌های خود را به‌طور مؤثرتری بهینه‌سازی کنند تا تأخیرها کاهش یابد. کاهش زمان پاسخ‌دهی تعاملات کلیدی مانند کلیک روی دکمه یا تکمیل ارسال فرم‌ها مستقیماً بر رضایت کاربر تأثیر می‌گذارد. زمان‌های کوتاه‌تر برای انتظار به معنای کاربران راضی‌تر، نرخ پرش کمتر و نرخ تبدیل بالاتر است.
پشتیبانی از بهینه‌سازی Core Web Vitals: معیارهای Core Web Vitals گوگل که تجربه کاربری را بر اساس عملکرد بارگذاری صفحه، تعاملات و پایداری بصری ارزیابی می‌کنند، می‌توانند با استفاده از علامت‌ها و اندازه‌گیری‌ها بهبود یابند. با بهره‌برداری از این ابزارها، توسعه‌دهندگان می‌توانند اطمینان حاصل کنند که وب‌سایت‌هایشان اهداف عملکردی برای LCP (Largest Contentful Paint)، FID (First Input Delay) و CLS (Cumulative Layout Shift) را برآورده می‌کنند.
اندازه‌گیری‌های سفارشی برای موارد استفاده خاص: بسیاری از اپلیکیشن‌ها دارای نقاط ضعف خاص در عملکرد هستند، مانند بارگذاری اجزای تعاملی پیچیده یا پردازش محتوای پویا. زمان‌بندی کاربر این امکان را فراهم میکند که این سناریوهای خاص را پیگیری کنید، مواردی که با معیارهای عملکرد استاندارد قابل اندازه‌گیری نیستند. این به این معنی است که تلاش‌های بهینه‌سازی دقیقاً روی جنبه‌های بحرانی سایت متمرکز می‌شود.
چگونه می‌توان از علامت‌ها و اندازه‌گیری‌های زمان‌بندی کاربر استفاده کرد؟
برای پیاده‌سازی زمان‌بندی کاربر، توسعه‌دهندگان از متد performance.mark() برای قرار دادن علامت‌ها و performance.measure() برای اندازه‌گیری زمان بین دو علامت استفاده می‌کنند. در اینجا مثالی از نحوه عملکرد این ابزار آورده شده است:
// قرار دادن یک علامت در ابتدای یک فرآیندperformance.mark('start-process'); // اجرای کد، مانند دریافت داده‌ها یا رندر کردن یک عنصر // قرار دادن یک علامت زمانی که فرآیند تکمیل می‌شودperformance.mark('end-process'); // اندازه‌گیری زمان بین 'start-process' و 'end-process'performance.measure('process-duration', 'start-process', 'end-process'); // دریافت نتیجه اندازه‌گیریlet measure = performance.getEntriesByName('process-duration')[0];console.log('Process took: ' + measure.duration + 'ms');
در این مثال، توسعه‌دهنده یک علامت در آغاز فرآیند و یک علامت دیگر در انتهای آن قرار می‌دهد. تابع performance.measure() مدت زمان بین این دو علامت را محاسبه میکند و نتیجه نشان می‌دهد که فرآیند چقدر طول کشیده است.
بهترین شیوه‌ها برای استفاده از زمان‌بندی کاربر
تمرکز روی تعاملات حیاتی: لازم است که روی تعاملات کلیدی که بیشترین تأثیر را بر تجربه کاربر دارند، تمرکز کنید. به‌طور مثال، پیگیری زمان لازم برای کلیک کردن روی یک دکمه و دریافت پاسخ می‌تواند برای بهبود رضایت کاربران بسیار حیاتی باشد.
استفاده از معیارهای سفارشی: از علامت‌ها و اندازه‌گیری‌ها برای پیگیری معیارهای خاص اپلیکیشن که توسط معیارهای عملکرد سنتی پوشش داده نمی‌شوند، استفاده کنید. این می‌تواند شامل پیگیری زمان لازم برای بارگذاری ویژگی‌های خاص یا مدت زمان انیمیشن‌ها باشد.
مانیتورینگ در زمان واقعی: از آنجا که زمان‌بندی کاربر داده‌های زمان واقعی را فراهم می‌آورد، نظارت بر عملکرد وبسایت در حال اجرا در تولید بسیار مفید است. ابزارهایی مانند پنل عملکرد Chrome DevTools می‌توانند به تصویرسازی این علامت‌ها و اندازه‌گیری‌ها کمک کرده و شناسایی مشکلات را تسهیل کنند.
از استفاده بیش از حد اجتناب کنید: در حالی که مفید است که معیارهای عملکرد زیادی را ضبط کنید، مهم است که از بارگذاری بیش از حد مرورگر با علامت‌ها و اندازه‌گیری‌ها جلوگیری کنید. پیگیری بیش از حد می‌تواند منجر به بار اضافی در مرورگر و تأثیر منفی بر تجربه کاربری شود.
نتیجه‌گیری
علامت‌ها و اندازه‌گیری‌های زمان‌بندی کاربر ابزار قدرتمندی برای توسعه‌دهندگان فراهم می‌کنند تا بتوانند درک عمیق‌تری از عملکرد اپلیکیشن‌های وب خود به‌دست آورند. با پیگیری تعاملات خاص کاربر و اندازه‌گیری زمان لازم برای تکمیل عملیات خاص، توسعه‌دهندگان می‌توانند به‌طور دقیق‌تری نقاط ضعف را شناسایی کنند، تجربه کاربری را بهبود بخشند و معیارهای عملکرد کلیدی مانند آنچه در Core Web Vitals گوگل وجود دارد را بهینه کنند. پیاده‌سازی صحیح زمان‌بندی کاربر می‌تواند منجر به وب‌سایتی سریع‌تر و پاسخ‌گوتر شود که نتیجه آن افزایش تعاملات کاربران و بهبود عملکرد در رتبه‌بندی جستجو است.
