مشکلات عملکرد رندر را با این مرجع گزینه های مربوط به عملکرد در برگه Rendering کشف کنید.
نواحی رنگ آمیزی شده را با چشمک زدن رنگ برجسته کنید
با روشن بودن این گزینه، هر زمان که رنگ آمیزی مجدد انجام شود، کروم صفحه را به رنگ سبز چشمک می زند.
برای مشاهده مناطقی که در حال رنگ آمیزی مجدد هستند:
- تب Rendering را در این دمو باز کنید و Paint flashing را علامت بزنید.
- به رنگ آمیزی که با رنگ سبز مشخص شده است توجه کنید.
اگر در صفحه ای دیگر، کل صفحه را سبز می بینید یا قسمت هایی از صفحه را که فکر نمی کردید باید رنگ آمیزی شوند، بررسی بیشتر را در نظر بگیرید.
مناطق تغییر طرح را برجسته کنید
تغییر چیدمان باعث رنگ آمیزی غیرمنتظره می شود و می تواند نه تنها آزاردهنده بلکه مضر باشد.
برای مشاهده مکان و زمان بندی تغییرات طرح بندی در یک صفحه:
تب Rendering را باز کنید و Layout Shift Regions را علامت بزنید.
صفحه را تازه کنید. نواحی تغییر چیدمان به طور مختصر با رنگ بنفش برجسته شده است.
مشاهده لایه ها و کاشی ها با حاشیه های لایه
از Layer Borders برای مشاهده همپوشانی از حاشیه های لایه و کاشی ها در بالای صفحه استفاده کنید.
برای فعال کردن مرزهای لایه:
- تب Rendering را باز کنید و Layer Borders را علامت بزنید.
- مرزهای لایه را در رنگ های نارنجی و زیتونی و کاشی ها را به رنگ فیروزه ای مشاهده کنید.
برای توضیح در مورد کدهای رنگ به نظرات در debug_colors.cc مراجعه کنید.
مشاهده فریم در ثانیه در زمان واقعی با آمار رندر فریم
آمار رندر فریم یک پوشش است که در گوشه سمت راست بالای نمای شما ظاهر می شود.
برای باز کردن آمار رندر فریم :
- تب Rendering را باز کنید و کادر بررسی Frame Rendering stats را فعال کنید.
- آمار را در گوشه سمت راست بالای صفحه مشاهده کنید.
پوشش آماری رندر فریم نشان می دهد:
- تخمین زمان واقعی فریم در ثانیه در حین اجرای صفحه.
- جدول زمانی فریم به عنوان یک طرح با سه نوع فریم:
- فریم‌هایی که با موفقیت رندر شدند (خطوط آبی)
- فریم های نیمه ارائه شده (خطوط زرد)
- فریم های افتاده (خطوط قرمز).
- وضعیت شطرنجی GPU: روشن یا خاموش. برای اطلاعات بیشتر، نحوه دریافت شطرنجی GPU را ببینید.
- استفاده از حافظه GPU: تعداد حافظه استفاده شده و حداکثر مگابایت حافظه.
مشکلات عملکرد اسکرول را شناسایی کنید
از مشکلات عملکرد پیمایش برای شناسایی عناصری از صفحه استفاده کنید که شنوندگان رویداد مرتبط با پیمایش هستند که ممکن است به عملکرد صفحه آسیب برساند.
برای مشاهده عناصر بالقوه مشکل ساز:
- تب Rendering را باز کنید و Scrolling Performance Issues را علامت بزنید.
- عناصر بالقوه مشکل ساز برجسته شده را مشاهده کنید.
Core Web Vitals را مشاهده کنید
Web Vitals ابتکاری توسط Google برای ارائه راهنمایی یکپارچه برای سیگنال های با کیفیت است که برای ارائه یک تجربه کاربری عالی در وب ضروری است.
Core Web Vitals زیرمجموعه Web Vitals هستند که برای تمام صفحات وب اعمال می شوند. هر یک از Core Web Vitals نمایانگر جنبه‌ای از تجربه کاربر است، در میدان قابل اندازه‌گیری است و تجربه دنیای واقعی یک نتیجه حیاتی کاربر محور را منعکس می‌کند. Core Web Vitals عبارتند از:
- بزرگترین رنگ محتوایی (LCP) : عملکرد بارگذاری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، LCP باید در عرض 2.5 ثانیه از زمانی که صفحه برای اولین بار بارگذاری می شود، رخ دهد.
- تعامل با رنگ بعدی (INP) : تعامل را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، صفحات باید INP 200 میلی ثانیه یا کمتر داشته باشند.
- تغییر چیدمان تجمعی (CLS) : ثبات بصری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، صفحات باید CLS 0.1 داشته باشند. یا کمتر
از افزونه Web Vitals Chrome برای مشاهده مقادیر Core Web Vitals صفحه خود استفاده کنید.