عملکرد صفحه یک بررسی اجمالی عملکرد فوری از هر صفحه وب ارائه میدهد — معیارهای زمانبندی (FCP، DOMContentLoaded، بارگذاری کامل، TTI)، آمار DOM (تعداد عنصر، عمق تودرتو، شنوندههای رویداد) و یک تجزیهوتحلیل منابع که تعداد و اندازه JavaScript، CSS، تصاویر، فونتها و سایر داراییها را نشان میدهد. یک امتیاز عملکرد رنگبندیشده یک نشانگر سلامت سریع میدهد.
پروفایلگیری عملکرد با Lighthouse یا WebPageTest تحلیل عمیق ارائه میدهد اما اجرا زمان میبرد و گزارشهای طاقتفرسایی تولید میکند. گاهی اوقات فقط نیاز به یک پاسخ سریع دارید: «آیا این صفحه سریع است یا کند؟ بزرگترین مشکل چیست؟» عملکرد صفحه آن بررسی اجمالی فوری را به شما میدهد. داده زمانبندی را از Performance API و Navigation Timing API مرورگر میخواند (دادهای که از قبل در طول بارگذاری صفحه عادی جمعآوری شده — بدون آزمون مجدد اضافی) و در یک داشبورد بصری تمیز ارائه میدهد. بخش بالا معیارهای زمانبندی کلیدی را نشان میدهد: First Contentful Paint (زمانی که اولین محتوا ظاهر میشود)، DOMContentLoaded (زمانی که HTML کاملاً parse شده)، بارگذاری کامل (زمانی که همه منابع تمام میشوند) و Time to Interactive (زمانی که صفحه پاسخگو میشود). هر معیار رنگبندی میشود — سبز برای سریع، زرد برای متوسط، قرمز برای کند — بر اساس آستانههای Web Vitals. در زیر، یک تجزیهوتحلیل منابع نشان میدهد چه مقدار پهنای باند برای JavaScript، CSS، تصاویر، فونتها و سایر انواع منابع صرف میشود، با نمودارهای bar برای مقایسه آسان. بخش آمار DOM تعداد کل عنصر، حداکثر عمق تودرتو و تعداد شنوندههای رویداد را نشان میدهد — نشانگرهای پیچیدگی DOM که عملکرد رندرینگ را تأثیر میگذارند.
First Contentful Paint (FCP)، DOMContentLoaded، بارگذاری کامل صفحه و Time to Interactive (TTI) را نشان میدهد — چهار معیار عملکرد مهمترین. هر کدام رنگبندی میشوند: سبز (سریع)، زرد (متوسط)، قرمز (کند) بر اساس آستانههای تثبیتشده Web Vitals.
نمودار bar بصری که تعداد و اندازه کل هر نوع منبع را نشان میدهد: فایلهای JavaScript، stylesheetهای CSS، تصاویر، فونتها و سایر داراییها. فوراً ببینید کدام نوع منبع بیشترین سهم را در وزن صفحه دارد.
تعداد کل عنصر DOM، حداکثر عمق تودرتو و تعداد کل شنونده رویداد را نشان میدهد. اندازههای بزرگ DOM (بیش از ۲۰۰۰ عنصر) و تودرتوی عمیق (بیش از ۱۵ سطح) به عنوان گلوگاههای عملکرد بالقوه علامتگذاری میشوند.
یک امتیاز ۰-۱۰۰ وضعیت سلامت عملکرد صفحه را خلاصه میکند، رنگبندیشده به سبز (۸۵+)، زرد (۵۰-۸۴) یا قرمز (۰-۴۹). بر اساس یک ترکیب وزنی از معیارهای زمانبندی و کارایی منابع.
اندازه ترکیبی همه منابع دانلودشده را در MB نشان میدهد. بر اساس دستهبندی تقسیمبندی میشود تا ببینید ۸۴۲ KB JavaScript، ۲۴۵ KB تصاویر و ۱۲۸ KB CSS است — سنگینترین عوامل را شناسایی کنید.
داده عملکرد را از Performance API مرورگر میخواند — دادهای که از قبل در طول بارگذاری صفحه عادی جمعآوری شده. بدون آزمون مجدد مصنوعی، بدون درخواستهای شبکه اضافی و بدون تأثیر عملکرد از اجرای ابزار.
هر صفحهای را باز کنید و یک بررسی اجمالی عملکرد فوری دریافت کنید. آیا سریع است (امتیاز سبز)، متوسط (زرد) یا کند (قرمز)؟ داشبورد این پاسخ را در کمتر از یک ثانیه میدهد — بدون انتظار برای اجرای Lighthouse.
اگر صفحه کند است، تجزیهوتحلیل منابع نشان میدهد چرا. ۱.۲ MB JavaScript؟ این گلوگاه است. ۸۰۰ KB تصاویر بهینهنشده؟ این اصلاح است. تجسم بصری سنگینترین عوامل را آشکار میکند.
عملکرد صفحه را قبل از بهینهسازیها اجرا کنید، معیارها را یادداشت کنید. تغییرات خود را اعمال کنید، مجدداً بارگذاری کنید و آن را دوباره اجرا کنید. FCP، زمان بارگذاری و وزن کل صفحه را مقایسه کنید تا تأیید کنید بهینهسازیهای شما تأثیر مورد انتظار را داشتهاند.
عملکرد صفحه را روی سایت خودتان و سایتهای رقبا اجرا کنید. زمانهای بارگذاری، وزنهای صفحه و توزیعهای منابع را مقایسه کنید. آیا رقبا JavaScript کمتری ارسال میکنند؟ آیا تصاویر آنها بهتر بهینهسازی شده؟
ابزار را روی صفحات کلیدی به صورت منظم در طول توسعه اجرا کنید. اگر امتیاز عملکرد کاهش یابد یا وزن صفحه ناگهان افزایش یابد، یک رگرسیون وارد کردهاید — آن را قبل از رسیدن به تولید شناسایی کنید.
داک شناور DevSuite Pro را باز کرده و روی آیکون عملکرد صفحه کلیک کنید. داشبورد فوراً با داده عملکرد برای بارگذاری صفحه فعلی ظاهر میشود.
چهار معیار زمانبندی کلیدی در بالا را بررسی کنید: FCP، DOMContentLoaded، بارگذاری کامل و TTI. مقادیر سبز سریع هستند، زرد متوسط، قرمز نیاز به بهبود دارد.
به نمودار bar منابع نگاه کنید تا ببینید کدام نوع دارایی سنگینترین است. JavaScript اغلب بزرگترین عامل است — اگر JS بیش از ۵۰۰ KB است، ممکن است ارزش code-splitting یا lazy-loading داشته باشد.
آمار DOM را بررسی کنید. اگر تعداد عنصر از ۱۵۰۰ بیشتر شود یا عمق تودرتو از ۱۵ تجاوز کند، سادهسازی نشانهگذاری را برای بهبود عملکرد رندرینگ در نظر بگیرید.
امتیاز کلی یک معیار سریع ارائه میدهد. ابزار را قبل و بعد از بهینهسازیها اجرا کنید تا بهبود را اندازهگیری کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
