از پانل عملکرد برای تجزیه‌وتحلیل عملکرد وب‌سایتتان استفاده کنید.
نمای کلی
پانل عملکرد به شما امکان می‌دهد نمایه‌های عملکرد CPU برنامه‌های وب خود را ضبط کنید. نمایه‌ها را تجزیه‌وتحلیل کنید تا گلوگاه‌های عملکرد بالقوه و روش‌های بهینه‌سازی استفاده از منابع را پیدا کنید.
از پانل عملکرد برای انجام کارهای زیر استفاده کنید:
- نمایه عملکرد را ضبط کنید.
- تنظیمات ضبط را تغییر دهید.
- گزارش عملکرد را تجزیه‌وتحلیل کنید.
برای دریافت راهنمای جامع درباره بهبود عملکرد وب‌سایتتان، تجزیه‌وتحلیل عملکرد زمان اجرا را ببینید.
باز کردن پانل «عملکرد»
برای باز کردن پانل عملکرد، DevTools را باز کنید و عملکرد را از مجموعه‌ای از زبانه‌ها در بالا انتخاب کنید.
یا اینکه این مراحل را برای باز کردن پانل عملکرد با منو فرمان دنبال کنید:
- باز کردن DevTools.
- منو فرمان را با فشار دادن کلیدهای زیر باز کنید:
- macOS: Command+Shift+P
- Windows، Linux، ChromeOS: Control+Shift+P
- تایپ کردن
Performance panelرا شروع کنید، نمایش پانل «عملکرد» را انتخاب کنید، و کلید Enter را فشار دهید.
مشاهده کردن «معیارهای کلیدی اصلی وب» به‌صورت زنده
وقتی پانل عملکرد را باز می‌کنید، بلافاصله سنجه‌های محلی بزرگ‌ترین نقاشی دارای محتوا (LCP) و تغییر چیدمان تجمعی (CLS) را ضبط می‌کند و به شما نشان می‌دهد و امتیاز آن‌ها را (خوب، نیازمند بهبود، یا بد) به شما می‌گوید.
اگر با صفحه‌تان تعامل داشته باشید، پانل عملکرد همچنین تعامل تا ترسیم بعدی (INP) محلی شما و امتیاز آن را ضبط می‌کند که علاوه‌بر LCP و CLS، نمای کلی کاملی از Core Web Vitals صفحه‌تان بااستفاده از اتصال شبکه و دستگاهتان به شما می‌دهد. همچنین Core Web Vitals را برای پیمایش‌های نرم سمت کارخواه در برنامه‌های تک‌صفحه‌ای ضبط و گزارش می‌کند.
در زیر سه کارت سنجه در زبانه‌های تعاملات و تغییرات چیدمان، می‌توانید جدول‌هایی با اطلاعات مربوط به تعاملات ضبط‌شده و تغییرات چیدمان، ازجمله عناصر، زمان‌بندی‌ها، فازها (برای تعاملات)، و امتیازها (برای تغییرات چیدمان) پیدا کنید. برای پاک کردن هر دو فهرست، روی پاک کردن کلیک کنید.
برای دریافت تفکیک امتیاز سنجه، نشانگر را روی مقدار سنجه نگه دارید تا نکته‌ابزار را ببینید.
تجربه‌تان را با تجربه کاربرانتان مقایسه کنید
همچنین می‌توانید داده‌های فیلد را از گزارش تجربه کاربری 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: بهینه‌سازی سرعت وب‌سایت
- حافظه: نمای کلی پانل «حافظه»
- پرداز زدن: مشکلات مربوط به عملکرد پرداز زدن را کشف کنید
- مشکلات: پیدا کردن و برطرف کردن مشکلات
- عملکرد: مشاهده اطلاعات لایه‌ها