آموزش جی تی متریکس | قسمت 10 - واترفال (waterfall) چیست؟

واترفال (waterfall) چیست و  چارت واترفال شامل چه مواردی است؟

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

آموزش ابزار جی تی متریکس (GTmetrix)

چارت یا فهرست واترفال (Waterfall) چیست؟

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

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

استفاده از چارت واترفایل  (waterfall) چه سودی برای شما دارد؟

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

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

 شاید این درخواست‌ها و تحلیل‌‌ها پیچیده به نظر برسند، اما اگر آنها را بخش به بخش مرور کنید، می‌بینید که به آن سختی که فکر می‌کردید نیست. 

قدم به قدم در فهرست واترفال (waterfall) در جی تی متریکس

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

1) نام فایل

اولین ستون از چپ، نام فایل را به شما نشان می‌دهد. درواقع منبع یا عنصری که مرورگر آن را بارگذاری می‌کند. در فهرست واترفال، این نام در دو دسته‌بندی GET یا POST قرار می‌گیرد که دو نوعِ مختلف از متد HTTP است. البته معمولاً لازم نیست نگران این بخش از فهرست باشید. 

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

اگر نشانگر ماوس خود را روی هر یک از این موارد ببرید، آدرس کامل لینک را می‌بینید. با نگه‌داشتن کلید کنترل و کلیک کردن روی این آدرس می‌توانید آن را در تب جدید باز کنید. این کار زمانی مفید است که مشکلی در یکی از این فایل‌ها وجود دارد و شما می‌خواهید بدانید کدام فایل ایراددار است. اگر به پسوندهای فایل‌ها نگاه کنید متوجه می‌شوید که هر یک از آنها چه عناصری از صفحه هستند. پسوند " jpg " و "png" به فایل‌های تصاویر تعلق دارد، "css" به مجموعه کدهای طراحی و " js" نشانگر فایل‌های جاوااسکریپت است. 

2) وضعیت پاسخ‌دهی 

در ستون دوم وضعیت پاسخدهی عنصر یا فایل را مشاهده می‌کنید. این بخش شامل یک کد سه رقمی و یک پیغام است که معنی کد را برای فردی که آن را می‌بیند شرح می‌دهد. احتمالاً در مراجعه به صفحات وب‌سایت بارها با کد 404 مواجه شده‌اید. این کد نشان‌دهندۀ در دسترس نبودن صفحه‌ای است که دنبال آن می‌گردید و احتمالا پیغامی مشابه با "صفحه مورد نظر پیدا نشد" هم دیده‌اید. ستون دومِ فهرست واترفال هم در واقع به کدهای مشابه 404 اشاره دارد. این ستون نشان می‌دهد که آیا درخواست مرورگر از سوی سرور پاسخ داده شده است یا خیر. 

برای درک معنای کدهایی که ممکن است در این ستون ببینید، آنها را به اختصار توضیح می‌دهیم: 

1. تمام کدهایی که با 1 شروع می‌شوند: این کدها اطلاعاتی را منتقل می‌کنند و به‌ندرت در واترفال دیده می‌شوند. 
2. تمام کدهایی که با 2 شروع می‌شوند: این کدها نشان از ردوبدل شدنِ موفقیت‌آمیز درخواست‌ها دارند. پرتکرارترین کدِ واترفال هم همین کدهای خانواده 200 است. 
3. تمام کدهایی که با 3 شروع می‌شوند: این کدها نشانۀ تغییر مسیر یا آدرس‌دهی هستند و نشان می‌دهند که انتقالی در درخواست وجود داشته است.
4. تمام کدهایی که با 4 شروع می‌شوند: این کد نشانه درخواست ناموفق است و شامل انواع کدهایی است که نشان از عدم دسترسی یا محقق شدن درخواست دارد. 
5. تمام کدهایی که با 5 شروع می‌شوند: این کدها هم نشانه درخواست ناموفق است و نشان از مشکلات مرتبط با سرور دارد. 

3) منبع فایل

منبع فایل به شما نشان می‌دهد که فایل از کجا بارگذاری می‌شود. اگر عناصر زیادی از صفحۀ شما از منبع خارجی بارگذاری شوند، مثلا یوتیوب یا فیسبوک، نامی که در این بخش مشاهده می‌کنید سایت خودتان نخواهد بود و منبعی است که فایل از آن فراخوانی می‌شود.

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

4) حجم فایل 

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

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

5) زمان بارگذاری صفحه

در آخرین ستون در فهرست واترفال، زمان صرف شده برای بارگذاری هر یک از عناصر را می‌بینید. این بخش مهم‌ترین بخشِ فهرست است و باید بیشترین توجه را به این بخش داشته باشید. 

عناوینِ درخواست‌ و پاسخ (request header – response header )

کلیک کردن روی هر یک از عناصر باعث می‌شود که سربرگ درخواست/پاسخ به شما نمایش داده شود. در پنجره باز شده مجموعه‌ای از اطلاعات را درباره منبع مورد نظر پیدا می‌‌کنید. یکی از این موارد عناوین یا هِدِرها هستند. این‌ عناوین، هدرهای HTTP  هستند که مرورگر به سرور ارسال می‌کند. افرادی که هنوز دانش فنی لازم را ندارند، نمی‌توانند تغییرات بخصوصی در این بخش اعمال کنند.  

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

نقش عناوین در این ردوبدل شدن اطلاعات بسیار اهمیت دارد چون در مورد درخواست‌ها و پاسخ‌های ارسالی اطلاعات تکمیلی به سرور می‌دهند. این اطلاعات تکمیلی می‌تواند شامل نسخه مرورگر شما، فرمت‌های مجاز و کنترل کردن کَش باشد. 

 در فهرست واترفال، عناوین درخواست خیلی مهم نیستند، این عناوین پاسخ یا Response Headers هستند که باید به آنها توجه کنید چون اگر مشکلی از جانب سرور داشته باشید، در این بخش قابل رویت خواهند بود. 

به عبارتی، عناوین پاسخ نشان می‌دهند که پیکربندی، تنظیمات یا ویژگی‌های درخواست چه بوده است. به کمک این عناوین تشخیص می‌دهید که آیا فایل مورد نظر شما: فشرده‌ بوده، کش شده، از CDN بارگذاری شده، وضعیت keep alive آن فعال بوده، از  پروتکل HTTP/2 استفاده کرده و تغییر آدرس‌های داخلی داشته است. 

زمانبندی درخواست 

 به تصویر زیر دقت کنید، آنچه می‌بینید شکل ساده شدۀ یک فهرست واترفال است. 

همان‌طور که می‌بینید، جلوی هر درخواست مجموعه‌ای از رنگ‌ها قرار دارد. هر کدام از این رنگ‌ها نشانۀ بخشی از روند بارگذاری عنصر است. در این بخش متوجه می‌شوید که هر کدام از این رنگ‌ها چه معنی و مفهومی دارد. 

 قهوه‌ای – انسداد 

رنگ قهوه‌ای نشان‌دهنده مدت زمانی است که درخواست در صف انتظار مرورگر بوده است. مسائل مختلف می‌تواند این مدت زمان را تحت تأثیر قرار دهد. مسائلی مانند: 

• درخواست منتظر برقراری ارتباط یا کانکشن بوده است. این اتفاق زمانی رخ می‌دهد که شما از حداکثر کانکشن‌های مجازِ هاست استفاده می‌کنید. 
• دانلود یا اجرای فایل‌های جاوااسکریپت و CSS برقراری ارتباط را به تعویق انداخته است. البته مرورگرهای روز‌به‌روز پیشرفته‌تر می‌شوند و توانایی‌هایشان برای کوتاه کردن این زمان بیشتر می‌شود. 
• زمانی برای کانکشن SSL صرف شده که معمولا در زمان ارتباط محاسبه می‌شود. 
• زمانی برای اجرای درخواست‌های مرتبط با اعتبارسنجی HTTP صرف می‌شود و درخواست‌های دیگر را به تعویق میاندازد. 

فیروزه‌ای – جستجو DNS

گفتیم وقتی صفحه‌ای باز می‌شود، درخواست‌هایی از مرورگر به سرور فرستاده می‌شود. اما قبل از اینکه این درخواست‌ها ارسال شوند، آدرس سایت (مثلا SEOlab.ir)  باید تبدیل به یک IP شوند. به این روند DNS Lookup  گفته می‌شود. رنگ فیروزه‌ای هم مدت زمانی را نشان می‌دهد که طول کشیده تا این روند تکمیل شود. درخواست‌های DNS کش می‌شوند، بنابراین تکرار آنالیز، احتمالا در نتیجۀ این بخش تأثیرگذار خواهد بود.

بنابراین تعجب نکنید اگر در آنالیزهای بعدی و بدون اینکه تغییری در سایت داده باشید، ناگهان مدت زمان DNS Lookup کاهش پیدا کرد. فراموش نکنید که این نکته را در تحلیلتان از نتایج فهرست واترفال در نظر بگیرید. 

سبز – برقراری ارتباط 

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

قرمز – ارسال 

این رنگ نشان‌دهنده زمانی است که طول می‌کشد تا مرورگر درخواست را به سرور ارسال کند. اگر روش ارسال PUT یا POST باشد، این عدد شامل مدت زمان سپری شده تا آپلود داده‌های مورد نیاز برای درخواست هم می‌شود. 

 بنفش – انتظار 

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

خاکستری – دریافت 

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

زمانبندی رویدادها 

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

 خط سبز – اولین نمایش 

خط سبز لحظه‌ای را نشان می‌دهد که فراخوانی آغاز می‌شود و اولین محتوای صفحه به نمایش در می‌آید. این محتوا می‌تواند مثلا لوگوی صفحه، یک تصویر یا هر چیزی باشد که کاربر روی مرورگر خود می‌بیند. 

 خط آبی – بارگذاری DOM

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

خط قرمز – اتمام دانلود 

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

خط بنفش – اتمام بارگذاری 

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

حال چه کنیم؟

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