جلسه ۳ – بررسی گزارش Summary در GTmetrix جدید

آشنایی با گزارش Summary و نمودار Speed Visualization و تحلیل آن

گزارش Summary در GTmetrix

سلام دوستان؛ با دومین مقاله از سری مقالات آموزش GTmetrix جدید سایت میزفا همراهتون هستیم.
اولین گزارش یا سربرگی که در آپدیت GTmetrix باهاش مواجه هستیم، گزارش Summary (به معنای خلاصه) هست. همونطور که از اسمش هم پیداست، تو این سربرگ خلاصه‌ای از وضعیت سرعت صفحه قابل مشاهده ست. در این سربرگ، در ابتدا یک نمودار خطی – گرافیکی می‌بینیم که مشخص می‌کنه با گذشت زمان، کاربر چه عناصری از صفحه ما رو مشاهده می‌کنه. بعد از اون، ۵تا از مهم‌ترین خطاهایی که بیشترین تاثیر رو در کاهش سرعت صفحه ما دارن، می‌بینیم. در نهایت هم جزئیات بیشتری از صفحه (مثل زمان لود کامل، حجم صفحه و تعداد درخواست‌های ارسال شده به سمت سرور) رو داریم.

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

گزارش Summary آپدیت GTmetrix
تحلیل گزارش Summary در آپدیت GTmetrix

آگاهی از تجربه کاربری با Speed Visualization

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

Speed Visualization در Summery در GTmetrix
Speed Visualization در Summery در GTmetrix

احتمالا تو بررسی این نمودار، به اصطلاحاتی برمی‌خورید که براتون تازه هستن و معنی اونها رو نمی‌دونید. مثل TTFB و First Paint و FCP و… پس وقتشه مفهوم این موارد رو با هم بررسی کنیم تا بتونید این بخش از گزارش GTmetrix رو بهتر آنالیز کنید.

TTFB چیست؟

اولین معیاری که روی نمودار Speed Visualization می‌بینیم، TTFB هست که از عبارت Time to First Byte گرفته شده. این معیار در ورژن قبلی جی تی متریکس تو منوی Timings قابل رویت بود. بنابراین معیار جدیدی نیست. وقتی کاربر وارد صفحه ما میشه، مرورگر درخواست‌هایی رو به سرور ما ارسال می‌کنه. مدت زمانی که طول می‌کشه تا اولین بایت پاسخ دریافت بشه، TTFB نامیده میشه.

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

اما به‌طور کلی، TTFB یکی از معیارهای کلیدی و موثر در عملکرد وبسایت هاست. چرا که به‌طور مستقیم با سرعت سرور در پاسخ به درخواست‌ها (Requests) ارتباط داره. ما در مقاله TTFB چیست به شکل جامع درباره مقدار مناسب این فاکتور و روش‌های بهینه‌سازی اون صحبت کردیم. پیشنهاد می‌کنم این مقاله میزفا رو مطالعه کنید.

FCP چیست؟

دومین معیار در نمودار Speed Visualization ، زمان FCP (مخفف First Contentful Paint) هست. FCP هم مثل TTFB از چند سال پیش جزء معیارهای GTmetrix بوده و ربطی به آپدیت GTmetrix نداره. این معیار در نوامبر ۲۰۱۷ به ابزار جی تی متریکس اضافه شد و تا قبل از اون، از معیار دیگه‌ای به نام First Paint استفاده می‌شد. در ادامه تفاوت‌های این ۲ فاکتور رو با هم بررسی می‌کنیم.

First Paint زمانیه که مرورگر اولین رندر (Render) رو در صفحه انجام میده. به زبان ساده‌تر، First Paint ایجاد اولین تغییر در صفحه ست که ممکنه کاربر بتونه اون رو ببینه. البته دقت کنید که گفتم ممکنه! چرا که ممکنه First Paint فقط شامل نمایش رنگ پس‌زمینه صفحه باشه و اگه رنگ پس‌زمینه سفید باشه، کاربر هنوز تغییری در صفحه ما ندیده. به دلیل وجود چنین نقص‌هایی، توسعه دهندگان وب کم کم به این نتیجه رسیدن که First Paint معیار خوبی برای تجربه کاربری (UX) خوب نیست. درواقع ممکنه زمان First Paint در صفحه‌ای خیلی پایین باشه، اما کاربر هنوز هیچ محتوای مناسبی رو ندیده باشه. در نتیجه، مفهوم First Contentful Paint مطرح شد.

