از پنل بینشهای عملکرد (Performance insights ) برای دریافت بینشهای عملی و مبتنی بر مورد استفاده در مورد عملکرد وبسایت خود استفاده کنید.
نمای کلی
پنل Performance Insights به شما امکان میدهد موارد زیر را انجام دهید:
- عملکرد بارگذاری صفحه را ثبت و اندازهگیری کنید .
- مشاهده معیارهای عملکرد Web Vitals .
- مشاهده فعالیت شبکه
- سرعتهای پایینتر CPU و شبکه را شبیهسازی کنید.
- ضبطها را وارد و صادر کنید.
چرا پنل جدید؟
پنل جدید بینشهای عملکرد ، آزمایشی برای پرداختن به این ۳ نکتهی آزاردهندهی توسعهدهندگان هنگام کار با پنل عملکرد موجود است:
- اطلاعات خیلی زیاد . با طراحی مجدد رابط کاربری، پنل Performance Insights دادهها را سادهسازی کرده و فقط اطلاعات مرتبط را نمایش میدهد.
- تشخیص موارد استفاده دشوار است . پنل بینشهای عملکرد از تحلیل مبتنی بر موارد استفاده پشتیبانی میکند. در حال حاضر فقط از موارد استفاده بارگذاری صفحه پشتیبانی میکند و در آینده بر اساس بازخورد شما، موارد بیشتری، مانند تعامل، ارائه خواهد شد.
- برای استفادهی مؤثر، به تخصص عمیق در مورد نحوهی عملکرد مرورگرها نیاز است . پنل Performance Insights ، بینشهای کلیدی موجود در بخش Insights را برجسته میکند و بازخوردهای عملی در مورد چگونگی رفع مشکلات ارائه میدهد.
مقدمه
این آموزش به شما یاد میدهد که چگونه عملکرد بارگذاری صفحه خود را با پنل Performance insights اندازهگیری و درک کنید. ادامه مطلب را بخوانید یا نسخه ویدیویی این آموزش را در بالا تماشا کنید.
پنل بینشهای عملکرد را باز کنید
- ابزار توسعه (DevTools) را باز کنید .
روی گزینههای بیشتر > ابزارهای بیشتر > بینشهای عملکرد کلیک کنید.
روش دیگر، استفاده از منوی فرمان (Command Menu) برای باز کردن پنل Performance insights است.
عملکرد رکورد
پنل بینشهای عملکرد میتواند عملکرد کلی و عملکرد مبتنی بر مورد استفاده (مثلاً بارگذاری صفحه) را ثبت کند.
- این صفحه آزمایشی را در یک برگه جدید باز کنید و در صفحه، پنل Performance insights را باز کنید .
میتوانید هنگام ضبط، شبکه و پردازنده را محدود کنید. برای این آموزش، غیرفعال کردن حافظه پنهان (Disable cache) را تیک بزنید و از منوی کشویی، سرعت پردازنده را روی ۴ برابر کاهش دهید :
روی کلیک کنید تا میزان بارگذاری صفحه را اندازهگیری کنید . DevTools معیارهای عملکرد را هنگام بارگذاری مجدد صفحه ثبت میکند و سپس چند ثانیه پس از اتمام بارگذاری صفحه، ضبط را به طور خودکار متوقف میکند.
پخش مجدد یک اجرای ضبط شده
برای کنترل پخش مجدد ضبط خود از کنترلهای پایین استفاده کنید.
در اینجا مثالی از نحوه انجام آن آورده شده است.
- برای پخش ضبط، Play کلیک کنید.
- برای مکث در پخش مجدد، روی ) کلیک کنید.
- سرعت پخش را با استفاده از منوی کشویی تنظیم کنید.
- برای نمایش یا پنهان کردن پیشنمایش تصویری، روی کلیک کنید.
پیمایش یک ضبط اجرا
DevTools به طور خودکار بزرگنمایی میکند تا جدول زمانی کامل ضبط را نشان دهد. میتوانید با بزرگنمایی در ضبط حرکت کنید و جدول زمانی را جابجا کنید.
برای بزرگنمایی و حرکت دادن خط زمانی به چپ و راست، از دکمههای ناوبری مربوطه استفاده کنید:
- برای جابجایی هد پخش و مشاهده یک فریم خاص، روی تایملاین کلیک کنید.
- برای بزرگنمایی ، روی دکمههای و در پایین صفحه کلیک کنید. در این حالت، بر اساس قسمت پخش بزرگنمایی میکنید.
- نوار پیمایش افقی را در پایین بکشید تا جدول زمانی به چپ و راست حرکت کند.
همچنین میتوانید از میانبرهای صفحهکلید استفاده کنید. برای مشاهده میانبرها، روی دکمه کلیک کنید. 
هنگام استفاده از میانبرها، بر اساس مکاننمای ماوس خود بزرگنمایی میکنید.
مشاهده بینشهای عملکرد
فهرستی از بینشهای عملکردی را در پنل بینشها دریافت کنید. مشکلات عملکردی بالقوه را شناسایی و برطرف کنید.
برای هایلایت کردن هر یک از بینشها در مسیرهای اصلی، نشانگر ماوس را روی آنها نگه دارید.
برای درک بیشتر مشکل، روی یک بینش، مثلاً درخواست مسدود کردن رندر، کلیک کنید تا در پنل جزئیات باز شود. برای درک بیشتر مشکل، بخشهای File ، Issue ، How to fix و موارد دیگر آن را بررسی کنید.
مشاهده معیارهای عملکرد Web Vitals
Web Vitals ابتکاری از سوی گوگل برای ارائه راهنماییهای یکپارچه برای سیگنالهای کیفیتی است که برای ارائه یک تجربه کاربری عالی در وب ضروری هستند.
میتوانید این معیارها را در بخش Timeline و Insights مشاهده کنید.
برای کسب اطلاعات بیشتر در مورد معیارها، نشانگر ماوس را روی Insights در Timeline نگه دارید.
تأخیرهای بزرگترین رنگ محتوا را کشف کنید
بزرگترین رنگ محتوا (LCP) یکی از معیارهای Core Web Vitals است. این معیار، زمان رندر بزرگترین تصویر یا بلوک متنی قابل مشاهده در نمای سایت را نسبت به زمان شروع بارگذاری صفحه گزارش میدهد.
امتیاز خوب LCP ، ۲.۵ ثانیه یا کمتر است.
اگر بزرگترین محتوای صفحه شما برای رندر شدن زمان بیشتری نیاز داشته باشد، در تایملاین، نشان LCP را با یک مربع زرد یا مثلث قرمز مشاهده خواهید کرد.
برای باز کردن پنل جزئیات ، روی نشان LCP در جدول زمانی یا در پنل Insights در سمت راست کلیک کنید. در این پنل، میتوانید علل احتمالی تأخیرها و پیشنهادهایی برای رفع آنها را کشف کنید.
در این مثال، یک درخواست، رندرینگ را مسدود میکند و شما میتوانید استایلهای بحرانی را به صورت درونخطی برای رفع آن اعمال کنید. برای کسب اطلاعات بیشتر، به «حذف منابع مسدودکننده رندر» مراجعه کنید.
برای مشاهده زیربخشهای زمان رندر LCP ، به پایین صفحه بروید و به بخش جزئیات > تجزیه زمانبندیها بروید.
زمان رندر LCP از زیربخشهای زیر تشکیل شده است:
| زیربخش LCP | توضیحات |
|---|---|
| زمان رسیدن به اولین بایت (TTFB) | مدت زمانی که کاربر بارگذاری صفحه را آغاز میکند تا زمانی که مرورگر اولین بایت پاسخ سند HTML را دریافت میکند. |
| تأخیر در بارگذاری منابع | اختلاف بین TTFB و زمانی که مرورگر شروع به بارگذاری منبع LCP میکند. |
| زمان بارگذاری منابع | مدت زمانی که طول میکشد تا خود منبع LCP بارگذاری شود. |
| تأخیر رندر عنصر | اختلاف بین زمان اتمام بارگذاری منبع LCP تا زمان رندر کامل عنصر LCP. |
اگر یک عنصر LCP برای رندر شدن به بارگذاری منبع نیاز نداشته باشد، تأخیر و زمان بارگذاری منبع حذف میشوند. برای مثال، در صورتی که عنصر یک گره متنی باشد که با فونت سیستم رندر شده است.
مشاهده فعالیت شیفتهای طرحبندی
فعالیت شیفتهای طرحبندی را در مسیر شیفتهای طرحبندی مشاهده کنید.
شیفتهای طرحبندی در یک پنجره جلسه گروهبندی میشوند. در این مثال، دو پنجره جلسه وجود دارد. بین پنجرههای جلسه فاصله وجود دارد.
تغییرات تجمعی طرحبندی (CLS) یکی از معیارهای اصلی web vitals است. از مسیر تغییرات طرحبندی برای شناسایی مشکلات و علل احتمالی تغییرات طرحبندی استفاده کنید.
هنگام بهبود معیار CLS، همیشه با بزرگترین پنجره جلسه شروع کنید. در مثال ما، پنجره جلسه ۱ بزرگترین پنجره است که بر اساس رنگ پسزمینه و سطح آن محاسبه میشود.
برای مشاهده جزئیات تغییر طرحبندی، شناسایی علل ریشهای احتمالی و عناصر تحت تأثیر، روی تصویر کلیک کنید.
در مثال ما، علت اصلی احتمالی، رسانههای بیاندازه است. برای یادگیری نحوه رفع آن، به Optimize Cumulative Layout Shift مراجعه کنید.
امتیاز تغییرات طرحبندی را درک کنید
برای درک نحوه محاسبه امتیازات، از بخش Window در پنل Details استفاده کنید. Window نشان میدهد که تغییر طرح فعلی به کدام پنجره جلسه تعلق دارد.
اگر کل صفحه جابجا شود، حداکثر امتیاز هر جابجایی طرحبندی 1 است. در مثال ما، اولین جابجایی طرحبندی امتیاز 0.15 و دومین جابجایی طرحبندی امتیاز 0.041 را کسب کرد.
امتیاز کل برای این پنجره جلسه 0.19 است. بر اساس آستانه CLS، نیاز به بهبود دارد. رنگ پسزمینه پنجره جلسه نیز همین را نشان میدهد.
نمودار پسزمینه پنجره جلسه با گذشت زمان افزایش مییابد. امتیاز تجمعی تغییر طرحبندی، افزایش را در آن نقطه از زمان نشان میدهد.
مشاهده فعالیت شبکه
فعالیت شبکه را در مسیر شبکه مشاهده کنید. میتوانید مسیر شبکه را گسترش دهید تا تمام فعالیتهای شبکه را مشاهده کنید و برای مشاهده جزئیات روی هر مورد کلیک کنید.
مشاهده فعالیت رندرکننده
فعالیت رندر را در مسیر رندرر مشاهده کنید. میتوانید هر رندرر را برای مشاهده فعالیتها باز کنید و برای مشاهده جزئیات روی هر مورد کلیک کنید.
مشاهده فعالیت پردازنده گرافیکی (GPU)
فعالیت GPU را در مسیر GPU مشاهده کنید. مسیر GPU به طور پیشفرض پنهان است. برای فعال کردن آن، GPU را در تنظیمات بررسی کنید.
مشاهده زمانبندی کاربران
برای دریافت معیارهای عملکرد سفارشی، میتوانید از زمانبندی کاربر استفاده کنید و زمانبندیهای خود را با مسیر زمانبندی تجسم کنید. برای اطلاعات بیشتر، به API زمانبندی کاربر مراجعه کنید.
این صفحه آزمایشی را ببینید که زمان سپریشده از بارگذاری متن را محاسبه میکند.
برای مشاهده زمانبندی کاربران:
- مکانها را در برنامه خود با
performance.mark()علامتگذاری کنید. - زمان سپری شده بین علامتها را با
performance.measure()اندازهگیری کنید. - عملکرد را ثبت کنید .
- اندازهگیریها را در مسیر زمانبندی مشاهده کنید. اگر نمیتوانید مسیر را ببینید، زمانبندی کاربر را در تنظیمات بررسی کنید.
- برای مشاهده جزئیات، روی زمانبندی روی مسیر کلیک کنید.
رابط کاربری را سفارشی کنید
برای سفارشیسازی Timeline و Tracks ، روی آیکون پنل کلیک کنید و گزینههای مورد نظر خود را بررسی کنید.
صادر کردن یک ضبط
برای ذخیره یک ضبط، روی «صادر کردن کلیک کنید.
وارد کردن یک ضبط
برای بارگذاری یک ضبط، گزینه «وارد کردن انتخاب کنید.
حذف یک ضبط
برای حذف یک ضبط:
- روی کلیک کنید. حذف . یک کادر تأیید باز میشود.
- در کادر محاورهای، برای تأیید حذف، روی حذف کلیک کنید.