آنالیز سرعت سایت با استفاده از پنل Chrome DevTools Performance

پنل Chrome DevTools Performance حاوی ویژگی‌ها و قابلیت‌های فراوانی است که امکان بررسی دقیق عملکرد صفحه وب را فراهم می‌کند. از این پنل می‌توان برای آزمون بارگذاری اولیه وب‌سایت و همچنین سرعت واکنش آن به ورودی کاربر مطابق با معیار Google Interaction to Next Paint یا همان INP استفاده کرد.

Interaction to Next Paint (INP) یک معیار سنجش  Core Web Vitals است که در مارس 2024 جایگزین First Input Delay (FID) خواهد شد.

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

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

اندازه گیری سرعت لود سایت (Performance)

برای دسترسی به تب Performance پس از باز کردن صفحه مورد نظر برای نمایه‌سازی، ابزارهای توسعه‌دهندگان کروم یا Chrome DevTools را از طریق کلیک راست و انتخاب گزینه Inspect باز کنید.

تب Performance را در DevTools انتخاب و باز کنید.

برای شروع ثبت پروفایل عملکرد و نمایه‌سازی، روی آیکون “Start profiling and reload page” کلیک کنید. پروفایل به صورت خودکار پس از توقف فعالیت CPU و شبکه در صفحه متوقف می‌شود.

توصیه می‌شود آزمون‌ها و تست‌های ارزیابی عملکرد را در حالت ناشناس (Incognito Mode) اجرا کنید، زیرا افزونه‌های کروم می‌توانند بر عملکرد سایت تأثیر بگذارند.

نمای کلی تب عملکرد

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

تایملاین استفاده از پردازنده (CPU utilization)

این نمودار بیانگر میزان اشغال CPU توسط تسک‌های مختلف است. معمولاً تسک‌های JavaScript (زرد) و تسک‌های مربوط به Layout (بنفش) فضای بیشتری از CPU را اشغال می‌کنند. همانطور که در صفحه اصلی Stripe مشاهده می‌شود، فعالیت CPU معمولاً پس از یک دوره اوج اولیه و فعالیت زیاد، به مرور کاهش پیدا می‌کند.

در مثال زیر، حتی پس از بارگذاری اولیه صفحه اصلی، CPU همچنان مشغول است. این مسئله می‌تواند باعث کندی تعامل با صفحه، به ویژه روی دستگاه‌های کند‌تر و ضعیف‌تر شود.

Filmstrip

نوار filmstrip یا فیلم‌نگاره روند رندر شدن وب‌سایت شما را به صورتی بصری نشان می‌دهد. می‌توانید ماوس را روی یک نقطه از نوار نگه دارید تا اسکرین‌شات لحظه زمانی مربوط به آن نقطه نمایش داده شود.

شروع ضبط از یک صفحه خالی

وقتی از گزینه “Start profiling and reload page” استفاده می‌کنید، تشخیص نقطه شروع رندر شدن صفحه سخت است، چرا که فیلم‌نگاره از ابتدا صفحه کاملا رندر شده را نشان می‌دهد. می‌توانید ضبط فیلم‌نگاره را از یک صفحه خالی شروع کنید:

1. ابتدا به آدرس about:blank بروید
2. روی آیکون Record در تب عملکرد کلیک کنید
3. وقتی صفحه بارگذاری شد، دوباره روی آیکون Record کلیک کنید تا ضبط متوقف شود

حالا صفحه از حالت خالی شروع می‌کند و به تدریج رندر می‌شود. همچنین برای رندر تدریجی‌صفحه می‌توانید از network throttling استفاده کنید.

تایم‌لاین درخواست شبکه (Network request timeline)

بخش Network لیست درخواست‌ها را نشان می‌دهد که از بالا با درخواست HTML شروع می‌شود و سپس درخواست‌های بعدی در زیر آن نمایش داده می‌شوند. برای نمایش اطلاعات بیشتر هر درخواست، مانند URL کامل، مدت زمان درخواست، اولویت منبع و حجم دانلود، بر روی آن درخواست کلیک کنید.

تایم‌لاین شبکه به ویژه برای هماهنگی و تطبیق درخواست‌ها با به‌روزرسانی‌های رابط کاربری یا فعالیت CPU مفید است. به عنوان مثال، شکل زیر نمایه صفحه اصلی یک وب سایت را قبل از اتمام بارگذاری یک فونت نشان می‌دهد.

اگر تغییری در رابط کاربری مشاهده کردید، می‌توانید بخش درخواست‌ها (Requests) را بررسی کنید تا مشخص شود کدام درخواست شبکه باعث به تعویق افتادن به‌روزرسانی رابط کاربری شده است. در این تصویر که بلافاصله پس از بارگذاری فایل فونت گرفته شده، می‌توانید ببینید که رابط کاربری با استفاده از فونت دانلود شده مجدداً رندر شده است.