First Contentful Paint یا همون FCP یه تفاوت اساسی با First Paint داره و اون هم وجود Content یا محتواست. در واقع معیار FCP زمانی رو مشخص می‌کنه که در اون لحظه اولین محتوا در صفحه ظاهر میشه. این محتوا می‌تونه متن، تیتر، عکس، ویدئو و… باشه. بنابراین می‌بینیم که با معیار FCP بهتر میشه تجربه کاربری رو مد نظر قرار داد.
اطلاعات بیشتر درباره FCP و روش بهینه سازی اون رو در روش کاهش FCP مطالعه کنید.

FCP در GTmetrix جدید
تفاوت First Paint و FCP از نگاه سایت GTmetrix

LCP چیست؟

خب تا اینجا یاد گرفتیم که معیار First Paint ایرادهایی داشت و برای همین معیار FCP به‌وجود اومد. اما FCP هم بی عیب و نقص نبود!! مشکل بزرگ FCP این بود که نمی‌تونست نوع محتوا و میزان کاربردی بودن اون رو اندازه گیری کنه. به‌عبارت دیگه، ممکنه اولین محتوایی که در صفحه ظاهر میشه، لوگوی سایت، یه عکس کوچیک و بی‌اهمیت یا یه متن معمولی و نه‌چندان مهم باشه. برای همین ابزارهای تست سرعت هم شروع کردن به سنجش زمان بارگذاری بزرگترین محتوای صفحه یا Largest Contentful Paint.

معیار LCP در سال ۲۰۲۰ توسط Google Lighthouse معرفی شد. این معیار تو نسخه قبلی GTmetrix جایگاهی نداشت و یکی از فاکتورهاییه که در نسخه آپدیت GTmetirx شاهدش هستیم. بررسی زمان LCP می‌تونه بیشتر ما رو متوجه تجربه کاربری کنه. چرا که در این زمان، یک محتوای اصلی و قابل درک برای کاربر توی صفحه ما لود شده و این باعث میشه کاربر متوجه بشه صفحه در حال بارگذاریه و احساس رضایت داشته باشه.

تفاوت FCP و LCP رو می‌تونید به خوبی تو عکس‌های زیر متوجه بشید:

تفاوت FCP و LCP در GTmetrix جدید
تفاوت FCP و LCP در GTmetrix جدید

همونطور که ملاحظه می‌کنید، زمانی که به‌عنوان FCP تعیین میشه، کاربر چیزی رو در صفحه نمی‌بینه. اما در لحظه‌ای که LCP تعیین میشه، محتوای مناسبی در صفحه لود شده. هرچند همیشه هم اینطور نیست، اما به‌طور کلی با مقایسه LCP و FCP ، می‌تونیم با قاطعیت بگیم Largest Contentful Paint یا همون LCP معیار کاربردی‌تریه و بیشتر از FCP تجربه کاربری رو هدف قرار میده.
یه مثال بهتر از مقایسه LCP و FCP که از سایت web.dev آوردیم:

مقایسه LCP و FCP در گوگل
مقایسه LCP و FCP در گوگل

تو این عکس می‌بینید که اون محتوای اصلی و بزرگ یا Largest Content سریعا ظاهر میشه. این یعنی یه تجربه کاربری عالی!!
اطلاعات بیشتر درباره معیار LCP و روش بهینه سازی اون رو می‌تونید در روش کاهش LCP مطالعه کنید.

Time To Interactive چیست؟

