پانل عملکرد: عملکرد وب سایت خود را تجزیه و تحلیل کنید

دیل سنت مارت
Dale St. Marthe
LinkedIn
صوفیا املیانووا
Sofia Emelianova
GitHub

از پنل Performance برای تحلیل عملکرد وب‌سایت خود استفاده کنید.

نمای کلی

پنل عملکرد به شما امکان می‌دهد پروفایل‌های عملکرد CPU برنامه‌های وب خود را ثبت کنید. پروفایل‌ها را تجزیه و تحلیل کنید تا تنگناهای عملکرد بالقوه و راه‌هایی برای بهینه‌سازی استفاده از منابع پیدا کنید.

از پنل Performance برای انجام موارد زیر استفاده کنید:

  • یک پروفایل عملکرد ثبت کنید.
  • تنظیمات ضبط را تغییر دهید.
  • گزارش عملکرد را تحلیل کنید.

برای راهنمای جامع در مورد بهبود عملکرد وب‌سایت خود، به بخش «تحلیل عملکرد زمان اجرا» مراجعه کنید.

پنل عملکرد را باز کنید

برای باز کردن پنل Performance ، DevTools را باز کنید و از بین تب‌های بالای صفحه، Performance را انتخاب کنید.

روش دیگر، برای باز کردن پنل Performance با استفاده از منوی Command ، این مراحل را دنبال کنید:

  1. ابزار توسعه (DevTools) را باز کنید .
  2. منوی Command را با فشار دادن موارد زیر باز کنید:
  3. macOS: فرمان + شیفت + P
  4. ویندوز، لینوکس، کروم او اس: کنترل + شیفت + پی منوی فرمان با
  5. شروع به تایپ عبارت Performance panel کنید، Show Performance panel را انتخاب کنید و Enter را بزنید.

Core Web Vitals را به صورت زنده مشاهده کنید

وقتی پنل عملکرد را باز می‌کنید، بلافاصله معیارهای محلی Largest Contentful Paint (LCP) و Cumulative Layout Shift (CLS) را ثبت و به شما نشان می‌دهد و امتیاز آنها (خوب، نیازمند بهبود یا بد) را به شما می‌گوید.

اگر با صفحه خود تعامل داشته باشید، پنل Performance، تعامل محلی شما با Next Paint (INP) و امتیاز آن را نیز ثبت می‌کند که علاوه بر LCP و CLS، با استفاده از اتصال شبکه و دستگاه شما، نمای کلی کاملی از Core Web Vitals صفحه شما ارائه می‌دهد.

در زیر سه کارت معیار در تب‌های Interactions و Layout shifts ، می‌توانید جداولی با اطلاعات مربوط به تعاملات ثبت‌شده و تغییرات طرح‌بندی، از جمله عناصر، زمان‌بندی‌ها، مراحل (برای تعاملات) و امتیازات (برای تغییرات طرح‌بندی) پیدا کنید. برای پاک کردن هر دو لیست، Clear کلیک کنید.

برای مشاهده‌ی جزئیات امتیاز یک معیار، نشانگر ماوس را روی مقدار آن معیار نگه دارید تا یک راهنمای ابزار (tooltip) مشاهده کنید.

تجربه خود را با تجربه کاربرانتان مقایسه کنید

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

برای اضافه کردن داده‌های فیلد:

  1. در بخش عملکرد > مراحل بعدی > داده‌های فیلد ، روی تنظیم کلیک کنید.

    دکمه «تنظیم» در بخش مراحل بعدی.

  2. در کادر محاوره‌ای واکشی داده‌ها در فیلد پیکربندی ، به افشای حریم خصوصی توجه کنید و روی تأیید کلیک کنید.

    پیشرفته: ایجاد نگاشت بین محیط‌های توسعه و تولید...

    به صورت اختیاری، برای دریافت خودکار مرتبط‌ترین داده‌های فیلد، می‌توانید نگاشت‌های (چندگانه) بین مبدا توسعه و مبدا تولید خود تنظیم کنید:

    1. در پنجره‌ی محاوره‌ای، بخش Advanced را باز کنید و روی +New کلیک کنید.

    2. در جدول نگاشت، URL های توسعه و تولید خود را وارد کنید و روی + کلیک کنید.

      نگاشت بین مبدا توسعه و مبدا تولید در بخش پیشرفته.

      برای مثال، نگاشت http://localhost:8080 به https://example.com باعث می‌شود وقتی به localhost:8080/page1 می‌روید، داده‌های فیلد example.com/page1 نمایش داده شود.

      علاوه بر این، اگر به هر دلیلی نمی‌توانید داده‌های فیلد را به طور خودکار دریافت کنید، می‌توانید «همیشه داده‌های فیلد برای URL زیر نمایش داده شود» را فعال کنید و یک URL ارائه دهید. پنل Performance ابتدا سعی می‌کند داده‌های فیلد را برای این URL دریافت کند و سپس داده‌های این فیلد را صرف نظر از صفحه‌ای که به آن هدایت می‌شوید، به شما نشان دهد.

      برای تغییر تنظیمات واکشی داده‌های فیلد پس از راه‌اندازی، روی Field data > Configure کلیک کنید.

    با تنظیم دریافت داده‌های میدانی، پنل عملکرد اکنون مقایسه‌ای بین نمرات معیارهای محلی شما و نمراتی که کاربرانتان تجربه می‌کنند را به شما نشان می‌دهد. می‌توانید دوره جمع‌آوری را در بخش داده‌های میدانی در سمت راست مشاهده کنید.

    دوره جمع‌آوری داده‌های میدانی پس از دریافت آنها.

    برای مشاهده‌ی جزئیات امتیاز یک معیار، نشانگر ماوس را روی مقدار آن معیار نگه دارید تا یک راهنمای ابزار (tooltip) مشاهده کنید.

