برای بررسی سریع عملکرد وردپرس، چند اقدام شناخته‌شده مانند فعال‌سازی کش، بهینه‌سازی تصاویر و کاهش فایل‌های غیرضروری CSS و JavaScript نقطه شروع مناسبی هستند. اما حتی اگر این موارد را انجام داده باشید، باز هم ممکن است بخش‌هایی از سایت شما به بهینه‌سازی نیاز داشته باشند.
ابزارهایی مانند PageSpeed Insights اطلاعات ارزشمندی درباره عملکرد صفحات ارائه می‌کنند، اما برای بررسی دقیق‌تر نحوه بارگذاری فایل‌ها و شناسایی برخی مشکلات فنی، بهتر است از نمودار آبشاری یا Waterfall Chart هم کمک بگیرید.
نمودار آبشاری نشان می‌دهد مرورگر چه درخواست‌هایی ارسال می‌کند، هر درخواست چه زمانی شروع می‌شود، چقدر طول می‌کشد و آیا در مسیر بارگذاری با تأخیر، ریدایرکت یا خطا مواجه می‌شود. با کمی تمرین، می‌توانید در چند ثانیه نشانه‌های مهم مشکلات عملکردی را پیدا کنید. البته تشخیص علت اصلی و انتخاب راهکار مناسب ممکن است به بررسی دقیق‌تری نیاز داشته باشد.
آنالیز سریع وردپرس با نمودار آبشاری، ۷ نکته برای بررسی سرعت سایت
چرا بررسی نمودار آبشاری اهمیت دارد؟
ابزارهای بررسی سرعت سایت معمولا توصیه‌هایی مانند فعال‌سازی کش، بهینه‌سازی تصاویر، کاهش حجم فایل‌های CSS و JavaScript، استفاده از هاست مناسب و بهره‌گیری از CDN را مطرح می‌کنند. این اقدامات مهم هستند، اما همیشه مشخص نمی‌کنند که کدام فایل یا درخواست، در یک صفحه مشخص باعث ایجاد تأخیر شده است.
- کش سمت سرور و مرورگر را بررسی کنید.
- حجم و ابعاد تصاویر را متناسب با محل نمایش آن‌ها تنظیم کنید.
- فایل‌های CSS و JavaScript غیرضروری را شناسایی کنید.
- زمان پاسخ‌گویی سرور و کیفیت زیرساخت میزبانی را ارزیابی کنید.
- در صورت نیاز، نحوه استفاده از CDN را بررسی کنید.
با این حال، ممکن است سایت شما تمام این موارد را رعایت کرده باشد، اما همچنان یک فونت خارجی، اسکریپت تبلیغاتی، افزونه چت، درخواست کند به پایگاه داده یا زنجیره‌ای از ریدایرکت‌ها، بارگذاری صفحه را به تأخیر بیندازد.
اینجاست که نمودار آبشاری ارزش خود را نشان می‌دهد. این نمودار، درخواست‌های شبکه را در طول زمان نمایش می‌دهد و به شما کمک می‌کند به جای حدس زدن، بررسی را از بخش‌هایی شروع کنید که شواهد بیشتری از وجود مشکل در آن‌ها دیده می‌شود.
چگونه به نمودار آبشاری دسترسی پیدا کنیم؟
برای شروع می‌توانید از ابزارهای زیر استفاده کنید. هرکدام امکانات و شیوه نمایش اطلاعات متفاوتی دارند، اما همگی می‌توانند برای بررسی درخواست‌های بارگذاری مفید باشند.
- Google PageSpeed Insights برای بررسی شاخص‌های عملکرد، داده‌های کاربران واقعی در صورت وجود و پیشنهادهای بهینه‌سازی کاربرد دارد.
- WebPageTest امکان بررسی جزئیات بارگذاری، نمودار آبشاری و تصاویر مراحل رندر صفحه را فراهم می‌کند.
- GTmetrix برای بررسی عملکرد صفحات، درخواست‌ها و جزئیات بارگذاری منابع مناسب است.
- Pingdom ابزار دیگری برای بررسی عملکرد و زمان بارگذاری صفحات است که جزئیات درخواست‌ها را نمایش می‌دهد.
در ابزار انتخابی خود، آدرس صفحه مورد نظر را وارد کنید و پس از پایان آزمون، بخش Waterfall یا نمودار درخواست‌ها را باز کنید. نام و محل این بخش ممکن است با توجه به نسخه ابزار تغییر کند.
نمودار آبشاری در نگاه اول ممکن است پیچیده به نظر برسد، زیرا تعداد زیادی درخواست و اطلاعات فنی را کنار هم نمایش می‌دهد. با شناخت چند بخش اصلی، می‌توانید سریع‌تر متوجه شوید کدام قسمت‌ها به بررسی بیشتر نیاز دارند.
چگونه نمودار آبشاری را بخوانیم؟
پیش از بررسی هفت نکته اصلی، بهتر است با اجزای نمودار آبشاری آشنا شوید.
۱. محور افقی نشان‌دهنده زمان است
محور افقی معمولا زمان سپری‌شده از شروع بارگذاری صفحه را نشان می‌دهد. هرچه یک درخواست در نمودار به سمت راست قرار گرفته باشد، شروع یا پایان آن دیرتر اتفاق افتاده است. طول نوار هر درخواست هم مدت زمانی را نشان می‌دهد که آن درخواست در مرحله نمایش‌داده‌شده صرف کرده است.
با بررسی این محور می‌توانید متوجه شوید کدام درخواست‌ها زود شروع شده‌اند، کدام منابع دیر بارگذاری می‌شوند و آیا بخشی از صفحه برای شروع رندر منتظر پاسخ درخواست دیگری مانده است.
۲. هر ردیف یک درخواست یا منبع را نشان می‌دهد
در محور عمودی، درخواست‌های شبکه به صورت ردیف‌هایی جداگانه نمایش داده می‌شوند. هر ردیف ممکن است مربوط به فایل HTML، تصویر، فایل CSS، اسکریپت JavaScript، فونت یا منبعی خارجی باشد.
با انتخاب هر ردیف در ابزارهای پشتیبانی‌شده، می‌توانید اطلاعات بیشتری مانند نشانی منبع، کد وضعیت HTTP، حجم انتقال‌یافته، زمان پاسخ و جزئیات مراحل درخواست را مشاهده کنید.
۳. نوع منابع را شناسایی کنید
ابزارهای تحلیل معمولا نوع منابع را با رنگ، آیکون یا ستون‌های جداگانه مشخص می‌کنند. برای مثال، یک ردیف ممکن است به تصویر، فایل CSS یا اسکریپت مربوط باشد. روش نمایش در هر ابزار متفاوت است، بنابراین برای تشخیص دقیق منبع، نام فایل و اطلاعات درخواست را هم بررسی کنید.
۴. مراحل مختلف هر درخواست را بررسی کنید
مدت زمان یک درخواست ممکن است شامل مراحل مختلفی باشد، از جمله برقراری اتصال، ارسال درخواست، انتظار برای دریافت پاسخ و انتقال داده‌ها. بعضی ابزارها این مراحل را با رنگ‌های متفاوت نمایش می‌دهند.
اگر زمان زیادی پیش از دریافت اولین بایت پاسخ سپری می‌شود، ممکن است سرور، شبکه یا پردازش سمت سرور به بررسی نیاز داشته باشد. اگر انتقال یک فایل زمان زیادی طول می‌کشد، حجم فایل یا سرعت انتقال می‌تواند از عوامل مؤثر باشد. برای نتیجه‌گیری دقیق، باید جزئیات همان درخواست را بررسی کنید.
۷ نکته برای تحلیل سریع نمودار آبشاری وردپرس
اکنون می‌توانید با استفاده از چند بررسی ساده، مشکلات احتمالی بارگذاری را شناسایی کنید. این هفت نکته برای اولویت‌بندی بررسی‌ها طراحی شده‌اند، نه اینکه به تنهایی جایگزین تحلیل فنی کامل شوند.
نکته اول، تعداد درخواست‌ها را بررسی کنید
هرچه صفحه منابع بیشتری درخواست کند، مرورگر باید تعداد بیشتری درخواست را مدیریت کند. با این حال، تعداد درخواست‌ها به تنهایی معیار مناسبی برای قضاوت درباره سرعت سایت نیست. حجم فایل‌ها، نوع منابع، نحوه کش شدن، ارتباط میان درخواست‌ها و پروتکل شبکه هم اهمیت دارند.
برای مثال، صفحه‌ای با تعداد درخواست بیشتر ممکن است به دلیل استفاده از فایل‌های کوچک و بارگذاری موازی، سریع‌تر از صفحه‌ای با درخواست‌های کمتر اما منابع حجیم و مسدودکننده بارگذاری شود.
بنابراین، به جای استفاده از یک آستانه ثابت مانند ۱۰۰ درخواست، این پرسش‌ها را مطرح کنید:
- آیا درخواست‌های زیادی مربوط به افزونه‌هایی هستند که در این صفحه ضرورتی ندارند؟
- آیا چند فایل CSS یا JavaScript تکراری یا غیرضروری بارگذاری می‌شوند؟
- آیا منابع خارجی مانند ابزارهای تبلیغاتی، آمارگیری یا چت، تأخیر قابل توجهی ایجاد می‌کنند؟
- آیا می‌توان برخی منابع را حذف کرد یا فقط در صفحاتی بارگذاری کرد که به آن‌ها نیاز دارند؟
هدف، کاهش بی‌دلیل تعداد درخواست‌ها نیست، بلکه حذف درخواست‌های غیرضروری و بهبود ترتیب و زمان بارگذاری منابع مهم است.
نکته دوم، زمان کامل شدن بارگذاری را بررسی کنید
انتهای نمودار آبشاری معمولا نشان می‌دهد آخرین درخواست ثبت‌شده چه زمانی به پایان رسیده است. این مقدار می‌تواند برای شناسایی منابعی که بسیار دیر بارگذاری می‌شوند مفید باشد، اما لزوما برابر با زمانی نیست که کاربر صفحه را سریع یا کامل احساس می‌کند.
برای مثال، ممکن است یک اسکریپت تحلیلی در انتهای بارگذاری اجرا شود و زمان پایان نمودار را افزایش دهد، در حالی که محتوای اصلی صفحه مدت‌ها قبل در دسترس کاربر قرار گرفته است. در مقابل، ممکن است یک تصویر اصلی یا فایل CSS مهم، نمایش بخش قابل مشاهده صفحه را به تأخیر بیندازد، حتی اگر تعداد درخواست‌ها کم باشد.
به جای تکیه بر یک قانون ثابت مانند «بارگذاری سایت باید زیر ۱۰ ثانیه باشد»، زمان بارگذاری را همراه با شاخص‌های تجربه کاربری بررسی کنید. هدف مناسب به نوع صفحه، دستگاه، شرایط شبکه و نیاز کاربران بستگی دارد.
نکته سوم، زمان نمایش محتوای قابل مشاهده را بررسی کنید
کاربران برای استفاده از سایت لازم نیست منتظر پایان تمام درخواست‌ها بمانند. آنچه اهمیت دارد این است که محتوای اصلی چه زمانی نمایش داده می‌شود و کاربر چه زمانی می‌تواند با صفحه تعامل داشته باشد.
در ابزارهایی مانند WebPageTest، می‌توانید از تصویر مراحل بارگذاری یا Filmstrip و شاخص‌هایی مانند Start Render، First Contentful Paint و Largest Contentful Paint برای بررسی روند نمایش محتوا استفاده کنید. در برخی گزارش‌ها، زمان نمایش اولین محتوای قابل مشاهده و زمان نمایش بزرگ‌ترین محتوای صفحه، اطلاعات متفاوتی ارائه می‌کنند.
برای بررسی تجربه کاربر، این موارد را در نظر بگیرید:
- First Contentful Paint یا FCP: زمانی که نخستین محتوای متنی یا تصویری صفحه نمایش داده می‌شود.
- Largest Contentful Paint یا LCP: زمانی که بزرگ‌ترین عنصر محتوایی قابل مشاهده در محدوده دید کاربر نمایش داده می‌شود.
- Interaction to Next Paint یا INP: میزان پاسخ‌گویی صفحه به تعاملات کاربر را ارزیابی می‌کند و از طریق داده‌های میدانی قابل بررسی است.
- Cumulative Layout Shift یا CLS: جابه‌جایی‌های غیرمنتظره عناصر صفحه را اندازه‌گیری می‌کند.
برای LCP، مقدار حداکثر ۲٫۵ ثانیه در صدک ۷۵ کاربران، معیار مطلوب گوگل است. این معیار باید در کنار سایر شاخص‌ها و با توجه به داده‌های واقعی کاربران بررسی شود. گزارش آزمایشگاهی می‌تواند علت‌های احتمالی را نشان دهد، اما جای داده‌های میدانی را نمی‌گیرد.
اگر محتوای اصلی صفحه دیر نمایش داده می‌شود، بررسی کنید آیا سرور دیر پاسخ می‌دهد، فایل CSS مانع رندر است، تصویر اصلی بیش از حد حجیم است یا بارگذاری منبع مهمی به درخواست دیگری وابسته مانده است.
نکته چهارم، وضعیت HTTP/2 و نحوه بارگذاری درخواست‌ها را بررسی کنید
HTTP/2 امکاناتی مانند چندگانه‌سازی یا Multiplexing را فراهم می‌کند. با استفاده از این قابلیت، چندین درخواست می‌توانند روی یک اتصال در حال اجرا باشند و لازم نیست همه درخواست‌ها یکی پس از دیگری و در اتصال‌های جداگانه انجام شوند.
با این حال، صرفا مشاهده نوارهای هم‌پوشان در نمودار آبشاری برای تشخیص استفاده از HTTP/2 کافی نیست، زیرا مرورگرها در شرایط مختلف می‌توانند چند درخواست را به صورت موازی اجرا کنند. برای اطمینان، جزئیات پروتکل هر درخواست یا اطلاعات اتصال را در ابزار بررسی کنید.
در مرورگرهای امروزی، HTTP/2 برای وب‌سایت‌های عمومی معمولا از طریق HTTPS استفاده می‌شود. با این وجود، داشتن گواهی SSL به تنهایی تضمین نمی‌کند که HTTP/2 فعال باشد. پشتیبانی سرور، تنظیمات وب‌سرور و مسیر ارتباطی هم باید مناسب باشند.
اگر سرور شما هنوز از HTTP/1.1 استفاده می‌کند، پشتیبانی از HTTP/2 را در تنظیمات وب‌سرور یا از ارائه‌دهنده میزبانی بررسی کنید. البته فعال کردن HTTP/2 به تنهایی تضمین نمی‌کند که سایت سریع‌تر شود، زیرا نحوه ارائه منابع و کیفیت زیرساخت همچنان اهمیت دارند.
نکته پنجم، تصاویر حجیم و دیر بارگذاری‌شونده را پیدا کنید
تصاویر می‌توانند بخش قابل توجهی از حجم صفحه را تشکیل دهند. اگر تصاویر بزرگ‌تر از اندازه مورد نیاز نمایش داده شوند یا فشرده‌سازی مناسبی نداشته باشند، انتقال آن‌ها زمان و داده بیشتری مصرف می‌کند. در بعضی صفحات، تصویر اصلی حتی می‌تواند مهم‌ترین عامل تأخیر در نمایش محتوای صفحه باشد.
در نمودار آبشاری، درخواست‌های مربوط به تصاویر را شناسایی کنید و به حجم انتقال، مدت زمان بارگذاری و زمان شروع درخواست توجه داشته باشید. طولانی بودن نوار یک درخواست به تنهایی ثابت نمی‌کند که تصویر بیش از حد حجیم است، بنابراین حجم فایل و جزئیات پاسخ را هم بررسی کنید.
برای بهینه‌سازی تصاویر وردپرس، این اقدامات را در نظر بگیرید:
- ابعاد تصویر را متناسب با اندازه نمایش آن انتخاب کنید.
- در صورت مناسب بودن، از قالب‌های تصویری مدرن مانند WebP یا AVIF استفاده کنید.
- فشرده‌سازی را با حفظ کیفیت قابل قبول انجام دهید.
- برای تصاویر واکنش‌گرا از ویژگی‌های مناسب مانند srcset و sizes استفاده کنید.
- بارگذاری تنبل را برای تصاویر پایین صفحه در نظر بگیرید، اما تصویر اصلی مورد نیاز برای LCP را بدون بررسی تنبل نکنید.
- از بارگذاری تصاویر یا نسخه‌های تکراری که در صفحه به آن‌ها نیازی نیست جلوگیری کنید.
وردپرس برای تصاویر آپلودشده می‌تواند چند اندازه مختلف تولید کند. بررسی کنید قالب و افزونه‌ها کدام نسخه را در صفحه بارگذاری می‌کنند و آیا اندازه انتخاب‌شده با محل نمایش تصویر تناسب دارد یا خیر.
نکته ششم، زنجیره ریدایرکت‌ها را شناسایی کنید
ریدایرکت زمانی رخ می‌دهد که یک درخواست به نشانی دیگری هدایت شود. ریدایرکت در بسیاری از شرایط ضروری است، اما زنجیره‌های غیرضروری می‌توانند باعث افزایش زمان بارگذاری شوند.
برای مثال، ممکن است یک آدرس ابتدا به نسخه HTTPS، سپس به دامنه اصلی و در نهایت به نشانی نهایی صفحه هدایت شود. هر مرحله می‌تواند به زمان مورد نیاز برای دریافت محتوای نهایی اضافه کند.
در نمودار آبشاری، درخواست‌هایی را که با کدهای ریدایرکت مانند 301 یا 302 پاسخ داده می‌شوند شناسایی کنید و مسیر رسیدن به نشانی نهایی را بررسی کنید.
- لینک‌های داخلی را مستقیما به نشانی نهایی هدایت کنید.
- قواعد تکراری یا غیرضروری ریدایرکت را بررسی کنید.
- از ایجاد چرخه ریدایرکت جلوگیری کنید.
- پس از تغییر دامنه یا ساختار پیوندها، مسیرهای قدیمی و جدید را آزمایش کنید.
هر ریدایرکتی مشکل‌ساز نیست. برای مثال، ریدایرکت دائمی از یک URL قدیمی به URL جدید ممکن است برای حفظ دسترسی کاربران و ارزش سئوی صفحه ضروری باشد. هدف، حذف ریدایرکت‌های لازم نیست، بلکه کوتاه کردن مسیرهای غیرضروری است.
نکته هفتم، خطاهای درخواست‌ها را بررسی کنید
گاهی یک صفحه با وجود نمایش ظاهری مناسب، درخواست‌هایی دارد که با خطا مواجه می‌شوند. این خطاها می‌توانند به فایل‌های تصویری، اسکریپت‌ها، فونت‌ها، درخواست‌های API یا منابع خارجی مربوط باشند.
در نمودار آبشاری، کد وضعیت درخواست‌ها را بررسی کنید. برای نمونه، کد 404 معمولا نشان می‌دهد منبع مورد نظر پیدا نشده است. خطاهای 5xx می‌توانند به مشکلات سرور مربوط باشند و خطاهای شبکه یا مسدود شدن درخواست‌ها هم ممکن است در ابزار با وضعیت‌های دیگری نمایش داده شوند.
برای هر خطا، ابتدا مشخص کنید کدام منبع با مشکل مواجه شده و آیا این منبع برای عملکرد صفحه ضروری است. سپس مسیر فایل، تنظیمات افزونه، پاسخ سرور یا دسترسی به منبع خارجی را بررسی کنید.
همه خطاها تاثیر یکسانی بر سرعت ندارند. یک تصویر تزئینی که بارگذاری نمی‌شود با یک فایل JavaScript ضروری که مانع اجرای قابلیت اصلی صفحه شده است، شرایط متفاوتی دارد. بنابراین، خطاها را بر اساس اهمیت منبع و اثر آن بر تجربه کاربر اولویت‌بندی کنید.
چک‌لیست نهایی آنالیز سریع وردپرس
هنگام بررسی نمودار آبشاری، این هفت مورد را به ترتیب مرور کنید تا نشانه‌های مهم مشکلات عملکردی را سریع‌تر پیدا کنید.
- تعداد درخواست‌ها و منابع غیرضروری را بررسی کنید.
- زمان پایان بارگذاری را در کنار سایر شاخص‌های عملکرد ارزیابی کنید.
- زمان نمایش محتوای اصلی و شاخص LCP را بررسی کنید.
- پروتکل شبکه و نحوه بارگذاری درخواست‌ها را ارزیابی کنید.
- تصاویر حجیم یا دیر بارگذاری‌شونده را پیدا کنید.
- زنجیره ریدایرکت‌های غیرضروری را شناسایی کنید.
- خطاهای درخواست‌ها و منابعی را که با مشکل مواجه شده‌اند بررسی کنید.
چند نکته مهم برای نتیجه‌گیری دقیق‌تر
یک نمودار آبشاری به تنهایی برای قضاوت درباره عملکرد کلی سایت کافی نیست. نتایج آزمایش به محل سرور آزمایش، نوع دستگاه، سرعت شبکه، وضعیت کش و شرایط اجرای آزمون وابسته هستند. بهتر است آزمایش را در شرایط یکسان چند بار تکرار کنید و در صورت امکان، نتایج دسکتاپ و موبایل را جداگانه بررسی کنید.
همچنین بین داده‌های آزمایشگاهی و داده‌های واقعی کاربران تفاوت وجود دارد. ابزارهایی مانند PageSpeed Insights علاوه بر آزمون آزمایشگاهی، در صورت دسترس بودن داده کافی، اطلاعات میدانی کاربران را هم ارائه می‌کنند. برای بررسی تجربه واقعی کاربران، این داده‌ها را در کنار نمودار آبشاری و شاخص‌های Core Web Vitals در نظر بگیرید.
اگر پس از بررسی نمودار متوجه شدید تأخیر به پاسخ سرور مربوط است، بهتر است وضعیت منابع سرور، نسخه PHP، پایگاه داده و کش را بررسی کنید. اگر مشکل به منابع صفحه مربوط می‌شود، ابتدا فایل‌هایی را اصلاح کنید که بر نمایش محتوای اصلی یا تعامل کاربران تاثیر می‌گذارند.
جمع‌بندی
نمودار آبشاری یکی از ابزارهای کاربردی برای بررسی فنی سرعت وردپرس است. با کمک آن می‌توانید درخواست‌های غیرضروری، تصاویر حجیم، ریدایرکت‌های اضافی، خطاهای منابع و تأخیرهای احتمالی در بارگذاری را شناسایی کنید.
برای رسیدن به نتیجه بهتر، فقط به تعداد درخواست‌ها یا زمان پایان نمودار توجه نکنید. مهم است بدانید کدام بخش از صفحه دیر نمایش داده می‌شود، چه چیزی باعث تأخیر شده و رفع آن چه تاثیری بر تجربه کاربران خواهد داشت. ترکیب نمودار آبشاری با PageSpeed Insights و داده‌های واقعی کاربران، تصویر کامل‌تری از عملکرد سایت در اختیار شما قرار می‌دهد.
اگر می‌خواهید عملکرد سایت وردپرس خود را بهبود دهید، می‌توانید از صفحه افزایش سرعت وردپرس در سایت افزون شروع کنید و بر اساس مشکلات واقعی سایت، اقدامات بهینه‌سازی را اولویت‌بندی کنید.