تا اینجا با هم دیگه مرحله به مرحله جلو اومدیم و روند تکامل معیارهای سنجش سرعت ( یا بهتره بگیم تجربه کاربری) رو بررسی کردیم. با TTFB و پاسخ اولین بایت از درخواست‌ها آشنا شدیم. بعدش هم اولین تغییر در صفحه (First Paint)، اولین محتوا (FCP) و بزرگترین محتوا (LCP) رو با هم بررسی کردیم. حالا وقتشه که از فقط یک محتوا عبور کنیم و زمانی رو ارزیابی کنیم که در اون لحظه، کاربر به‌طور کامل با صفحه تعامل داره.

بیاییم با هم یه سناریوی عملی رو بررسی کنیم. فرض کنید وارد لندینگ پیجی شدید که مربوط به ثبت نام در یک دوره خاص هست. از قضا این صفحه سرعت لود خوبی هم داره و در عرض ۱-۲ ثانیه، تصاویر و متن اصلی صفحه نمایش داده میشه. حالا دکمه «ثبت نام در دوره» رو می‌بینید و روش کلیک می‌کنید تا وارد مرحله اصلی ثبت نام بشید. اما اتفاق خاصی نمیافته. ۲-۳ بار دیگه هم روی دکمه کلیک می‌کنید و باز هم اتفاقی نمیافته. احتمال می‌دید صفحه یا اون دکمه مشکلی داره و از سایت خارج می‌شید.

برای جلوگیری از بروز چنین مشکلاتی، معیار Time To Interactive یا زمان تعامل به‌وجود اومد. Time To Interactive یا به‌اختصار TTI ، زمانیه که منابع صفحه لود شدن و کاربر می‌تونه به‌طور کامل با صفحه ما تعامل داشته باشه. خیلی از طراحان سایت و توسعه دهندگان وب (Web Developres) برای افزایش سرعت لود صفحات، از تکنیک‌هایی مثل Server-side Rendering استفاده می‌کنن که در اونها صفحه سریع‌تر Render میشه و به نظر می‌رسه تمام کدهای صفحه لود شده و کاربر می‌تونه با صفحه تعامل داشته باشه. اما در اصل، فقط ظاهر یک دکمه به کاربر نشون داده شده و هنوز کدهای پشت اون دکمه لود نشدن و سناریویی که مثال زدیم اتفاق میافته. به همین دلیل Time To Interactive یا زمان تعامل، جزء معیارهای اصلی Google Lighthouse و GTmetrix جدید هست.

تعریف ساده‌تری از TTI می‌تونه به این شکل باشه که از لحظه لود صفحه شروع میشه و تا زمانی که منابع اصلی صفحه لود بشن و صفحه ما قابلیت این رو داشته باشه که به درخواست‌های کاربر سریعا پاسخ بده، طول می‌کشه. حدفاصل بین FCP و TTI باید کمترین مقدار ممکن باشه. درغیر این صورت، ممکنه کاربران فکر کنن صفحه ما غیرفعاله و عناصر صفحه درست کار نمی‌کنن؛ در نتیجه از صفحه خارج میشه و شاید اعتمادش رو به سایت ما از دست بده!!
از طرفی کم بودن زمان Time To Interactive نشون دهنده اینه که صفحه ما واکنشگرایی لازم رو داره و باعث اطمینان کاربران میشه.
نمونه‌ای از Time To Interactive خوب رو تو عکس زیر می‌بینیم که فاصله‌اش با FCP حدود ۰.۵ ثانیه ست.
بررسی دقیق‌تر معیار TTI و راه‌هایی برای بهینه سازی این معیار رو در TTI چیست بیان کردیم.

اهمیت Time To Interactive
نمونه Timte To Interactive خوب

زمان Onload Time چیست؟

معیار بعدی که تو نسخه‌های قبلی GTmetrix هم بوده و معیار جدیدی محسوب نمیشه، Onload Time هست. این معیار اینطور تعریف میشه: زمانی که پردازش صفحه کامل شده و تمام منابع صفحه (مثل عکس و فایل‌های CSS) دانلود شده‌اند.
احتمالا این سوال براتون پیش میاد که تفاوت زمان Onload با Fully Loaded Time در GTmetrix چیه؟