محیط خود را طوری پیکربندی کنید که با محیط کاربرانتان بهتر مطابقت داشته باشد

با تنظیم واکشی داده‌های فیلد همانطور که در بخش قبلی توضیح داده شد، پنل Performance توصیه‌هایی در مورد چگونگی پیکربندی محیط شما برای مطابقت بهتر با تجربه کاربرانتان ارائه می‌دهد.

برای پیکربندی محیط خود:

  1. در هر کارت معیار، در صورت وجود، بخش «شرایط آزمون محلی خود را در نظر بگیرید» را گسترش دهید و توصیه‌ها را بخوانید.

    بخش‌های «شرایط آزمون محلی خود را در نظر بگیرید» در هر کارت معیار بسط داده شده‌اند.

    به نظر می‌رسد در این مثال، برای تطبیق بهتر با تجربه کاربرانتان، شاید بخواهید از یک اندازه صفحه نمایش رایج دسکتاپ استفاده کنید و CPU و شبکه را کاهش دهید.

  2. برای تطبیق پیکربندی محیط برای این مثال:

    1. اندازه‌ی نمایشگر خود را روی یکی از اندازه‌های رایج صفحه نمایش (مثلاً ۷۲۰p یا ۱۰۸۰p) تنظیم کنید. برای شبیه‌سازی دستگاه‌های خاص و اندازه‌های صفحه نمایش، می‌توانید از حالت دستگاه (Device mode) در پنل عناصر (Elements ) استفاده کنید.
    2. ۸۲٪ از کاربران وب‌سایت در این مثال از دسکتاپ برای مرور استفاده می‌کنند. برای اطمینان از اینکه نمرات معیار محلی خود را با داده‌های فیلد صحیح مقایسه می‌کنید، می‌توانید از فهرست کشویی Field data > Device ، دسکتاپ را انتخاب کنید.
    3. در بخش تنظیمات محیط ، فهرست کشویی شبکه را مثلاً روی Fast 4G و CPU را مثلاً روی 20x slowdown تنظیم کنید. همچنین می‌توانید در همان بخش، Disable network cache را علامت بزنید.

  3. با پیکربندی محیط خود، صفحه را مجدداً بارگذاری کنید، با آن تعامل داشته باشید تا INP محلی خود را ثبت کنید و نمرات معیار را دوباره مقایسه کنید.

    این محیط طوری پیکربندی شده است که با تجربه کاربری در دنیای واقعی مطابقت داشته باشد.

    به نظر می‌رسد که نمرات معیارها اکنون بیشتر شبیه به نمراتی هستند که کاربران شما تجربه می‌کنند. بر این اساس، بخش‌های «شرایط آزمایش محلی خود را در نظر بگیرید» از کارت‌های معیار حذف شده‌اند.

با این کار، اکنون می‌توانید بهبود Core Web Vitals وب‌سایت خود را شروع کنید:

گزارش عملکرد را ثبت و تحلیل کنید

در بخش‌های بعدی، راهنمایی‌های مربوط به نحوه ثبت پروفایل، تغییر تنظیمات ثبت و تحلیل گزارش را دنبال کنید.

ثبت مشخصات عملکرد

وقتی آماده ضبط شدید، پنل Performance گزینه‌های زیر را در اختیار شما قرار می‌دهد:

تنظیمات ضبط را تغییر دهید

تنظیمات ضبط به شما امکان می‌دهد نحوه ضبط عملکرد توسط DevTools را تغییر دهید و اطلاعات بیشتری در گزارش به شما ارائه دهد. برای دسترسی به منوی تنظیمات ضبط، ضبط کلیک کنید.

گزینه‌های زیر را از منوی تنظیمات ضبط انتخاب کنید:

تحلیل گزارش عملکرد

برای راهنمای کامل نحوه استفاده از پنل Performance ، به بخش Analyze a performance recording مراجعه کنید.

در ادامه، مجموعه‌ای از مباحث این راهنما به همراه سایر مستندات مفید ارائه شده است:

برای یادگیری نحوه پیمایش گزارش:

از Performance Insights برای دریافت بینش‌های کاربردی در مورد عملکرد وب‌سایت خود استفاده کنید:

برای یادگیری نحوه تمرکز روی آنچه برای گردش کار شما مهم است:

برای آشنایی با تب‌های Bottom-up، Call tree و Event log:

برای یادگیری نحوه تحلیل گزارش:

با این پنل‌ها عملکرد را بهبود بخشید

پنل‌های دیگری را کشف کنید که می‌توانند به شما در بهبود عملکرد وب‌سایتتان کمک کنند: