DEV Community

Mohamad Mahdi Peyambari
Mohamad Mahdi Peyambari

Posted on

GTmetrix چیست و چگونه گزارش سرعت را بخوانیم؟

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

GTmetrix یکی از ابزارهای شناخته‌شده تحلیل Performance صفحات وب است که یک صفحه را در مرورگر واقعی Load می‌کند، داده‌های Performance را اندازه می‌گیرد، Auditهای مبتنی بر Lighthouse را اجرا می‌کند و نتیجه را در قالب گزارشی شامل Score، Web Vitals آزمایشگاهی، Structure Audit، Waterfall، CrUX و History ارائه می‌دهد. خود GTmetrix نیز توضیح می‌دهد که برای تولید گزارش از مرورگر واقعی و Google Lighthouse استفاده می‌کند.

اگر تمام تحلیل را به Grade یا Performance Score تقلیل دهیم، بخش مهم‌تری از گزارش را از دست می‌دهیم: اینکه صفحه دقیقاً چگونه Load شده، چه Resourceهایی Bottleneck ایجاد کرده‌اند، کدام مشکلات ساختاری بیشترین اثر را دارند و آیا تجربه کاربران واقعی با نتیجه Lab Test هم‌خوان است یا نه.

«گزارش GTmetrix چه چیزی درباره رفتار Load این صفحه به ما می‌گوید و کدام مسئله واقعاً ارزش اصلاح دارد؟»

GTmetrix چیست؟

در یک Test معمولی، صفحه در یک Browser واقعی Load می‌شود و سپس Performance، ساختار Front-end، Requestها و Metricهای مختلف بررسی می‌شوند.

  • Summary

  • Performance

  • Structure

  • CrUX

  • Waterfall

  • Video

هستند. در مستند رسمی به‌روزشده GTmetrix نیز همین ساختار برای گزارش فعلی توضیح داده شده است.

GTmetrix چه تفاوتی با PageSpeed Insights دارد؟

GTmetrix و PageSpeed Insights هر دو از Lighthouse در بخش Lab Analysis استفاده می‌کنند، اما Report و Workflow یکسانی ندارند.

PageSpeed Insights ابزار Google است و Field Data مبتنی بر CrUX را همراه با تحلیل Lighthouse ارائه می‌کند.

GTmetrix نیز در نسخه فعلی CrUX Data را در Report خود نمایش می‌دهد، اما علاوه بر آن امکاناتی مثل:

  • Waterfall بسیار تفصیلی

  • Video

  • History

  • Monitoring

  • Test Location و Test Environment

  • Structure Score اختصاصی

را در Workflow خودش ارائه می‌کند. GTmetrix در مستند گزارش فعلی خود CrUX Tab را برای داده کاربران واقعی و Waterfall را برای Troubleshooting در سطح Request معرفی می‌کند.

GTmetrix Grade چیست؟

  • سرعت و رفتار واقعی Load در Lab

  • کیفیت ساختار صفحه برای Performance

و فرمول آن کاملاً برابر Lighthouse نیست؛ GTmetrix از مدل و فرمول اختصاصی خودش نیز استفاده می‌کند.

Performance Score چیست؟

Performance Score در GTmetrix بر پایه Lighthouse ساخته می‌شود و عملکرد صفحه را در همان Test آزمایشگاهی ارزیابی می‌کند.

  • Largest Contentful Paint

  • Total Blocking Time

  • Cumulative Layout Shift

  • First Contentful Paint

  • Speed Index

Structure Score چیست؟

GTmetrix برای هر Audit یک Impact تخمینی محاسبه می‌کند و از مجموع این Impactها Structure Score را می‌سازد. خود GTmetrix توضیح می‌دهد این Impact یک ارزیابی اختصاصی بر اساس Potential Savings، اثر روی Metricها و عوامل دیگر است.

چرا ممکن است Structure پایین ولی Performance خوب باشد؟

ممکن است چند Best Practice را رعایت نکرده باشد، اما در Test فعلی Performance همچنان مناسب باشد.

  • Server کند باشد؛

  • Third-party Script کند شود؛

  • Network Bottleneck ایجاد شود؛