بعد از زمان Onload ممکنه درخواست‌هایی برای دریافت منابع بیشتر هم ارسال بشه. مثلا ممکنه JavaScript ها شروع کنن به ارسال درخواست‌های بعدی و این مسئله باعث میشه نیاز به اندازه گیری زمان دیگه‌ای با عنوان Fully Loaded Time داشته باشیم.
تفاوت Onload Time و Fully Loaded Time رو می‌تونید تو عکس قبلی به خوبی مشاهده کنید.

پیدا کردن مهمترین مشکلات سایت یا Top Issues در GTmetrix جدید

خب بالاخره بررسی نمودار Speed Visualization تموم شد و با معیارهای مهمش آشنا شدیم. قسمت بعدی در گزارش Summary مربوط به مهمترین مشکلات سایت ماست که با عنوان Top Issues قابل دسترسی هست. در این قسمت ۵تا از مهمترین ایراداتی که روی عملکرد سایت تاثیر دارن و باعث کندی سرعت و تجربه کاربری ضعیف میشن، به ترتیب اولویت و تاثیرشون مشخص شدن.

در صورتی که وارد سربرگ Stucture بشیم، لیست کامل این خطاها رو خواهیم دید. اما هدف GTmetrix از اینکه ۵تا از مهمترین مشکلات سایت رو تو سربرگ Summary آورده اینه که به ما کمک کنه برای رفع خطاها اولویت بندی داشته باشیم و اول به رفع خطاهای مهمتر بپردازیم. طبیعتا برطرف کردن این مشکلات تاثیر خیلی بیشتری در افزایش نمره Structure و Performance و درنهایت، بهبود امتیاز نهایی GTmetrix یا همون GTmetrix Grade داره. زمانی که این ۵ مورد برطرف بشه، خطاهای بعدی که هنوز برطرف نشدن و اولویت بیشتری هم دارن جایگزین این موارد میشن.

مهمترین مشکلات در GTmetrix
مهمترین مشکلات Top Issues در GTmetrix

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

بررسی جزئیات صفحه یا Page Details

تو آخرین قسمت از گزارش Summary می‌تونیم جزئیات صفحه رو در قسمت Page Details ببینیم. تو این قسمت اطلاعات مفیدی مثل حجم صفحه و تعداد درخواست‌های صفحه مشخص شده و توجه به بهینه سازی اونها می‌تونه تاثیر زیادی در بهتر شدن سرعت صفحه ما داشته باشه.

گزارش نسخه آپدیت GTmetrix
گزارش Page Details در نسخه آپدیت شده GTmetrix

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

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

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
محمدعرفان صدری
از ۱۶-۱۷ سالگی تا الان (که ۲۶ سالمه) شغل‌های متنوعی رو تجربه کردم؛ از پخش کردن تراکت تا کار تو کارگاه ماست بندی؛ از منشی آموزشگاه زبان تا تدریس زبان انگلیسی؛ مشاوره تحصیلی و یه سری کارهای اجرایی؛ و در نهایت هم SEO و بازاریابی آنلاین. چیزی که تو همه این مشاغل توجهم رو جلب کرده، اینه که موسسات و سازمان‌های ایرانی چقدر جا برای رشد و پیشرفت حرفه‌ای دارند و چقدر از این موضوع غافلند. از طرف دیگه متوجه شدم علاقه شدید و پتانسیل عجیبی دارم برای کمک به رشد و توسعه کسب‌وکارها. و اینطوری شد که الان در حیطه SEO و بازاریابی محتوایی، پروژه انجام می‌دم، تدریس می‌کنم و مقاله می‌نویسم تا در حد خودم کمکی کرده باشم به رشد شما عزیزان.
لیست آموزش GTmetrix نسخه جدید

11 نظر

