جی تی متریکس جدید و نحوه استفاده از آن

مدت زمان مطالعه این مقاله 8 دقیقه

سرعت سایت عاملی بسیار حیاتی برای باقی ماندن در صفحات جستجو است و همه سعی می‌کنند به هر روشی که می‌توانند این کار را انجام دهند. استفاده از جی تی متریکس جدید یکی از این روش‌هاست. در این مقاله سعی کرده ایم آپدیت جدید GTmetrix و طرز استفاده از این ابزار را توضیح دهیم.

جی تی متریکس چیست؟

جی تی متریکس سایتی است که راهکارهایی را برای افزایش سرعت سایت ارائه می‌دهد. برای این کار به آدرس gtmetrix.com مراجعه کنید و خیلی ساده آدرس سایت مورد نظر را وارد کنید.

آپدیت جدید GTmetrix به شما می‌گوید چه چیزهایی در سایت سرعت‌شان خوب و چه چیزهایی خوب نیست. در ادامه‌ی مقاله با جی تی متریکس جدید همراه ما باشید.

چگونه از جی تی متریکس جدید استفاده کنیم؟

نسخه اصلی آپدیت جدید GTmetrix کاملاً رایگان است و شما می‌توانید با ساخت یک حساب، به گزینه های بیشتری دسترسی پیدا کنید. اگر حساب کاربری ایجاد کنید می‌توانید از گزینه ‌های تجزیه و تحلیلِ بیشتری استفاده کنید.

اولین کار در جی تی متریکس جدید توانایی انتخاب مکانی است، که می‌خواهید URL خود را در آن آزمایش کنید. مکان فیزیکی شما انتخاب می‌شود و بسیار مهم است چون مربوط به جایی است که سایت شما میزبانی می‌شود. مکان‌های موجود در حال حاضر شامل:

• دالاس، آمریکا
• هنگ کنگ، چین
• لندن، انگلستان
• بمبئی، هند
• سیدنی، استرالیا
• سائو پائولو، برزیل
• ونکوور، کانادا

مهم ترین چیزی که باید در آپدیت جدید GTmetrix بدانید این است که جی تی متریکس جدید سعی کرده بیشتر از Google Lighthouse پیروی کند و دیگر فقط روی سرعت متمرکز نیست و چیزهای دیگری را هم مورد بررسی قرار می‌دهد.

Lighthouse چیست؟

Lighthouse یکی از ابزارهای گوگل برای افزایش کیفیت صفحات وب است که در آپدیت جدید GTmetrix هم، از آن پیروی شده است. Lighthouse برخلاف ابزار قدیمیِ Google PageSpeed Insights یک سایت را به روش‌های مختلف تحلیل می‌کند.

این ابزار جستجو می‌کند تا بفهمد متغییر‌های مهم داخل سایت شما در چه وضعیتی هستند؛ مثلاً مواردی چون اجرا، سئو، تجربه‌ی کاربر، دسترسی‌پذیری و وب اپلیکیشن پیش ‌رونده را بررسی می‌کند.

می‌توانید از آن برای آزمایش هر نوع URL، سئو سایت، برنامه ‌های وب و موارد دیگر استفاده کنید.

لایت هاوس برای تعریف معیارهای خود، صرفاً بر اندازه گیری سرعت بارگذاری صفحه متمرکز نیست، بلکه تمام معیارهای آن بر ارزیابی تجربه‌ی کاربران متمرکز است.

در ضمن، بیشتر بازدیدکنندگان سایت به این فکر نیستند که چه مدت طول می‌کشد تا کل سایت شما بارگیری شود، بلکه به دنبال این هستند که هر چه سریع تر بتوانند در سایت اسکرول کنند و با سایت تعامل داشه باشند.

Google این معیارها را Core Web Vital می‌نامد. آپدیت جدید GTmetrix هم این Core Web Vital‌ها را دارد.

جی تی متریکس جدید

در اصل، آپدیت جدید GTmetrix توضیح داده که PageSpeed و YSlow قبلا تواناییِ خوبی در تحلیل صفحات داشتند، اما تمرکز اصلی آن‌ها فقط روی ظاهر سایت بوده است؛ یعنی همان چیزی که مخاطبان می‌دیدند.

