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

دیل سنت مارث
Dale St. Marthe
LinkedIn

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

نمای کلی

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

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

  • یک نمایه عملکرد ثبت کنید.
  • تنظیمات عکسبرداری را تغییر دهید
  • تجزیه و تحلیل گزارش عملکرد

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

پنل Performance را باز کنید

برای باز کردن پنل Performance ، DevTools را باز کنید و از مجموعه ای از تب ها در بالا، Performance را انتخاب کنید.

یا برای باز کردن پنل Performance با منوی Command مراحل زیر را دنبال کنید:

  1. DevTools را باز کنید .
  2. منوی Command را با فشار دادن:
  3. macOS: Command + Shift + P
  4. Windows، Linux، ChromeOS: Control + Shift + P منوی فرمان با
  5. شروع به تایپ Performance panel کنید، Show Performance panel را انتخاب کنید و Enter را فشار دهید.

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

هنگامی که پانل عملکرد را باز می کنید، فوراً معیارهای Largest Contentful Paint (LCP) و تغییر چیدمان تجمعی (CLS) محلی شما را گرفته و به شما نشان می دهد که امتیاز آنها (خوب، نیاز به بهبود یا بد) را به شما می گوید.

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

پانل عملکرد لیستی از تعاملات ثبت شده در سه کارت متریک را ارائه می دهد. برای پاک کردن لیست، روی پاک کردن کلیک کنید.

برای دریافت تفکیک امتیاز متریک، نشانگر را روی مقدار متریک نگه دارید تا یک نکته ابزار را ببینید.

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

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

برای افزودن داده های فیلد:

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

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

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

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

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

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

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

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

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

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

      برای تغییر تنظیمات واکشی داده‌های میدانی خود پس از راه‌اندازی، روی داده‌های میدانی > پیکربندی کلیک کنید

    با تنظیم واکشی داده های میدانی، پانل عملکرد اکنون مقایسه ای بین امتیازات متریک محلی شما و امتیازاتی که کاربران شما تجربه می کنند را به شما نشان می دهد. دوره جمع آوری را می توانید در قسمت Field data در سمت راست مشاهده کنید.

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

    برای دریافت تفکیک امتیاز متریک، نشانگر را روی مقدار متریک نگه دارید تا یک نکته ابزار را ببینید.

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

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

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

  1. در هر کارت متریک، در صورت وجود، بخش Consider your local test condition را گسترش دهید و توصیه‌ها را بخوانید.

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

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

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

    1. نمای خود را روی یکی از اندازه های رایج صفحه نمایش (مثلاً 720p یا 1080p) تنظیم کنید. برای شبیه سازی دستگاه ها و اندازه های صفحه نمایش خاص، می توانید از حالت Device در پنل Elements استفاده کنید.
    2. 82% کاربران وب سایت در این مثال از دسکتاپ برای مرور استفاده می کنند. برای اطمینان از اینکه امتیازهای متریک محلی خود را با داده های درست مقایسه می کنید، می توانید Desktop را از لیست کشویی Field Data > Device انتخاب کنید.
    3. در بخش تنظیمات محیط ، لیست کشویی شبکه را روی مثلاً Fast 4G و CPU را روی مثلاً 20 برابر کاهش سرعت تنظیم کنید. همچنین می توانید مطمئن که در همان بخش، کش شبکه را غیرفعال کنید .

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

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

    به نظر می‌رسد امتیازات متریک اکنون بیشتر شبیه به آنهایی است که کاربران شما تجربه می‌کنند. بر این اساس، بخش‌های Consider your test local condition از کارت‌های متریک ناپدید شدند.

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

گزارش عملکرد را ضبط و تجزیه و تحلیل کنید

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

یک نمایه عملکرد ثبت کنید

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

تنظیمات عکسبرداری را تغییر دهید

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

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

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

برای راهنمای کامل نحوه استفاده از پانل عملکرد ، به تجزیه و تحلیل ضبط عملکرد مراجعه کنید.

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

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

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

برای آشنایی با برگه های پایین به بالا، درخت تماس و گزارش رویداد:

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

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

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