نمودار CPU flame chart

بخش اصلی CPU حاوی یک نمودار معکوس است که نحوه تقسیم تسک‌های CPU به اجزای مختلف را نشان می‌دهد. به عنوان مثال، می‌توانید تابع فراخوانی waitForCssVars را در نمودار CPU flame chart مشاهده نمایید. با نگاه کردن به بالای آن متوجه می‌شویم این تابع توسط یک تابع ناشناس فراخوانی شده است که خود آن به دلیل استفاده به عنوان callback در requestAnimationFrame فراخوانی شده است. همچنین تابع init از داخل تابع waitForCssVars فراخوانی شده است.

با انتخاب یک تابع جاوااسکریپت در نمودار CPU flame chart اطلاعات بیشتری درباره این تابع مانند محل منبع آن نمایش داده می‌شود. با کلیک روی محل منبع، به کد منبع هدایت می‌شوید. همچنین برای خوانایی بیشتر کد، می‌توان از دکمه Prettify در پایین سمت چپ پنل Sources استفاده کرد.

جریان مجدد اجباری (Forced reflows)

مرورگر معمولاً ابتدا اجرای کد جاوااسکریپت را به پایان می‌رساند و سپس رابط کاربری را برای کاربر به‌روزرسانی می‌کند. جریان Forced reflows زمانی رخ می‌دهد که کد جاوااسکریپت، در حالی که به‌روزرسانی‌های رابط کاربری معوق مانده‌اند و می‌توانند بر ویژگی‌های چیدمان المان ها تأثیر بگذارند، به ویژگی‌های چینش یک عنصر دسترسی پیدا می‌کند. مرورگر مجبور است به‌روزرسانی‌های لایه‌بندی را به طور همزمان در حین اجرای کد جاوا اسکریپت محاسبه کند. اگرچه این پدیده همیشه تأثیر زیادی روی عملکرد ندارد؛ اما بهتر است از آن اجتناب شود. بررسی مجدد استایل کار را جلو می‌اندازد، بنابراین اگر چیدمان در ادامه تغییر نکند، نیازی به کار اضافی نیست.

داده‌های جزئی تسک‌های CPU که توسط نمایه‌ساز کروم ارائه می‌شود، می‌تواند به درک و اشکال‌زدایی چیدمان همگام (synchronous layout) کمک کند. محاسبه مجدد style به دو بخش از کد منبع اشاره می‌کند:

1. محاسبه مجدد اجباری (Recalculation Forced): که در آن لایه‌بندی مجدد اجباری رخ داده است و کد جاوااسکریپت با دسترسی به ویژگی‌های DOM وابسته به لایه‌بندی منجر به محاسبه مجدد اجباری شده است.
2. ابطال اولیه (First Invalidated): کدی که DOM را تغییر داده است، به این معنی که محاسبات مجدد چیدمان در به‌روزرسانی بعدی رابط کاربری ضروری خواهد بود.

نمودار تجزیه و تحلیل جمعی تسک‌ها

اگر هیچ تسک خاصی برای CPU انتخاب نشده باشد، پنل جزئیات در پایین تب Performance تجزیه و تحلیل کلی فعالیت‌های CPU را در چهار دسته نشان می‌دهد:

• بارگذاری (Loading): ایجاد و ارسال درخواست‌های شبکه و تجزیه HTML
• اسکریپت‌نویسی (Scripting): تجزیه، کامپایل و اجرای کد جاوا اسکریپت، همچنین شامل جمع‌آوری زباله یا Garbage Collection (GC) برای مدیریت حافظه
• رندرینگ (Rendering): محاسبات استایل و لایه‌بندی المان‌های صفحه برای نمایش محتوا
• پینتینگ (Painting): پینت کردن پیکسل‌ها، ترکیب لایه‌های مختلف، تغییر اندازه و رمزگشایی تصاویر

در تب پرفورمنس به طور پیش‌فرض موضوع اصلی صفحه انتخاب شده است، اما می‌توانید موضوعات مختلف را با کلیک روی آن‌ها یا استفاده از کلیدهای بالا و پایین انتخاب کنید. این تصویر نمایه تجزیه و تحلیل CPU برای یک وب ورکر را نشان می‌دهد.

تب Bottom-Up

می‌توانید نمای Bottom-Up را انتخاب کنید تا تجزیه و تحلیل دقیق‌تری از فعالیت‌های CPU را مشاهده کنید. این نما انواع فعالیت‌های پایین درخت توابع نشان می‌دهد، بنابراین اغلب توابع سطح پایین مرورگر مانند getBBox یا setAttribute را می‌توانید در این قسمت می‌بینید.