اگر در گذشته امتیاز خوبی برای PageSpeed / YSlow کسب می‌کردید، اما سرعت بارگذاری پایین بود، در آپدیت جدید جی تی متریکس دیگر همچین اتفاقی نمی‌افتد! چون قبلاً امتیازی که دریافت می‌کردید برحسب میزان خوب ساخته شدنِ ساختار صفحه شما بود، نه بر حسب سرعت نمایش سایت به کاربر!

این نمای کلی جدید سایت جی تی متریکس جدید است که در ادامه به تحلیل جزییات آن می‌پردازیم.

جدول اول سمت چپ شروع کنیم:

GTmetrix Grade: این گزینه سایت را از نظر ساخت و کدنویسی و همچنین از لحاظ عملکرد بررسی می‌کند. Performance و Structure در آپدیت جدید GTmrtrix روی امتیاز نهایی تاثیر می‌گذارند و به سایت‌ها از A تا F رتبه می‌دهد. A بیشترین و F کمترین.

جزئیات جی تی متریکس جدید

Performance

عواملی که بر امتیاز Performance در آپدیت جدید Gtmetrix تاثیر می‌گذارند:

1. کیفیت بارگذاری:

• اولین چیزی که کاربر می‌ببیند.
• نمایش لحظه ای سایت یا چیزی که کاربر هر لحظه می‌بیند.
• بزرگترین چیزی که کاربر در سایت ببیند که ممکن است تصویر باشد یا یک متن.

2. تعامل:

• زمانی که طول می‌کشد تا کاربر بتواند روی صفحه کاری انجام دهد.
• زمان بلاک بودن تعامل که یعنی زمان انتظار برای تعامل کردن و اسکرول کردن در صفحه است.

3. ثبات بصری:
در ابزار Lighthouse هرچقدر ثبات اولیه با شکل نهاییِ صفحه، یکسان باشد بهتر است؛ پس در جی تی متریکس جدید نیز چنین چیزی صدق می‌کند.

شاید برایتان پیش آمده باشد وارد سایتی شوید، حس کنید صفحه کاملا بارگذاری شده و بخواهید در صفحه کاری انجام دهید اما قسمت‌هایی، شروع به تکان خوردن کنند و جابه جا شوند!؟

جایگزین Tab Timings در جی تی متریکس جدید تب Performance است و به رنگ‌های سبز، سبز روشن، نارنجی و قرمز در موارد مختلف به سایت امتیاز می‌دهد.

جزئیات گزینه Performance

