برای تجزیه‌وتحلیل عملکرد وب‌سایتتان، از پانل عملکرد استفاده کنید.
نمای کلی
پانل عملکرد به شما امکان می‌دهد نمایه‌های عملکرد CPU برنامه‌های وب خود را ضبط کنید. نمایه‌ها را تجزیه‌وتحلیل کنید تا گلوگاه‌های عملکرد بالقوه و روش‌هایی را که می‌توانید استفاده از منابع را بهینه‌سازی کنید پیدا کنید.
از پانل عملکرد برای انجام کارهای زیر استفاده کنید:
- نمایه عملکرد را ضبط کنید.
- تنظیمات ضبط را تغییر دهید.
- گزارش عملکرد را تجزیه‌وتحلیل کنید.
برای دریافت راهنمای جامع درباره بهبود عملکرد وب‌سایتتان، تجزیه‌وتحلیل عملکرد زمان اجرا را ببینید.
باز کردن پانل «عملکرد»
برای باز کردن پانل عملکرد، DevTools را باز کنید و عملکرد را از مجموعه‌ای از برگه‌ها در بالا انتخاب کنید.
یا اینکه این مراحل را برای باز کردن پانل عملکرد با منو فرمان دنبال کنید:
- باز کردن DevTools.
- با فشار دادن کلیدهای زیر، منو فرمان را باز کنید:
- macOS: Command+Shift+P
- Windows، Linux، ChromeOS: Control+Shift+P
- تایپ کردن
Performance panelرا شروع کنید، نمایش پانل «عملکرد» را انتخاب کنید، و کلید Enter را فشار دهید.
مشاهده زنده «معیارهای کلیدی اصلی وب»
وقتی پانل عملکرد را باز می‌کنید، بلافاصله سنجه‌های محلی بزرگ‌ترین نقاشی دارای محتوا (LCP) و تغییر چیدمان تجمعی (CLS) را ضبط و به شما نشان می‌دهد و امتیاز آن‌ها را (خوب، نیاز به بهبود، یا بد) به شما می‌گوید.
اگر با صفحه‌تان تعامل کنید، پانل عملکرد نیز تأخیر در تعامل‌ها (INP) محلی شما و امتیاز آن را ضبط می‌کند که علاوه‌بر LCP و CLS، نمای کلی کاملی از شاخص‌های حیاتی وب صفحه‌تان بااستفاده از اتصال شبکه و دستگاهتان به شما ارائه می‌دهد.
در زیر سه کارت سنجه در برگه‌های تعاملات و جابه‌جایی‌های چیدمان، می‌توانید جدول‌هایی با اطلاعات مربوط به تعاملات و جابه‌جایی‌های چیدمان ضبط‌شده پیدا کنید، ازجمله عناصر، زمان‌بندی‌ها، مراحل (برای تعاملات)، و امتیازها (برای جابه‌جایی‌های چیدمان). برای پاک کردن هر دو فهرست، روی پاک کردن کلیک کنید.
برای دریافت تفکیک امتیاز سنجه، نشانگر را روی مقدار سنجه نگه دارید تا نکته‌ابزار را ببینید.
تجربه‌تان را با تجربه کاربرانتان مقایسه کنید
همچنین می‌توانید داده‌های فیلد را از گزارش تجربه کاربری Chrome واکشی کنید و تجربه کاربران سایتتان را با سنجه‌های محلی‌تان مقایسه کنید.
برای افزودن داده‌های فیلد:
در عملکرد > مراحل بعدی > داده‌های فیلد، روی راه‌اندازی کلیک کنید.
در کادر گفتگوی پیکربندی واکشی داده‌های فیلد، شفاف‌سازی حریم خصوصی را یادداشت کنید و روی تأیید کلیک کنید.
پیشرفته: راه‌اندازی نگاشت بین محیط‌های توسعه و تولید...
به‌صورت اختیاری، برای دریافت خودکار مرتبط‌ترین داده‌های فیلد، می‌توانید (چند) نگاشت بین مبدأهای توسعه و تولید خود راه‌اندازی کنید:
- در پنجره گفتگو، بخش پیشرفته را ازهم باز کنید و روی + جدید کلیک کنید.
در جدول نگاشت، نشانی‌های وب توسعه و تولید خود را وارد کنید و روی + کلیک کنید.
برای مثال، اگر
http://localhost:8080را بهhttps://example.comنگاشت کنید، وقتی بهlocalhost:8080/page1پیمایش می‌کنید، داده‌های فیلدexample.com/page1نمایش داده می‌شود.علاوه‌براین، اگر به هر دلیلی نمی‌توانید داده‌های فیلد را به‌طور خودکار دریافت کنید، می‌توانید همیشه داده‌های فیلد مربوط به نشانی وب زیر نشان داده شود را روشن کنید و نشانی وبی ارائه دهید. ابتدا پانل عملکرد تلاش می‌کند داده‌های فیلد را برای این نشانی وب واکشی کند و سپس این داده‌های فیلد را صرف‌نظر از صفحه‌ای که به آن پیمایش می‌کنید به شما نشان می‌دهد.
برای تغییر تنظیمات واکشی داده‌های فیلد پس‌از راه‌اندازی، روی داده‌های فیلد > پیکربندی کلیک کنید
با راه‌اندازی واکشی داده‌های فیلد، پانل عملکرد اکنون مقایسه‌ای بین امتیازهای سنجه محلی شما و امتیازهای تجربه کاربران نشان می‌دهد. می‌توانید دوره جمع‌آوری را در بخش داده‌های فیلد در سمت چپ ببینید.
برای دریافت تفکیک امتیاز سنجه، نشانگر را روی مقدار سنجه نگه دارید تا نکته‌ابزار را ببینید.
محیطتان را پیکربندی کنید تا با محیط کاربران مطابقت بیشتری داشته باشد
با راه‌اندازی واکشی داده‌های فیلد همان‌طور که در بخش قبلی توضیح داده شد، پانل عملکرد توصیه‌هایی درباره نحوه پیکربندی محیطتان ارائه می‌دهد تا با تجربه کاربران شما مطابقت بیشتری داشته باشد.
برای پیکربندی محیط:
در هر کارت معیار، بخش شرایط آزمایش محلی‌تان را مدنظر قرار دهید را (درصورت وجود) ازهم باز کنید و توصیه‌ها را بخوانید.
به‌نظر می‌رسد در این مثال، برای مطابقت بهتر با تجربه کاربران، بهتر است از اندازه صفحه‌نمایش رایج رایانه استفاده کنید و CPU و شبکه را محدود کنید.
برای مطابقت دادن پیکربندی محیط با این مثال:
- ناحیه نمایش خود را روی یکی از اندازه‌های رایج صفحه‌نمایش (مثلاً ۷۲۰ پیکسل یا ۱۰۸۰ پیکسل) تنظیم کنید. برای شبیه‌سازی دستگاه‌ها و اندازه‌های صفحه‌نمایش خاص، می‌توانید از حالت دستگاه در پانل عناصر استفاده کنید.
- ٪۸۲ کاربران وب‌سایت در این مثال از رایانه برای مرور استفاده می‌کنند. برای اطمینان از اینکه امتیازهای سنجه محلی خود را با داده‌های فیلد صحیح مقایسه می‌کنید، می‌توانید رایانه را از فهرست کرکره‌ای داده‌های فیلد > دستگاه انتخاب کنید.
- در بخش تنظیمات محیط، فهرست کرکره‌ای شبکه را روی، برای مثال، 4G سریع و واحد پردازش مرکزی را روی، برای مثال، کاهش سرعت ۲۰ برابری تنظیم کنید. همچنین می‌توانید در همان بخش، غیرفعال کردن حافظه نهان شبکه را علامت بزنید.
با پیکربندی محیط، صفحه را مجدد بار کنید، با آن تعامل داشته باشید تا INP محلی‌تان را ضبط کنید، و دوباره امتیازهای سنجه را مقایسه کنید.
به‌نظر می‌رسد نمره‌های سنجه اکنون بیشتر شبیه به نمره‌هایی است که کاربران شما تجربه می‌کنند. بنابراین، بخش‌های شرایط آزمایش محلی‌تان را مدنظر قرار دهید از کارت‌های معیار ناپدید شدند.
با این کار، اکنون می‌توانید معیارهای کلیدی اصلی وب وب‌سایتتان را بهبود دهید:
گزارش عملکرد را ضبط و تجزیه‌وتحلیل کنید
در بخش‌های بعدی، راهنمایی‌هایی درباره نحوه ضبط نمایه، تغییر تنظیمات ضبط، و تجزیه‌وتحلیل گزارش دنبال کنید.
ضبط نمایه عملکرد
وقتی آماده ضبط کردن هستید، پانل عملکرد گزینه‌های زیر را دراختیارتان قرار می‌دهد:
- ضبط عملکرد زمان اجرا
- عملکرد بار ضبط
- گرفتن نماگرفت درحین ضبط
- اجبار کردن زباله‌روبی درحین ضبط
- ذخیره کردن ضبط
- بار کردن ضبط
- پاک کردن قطعه ضبط‌شده
تغییر دادن تنظیمات ضبط
تنظیمات ضبط به شما امکان می‌دهد نحوه ضبط عملکرد توسط DevTools را تغییر دهید و اطلاعات بیشتری در گزارش ارائه دهید. برای دسترسی به منو تنظیمات ضبط، روی تنظیمات ضبط کلیک کنید.
گزینه‌های زیر را از منو تنظیمات ضبط انتخاب کنید:
- غیرفعال کردن نمونه‌های جاوا اسکریپت: ضبط پشته‌های تماس جاوا اسکریپت نمایش‌داده‌شده در قطعه اصلی را که درطول ضبط فراخوانی می‌شوند غیرفعال می‌کند. سربار عملکرد را کاهش می‌دهد.
- فعال کردن ابزارهای دقیق رنگ پیشرفته (کُند): ابزارهای دقیق رنگ پیشرفته را ضبط می‌کند. عملکرد را به‌طور قابل‌توجهی مختل می‌کند.
- فعال کردن آمار گزینشگر CSS (آهسته): آمار گزینشگر CSS را ضبط می‌کند. عملکرد را به‌طور قابل‌توجهی مختل می‌کند.
- محدود کردن CPU: سرعت‌های CPU کُندتر را شبیه‌سازی کنید.
- محدود کردن شبکه: سرعت‌های شبکه کُندتر شبیه‌سازی می‌شود.
تجزیه‌وتحلیل گزارش عملکرد
برای راهنمای کامل نحوه استفاده از پانل عملکرد، به تجزیه‌وتحلیل ضبط عملکرد مراجعه کنید.
در زیر، دسته‌بندی موضوعات از راهنما، به‌علاوه اسناد مفید دیگر ارائه شده است:
برای آشنایی با نحوه پیمایش گزارش:
از «اطلاعات آماری عملکرد» برای دریافت اطلاعات آماری اقدام‌کردنی درباره عملکرد وب‌سایتتان استفاده کنید:
برای آشنایی با نحوه تمرکز روی آنچه برای گردش کارتان اهمیت دارد:
- تغییر ترتیب قطعه‌ها و پنهان کردن آن‌ها
- پنهان کردن توابع و فرزندان آن‌ها در نمودار شعله‌ای
- ایجاد خرده‌مسیر و پرش بین سطوح بزرگ‌نمایی
برای آشنایی با برگه‌های «از پایین به بالا»، «درخت تماس»، و «گزارش رویداد»:
برای آشنایی با نحوه تجزیه‌وتحلیل گزارش:
- مشاهده فعالیت رشته اصلی
- خواندن نمودار شعله‌ای
- مشاهده نماگرفت
- مشاهده سنجه‌های حافظه
- مشاهده مدت زمان بخشی از یک ضبط
- تجزیه‌وتحلیل عملکرد گزینشگر CSS درطول رویدادهای «محاسبه مجدد سبک»
- نمایه عملکرد Node.js با پانل «عملکرد»
- تجزیه‌وتحلیل فریم در ثانیه (FPS)
- مرجع رویداد خط زمان
بهبود عملکرد با این پانل‌ها
پانل‌های دیگری را که می‌توانند به بهبود عملکرد وب‌سایتتان کمک کنند کاوش کنید:
- Lighthouse: بهینه‌سازی سرعت وب‌سایت
- حافظه: نمای کلی پانل حافظه
- پرداز زدن: مشکلات مربوط به عملکرد پرداز زدن را کشف کنید
- مسائل: پیدا کردن و برطرف کردن مشکلات
- عملکرد: مشاهده اطلاعات لایه‌ها