از پنل Performance برای تجزیه و تحلیل عملکرد وب سایت خود استفاده کنید.
نمای کلی
پنل Performance به شما امکان می دهد پروفایل های عملکرد CPU برنامه های وب خود را ضبط کنید. پروفایل ها را برای یافتن گلوگاه های بالقوه عملکرد و راه هایی که می توانید استفاده از منابع را بهینه کنید، تجزیه و تحلیل کنید.
برای انجام کارهای زیر از پنل Performance استفاده کنید:
- یک نمایه عملکرد ثبت کنید.
- تنظیمات عکسبرداری را تغییر دهید
- تجزیه و تحلیل گزارش عملکرد
برای راهنمای جامع در مورد بهبود عملکرد وب سایت خود، به تجزیه و تحلیل عملکرد زمان اجرا مراجعه کنید.
پنل Performance را باز کنید
برای باز کردن پنل Performance ، DevTools را باز کنید و از مجموعه ای از تب ها در بالا، Performance را انتخاب کنید.
یا برای باز کردن پنل Performance با منوی Command مراحل زیر را دنبال کنید:
- DevTools را باز کنید .
- منوی Command را با فشار دادن:
- macOS: Command + Shift + P
- Windows، Linux، ChromeOS: Control + Shift + P
- شروع به تایپ
Performance panel
کنید، Show Performance panel را انتخاب کنید و Enter را فشار دهید.
Core Web Vitals را به صورت زنده مشاهده کنید
هنگامی که پانل عملکرد را باز می کنید، فوراً معیارهای Largest Contentful Paint (LCP) و تغییر چیدمان تجمعی (CLS) محلی شما را گرفته و به شما نشان می دهد که امتیاز آنها (خوب، نیاز به بهبود یا بد) را به شما می گوید.
اگر با صفحه خود تعامل داشته باشید، پانل عملکرد همچنین تعامل محلی شما با رنگ بعدی (INP) و امتیاز آن را ضبط می کند، که علاوه بر LCP و CLS، یک نمای کلی از Core Web Vitals صفحه شما با استفاده از اتصال شبکه به شما ارائه می دهد. و دستگاه
پانل عملکرد لیستی از تعاملات ثبت شده در سه کارت متریک را ارائه می دهد. برای پاک کردن لیست، روی
پاک کردن کلیک کنید.برای دریافت تفکیک امتیاز متریک، نشانگر را روی مقدار متریک نگه دارید تا یک نکته ابزار را ببینید.
تجربه خود را با تجربه کاربران خود مقایسه کنید
همچنین می توانید داده های میدانی را از گزارش Chrome UX دریافت کنید و تجربه کاربران سایت خود را با معیارهای محلی خود مقایسه کنید.
برای افزودن داده های فیلد:
در عملکرد > مراحل بعدی > داده های میدانی ، روی تنظیم کلیک کنید.
در کادر گفتگوی واکشی دادههای فیلد پیکربندی ، به افشای حریم خصوصی توجه کنید و Ok را کلیک کنید.
پیشرفته: تنظیم نقشه بین محیط های توسعه و تولید...
در صورت تمایل، برای دریافت خودکار مرتبطترین دادههای میدانی، میتوانید نگاشت (چندین) را بین مبدا توسعه و تولید خود تنظیم کنید:
- در پنجره محاوره ای، بخش Advanced را باز کنید و روی + New کلیک کنید.
در جدول نگاشت، URL های توسعه و تولید خود را وارد کنید و روی + کلیک کنید.
برای مثال، نگاشت
http://localhost:8080
بهhttps://example.com
زمانی که بهlocalhost:8080/page1
پیمایش میکنید، دادههای فیلدی مانندexample.com/page1
را نشان میدهد.بهعلاوه، اگر به دلایلی نمیتوانید دادههای فیلد را بهطور خودکار دریافت کنید، میتوانید
همیشه دادههای فیلد را برای نشانی اینترنتی زیر نشان داده شود و یک نشانی وب ارائه کنید. پانل عملکرد سعی می کند ابتدا داده های فیلد را برای این URL واکشی کند و سپس این داده های فیلد را بدون توجه به صفحه ای که به آن پیمایش می کنید به شما نشان می دهد.برای تغییر تنظیمات واکشی دادههای میدانی خود پس از راهاندازی، روی دادههای میدانی > پیکربندی کلیک کنید
با تنظیم واکشی داده های میدانی، پانل عملکرد اکنون مقایسه ای بین امتیازات متریک محلی شما و امتیازاتی که کاربران شما تجربه می کنند را به شما نشان می دهد. دوره جمع آوری را می توانید در قسمت Field data در سمت راست مشاهده کنید.
برای دریافت تفکیک امتیاز متریک، نشانگر را روی مقدار متریک نگه دارید تا یک نکته ابزار را ببینید.
محیط خود را طوری پیکربندی کنید که بهتر با محیط کاربرانتان مطابقت داشته باشد
با تنظیم واکشی دادههای میدانی همانطور که در بخش قبل توضیح داده شد، پانل عملکرد توصیههایی در مورد نحوه پیکربندی محیط خود برای مطابقت بهتر با تجربه کاربران به شما ارائه میدهد.
برای پیکربندی محیط خود:
در هر کارت متریک، در صورت وجود، بخش Consider your local test condition را گسترش دهید و توصیهها را بخوانید.
به نظر می رسد در این مثال، برای مطابقت بهتر با تجربه کاربران خود، ممکن است بخواهید از اندازه صفحه نمایش دسکتاپ معمولی استفاده کنید و CPU و شبکه را کاهش دهید.
برای مطابقت با پیکربندی محیط برای این مثال:
- نمای خود را روی یکی از اندازه های رایج صفحه نمایش (مثلاً 720p یا 1080p) تنظیم کنید. برای شبیه سازی دستگاه ها و اندازه های صفحه نمایش خاص، می توانید از حالت Device در پنل Elements استفاده کنید.
- 82% کاربران وب سایت در این مثال از دسکتاپ برای مرور استفاده می کنند. برای اطمینان از اینکه امتیازهای متریک محلی خود را با داده های درست مقایسه می کنید، می توانید Desktop را از لیست کشویی Field Data > Device انتخاب کنید.
- در بخش تنظیمات محیط ، لیست کشویی شبکه را روی مثلاً Fast 4G و CPU را روی مثلاً 20 برابر کاهش سرعت تنظیم کنید. همچنین می توانید مطمئن که در همان بخش، کش شبکه را غیرفعال کنید .
با پیکربندی محیط خود، صفحه را مجدداً بارگیری کنید، با آن تعامل کنید تا INP محلی خود را به تصویر بکشید، و دوباره امتیازات متریک را مقایسه کنید.
به نظر میرسد امتیازات متریک اکنون بیشتر شبیه به آنهایی است که کاربران شما تجربه میکنند. بر این اساس، بخشهای Consider your test local condition از کارتهای متریک ناپدید شدند.
با این کار، اکنون می توانید شروع به بهبود Core Web Vitals وب سایت خود کنید:
گزارش عملکرد را ضبط و تجزیه و تحلیل کنید
در بخشهای بعدی، راهنمای نحوه ضبط نمایه، تغییر تنظیمات عکسبرداری و تجزیه و تحلیل گزارش را دنبال کنید.
یک نمایه عملکرد ثبت کنید
وقتی آماده ضبط هستید، پنل Performance گزینه های زیر را در اختیار شما قرار می دهد:
- عملکرد زمان اجرا را ضبط کنید
- رکورد عملکرد بار
- هنگام ضبط، اسکرین شات بگیرید
- اجباری به جمع آوری زباله در حین ضبط
- ضبط را ذخیره کنید
- یک ضبط را بارگیری کنید
- یک ضبط را پاک کنید
تنظیمات عکسبرداری را تغییر دهید
تنظیمات ضبط به شما امکان میدهد نحوه ضبط عملکرد DevTools را تغییر دهید و میتواند اطلاعات بیشتری را در گزارش به شما بدهد. برای دسترسی به منوی تنظیمات ضبط، روی
تنظیمات عکسبرداری کلیک کنید.از منوی تنظیمات Capture گزینه های زیر را انتخاب کنید:
- غیرفعال کردن نمونههای جاوا اسکریپت : ضبط پشتههای تماس جاوا اسکریپت نمایش داده شده در مسیر اصلی را که در حین ضبط فراخوانی میشوند، غیرفعال میکند. سربار عملکرد را کاهش خواهد داد.
- فعال کردن ابزار دقیق رنگ پیشرفته (آهسته) : ابزار دقیق رنگ را ضبط می کند. به طور قابل توجهی مانع عملکرد می شود.
- فعال کردن آمار انتخابگر CSS (آهسته) : آمار انتخابگر CSS را ضبط می کند. به طور قابل توجهی مانع عملکرد می شود.
- throttling CPU : سرعت های پایین تر CPU را شبیه سازی کنید.
- throttling شبکه : شبیه سازی سرعت پایین تر شبکه.
- همزمانی سخت افزار : مقدار گزارش شده توسط
navigator.hardwareConcurrency
را پیکربندی کنید.
تجزیه و تحلیل گزارش عملکرد
برای راهنمای کامل نحوه استفاده از پانل عملکرد ، به تجزیه و تحلیل ضبط عملکرد مراجعه کنید.
در زیر مجموعه ای از موضوعات از راهنما، به همراه سایر اسناد مفید ارائه شده است:
برای یادگیری نحوه پیمایش گزارش:
برای یادگیری نحوه تمرکز بر روی آنچه برای گردش کار شما مهم است:
- ترتیب آهنگ ها را تغییر دهید و آنها را پنهان کنید
- توابع و فرزندان آنها را در نمودار شعله پنهان کنید
- پودر سوخاری ایجاد کنید و بین سطوح بزرگنمایی بپرید
برای آشنایی با برگه های پایین به بالا، درخت تماس و گزارش رویداد:
برای یادگیری نحوه تجزیه و تحلیل گزارش:
- مشاهده فعالیت موضوع اصلی
- نمودار شعله را بخوانید
- مشاهده یک اسکرین شات
- مشاهده معیارهای حافظه
- مدت زمان بخشی از ضبط را مشاهده کنید
- عملکرد انتخابگر CSS را در طول رویدادهای سبک محاسبه مجدد تجزیه و تحلیل کنید
- عملکرد Profile Node.js با پنل Performance
- تجزیه و تحلیل فریم در ثانیه (FPS)
- مرجع رویداد خط زمانی
با این پنل ها عملکرد را بهبود ببخشید
پانل های دیگری را کشف کنید که می توانند به شما در بهبود عملکرد وب سایت خود کمک کنند: