افزایش سرعت سایت یکی از بخش‌های مهم بهینه‌سازی تجربه کاربری و سئو است. برای شناسایی مشکلات عملکردی، باید بدانید کدام درخواست‌ها، فایل‌ها یا فرایندهای سمت سرور باعث کندی صفحه می‌شوند. ابزار GTmetrix گزارش‌هایی برای بررسی عملکرد صفحات ارائه می‌دهد و نمودار آبشاری (Waterfall Chart) یکی از کاربردی‌ترین بخش‌های آن برای تحلیل درخواست‌های شبکه است.
نمودار آبشاری به شما نشان می‌دهد مرورگر چه منابعی را درخواست می‌کند، هر درخواست از کدام دامنه دریافت می‌شود، چه کد وضعیتی دارد و بارگذاری آن چقدر طول می‌کشد. با بررسی این اطلاعات می‌توانید فایل‌های حجیم، درخواست‌های کند، زنجیره تغییر مسیرها و بعضی مشکلات ارتباط با سرور را شناسایی کنید.
در این راهنما با بخش‌های مختلف نمودار آبشاری GTmetrix آشنا می‌شوید و یاد می‌گیرید چطور از اطلاعات آن برای پیدا کردن و اولویت‌بندی مشکلات سرعت سایت استفاده کنید.
نمودار آبشاری در ابزار GTmetrix چیست؟
نمودار آبشاری، فرایند بارگذاری منابع یک صفحه را به‌صورت ردیف‌های زمانی نمایش می‌دهد. هر ردیف به یک درخواست مربوط است، مانند فایل HTML، شیوه‌نامه CSS، اسکریپت JavaScript، تصویر، فونت یا منبعی که از یک سرویس خارجی دریافت می‌شود.
برای شروع، وارد وب‌سایت GTmetrix شوید، نشانی صفحه موردنظر را وارد کنید و آزمایش را اجرا کنید. پس از آماده شدن گزارش، بخش Waterfall را باز کنید. ممکن است محل بعضی گزینه‌ها با توجه به نسخه رابط کاربری گزارش متفاوت باشد.
هرچه گزارش را دقیق‌تر بررسی کنید، راحت‌تر می‌توانید تشخیص دهید مشکل از حجم فایل‌ها، زمان پاسخ‌گویی سرور، درخواست‌های متعدد یا منابع خارجی است. البته طولانی بودن یک ردیف به‌تنهایی به معنی وجود مشکل نیست و باید نوع درخواست و جزئیات زمان‌بندی آن را هم بررسی کنید.
چگونه نمودار آبشاری GTmetrix را تحلیل کنیم؟
نمودار آبشاری اطلاعات زیادی دارد، اما لازم نیست همه جزئیات را هم‌زمان بررسی کنید. ابتدا درخواست‌های طولانی و فایل‌های حجیم را پیدا کنید، سپس کد وضعیت و دامنه منبع آن‌ها را بررسی کنید. در صورت نیاز، جزئیات زمان‌بندی هر درخواست و هدرهای HTTP را باز کنید تا علت احتمالی کندی مشخص شود.
برای مثال، اگر تصویر بزرگی حجم قابل توجهی از صفحه را تشکیل می‌دهد، می‌توانید ابعاد و فرمت آن را بررسی کنید. اگر درخواست HTML زمان زیادی را صرف انتظار برای پاسخ سرور می‌کند، باید کش، اجرای وردپرس، پایگاه داده و وضعیت سرور را بررسی کنید. اگر تعداد زیادی درخواست از دامنه‌های خارجی وجود دارد، منابع شخص ثالث را جداگانه ارزیابی کنید.
بخش‌های اصلی نمودار آبشاری
- URL یا نام منبع: نشانی فایلی که مرورگر درخواست کرده است.
- Status یا وضعیت پاسخ: کد وضعیت HTTP یا وضعیت درخواست را نشان می‌دهد.
- Domain یا دامنه: مشخص می‌کند منبع از سایت خودتان یا یک دامنه خارجی دریافت شده است.
- Size یا اندازه: حجم داده دریافت‌شده را نشان می‌دهد. بسته به گزارش، ممکن است اندازه انتقال‌یافته و اندازه غیرفشرده نیز قابل مشاهده باشد.
- Timeline یا زمان‌بندی: زمان شروع و مدت مراحل بارگذاری درخواست را نمایش می‌دهد.
نام فایل‌ها و منابع در GTmetrix
ستون URL یا نام منبع به شما کمک می‌کند بفهمید هر درخواست مربوط به کدام فایل یا سرویس است. برای مثال، فایل‌هایی با پسوندهای JPG، PNG، WebP و AVIF معمولا تصویر هستند، فایل CSS ظاهر صفحه را کنترل می‌کند و فایل‌های JS برای اجرای کدهای JavaScript به کار می‌روند.
در سایت‌های وردپرسی، نام فایل یا مسیر آن گاهی نام قالب، افزونه یا بخشی از سیستم را مشخص می‌کند. اگر یک فایل خاص زمان زیادی می‌گیرد یا در چند صفحه درخواست می‌شود، می‌توانید از این اطلاعات برای پیدا کردن منبع مشکل کمک بگیرید. با این حال، صرف مشاهده نام یک افزونه در URL به معنی مشکل‌دار بودن آن نیست.
کد وضعیت پاسخ HTTP
کد وضعیت HTTP نشان می‌دهد درخواست چه نتیجه‌ای داشته است. این کد به‌تنهایی معیار سرعت نیست، اما برای شناسایی خطاها، تغییر مسیرهای غیرضروری و درخواست‌های ناموفق اهمیت دارد.
- 1xx: پاسخ‌های اطلاعاتی که در گزارش‌های معمول بارگذاری صفحه کمتر با آن‌ها سروکار دارید.
- 2xx: درخواست با موفقیت پردازش شده است. برای مثال، کد 200 معمولا نشان‌دهنده پاسخ موفق است.
- 3xx: تغییر مسیر. برای مثال، 301 تغییر مسیر دائمی و 302 تغییر مسیر موقت است. تغییر مسیرهای زنجیره‌ای می‌توانند بارگذاری را به تأخیر بیندازند.
- 4xx: خطای مرتبط با درخواست یا دسترسی. برای مثال، 404 به معنی پیدا نشدن منبع و 403 به معنی ممنوع بودن دسترسی است.
- 5xx: خطای سمت سرور. برای مثال، 500 خطای داخلی سرور و 503 نشان‌دهنده در دسترس نبودن موقت سرویس است.
اگر در نمودار آبشاری درخواست ناموفقی مشاهده کردید، ابتدا مشخص کنید کدام فایل یا سرویس دچار مشکل شده است. ممکن است یک خطای 404 مربوط به فایلی غیرضروری باشد یا یک درخواست ناموفق باعث اختلال در بخشی از صفحه شود. خطاها را با توجه به نقش منبع و تأثیر واقعی آن بر بارگذاری بررسی کنید.
دامنه و منبع درخواست‌ها
این ستون نشان می‌دهد هر منبع از چه دامنه‌ای بارگذاری شده است. منابع ممکن است از دامنه اصلی سایت، زیردامنه، CDN یا سرویس‌های شخص ثالث مانند ابزارهای تحلیل، ویدیوها و سرویس‌های خارجی دریافت شوند.
وجود چندین دامنه لزوما نشانه پیکربندی صحیح CDN نیست. اگر درخواست‌های خارجی کند باشند یا برای اتصال به آن‌ها زمان زیادی صرف شود، ممکن است عملکرد صفحه تحت تأثیر قرار بگیرد. منابع شخص ثالثی را که ضروری نیستند حذف کنید و منابع ضروری را از نظر زمان پاسخ و تعداد درخواست‌ها بررسی کنید.
اندازه فایل‌ها و داده‌های انتقال‌یافته
حجم فایل‌ها یکی از اطلاعات مهم در نمودار آبشاری است. فایل‌های بزرگ می‌توانند زمان انتقال را افزایش دهند، اما حجم تنها عامل مؤثر نیست. تعداد درخواست‌ها، شرایط شبکه، فشرده‌سازی، کش و زمان پردازش منابع در مرورگر هم اهمیت دارند.
برای تصاویر، ابعاد مناسب و فرمت بهینه را انتخاب کنید. فایل‌های CSS و JavaScript را هم از نظر حجم، نحوه بارگذاری و میزان استفاده در صفحه بررسی کنید. در صورت نیاز به راهنمایی بیشتر، مقاله بهینه‌سازی تصاویر سایت را مطالعه کنید.
زمان‌بندی درخواست‌ها در نمودار آبشاری
نوار زمان‌بندی هر درخواست نشان می‌دهد مراحل مختلف بارگذاری چقدر طول کشیده‌اند. در GTmetrix، با قرار دادن نشانگر روی نوار یک درخواست می‌توانید جزئیات زمان‌بندی آن را مشاهده کنید. رنگ‌ها و جزئیات نمایش داده‌شده ممکن است با توجه به نسخه گزارش تغییر کنند.
Blocking یا زمان مسدودشدن
زمان Blocking به مدتی اشاره دارد که درخواست پیش از شروع مراحل بعدی در انتظار می‌ماند. این زمان ممکن است به صف درخواست‌های مرورگر یا شرایط برقراری ارتباط مربوط باشد. برای تشخیص علت، باید آن را در کنار زمان‌های DNS، اتصال و ارسال بررسی کنید.
اگر زمان مسدودشدن برای تعداد زیادی از درخواست‌ها بالاست، تعداد منابع، نحوه بارگذاری فایل‌ها و شرایط ارتباط شبکه را بررسی کنید. وجود این زمان به‌تنهایی اثبات نمی‌کند که CSS یا JavaScript علت مشکل است.
DNS Lookup یا جست‌وجوی DNS
مرورگر برای اتصال به یک دامنه باید نشانی IP مربوط به آن را پیدا کند. زمان DNS Lookup مدت انجام این مرحله را نشان می‌دهد. اگر مرورگر یا سیستم قبلا اطلاعات DNS را در کش داشته باشد، این مرحله ممکن است بسیار کوتاه باشد یا زمان قابل توجهی نگیرد.
اگر صفحه به دامنه‌های زیادی وابسته باشد، جست‌وجوی DNS برای چندین دامنه می‌تواند به سربار اتصال اضافه کند. در این شرایط، بررسی ضرورت منابع خارجی و کاهش وابستگی‌های غیرضروری می‌تواند مفید باشد.
Connecting و اتصال به سرور
مرحله اتصال نشان می‌دهد برقراری ارتباط با سرور چقدر طول کشیده است. در اتصال HTTPS، برقراری ارتباط امن TLS نیز می‌تواند بخشی از زمان اتصال باشد. زمان طولانی ممکن است به شرایط شبکه، فاصله سرور، ایجاد اتصال جدید یا مشکلات ارتباطی مربوط باشد.
اگر درخواست‌های متعدد به یک دامنه زمان اتصال زیادی دارند، اتصال مجدد، تنظیمات شبکه و وضعیت سرور را بررسی کنید. اگر فقط یک درخواست مشکل دارد، ممکن است علت به همان منبع یا مسیر ارتباطی آن مربوط باشد.
Sending یا ارسال درخواست
مرحله Sending زمان ارسال درخواست از مرورگر به سرور را نشان می‌دهد. در بسیاری از درخواست‌های ساده، این مرحله کوتاه است. در درخواست‌هایی که داده‌ای به سرور ارسال می‌شود، مانند برخی درخواست‌های POST، حجم داده و شرایط شبکه می‌توانند بر مدت آن اثر بگذارند.
Waiting یا انتظار برای پاسخ سرور
زمان Waiting مدت انتظار مرورگر برای دریافت پاسخ پس از ارسال درخواست را نشان می‌دهد. این بخش برای بررسی زمان پاسخ‌گویی سرور اهمیت زیادی دارد و با زمان دریافت کامل فایل یکسان نیست.
اگر انتظار برای پاسخ درخواست HTML طولانی باشد، زمان پاسخ اولیه سرور (TTFB) را بررسی کنید. عواملی مانند نبود کش صفحه، اجرای سنگین وردپرس، کوئری‌های پایگاه داده، افزونه‌ها یا محدودیت منابع سرور ممکن است در این وضعیت نقش داشته باشند. برای تشخیص دقیق‌تر باید گزارش را در کنار وضعیت سرور و تنظیمات سایت تحلیل کرد.
Receiving یا دریافت داده‌ها
مرحله Receiving به مدت دریافت داده‌های پاسخ از سرور مربوط است. فایل‌های بزرگ یا اتصال کند می‌توانند این زمان را افزایش دهند. اگر یک تصویر یا فایل ویدیویی زمان زیادی برای دریافت نیاز دارد، حجم و ابعاد آن را بررسی کنید. برای فایل‌های CSS و JavaScript نیز اندازه انتقال‌یافته و فشرده‌سازی را در نظر بگیرید.
اگر زمان دریافت فایل زیاد است، ابتدا بررسی کنید که فایل واقعا حجیم است یا سرعت انتقال پایین است. این دو حالت راه‌حل یکسانی ندارند: در حالت اول کاهش حجم و بهینه‌سازی فایل اهمیت دارد و در حالت دوم باید شرایط شبکه، سرور و روش تحویل محتوا را بررسی کنید.
خطوط رویداد در نمودار آبشاری GTmetrix
علاوه بر نوارهای مربوط به درخواست‌ها، خطوط رویداد زمان رسیدن صفحه به بعضی نقاط مهم را نشان می‌دهند. این رویدادها به شما کمک می‌کنند زمان شروع نمایش محتوا، آماده شدن ساختار صفحه و پایان مراحل اصلی بارگذاری را بهتر درک کنید. توضیحات و رنگ خطوط ممکن است در نسخه‌های مختلف گزارش متفاوت باشد.
First Paint و First Contentful Paint
First Paint (FP) زمانی را نشان می‌دهد که مرورگر برای نخستین بار چیزی را روی صفحه نمایش می‌دهد. این تغییر ممکن است فقط شامل پس‌زمینه یا یک عنصر ساده باشد.
First Contentful Paint (FCP) زمانی ثبت می‌شود که نخستین محتوای قابل مشاهده، مانند متن، تصویر یا بخشی از محتوای صفحه، نمایش داده شود. این معیار برای بررسی شروع نمایش محتوا کاربردی‌تر است، اما به‌تنهایی کیفیت کل تجربه کاربر را مشخص نمی‌کند.
DOM Content Loaded
رویداد DOMContentLoaded زمانی اجرا می‌شود که مرورگر ساختار HTML را پردازش کرده و درخت DOM آماده شده باشد و شرایط لازم برای اجرای این رویداد فراهم شده باشد. این رویداد به معنی پایان بارگذاری تمام تصاویر، ویدیوها و سایر منابع صفحه نیست.
Onload و Fully Loaded
رویداد Onload زمانی رخ می‌دهد که بارگذاری منابعی که تحت پوشش این رویداد هستند به پایان رسیده باشد. در مقابل، Fully Loaded در GTmetrix زمان تکمیل شرایط بارگذاری تعریف‌شده برای پایان آزمایش را نشان می‌دهد و ممکن است درخواست‌های دیرتر یا فعالیت‌های پس از Onload را هم در نظر بگیرد.
به همین دلیل، Fully Loaded همیشه معادل زمانی نیست که کاربر محتوای اصلی را مشاهده می‌کند. برای ارزیابی تجربه واقعی، معیارهایی مانند Largest Contentful Paint (LCP)، Interaction to Next Paint (INP) و Cumulative Layout Shift (CLS) را هم بررسی کنید.
چگونه از نمودار آبشاری برای افزایش سرعت سایت استفاده کنیم؟
برای استفاده عملی از گزارش GTmetrix، بهتر است مراحل زیر را به ترتیب انجام دهید:
- صفحه مناسب را انتخاب کنید: صفحه اصلی، صفحات خدمات و صفحات مهم از نظر بازدید یا تبدیل را جداگانه آزمایش کنید.
- شرایط آزمایش را ثابت نگه دارید: هنگام مقایسه نتایج، دستگاه آزمایش، محل تست و تنظیمات اصلی را تا حد امکان یکسان نگه دارید.
- درخواست‌های طولانی را پیدا کنید: نوارهای طولانی را بررسی کنید و با مشاهده جزئیات بفهمید زمان صرف اتصال، انتظار یا دریافت شده است.
- فایل‌های حجیم را بررسی کنید: تصاویر، ویدیوها، فونت‌ها و فایل‌های CSS و JavaScript را بر اساس حجم و نقش آن‌ها ارزیابی کنید.
- خطاهای درخواست را شناسایی کنید: کدهای HTTP را بررسی کنید و خطاهای مهم یا تغییر مسیرهای غیرضروری را رفع کنید.
- منابع خارجی را ارزیابی کنید: درخواست‌های سرویس‌های شخص ثالث را بررسی کنید و موارد غیرضروری را حذف یا روش بارگذاری آن‌ها را اصلاح کنید.
- پس از تغییرات دوباره آزمایش کنید: نتیجه را با گزارش اولیه مقایسه کنید و مطمئن شوید که بهبود مشاهده‌شده تکرارپذیر است.
در وردپرس، کندی ممکن است از قالب، افزونه‌ها، پایگاه داده، تنظیمات کش یا منابع سرور ناشی شود. نمودار آبشاری سرنخ‌های مهمی در اختیار شما قرار می‌دهد، اما برای تشخیص علت اصلی باید آن را با گزارش‌های دیگر و بررسی فنی سایت ترکیب کنید.
جمع‌بندی
نمودار آبشاری GTmetrix ابزاری کاربردی برای مشاهده ترتیب بارگذاری منابع، بررسی زمان درخواست‌ها و شناسایی مشکلات احتمالی عملکرد سایت است. با بررسی نام فایل‌ها، کدهای وضعیت HTTP، دامنه منابع، حجم داده‌ها و جزئیات زمان‌بندی می‌توانید محل‌هایی را که نیاز به بررسی بیشتر دارند پیدا کنید.
با این حال، برای افزایش سرعت سایت نباید فقط به امتیاز کلی یا یک نوار طولانی توجه کنید. ابتدا عامل مؤثر بر تجربه کاربر را شناسایی کنید، تغییر مناسب را اعمال کنید و سپس نتیجه را دوباره بسنجید. این روش کمک می‌کند زمان و منابع خود را روی اصلاحاتی متمرکز کنید که بیشترین فایده را برای سایت دارند.
