نمودار آبشار Waterfall Chart ، نموداری است نشان می‌دهد چطور یک مرورگر، صفحه وب‌سایت را باز کرده و تحویل می‌دهد. هر ردیف از این نمودار، یک درخواست جدا از مرورگر می‌باشد. نمودارهای بلندتر نشان دهنده‌ی درخواست‌های بیشتری برای باز کردن صفحات وب‌سایت است. پهنای ردیف‌ها نشان می‌دهد که برای مرورگرها چه مقدار زمان می‌برد تا به منبع پاسخ دهند و آن پاسخ را دانلود نمایند.
- معرفی نمودار آبشار
- چرا نمودار آبشار مفید است؟
- از زیاده روی اجتناب کنید
- 1. نام فایل
- 2. وضعیت پاسخ HTTP
- درخواست موفقیت‌آمیز = کدهای وضعیت 3xx/2xx/1xx
- درخواست ناموفق = کدهای وضعیت 5xx/4xx
- 3. منشأ فایل
- 4. اندازه فایل
- 5. تقسیم‌بندی زمان بارگیری یا لود شدن
- هدرهای درخواست Request Headers
- هدرهای پاسخ (Response Headers)
- زمان‌بندی درخواست
- رنگ قهوه‌ای = مسدود کردن (Blocking)
- رنگ سبز دودی = DNS Lookup
- رنگ سبز = اتصال (Connecting)
- قرمز = ارسال (Sending)
- بنفش = انتظار
- خاکستری = دریافت (Receiving)
- زمان بندی‌های رویداد (Event Timings)
- خط سبز – اولین رنگ
- خط سبز – اولین رنگ محتوا
- خط آبی – DOM Loaded
- خط قرمز – Onload
- خط بنفش – کاملاً لود شده است (Fully Loaded)
به‌عنوان یک مبتدی، خواندن نمودار آبشار ممکن است در نگاه اول بسیار سخت و حتی ترسناک باشد. در بخش اول نمودار آبشار ما، این‌که هر نوار، خط و رنگ در یک نمودار آبشار به چه معناست، توضیح داده شده است.
معرفی نمودار آبشار
نمودار آبشار چیست؟ بیایید نگاهی به آن بیندازیم:
نمودار فوق رفتار بارگذاری درخواست به درخواست وب‌سایت شما را نشان می‌دهد. هر اسکریپت، پرونده رسانه‌ای و یا منبع شخص ثالث درخواست‌های صفحه شما در اینجا نمایش داده می‌شود.
چرا نمودار آبشار مفید است؟
از آنجا که نمودارهای آبشار رفتار بارگذاری را تجسم می‌کنند، شما می‌توانید ببینید که به چه ترتیب بارگذاری شده است و همچنین جزئیات آن را درخواست کنید. همچنین مدت‌زمان و زمان اجرای درخواست‌ها نیز نمایش داده می‌شوند و طول‌های مختلف نمودارها نشانگر مدت‌زمان درخواست، بارگیری و یا اجرای هر یک از آنها است.
همه این داده‌ها در اشکال‌زدایی مشکلات عملکرد و همچنین کلیات مشکلات صفحه، کمک می‌کند.
درواقع، به‌عنوان یک کل، چیزهای زیادی برای پذیرش وجود دارد، اما اگر این چیزها را به‌صورت بخش تقسیم بندی کنید، چندان هم بد نیست.
از زیاده روی اجتناب کنید
ما با مشخص کردن معنای هر بخش، خط و رنگ شروع خواهیم کرد.
نمودارهای آبشار توسط ستون‌ها دسته‌بندی می‌شوند که پنج تا از آنها را مشاهده می‌کنید:
هر آنچه در تصویر مشاهده می‌کنید از چپ به راست عبارت‌اند از:
1. نام فایل
این نام فایل یا منبعی است که توسط مرورگر وب بارگیری می‌شود و در نمودار آبشار، با روش HTTP و معمولاً با پیشوند GET یا POST دیده می‌شوند (لازم نیست نگران این موضوع باشید).
ستون اول نمودار آبشار نام تمام فایل‌های درخواست شده توسط سایت شما را نشان می‌دهد.
بعضی اوقات این‌ها می‌توانند بسیار آشفته و ترسناک به نظر برسند. سعی کنید خیلی به آن توجه نکنید. در حقیقت، احتمالاً لازم نخواهد بود که بدانید هرکدام از این پرونده‌ها چیست.
با جستجوی نام فایل، مسیر کامل آن را نشان می‌دهد و برای بارگیری آن در برگه دیگر، Ctrl + کلیک را فشار دهید. اگر می‌خواهید فایل دقیقی را که ارجاع شده است را مشاهده نمایید، این روش مفید است.
وقتی که در حال مرور لیست هستید، سعی کنید بر پسوند فایل‌ها دقت کنید. پرونده‌های”.jpg” و “.png” منابع تصویری و پرونده‌های “.css” شیوه‌نامه (stylesheet) خواهند بود. همچنین پرونده‌های “.js” جاوا اسکریپت می‌باشند.
همیشه به کلمات کلیدی که در نام این فایل‌ها موجودند و نشان دهنده نوع آنها می‌باشند توجه نمایید.
با دیدن نام فایل ممکن است افزونه خاصی که دلیل مشکلات عملکردتان است را پیدا کنید.
به‌عنوان مثال، اگر از WordPress استفاده می‌کنید، ممکن است نام افزونه‌ای که نصب کرده‌اید یا نام تمی که استفاده می‌کنید را بشناسید.
2. وضعیت پاسخ HTTP
وضعیت پاسخ HTTP از یک کد وضعیت و یک پیامی که توسط انسان قابل خواندن می‌باشد (مانند 404 یافت نشد) تشکیل شده است. وضعیت پاسخ، از سرور برگردانده شده و به مرورگر می‌گوید که آیا این درخواست موفقیت‌آمیز بود یا خیر.
در اینجا یک تقسیم‌بندی سریع از دسته‌بندی های کد وضعیت مشاهده می‌شود:
درخواست موفقیت‌آمیز = کدهای وضعیت 3xx/2xx/1xx
کدهای وضعیت بیشتر باید در 200/200 خوب باشد.
- 1xx_ اطلاعاتی – بندرت در نمودار آبشار دیده می‌شود.
- 2xx_ موفق – درخواست موفقیت‌آمیز بود (بیشتر کد 200).
- 3xx_ هدایت مجدد – درخواست هدایت شد (هدایت مجدد 301 رایج‌ترین کد است).
درخواست ناموفق = کدهای وضعیت 5xx/4xx
نمودارهای آبشار می‌توانند خطاهای درخواست را به‌سرعت در صفحه شما نشان دهد
- 4xx _ خطای مشتری – در درخواست خطایی رخ داد (فایل 404 یافت نشد، 401 غیرمجاز، 403 ممنوع و غیره)
- 5xx_ خطای سرور – سرور در رسیدگی به درخواست ناموفق ماند (500 خطای سرور داخلی، 503 سرویس غیرقابل دسترسی و غیره)
3. منشأ فایل
اینجا همان بخشی است که فایل بارگیری می‌شود. اگر از منابع شخص ثالث زیادی استفاده می‌کنید (embed YouTube، ابزارک های فیس بوک و غیره)، نام های میزبانی (hostname) را مشاهده می‌کنید که مال شما نیستند.
منشأ فایل به شما می‌گوید که منبع از کجا می‌آید.
اگر از شبکه تحویل محتوا (CDN) استفاده می‌کنید، ممکن است بسیاری از فایل‌ها یا منابع خود را از این منبع مشاهده کنید که این یکی از راه‌های تعیین صحیح بودن پیکربندی CDN شما است.
4. اندازه فایل
همانطور که از نام آن پیداست، به اندازه منتقل شده فایل یا منبع اشاره دارد. کل حجم فایل ترکیبی از تمام درخواست‌های شما اندازه کل صفحه را تشکیل می‌دهد. هرچه این مقدار کمتر باشد، صفحه شما برای لود شدن سبک‌تر است (و سریع‌تر).
ستون اندازه فایل در نمودار آبشار.
اگر می‌بینید که سایز فایل‌ها خیلی بزرگ است (به‌خصوص در مورد تصاویر و فیلم‌ها)، باید قبل از رفتن به نمودار آبشار، ابتدا این مشکل را حل کنید.
فایل‌هایی با اندازه‌های بزرگ، لود شدن صفحه را به شدت طولانی می‌کنند!
برای دیدن سایز منتقل شده در مقابل سایز فشرده‌شده (اگر فشرده‌شده باشد)، نشانگر موس را روی سایز حرکت دهید
5. تقسیم‌بندی زمان بارگیری یا لود شدن
این بخش جایی است که نمودار آبشار مدت زمان خاص لازم برای بارگیری هر درخواست را تقسیم‌بندی می‌کند.
اینجاست که بیشتر وقت خود را در یک نمودار آبشار صرف خواهید کرد!
الگوی میله‌های آبشار، نشان دهنده رفتار بارگذاری صفحه شما است. مشکلات عملکرد وب‌سایت می‌تواند تا حد زیادی در این بخش تشخیص داده شود.
هدرهای درخواست / پاسخ (Request/Response Headers)
با کلیک بر روی درخواست، هدرهای درخواست / پاسخ نشان داده می‌شوند. آنها حاوی اطلاعات زیادی در رابطه با نحوه ارائه منابع شما هستند.
ما قصد داریم تا با یک پست، به درخواست / پاسخ با جزئیات بیشتری بپردازیم. در اینجا چند مورد اصلی وجود دارد که باید در هر بخش به آنها توجه کنید:
هدرهای درخواست Request Headers
این‌ها هدرهای HTTP هستند که مرورگر به سرور ارسال می‌کند. برای یک مبتدی، هیچ چیزی در هدرهای درخواست وجود ندارد.
هدرهای درخواست هدرهای HTTP هستند که مرورگر به سرور ارسال می‌کند.
هدرهای پاسخ (Response Headers)
این‌ها عناوین HTTP هستند که سرور آنها را به‌عنوان پاسخ ارسال می‌کند و گاهی اوقات کلید تشخیص مشکلات مربوط به عملکرد اصلی هستند.
هدرهای پاسخ هدرهای HTTP هستند که سرور به مرورگر ارسال می‌کند.
زمان‌بندی درخواست
به نمودار آبشار ساده شده زیر نگاهی بیندازید:
نمایی ساده از نمودار آبشار.
بلافاصله متوجه خواهید شد که در مقابل هر درخواست، مجموعه‌ای از میله‌های رنگی در سمت راست وجود دارد.
به طور خلاصه، هر رنگ بخش متفاوتی از فرآیند بارگیری آن منبع خاص را نشان می‌دهد.
بیایید رنگ‌ها و آنچه را که آنها نشان می‌دهند را تجزیه کنیم.
رنگ قهوه‌ای = مسدود کردن (Blocking)
مسدود کردن، به مدت زمانی گفته می‌شود که یک درخواست در صف مرورگر برای شروع شدنش صرف می‌کند.
مسدود کردن مانع پردازش درخواست‌های بعدی می‌شود.
مواردی که می‌توانند به زمان انسداد کمک کنند عبارت‌اند از:
- منتظر ماندن برای یک اتصال در دسترس
- بارگیری یا اجرای JavaScript یا CSS (اگرچه مرورگرها برای کمتر کردن آن، درحال هوشمندتر شدن می‌باشند).
- زمان اتصال SSL(معمولاً در time Connection گنجانده شده است)
- احراز هویت HTTP (درخواست اضافی لازم برای تنظیم تأیید اعتبار).
رنگ سبز دودی = DNS Lookup
قبل از برقراری ارتباط با سرور، باید نام هاست (host) به IP تبدیل شود که این همان DNS Lookup است.
زمان DNS lookup نشان می‌دهد که چه مدت طول می‌کشد تا نام دامنه به آدرس IP تبدیل شود
درخواست‌های DNS ذخیره می‌شوند، بنابراین ممکن است زمان DNS lookup در تست‌های بعدی متفاوت باشد. به همین دلیل نیز ممکن است که در اولین تست خود زمان DNS lookup بیشتری را مشاهده کنید. این نکته را در هنگام مقایسه نمودارهای آبشار به خاطر داشته باشید.
رنگ سبز = اتصال (Connecting)
این همان زمان لازم برای ایجاد ارتباط TCP بین سرور و هاست یا کاربر است.
زمان اتصال همان مدت زمان اتصال سرور شما به هاست یا کاربر است.
قرمز = ارسال (Sending)
این مدت زمانی است که مرورگر برای ارسال درخواست به سرور، نیاز دارد. اگر درخواست PUT یا POST باشد، این مدت شامل زمان صرف شده برای بارگذاری هر داده با آن درخواست می‌شود.
زمان ارسال معمولاً مشکل به حساب نمی‌آید.
بنفش = انتظار
این مدت زمانی است که در انتظار پاسخ سرور هستیم.
زمان انتظار نشان می‌دهد که سرور شما چقدر سریع به یک درخواست پاسخ می‌دهد.
دلایل زیادی وجود دارد که ممکن است موجب طولانی شدن مدت انتظار شما شود.
خاکستری = دریافت (Receiving)
این مدت زمانی است که مرورگر برای دانلود پاسخ سرور صرف می‌کند.
میله‌های دریافت بلند به طور معمول نشان دهنده بزرگ بودن سایز فایل می‌باشند.
مواردی که می‌تواند باعث طولانی شدن میله‌های دریافت شوند عبارت‌اند از:
- دانلود فایل‌های بزرگ و حجیم
- محدود شدن پهنای باند با دانلود همزمان چند فایل
- مشکلات شبکه
زمان بندی‌های رویداد (Event Timings)
خطوط رویداد در نمودار آبشار Waterfall Chart .
این خطوط بیانگر زمان‌بندی خاصی‌اند که در آن به نقاط خاصی می‌رسند. در زیر آنچه را که هر رنگ نشان می‌دهد بیان شده است:
خط سبز – اولین رنگ
رنگ اول لحظه‌ای است که هر رندر (Render) در صفحه وب شروع می‌شود. این می‌تواند نشان دهنده لود شدن لوگو، بارگذاری یک تصویر و یا هر چیزی که کاربر می‌تواند در صفحه مشاهده کند باشد.
خط سبز – اولین رنگ محتوا
اولین رنگ محتوا هنگامی که تمام آن رنگ شده باشد آغاز می‌شود؛ یعنی چیزی که در DOM (Document Object Model) تعریف شده است. این می‌تواند متن، یک تصویر یا یک بوم رندر باشد.
خط آبی – DOM Loaded
این زمانی است که Document Model Object (DOM) توسط مرورگر آماده تلقی می‌شود. بیش از حد نگران این مورد نباشید، چرا‌که بسیار سریع و بسیار فنی می‌شود.
خط قرمز – Onload
Onload به این معنی است که صفحه و تمام عناصر تشکیل دهنده آن دانلود و پردازش توسط مرورگر وب را به پایان رسانده‌اند.
خط بنفش – کاملاً لود شده است (Fully Loaded)
Fully Loaded بدان معنی است که رویداد Onload کاملاً انجام شده است و به مدت 2 ثانیه هیچ فعالیت شبکه‌ای صورت نگرفته است.
تفاوت بین چهار ابزار GTmetrix,PageSpeed Insights, WebPagetest, Pingdom