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

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

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

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

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

احتمالا تو بررسی این نمودار، به اصطلاحاتی برمی‌خورید که براتون تازه هستن و معنی اونها رو نمی‌دونید. مثل 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 مطالعه کنید.

LCP چیست؟

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

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

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

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

تو این عکس می‌بینید که اون محتوای اصلی و بزرگ یا 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 چیست بیان کردیم.

زمان 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 داره. زمانی که این ۵ مورد برطرف بشه، خطاهای بعدی که هنوز برطرف نشدن و اولویت بیشتری هم دارن جایگزین این موارد میشن.

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

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

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

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

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