(First Contentful Paint (FCP

در آپدیت جدید GTmetrix گزینه FCP به معنای اولین چیزی است که سایت به کاربر نمایش می‌دهد.

(Speed Index (SI

این مورد در آپدیت جدید GTmetrix معیاری برای بارگذاری صفحه است که به شما نشان می‌دهد محتوای صفحه با چه سرعتی کامل می‌شود. Speed Index میانگینِ زمانی است که قسمت‌های قابل مشاهده‌ی صفحه، نمایش داده می‌شود.

بر حسب میلی ثانیه بیان می‌شود و هرچه امتیاز پایین تر باشد، بهتر است.

(Largest Contentful Paint (LCP

LCP در آپدیت جدید GTmetrix مدت زمانی است که یک صفحه بارگیری می‌شود. نکته ای که باید توجه داشته باشید این است که زمان نتایج “خوب” 2 ثانیه و کمتر است؛ این نشان می‌دهد که گوگل چه مقدار روی بهبود بیشتر سرعت سایت تمرکز کرده است.

(Time to Interactive (TTI

به معنای زمانِ تعامل است. یعنی زمانی که کاربر می‌تواند پس از ارائه صفحه با آن ارتباط برقرار کند. برای مثال، پس از کلیک یک خریدار بر روی دکمه افزودن به سبد خرید، TTI مدت زمان لازم برای استفاده از عناصر صفحه‌ی بعدی را اندازه می‌گیرد.

(Total Blocking Time (TBT

این گزینه در آپدیت جدید GTmetrix به معنای زمان مسدود کردن کل است و نشان دهنده‌ی مقدار کل زمان بین FCP و TTI را اندازه گیری می‌کند.

(Cumulative Layout Shift (CLS

به معنای میزان پایداری صفحه در هنگام بارگیری است. آیا هنگام بارگیریِ صفحه، با شروع بارگیری تصاویر و فیلم‌ها، مطالب تغییر مکان می‌دهند یا اینکه نسبتاً ثابت می‌مانند؟

تب Browser Timings در جی تی متریکس جدید نشان می‌دهد، یک سایت از زمانی که به آن درخواست فرستاده می‌شود تا لحظه ای که نتیجه‌ی نهایی نمایش داده ‌شود برای هر کدام از درخواست‌ها چقدر زمان صرف می‌شود!

Structure

عواملی که بر امتیاز Structure در آپدیت جدید GTmetrix تاثیر می‌گذارند:

طبق توضیحی که جی تی متریکس جدید داده این بخش از ساختار‌های مختلف و متنوعی تشکیل شده است. هدف آن محاسبه عملکرد بهینه‌ی صفحه است و در ادامه یک سری ساختار معرفی کرده که باید زیر نظر داشته باشیم.

در توضیحات زیر این موارد را برای شما به فارسی تغییر داده ام و هر کدام که به نظر ممکن است گنگ باشد را توضیح دادم. مثلاً در بالا به ما گفته است که:

زمان پاسخ اولیه سرور را کاهش دهید

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

حذف منابع مسدود کننده رندر (Render-Blocking)

رندر به معنای بارگذاری است، بنابراین اگر چیزی مانع رندر می‌شود، به این معنی است که سایت نمی‌تواند تا جایی که می‌تواند سریع بارگذاری شود.

همانطور که می‌دانید همه مضامین و افزونه های مورد استفاده در سایت وردپرسی شما مثل پرونده های (JS) و (CSS) به فرانت‌اند اضافه می‌شوند.

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

به طور کلی، قبل از اینکه کاربر بتواند محتوای اصلی را ببیند، مرورگر باید یک صف از پرونده های JS ,CSS و HTML را بارگیری کند.

اگر تعداد زیادی از این اسکریپت‌های JS دارید که بارگیری محتوای اصلی HTML را به تأخیر می‌اندازد به زودی باعث کند شدن سایت شما شده و کاربران را مجبور به انتظار می‌کند.

اگر سرعت بارگذاری سایت شما تحت تأثیر مثلا JavaScript باشد، به این قطعه ها کد Render Blocking JavaScript گفته می شود.

راهکار چیست؟

• از شبکه تحویل محتوا یا CDN استفاده کنید.
• برای بهبود اسکرول کردن از Passive Listeners) Passive Listeners یک ابزار وب جدید است که اسکرول کردن صفحه را بهبود می‌بخشد.) استفاده کنید.
• برای همه منابع از HTTP / 2 استفاده کنید.
• از تصاویر در اندازه‌ی مناسب استفاده کنید.

نکته: در جی تی متریکس جدید، امتیاز Structure روی امتیاز Performance به طور مستقیم تاثیر نمی‌گذارد اما در نهایت بهبود ساختار صفحه‌ی شما به بهبود عملکرد صفحه کمک می‌کند.

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

تب‌های دیگری هم هستند که مثل قبل باقی مانده‌ اند (Waterfall ,Video و History) اما در ادامه به توضیح کاربرد آن‌ها نیز خواهیم پرداخت.

Web Vitals

در جی تی متریکس جدید این تب شامل: (Largest Contentful Paint (LCP و (Total Blocking Time(TBT و (Cumulative Layout Shift (CLS است که بالا در قسمت Performance هر یک را توضیح دادیم.

Summary

این تب در آپدیت جدید GTmetrix اصلی ترین بخش مرتبط و تحلیل Data (داده) برای هر وبمستر است.

بخش Speed Visualization

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

بخش Top Issues

این بخش ایرادات و مشکلات جدی‌تری که روی بارگذاریِ سایت تأثیر دارد را به شما نمایش می‌دهد، البته دقت کنید بعد از رفع این مشکل با تست مجدد ممکن است مشکلات دیگری را نمایش دهد و مشکل قبلی را حل شده فرض کند، پس اولیت‌های جدیدتری را نمایش می‌دهد!

بخش Page Details

با توجه به تصویرِ این بخش در آپدیت جدید GTmetrix می‌توانیم بفهمیم که اجزای تشکیل دهنده‌ی صفحه ای که تست گرفتیم چیست؟ چقدر از حجم صفحه را تشکیل داده است؟ چقدر درخواست ارسال می‌شود و سایز هر متغیر چه مقدار است؟

Waterfall

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

برای اینکار باید روی برگه‌ی سوم کلیک کرده و نمودار Waterfall یا نمودار آبشاری را بخوانید. نمودار Waterfall در جی تی متریکس جدید با تقسیم کردن هر درخواست و اندازه گیریِ زمان، عملکرد بارگیریِ صفحه‌ی شما را توصیف می‌کند که شامل اسکریپت‌ها (JS)، فایل‌های چندرسانه ای (عکس و فیلم) یا منابع خارجی موجود در صفحه است.

برای هر درخواست، شما زمان بارگیریِ خود را دارید، که توسط میله های افقی نشان داده می‌شود: هرچه نوار طولانی‌تر شود، بارگیری و اجرای درخواست کندتر می‌شود.

نمودار Waterfall آپدیت جدید GTmetrix شامل پنج ستون است. از چپ به راست شامل موارد زیر است:

• نام پرونده درخواستی
• وضعیت پاسخ HTTP برای آن منبع از سرور بازگشتی
• جایی که منبع از آن می‌آید
• سایز پرونده برای هر منبع
• زمان لازم برای بارگیری یا اجرای هر منبع

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

می‌بینیم که زمان لازم برای بارگیری هر مورد با جزییات نشان داده شده است و میزان Blocking و DNS Lookup و… مشخص شده که واضح هستند. من دو اصطلاحی را که حدس می‌زنم ممکن است متوجه نشوید را توضیح می‌دهم.

Blocking در جی تی متریکس جدید: این مورد، مدت زمان مسدود شدن صفحه، که مانع تعامل کاربر با صفحه می‌شود را نشان می‌دهد.

DNS Lookup در جی تی متریکس جدید: زمانی که DNSها را روی دامنه تنظیم می‌کنیم، ارتباط بین هاست و دامنه برقرار می‌گردد. زمانی که کسی کلیک کند، یک اکشن به نام DNS Lookup ایجاد می‌شود.

زمانی که شما روی یک سایت کلیک می‌کنید، برخی سایت‌ها ممکن است نتوانند IP شما را پیدا کنند و صفحه برای شما باز نشود. در این مواقع DNS Lookup سعی می‌کند با جستجو و رندرکردن، IP شما را پیدا کند و ابتدا از آی پی‌های محلی شروع به گشتن می‌کند.

DOM Loaded در جی تی متریکس جدید: این مورد به شما می‌گوید که به عنوان وبمستر سایت، JS ها را به‌خوبی بهینه سازی نکرده اید و DOM های زیادی ایجاد شده است که باعث بارگذاریِ دیرتر سایت شما می‌شود.

Video

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

در این ویدیو قسمت‌های سایت شما به ترتیب بارگذاری می‌شوند. بنابراین، می‌توانید ببینید که کدام عناصر صفحه برای بارگذاری، زمان بیشتری می‌گیرند تا نمایش داده شوند.

History

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

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

گزینه ‌های اضافی آپدیت جدید GTmetrix

گزینه‌ های اضافی شامل توقف بارگذاریِ آزمایشی، امکان ارسال کوکی به همراه درخواست شما، استفاده از احراز هویت HTTP، امکان قرار دادن URL در لیست سفید و لیست سیاه، وضوح صفحه و نسبت پیکسل دستگاه و لغو نمایندگی کاربر است.

در آخر

به یاد داشته باشید که بیش از حد در مورد امتیازات وسواس قائل نشوید، بلکه به دنبال بهبود واقعیِ سرعت در سایت خود باشید.

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

منابع

kinsta
wpastra