این توابع سطح پایین را باز کنید تا مشخص شود چه کدهایی آن‌ها را فراخوانی کرده‌اند. این کار به شما کمک می‌کند تا کدی که روی آن کنترل دارید را پیدا کنید.

تب درخت توابع (Call Tree)

تب درخت توابع (Call Tree) مشابه نمودار CPU flame chart عمل می‌کند و نشان می‌دهد هر یک از تسک‌های فرعی و توابع فراخوانی شده چه مقدار از مدت زمان کلی یک تسک را به خود اختصاص داده‌اند. مزیت درخت توابع نسبت به نمودار CPU flame chart این است که درخت توابع به جای بررسی یک تابع در هر بار، توابع تکراری را تجمیع می‌کند و میانگین زمان صرف شده برای آنها را نمایش می‌دهد. این ویژگی باعث می‌شود شناسایی نقاطی که به‌طور میانگین بیشترین زمان را مصرف می‌کنند ساده‌تر شود.

فریم و نرخ فریم (Frames and frame rate بر حسب FPS)

بخش فریم‌ها (Frames) در تب Performance تصویری از هر به‌روزرسانی رابط کاربری در صفحه را نشان می‌دهد. هر به‌روزرسانی رابط کاربری یک فریم نامیده می‌شود و اگر رابط کاربری برای مدت زیادی متوقف شود، آن فریم یک فریم طولانی (long frame) نامیده می‌شود.

شکل زیر چندین فریم طولانی را نشان می‌دهد که به‌روزرسانی‌های رابط کاربری به دلیل فعالیت سنگین جاوا اسکریپت با تأخیر انجام می‌شوند. فریم‌های طولانی و نرخ فریم (فریم در ثانیه، FPS) روی بالای نمودار فعالیت CPU هم نشان داده می‌شوند.

با کلیک بر روی تصویر فریم (frame snapshot) در پنل جزئیات، امکان مرور ترتیبی تمام فریم‌های ضبط شده وجود دارد.

بخاطر داشته داشته باشید که در یک صفحه وب، نرخ پایین فریم لزوماً مشکل‌ساز نیست. در اجرای بازی‌های ویدئویی که مستلزم به‌روزرسانی مداوم رابط کاربری است، نرخ فریم بالا ضروری است. در یک وب‌سایت طبیعی است که نرخ فریم پس از بارگذاری اولیه صفحه به صفر برسد، مگر اینکه انیمیشن‌های در حال اجرا در صفحه وجود داشته باشند.

Web Vitals و سایر زمان‌بندی‌ها

تب DevTools Performance همچنین می‌تواند معیارهای Web Vitals و User Timing را نیز نشان دهد. همچنین رویدادهای بارگذاری اولیه (First Paint یا FP)، DomContentLoaded (DCL) و بارگذاری صفحه (Load یا L) در مسیر تایمینگ قابل مشاهده است.

در مسیر تجربه کاربری تب Performance، نگه داشتن ماوس روی تغییرات چیدمان (layout shift) باعث برجسته شدن گره DOM مربوطه می‌شود. به محض کلیک بر روی آن، اطلاعات بیشتری از جمله محل قبلی و جدید المان نمایش داده می‌شود. مسیر تسک‌های طولانی (Long Tasks) نیز تسک‌هایی که بیش از ۵۰ میلی‌ثانیه طول می‌کشند را نمایش می‌دهد که منجر به کاهش ریسپانسیو بودن سایت می‌شوند.

وقتی که زمان یک تسک از ۵۰ میلی‌ثانیه بیشتر است به عنوان زمان بلاکینگ (blocking time) شمرده می‌شود که با خطوط سیاه مشخص شده است و می‌تواند در اشکال‌زدایی معیار زمان بلاک کلی (Total Blocking Time) مفید باشد.

محدودکننده CPU

ممکن است هنگام بهینه‌سازی سرعت وب‌سایت خود، اغلب با موقعیت‌هایی مواجه شوید که وب‌سایت بر روی دستگاه شما سریع بارگذاری شود اما برای برخی از کاربران دیرتر و کندتر بارگذاری شود. به عنوان مثال، صفحات اغلب بر روی تلفن‌های همراه با CPU های کندتر نسبت به دستگاه‌های دسکتاپ با سرعت کمتری بارگذاری می‌شوند. در این موارد، DevTools می‌تواند CPU و اتصال شبکه را محدود کند تا تجربه کاربری یک فرد با دستگاه کندتر را شبیه‌سازی کند.

