چگونه یک نمودار آبشاری را تجزیه و تحلیل کنیم؟
این یک مقاله کلی و جامع جهت آموزش روش‌هایی برای تجزیه و تحلیل داده‌ها در نمودار آبشاری است. فهمیدن مسائلی که در یک نمودار آبشاری اتفاق می‌افتد بدون داشتن تجربه لازم و دانش تکنیکی، دشوار است. هدف ما از ارائه این راهنما، کمک به شما جهت تشخیص پی‌آمدها و الگوهای متعارفی است که می‌تواند به شما بینشی جهت عیب‌یابی و اصلاح عملکرد بدهد. با تیک4 همراه باشید.
- چگونه یک نمودار آبشاری را تجزیه و تحلیل کنیم؟
- دانستن نکات کلیدی
- ۱. نمودارهای آبشاری مدرج هستند
- ۲. هدر پاسخ‌ها آشکار می‌شوند؛
- چگونه یک نتیجه‌گیری سریع را انجام دهیم
- درخواست‌های چهارxx و پنجxx
- میله‌های بلند
- دلایل احتمالی ایجاد میله‌های بلند
- فاصله‌های خالی طولانی
- به تعویق انداختن تجزیه جاوا اسکریپت
- زنجیرهای ریدایرکت کند
- نمودار آبشاری سرتاسر بلند و طولانی
- بارگذاری محتوای بیش از حد مثل تصاویر، محصولات، مقاله‌ها و غیره
دانستن نکات کلیدی
به هنگام نگاه کردن به یک نمودار آبشاری، نکاتی هست که باید به آن‌ها توجه کنید:
۱. نمودارهای آبشاری مدرج هستند:
نمودارهای آبشاری مدرج ممکن است در نگاه اول شما را به خطا بیندازند. این نکته راجع به نمودار آبشاری مهم و ضروری است. طول ستون‌ها و فاصله‌ها نسبت به زمان بارگذاری کل صفحه و تعداد درخواست‌ها، مقیاس‌بندی شده است. این نکته راجع به نمودار آبشاری مهم و ضروری است. طول ستون‌ها و فاصله‌ها نسبت به زمان بارگذاری کل صفحه و تعداد درخواست‌ها، مقیاس‌بندی شده است.
مثال الف: زمان بارگذاری سایت بیست ثانیه‌ای با یازده درخواست
این نمودار آبشاری به خصوص، زمان‌های بارگذاری طولانی دارد، دلیل آن هم بیشتر به بارگذاری عکس‌های سایت برمی‌گردد. توجه داشته باشید که مدت زمان درخواست‌ها به «ثانیه» نشان داده شده است.
مثال ب: زمان بارگذاری سایت ۰.۳۶ با ۱۱ درخواست
مدت زمان درخواست‌ها در این نمودار به «میلی‌ثانیه» نشان داده شدن است. به دلیل بلند بودن میله‌ی اول شما در نگاه اول ممکن است فکر کنید یک پی‌آمد در راه‌اندازی backend پیش آمده است. با این وجود، با یک نگاه دقیق‌تر می‌فهمیم که هیچ پی‌آمد و اتفاقی اصلاً وجود ندارد و ۲۰۷ میلی‌ثانیه برای زمان backend به طور کل خوب است. زمان کوتاه بارگذاری کامل سایت روی هم رفته طول میله را درجه‌بندی می‌کند و میله‌ها در نمودار بلند نشان داده می‌شوند. شما همیشه به هنگام نگاه کردن به میله نشان‌دهنده‌ی زمان بارگذاری کامل سایت، حتماً به مدت زمان درخواست آن هم نگاه کنید تا بتوانید نمودار را در سیاق صحیح آن مطالعه کنید.
۲. هدر پاسخ‌ها آشکار می‌شوند؛
از لحاظ فنی، بخشی از تجزیه و تحلیل الگوهای نمودار آبشاری که خیلی هم مفید است، فهمیدن این است که به درخواست‌ها چگونه پاسخ داده می‌شود. این امر ممکن است شامل داده‌های زیر باشد:
– جزئیات CDN
– وضعیت حافظه پنهان
– تنظیمات کلی
– و موارد بیشتر
سرعت بارگذاری سایت در گوگل و یاهو یا page speed/yslow دارای مجموعه کدهای از پیش ساخته شده یا همان کتابخانه هستند. این کتابخانه‌ها به header respons برای پیشنهادات بیشتر توجه می‌کنند. اگر داده‌های مربوطه به طراحی سایتتان در header respons ناقص باشند، نتیجه آن کم شدن نمره سایت شما خواهد بود. اگر page speed/yslow به هنگام طراحی سایت گزارش مبنی بر نقص دادند، شما به header respons مراجعه و آن‌ها را چک کنید. این کار به شما کمک می‌کند ثبت یا رد شدن پی‌آمدها را چک کنید یا به عنوان یک تحلیل‌گر شما را در مدار صحیح قرار می‌دهد تا بتوانید کارایی پی‌آمدها را دنبال کنید.
چگونه یک نتیجه‌گیری سریع را انجام دهیم
حالا که با خطوط، رنگ‌ها و میله‌های نمودارهای آبشاری آشنا شدید، بیایید ببینیم چطور می‌توانیم یک ارزیابی سریع انجام دهیم. به‌خاطر بسپارید، تشخیص الگوهای مختلف در یک نمودار آبشاری، ضرورتاً به این معنا نیست که این الگوها به توجه یا اصلاح نیازمندند. هر الگویی در نمودار آبشاری نشان‌دهنده وجود یک خطا نیست. بعضی از الگوهایی که شما باید در جستجوی آن‌ها در یک نمودار آبشاری باشید، در ادامه معرفی شده‌اند.
-
درخواست‌های چهارxx و پنجxx
درخواستی که قرمز شده باشد نشان‌دهنده وجود یک خطا به هنگام بارگذاری آن درخواست است. اگر قادر به بازیابی مجدد درخواست نباشید، به احتمال زیاد مرورگر بدون پاسخ دادن آن را رد خواهد کرد. به مرور، این درخواست‌های قرمز باعث مسدود شدن یا عدم تلاش مرورگر به پاسخ دادن بقیه درخواست‌ها می‌شود و در ادامه باعث می‌شوند همه‌ی مراحل بارگذاری با مشکل مواجه شود.
هرگونه خطای پنج xxوچهارxx را پاکسازی کنید.
حذف یا اصلاح هر کدام از این درخواست‌هایی که باعث خطا می‌شوند، به شما یک نمودار آبشاری تمیز و بدون خطا می‌دهد که بتوانید از آن برای ارزیابی استفاده کنید.
-
میله‌های بلند
میله‌های بلند در واقع نشان‌دهنده مدت زمان طولانی انجام یک درخواست هستند. هر درخواستی که بیش از پانصد میلی‌ثانیه طول بکشد باید مجدداً بررسی شود.
دلایل احتمالی ایجاد میله‌های بلند
- دریافت کردن
این امر متعارف‌ترین دلیل برای بلند شدن میله در نمودار آبشاری است. فایل‌های با حجم بالا طبیعتاً باعث طولانی‌تر شدن مدت زمان بارگذاری داده‌ها می‌شود، و به تبع آن، فایل‌های بزرگ، خود را به شکل میله‌های بلند خاکستری رنگ در نمودار آبشاری نشان می‌دهند. برای تصاویر، در صورت غیربهینه بودن، page speed به شما از طریق توصیه‌های تصاویر بهینه یا optimize images هشدارهایی می‌دهد تا بتوانید مشکل غیربهینه بودن تصاویر را حل کنید.
- انتظار
میله‌های بنفش رنگ نشان‌دهنده پی‌آمدهای سمت سرور یا Server side است. این امر اساساً زمانی است که سرور به دنبال ایجاد یک پاسخ برای درخواست شما است. اگر بخش ابتدایی پاسخ طولانی باشد، نشان‌دهنده پی‌آمدهای بک اند است.
- مسدودسازی
میله‌های طولانی به رنگ بژ نشان‌دهنده این است که درخواست در حال انجام بود، ولی به دلایلی مسدود یا در صف انتظار قرار داده شده است. مثل این‌که ارتباط با منابع برقرار نشده است. انگار که یک چیزی مانع این ارتباط با سرور شده است.
- در حال اتصال
و در آخر، میله بلند سبز رنگ نشان‌دهنده مدت زمان درخواست برای ارتباط با سرور است. اشکالاتی مانند: خطا در اتصال، مشکلات شبکه یا بار ظرفیت بیش از حد سرور می‌تواند باعث ایجاد میله بلند سبز رنگ در نمودار آبشاری شود.
فاصله‌های خالی طولانی
فواصل خالی طولانی بین درخواست‌ها نشان‌دهنده اجرا و تجزیه اسکریپت‌ها در جایی است که امکان پیشرفت و دریافت منابع مسدود شده باشد؛ به عنوان مثال: به هیچ درخواستی در این زمان پاسخ داده نمی‌شود.
هر چه زودتر فواصل خالی در نمودار آبشاری ظاهر شود، تأثیر بیشتری بر اجرا و ادامه کار می‌گذارد، به طوری که باعث تأخیر در بارگذاری منابع بر صفحه در حال ایجاد می‌شود. اگر یک فاصله طولانی همان اوایل کار بر نمودار آبشاری ظاهر شد، نسبت به خطایابی و بررسی آن اقدام کنید. فواصل خالی در انتهای نمودار آبشاری کار، مشکلی ایجاد نمی‌کنند. به این دلیل که اجرای اسکریپت‌ها انجام شده است و بیشتر منابع درخواست و بررسی شده‌اند. به هرحال توسعه‌دهندگان باید دلایل فواصل خالی را بررسی کنند.
به تعویق انداختن تجزیه جاوا اسکریپت
به تعویق انداختن تجزیه جاوا اسکریپت، فایل‌های جاوا اسکریپت را در صورت امکان تشویق به قرارگیری در انتهای صفحه می‌کند و با این کار فاصله‌ها را کم می‌کند.
در اصل، با به تعویق انداختن بارگذاری منابعی نظیر: جاوا اسکریپت تحلیلی، پیکسل فیسبوک یا حتی ابزارهای بازاریابی مثل Hotjar, Live chat, یا optinmonester می‌توان به کاهش زمان بارگذاری صفحه برای استفاده‌کننده کمک کرد.
زنجیرهای ریدایرکت کند
اگر کدهای چندگانه 3XX را در ابتدای نمودار آبشاری مشاهده کردید، بدانید که این کدها نشانه وجود ریدایرکت‌هایی هستند که باعث تأخیر در عملیات بارگذاری سایت می‌شوند.
بعضی مواقع ریدایرکت‌ها ضروری هستند. اطمینان حاصل کنید که این ریدایرکت‌ها بهینه هستند و باعث ایجاد تأخیر نمی‌شوند.
نمودار آبشاری سرتاسر بلند و طولانی
اگر شما در حال تجربه یک عملکرد ضعیف هستید و هنوز الگوهای برجسته‌ای را مشاهده نکرده‌اید، طول نمودار آبشاری خود را چک کنید. اگر نمودار آبشاری بلند است احتمالاً درخواست‌های فراوانی را اعمال کرده‌اید که باعث عملکرد ضعیف در کار شما شده است. تعداد زیادی درخواست از سرور باعث ایجاد مشکل می‌شود؛ زیرا هر چه تعداد موارد درخواستی بیشتر باشد، سرور زمان بیشتری برای بارگذاری، پیشرفت و ارائه کار صرف می‌کند. بیشماری درخواست‌ها می‌تواند به علل زیر باشد:
یک دلیل برای تعدد درخواست‌ها، اضافه کردن سرویس‌های شخص ثالث است. ویجت‌‌های معروف مثل: رسانه‌های جمعی، یوتیوب و حتی ابزارهای بازاریابی مثل Hotjar یا سرویس‌هایی مثل Live chat از این دسته سرویس‌های شخص ثالث هستند.
اگر مطمئن هستید که این سرویس‌های شخص ثالث نفعی برای صفحه شما ندارند بهتر است همه آن‌ها را کاملاً حذف کنید.
بارگذاری محتوای بیش از حد مثل تصاویر، محصولات، مقاله‌ها و غیره
بارگذاری محتوای زیاد در صفحه باعث تأخیر در بارگذاری صفحه شما می‌شود. درست است که محتوای زیاد برای بازدیدکنندگان از سایت جالب خواهد بود، اما انتظار نداشته باشید آن‌ها همه مطالب را در سایت شما مطالعه کنند.
خلاصه
عملکرد یک وب، تشکیل شده از رابطه بین کدهای بک اند و فرانت اند، پیکربندی سرور، سخت‌افزار و شرایط شبکه است. به عبارت دیگر، عملکرد وب یک عملکرد بسیار پیچیده است. نمودار آبشاری پنجره‌ای را در اختیار شما قرار می‌دهد تا شما قدم به قدم و درخواست به درخواست شاهد بارگذاری سایت مورد نظرتان باشید. با این وجود، این نمودارها کاملاً شفاف نیستند و نیاز به افراد حرفه‌ای و با تجربه دارند که آن‌ها را تجزیه و تحلیل کنند. امیدواریم با این مقاله توانسته باشیم اندکی اطلاعات شما را راجع به نمودار آبشاری ارتقا داده و شما را به فهم اصطلاحات آن آشنا سازیم.