Summary Tab را چگونه بخوانیم؟

GTmetrix این Tab را «Primary Action Center» گزارش معرفی می‌کند؛ چون Snapshot کلی از Performance، Structure و Load Behaviour را ارائه می‌دهد.

  • GTmetrix Grade

  • Performance Score

  • Structure Score

  • Web Vitals

  • Speed Visualization

  • Top Issues

در تحلیل GTmetrix، Web Vitals مهم‌تر است یا Grade؟

  • LCP

  • TBT در Lab

  • CLS

GTmetrix در بخش Web Vitals آزمایشگاهی فعلی روی همین سه Metric تأکید می‌کند. همچنین توضیح می‌دهد INP یک Metric Field-only است و در Lab GTmetrix مستقیماً اندازه‌گیری نمی‌شود؛ در صورت وجود داده، INP از CrUX در بخش Field Data قابل مشاهده است.

LCP در GTmetrix چیست؟

  • LCP Element چیست؟

  • چه زمانی Discover شده؟

  • چه Resourceهایی قبل از آن Load شده‌اند؟

  • Server Response چقدر طول کشیده؟

  • Image یا Font عامل Delay بوده؟

  • Render-blocking Resource وجود دارد؟

GTmetrix می‌تواند سرنخ بدهد، اما Root Cause معمولاً از ترکیب Performance Data و Waterfall بهتر مشخص می‌شود.

چرا GTmetrix به‌جای INP در Lab، TBT نشان می‌دهد؟

به همین دلیل در Lab از TBT به‌عنوان Metric تشخیصی Responsiveness استفاده می‌شود، در حالی که INP در صورت موجود بودن CrUX Data در Field Report دیده می‌شود.

چرا CrUX در GTmetrix و PageSpeed Insights ممکن است متفاوت باشد؟

خود GTmetrix هشدار می‌دهد CrUX Data نمایش‌داده‌شده در Report ممکن است با داده‌ای که در PSI یا Search Console می‌بینید متفاوت باشد.

  • Scope

  • زمان Snapshot

  • URL در برابر Origin

  • نحوه نمایش Dataset

Structure Tab را چگونه بخوانیم؟

GTmetrix Auditها را بر اساس Impact مرتب می‌کند و موارد با اثر بیشتر را بالاتر نمایش می‌دهد.

History Tab چه کاربردی دارد؟

GTmetrix امکان مشاهده Reportهای گذشته، مقایسه Trendها، Zoom روی بازه زمانی، اضافه کردن Note و Export History را فراهم می‌کند. راهنمای رسمی History نیز این قابلیت‌ها را برای دنبال کردن روند Performance توضیح می‌دهد.

GTmetrix و Lighthouse چه تفاوتی دارند؟

GTmetrix از Lighthouse برای بخش مهمی از تحلیل خود استفاده می‌کند، اما روی آن:

  • Grade اختصاصی

  • Structure Score

  • Waterfall

  • Video

  • History

  • Monitoring

Lighthouse = Audit Engine / Lab Analysis GTmetrix = Performance Analysis Platform با Lighthouse + ابزارهای تشخیصی دیگر

یک مثال عملی: LCP ضعیف

GTmetrix Grade = C Performance = 62 Structure = 87

مثال دوم: Structure پایین ولی تجربه خوب

ممکن است Optimization Opportunity وجود داشته باشد، اما فوریت آن کمتر از صفحه‌ای با Field Performance ضعیف باشد.

جمع‌بندی

GTmetrix یک پلتفرم تخصصی Web Performance است که Report آن فقط به یک Score محدود نمی‌شود.

نسخه فعلی GTmetrix گزارش خود را بر پایه Lighthouse و مدل‌های اختصاصی خودش می‌سازد و Grade را از ترکیب Performance و Structure به دست می‌آورد.

مطالعه نسخه کامل

برای مطالعه توضیحات کامل، مثال‌ها و جزئیات بیشتر، GTmetrix چیست و چگونه گزارش سرعت را بخوانیم؟ را در وبتیک بخوانید.

Top comments (0)