برای محدود کردن CPU بجای کلیک بر روی آیکن بالای سمت راست DevTools روی آیکن چرخ‌دنده در تب Performance کلیک کنید. سپس می‌توانید کاهش سرعت 4 تا 6 برابری CPU را فعال کنید.

تصویر بالا نشان می‌دهد که روی یک دستگاه کندتر، CPU حتی پس از بارگذاری اولیه صفحه نیز مشغول به کار می‌ماند. این موضوع می‌تواند باعث کاهش پاسخ‌دهی صفحه به تعامل کاربر و همچنین مصرف بیشتر باتری شود. برای درک بهتر این موضوع، نمودار CPU بالا را با نمودار زیر که CPU در آن محدود نشده است، مقایسه کنید.

استفاده از محدود‌کننده CPU برای درک آسان‌تر فعالیت صفحه

علاوه بر شبیه‌سازی تجربه کاربری صفحه برای کاربران، محدود‌کننده همچنین بررسی مشکلات عملکردی را آسان‌تر می‌کند؛ مگر اینکه سرعت بارگذاری صفحه شما واقعاً کند باشد. هنگام بارگذاری یک صفحه، معمولاً صدها رویداد به طور همزمان اتفاق می‌افتد که درک روابط و وابستگی‌های میان انواع مختلف فعالیت‌های صفحه را دشوار می‌کند. اعمال محدودکننده شبکه کند 3G و کاهش 6 برابری سرعت CPU باعث می‌شود صفحه بسیار کند بارگذاری شود و امکان بررسی درخواست‌های شبکه و تسک‌های CPU را فراهم می‌کند.

ابزار Advanced paint Instrumentation

گزینه Enable Advanced Paint Instrumentation داده‌های اشکال‌زدایی در مورد عملکرد Rendering صفحه را جمع‌آوری می‌کند. جمع‌آوری این داده‌ها باعث کاهش سرعت بارگذاری صفحه و کند شدن آن می‌شود، بنابراین اگر این گزینه فعال باشد، سایر معیارهای عملکردی دقت کمتری خواهند داشت. اگر یک رویداد Paint با سرعت کند را در تایم‌لاین پیدا کردید، می‌توانید آن را انتخاب کنید تا جزئیات دقیقی از آنچه مرورگر ترسیم کرده است و مدت زمان آن را مشاهده کنید.

همچنین می‌توانید یک آیتم را در مسیر Frames انتخاب کنید تا لایه‌های تشکیل دهنده صفحه (گروه‌های محتوای صفحه) را مشاهده نمایید. لایه‌هایی که در آن فریم ترسیم شده‌اند، به صورت رنگی مشخص شده‌اند. هر لایه را انتخاب کرده و دلیل تبدیل شدن آن بخش از صفحه به لایه مجزا را بیابید.

با بررسی صفحه اصلی سایت پی خواهید برد که برای هر بخش از منوی هدر تعدادی لایه وجود دارد. با پیمایش کاربر بر روی لینک‌های ناوبری، موقعیت و شفافیت منو تغییر می‌کند، بنابراین این سایت از اتریبیوت (css) will-change: transform, opacity استفاده کرده تا Chrome را از این تغییرات آگاه کند. سپس Chrome این عناصر را در لایه‌های جداگانه‌ای قرار می‌دهد تا سرعت این تبدیل‌ها را بالا ببرد.

نظارت بر عملکرد با DebugBear

تب Performance در DevTools ابزار بسیار خوبی برای بررسی دقیق عملکرد وبسایت است. اما امکان پایش و نظارت مداوم سرعت سایت یا مقایسه نتایج ارزیابی‌ها با یکدیگر را فراهم نمی‌کند.

ابزار DebugBear یک ابزار برای پایش مداوم سرعت و مقایسه عملکرد وب‌سایت است که بر خلاف DevTools امکان مقایسه نتایج ارزیابی‌ها و همچنین ثبت و پیگیری معیارهای مهمی مانند Core Web Vitals (که گوگل از آن به عنوان سیگنال رتبه‌بندی استفاده می‌کند) را فراهم می‌کند.

اشاره به این نکته لازم است که جان مولر سخنگوی گوگل در برخی شبکه های اجتماعی اعلام کرده بود که گرچه گوگل پیش از این اعلام کرده بود که از Core  Web Vitals به عنوان فاکتور رنکینگ سئو سایت استفاده می کند، معیارهای CWV بر جایگاه سایت ها در موتورهای جستجو تاثیری ندارد.

این ابزار همچنین داده‌های رفع اشکال دقیق را برای کمک به درک و بهینه‌سازی عملکرد وب ارائه می‌نماید.