11 پاسخ

  1. هوالرزاق
    سلام و احترام
    یه انتقاد سازنده از جناب آقای مهندس پوریا آریافر دارم اینکه در سایت gtmetrix وقتی یه خطایی رو دنبال میکنیم با برخی مثال های کد نویسی نحوه رفع خطا رو در برخی موارد توضبح داده ولی شما در آموزش های جدید از روش های کد نویسی توضیحاتی ارائه نمیدهید در حالی که در آموزش های قبلی شما با کد نویسی برخی موارد رو توضیح داده بودید که مورد استقبال کابران قرار گرفته بود لااقل همین مواردی رو که خود gtmetrix بصورت کد نویسی ارائه نموده رو ترجمه نمایید و قرار دهید لطفا در مورد انتقادها گارد نگیرید چون نیت بهبود کیفیت در تولید محتوی کابر پسنده
    در کل کارتون خوبه
    موفق باشید همیشه

  2. سلام
    یک سوالی که ذهن منو درگیر کرده تحلیل این گزارش هست که
    TTFB: 3.4s
    First Contentful Paint: 6.2s
    Largest Contentful Paint: 14.2s

    تشخیص LCP تو سایت چطوری هست که بتونم اون رو اصلاح و یا حذف کنم که FLT رو کاهش بدم.
    هیچ افزونه مربوط به کش در سایت فعال نیست
    لطفا راهنمایی بفرمایید
    سپاس

    1. سلام رضا جان
      خب این گزارش میگه پاسخ اولین Byte اطلاعات بعد از ۳.۴ ثانیه دریافت میشه.
      اولین محتوا بعد از ۶.۲ ثانیه و بزرگترین محتوا بعد از ۱۴.۲ ثانیه نمایش داده میشه که فاصله‌شون کمی زیاده.
      تو سربرگ Structure ، گزینه‌ای به نام Largest Contentful Paint element وجود داره که مشخص می‌کنه LCP صفحه چی بوده.
      موفق باشی

      1. ممنون از توضیحاتتون
        بررسی کردم و مربوط به یک عکس بود. حالا برای کاهش این زمان من باید روی این عکس کار کنم ؟ یعنی در واقع روی سایز و حجم و سایر مشخصات عکس کار کنم؟
        سپاس بابت توضیحاتتون

        1. بله درسته. حجم و سایز عکس رو بهینه سازی کن.
          خواهش می‌کنم.
          موفق باشی

  3. سلام چرا هر بار که سایتم توسط جی تی متریکس جدید ارزیابی میشه نمره ی متفاوتی رو میده یبار دی میده یبار ای و یبار هم اف به سایتم داده در حالی که من هیچ تغییری تو سایتم ندادم؟

    1. سلام حامد عزیز
      نمیشه به سادگی پاسخ داد و باید سایتت بررسی بشه و ببینیم دقیقا کدوم یکی از امتیازهای Performance یا Structure داره تغییر میکنه و علت چیه.
      موفق باشی

      1. سایت میزفا رو هم چندبار زدم و هر بار درصد های متفاوتی میداد.

        1. با بررسی که من انجام دادم، امتیازهای Performance و Structure کمی تغییر می‌کنن. اما نقاط عطفی که روی نمودار Speed Visualization می‌بینیم، تغییر محسوسی ندارن (درباره سایت میزفا اینطور بوده)
          همچنین زمان لود کامل صفحه ما تغییر زیادی نداشته.
          علت تغییر امتیازهای Performance و Structure رو باید بررسی کرد و دید کدوم یکی از معیارهایی که روی این ۲ امتیاز تاثیر دارن، تغییر کردن. در نهایت این تغییرات نباید اونقدری باشه که نمره نهایی یا GTmetrix Grade رو تحت تاثیر قرار بده (مگر اینکه ما توسط کدنویسی یا با افزونه‌ها، تغییراتی رو در سایت ایجاد کرده باشیم یا محتوای صفحه رو تغییر داده باشیم)
          از طرفی امتیازهای GTmetrix توسط یه ربات محاسبه میشن و حتی یه تغییر چند میلی ثانیه‌ای در یکی از معیارهای Perfromance (مثل TTI یا LCP) باعث تغییر میشه امتیاز Performance حدود ۵ تا ۱۰ نمره تغییر کنه.
          پیشنهاد می‌کنم سربرگ History رو هم بررسی کنی و ببینی آیا نمودارهای این قسمت تو چند روز گذشته تغییر داشتن یا نه.
          موفق باشی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=