رندر و تعامل

داشبورد زیرساخت و شبکه، مسیر حرکت داده‌ها را تا رسیدن اولین بایت دنبال کرد؛ اما این داشبورد دقیقا از همان نقطه شروع می‌شود. در این مرحله، مرورگر داده‌ها را دریافت کرده است، کدهای فرانت‌اند را می‌خواند، اسکریپت‌ها را اجرا می‌کند و اسکلت صفحه (DOM) را می‌چیند.

مرز میان این دو داشبورد کاملا هدفمند تعیین شده است. از آنجا که متریک‌های استاندارد مرورگر، کل مسیر را از لحظه شروع ناوبری محاسبه می‌کنند (که شامل زمان شبکه و سرور نیز می‌شود)، این جداسازی از تداخل و شمارش مضاعف یک بازه زمانی توسط هر دو داشبورد جلوگیری می‌کند.

این داشبورد به دو بخش کلیدی تقسیم می‌شود:

این بخش، نمای کلی وضعیت فاز دوم بارگذاری را ارائه می‌دهد. کارت‌ها عبارتند از:

• زمان پردازش مرورگر: سهم خالص فرانت‌اند از کل فرآیند را نشان می‌دهد.
• زمان آماده‌سازی ساختار صفحه: کل مسیر طی‌شده از لحظه کلیک تا آماده‌سازی کامل اسکلت صفحه را در بر می‌گیرد.
• نرخ تجربه کند: شاخص کلیدی و واحدی است که در صورت نیاز به ارائه گزارش به مدیران ارشد، باید مبنا قرار گیرد. این شاخص میانگین نیست، بلکه سهم واقعی کاربرانی را که تجربه نامطلوبی داشته‌اند، به تصویر می‌کشد.

این بخش، ابزارهای پیشرفته پایش خودکار و تحلیل دقیق رندر را در اختیار شما می‌گذارد.

• نبض تجربه کاربری: با بهره‌گیری از همان منطق نبض زیرساخت، تغییرات ناگهانی لایه رندر در ۲۴ ساعت گذشته را با میانگین ۷ روز قبل، به تفکیک نوع دستگاه مقایسه می‌کند. از آنجا که توان پردازشی گوشی‌ها و رایانه‌ها تفاوت چشمگیری با هم دارد و بیشتر کندی‌های رندر روی موبایل رخ می‌دهد، این تفکیک به شما کمک می‌کند بفهمید مشکل سراسری است یا صرفا روی دستگاه‌های ضعیف‌تر بروز کرده است.
• سرعت آماده‌شدن صفحه: نموداری است که زمان آماده‌سازی ساختار صفحه را بر اساس دستگاه، مرورگر یا سیستم‌عامل مقایسه کرده و نتایج را از کندترین مورد مرتب می‌کند. هر میله شامل دو بخش است: بخش پررنگ که تجربه کاربر متوسط را نشان می‌دهد و بخش محو که تا بدترین ۵ درصد تجربه‌ها ادامه می‌یابد. رنگ میله‌ها وضعیت را نسبت به آستانه مشخص می‌کند (سبز: زیر ۱٫۵ ثانیه، نارنجی: تا ۳ ثانیه، قرمز: بالای ۳ ثانیه) و خط عمودی، مرز سه‌ثانیه‌ای کندی را نمایش می‌دهد.

برای بهینه‌سازی عملکرد این بخش، راهکارهای زیر را به کار بگیرید:

• کاهش حجم و زمان اجرای جاوااسکریپت: اسکریپت‌های سنگین یا بدون‌استفاده، اصلی‌ترین مانع پردازش سریع مرورگر هستند.
• سبک‌سازی ساختار صفحه: تعداد بالای عناصر در کدهای HTML، زمان ساخت درخت DOM را افزایش می‌دهد.
• بارگذاری غیرهم‌زمان اسکریپت‌ها: اسکریپت‌های غیرضروری را با استفاده از ویژگی‌های defer و async بارگذاری کنید تا اجرای آن‌ها مانع رندر اولیه صفحه نشود.
• اولویت‌بندی بهینه‌سازی موبایل: اگر نمودار سرعت آماده‌شدن صفحه فاصله زیادی میان موبایل و دسکتاپ نشان می‌دهد، تمرکز خود را معطوف به سبک‌سازی نسخه موبایل کنید؛ چون این فاز کاملا در سمت مرورگر کاربر رخ می‌دهد و ارتباطی با سرور ندارد.