آموزش جی تی متریکس تصویری (Gtmetrix) نسخه جدید ۲۰۲۱

آموزش جی تی متریکس تصویری (Gtmetrix) نسخه جدید ۲۰۲۱

خیلی از شما دوستان عزیز درخواست کرده بودید که آموزش جی تی متریکس (Gtmetrix) این ابزار قدرتمند سنجش سرعت وبسایت را به صورت یک مقاله آموزشی برای شما آماده کنم. در این مقاله قصد دارم تا به صورت کامل و جامع نسخه جدید جی تی متریکس را به شما آموزش دهم. همانطور که احتمالاً بدانید ابزار جی تی متریکس، یک ابزار آنلاین برای سنجش میزان سرعت بارگذاری وبسایت است.

زمانی که ما می خواهیم قالب وبسایت خودمان را از نظر مدّت زمان بارگذاری بررسی کنیم، به سراغ وبسایت Gtmetrix می رویم و وبسایت خودمان را برای تحلیل به دست ابزار جی تی متریکس می سپاریم! این ابزار تقریباً به صورت مشترک در میان همه وبمستران، دیجیتال مسیر سئو و حتی صاحبان کسب و کارها نام آشناست و هر کس حتی در حد چند مقاله، تکنیک ها و ترفند های افزایش سرعت سایت را بررسی کرده باشد، قطعاً نام این ابزار تحلیلی را شنیده است. اما بیش از این شما رو منتظر نمی گذارم، بریم برای آموزش کار با جی تی متریکس (Gtmetrix)

ورود به وبسایت جی تی متریکس (Gtmetrix)

در مرحله نخست باید وارد وبسایت Gtmetrix.com شویم و همانطور که در تصویر زیر مشاهده می کنید محلی برای ورود آدرس URL وبسایت ما وجود دارد که می توانید آدرس صفحه اصلی یا یکی از صفحات وبسایت خود را در این محل وارد نمایید و سپس روی دکمه “Test your site” کلیک کنید:

آموزش جی تی متریکس - صفحه اصلی

من برای تست در این مقاله سرعت بارگذاری وبسایت etsy را به عنوان تست بررسی خواهم کرد و هیچگونه قصد و نیّتی برای زیر سوال بردن این وبسایت و یا اینکه بخواهم مشکلاتش را بگویم ندارم. خلاصه ای از روند بارگذاری در جی تی متریکس در تصویر زیر، روند بارگذاری Load صفحات وبسایت را مشاهده می کنید که به آن Speed Visualization گفته می شود. در واقع این بخش از Gtmetrix به شما نشان می دهد، صفحه ای که قصد تحلیل آن را دارید، از نظر روند بارگذاری چگونه است و در ثانیه های مختلف، وضعیّت بارگذاری صفحات مختلف وب چگونه است.

آموزش جی تی متریکس- روند لود صفحات سایت

اما در این بخش، ۴ خطای اصلی را با هم بررسی می کنیم که هر کدام چه معنا و مفهومی دارد:

خطای شماره ۱ : Avoid an excessive DOM size

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

خطای شماره ۲: Avoid enormous network payloads

این خطا نشان می دهد که اسنادی بر روی وبسایت شما وجود دارد (بیشتر فایل های تصویری) که حجم غیر استانداردی دارند و میزان حجم این فایل ها بیشتر از حد لازم است و زمانی که شما روی این ردیف کلیک می کنید، خواهید دید که آدرس فایل هایی را به شما نمایش می دهد و جلو آن عدد سایز این فایل ها مشخص است.کافیست تک تک این فایل ها را بررسی کنید و تا آنجایی که می شود حجمشان را کاهش دهید.

خطای شماره ۳ : Property size images

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

خطای شماره ۴ : Serve static assets with an efficient cache police

این بخش، فایل های Javascript و Css ای را به شما نشان می دهد که اگر کاهش حجم داده شوند و Cache شوند، چقدر می تواند بر روی افزایش سرعت وبسایت شما تاثیر بالایی داشته باشد. بنابراین باید با کلیک بر روی نوار این خطا، می توانید فایل های کدهایی که می توان حجمشان را کمتر کرد و با کش کردن آن ها به کاهش زمان لود سایت کمک کرد، را یافت.

خطای شماره ۵ : Use Passive listeners to improve scrolling Performance

این خطا مربوط به ویژگی جدید در DOM به نام “Use Passive Listeners” است که تجربه کاربری برای اسکرول کردن صفحات را بهبود می بخشد. اگر روی نوار خطای این بخش کلیک کنید، خواهید دید که به شما نشان می دهد در کدامیک از صفحات، این ویژگی وجود ندارد و شما می توانید با بررسی دقیق آن فایل جاوااسکریپت، تجربه بهتری را برای کاربران ایجاد کنید. پارامترهای اصلی در ابزار Gtmetrix همانطور که در تصویر زیر مشخص است، بعد از آنالیز وبسایت توسط ابزار تحلیلی جی تی متریکس، نتیجه کار به این شکل نمایش داده می شود:

آموزش جی تی متریکس نمای کلی بعد از آنالیز سایت

بسیار خوب، همانطور که در تصویر فوق مشاهده می کنید، در نمای کلی، به ما ۴ پارامتر اصلی نمایش داده می شود که در ادامه تک تک این پارامترها را با هم بررسی خواهیم کرد: قبل از اینکه بریم به سراغ توضیحات لازم در مورد پارامترهای اصلی، باید شما را با Lighthouse آشنا کنم. موتور اصلی در نسخه جدید جی تی متریکس Lighthouse است. این ابزار که توسط تیم فنی گوگل پیاده سازی شده است، وظیفه تحلیل و آنالیز صفحات وبسایت ها از نظر عملکرد فنّی را بر عهده دارند.

پارامترهای بخش Performance :

Metrics Performance شامل مجموعه ای از پارامترهایی است که در نسخه جدید جی تی متریکس ایجاد شده و بررسی این پارامترها به وبسایت شما کمک خواهد کرد تا بتوانید وضعیّت لود صفحه را با تمرکز و جزئیّات بیشتری رصد کنید. در تصویر زیر ۶ پارامتر اصلی را با هم بررسی خواهیم کرد که در ادامه به تک تک آن ها اشاره خواهیم کرد.

آموزش جی تی متریکس - پارامترهای اصلی در بخش performance

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

پارامتر First Contentful Paint یا FTP :

این پارامتر مدت زمان اولین تغییر و اولین المانی که در صفحه لود می شود را نمایش می دهد. بگذارید این پارامتر را خیلی ساده و با یک مثال برای شما بیان کنم. زمانیکه کاربری، یکی از صفحات وبسایت شما را بارگذاری می کند، بخش های مختلفی در صفحه ظاهر می شود. حال ممکن است اصلاً اولین پارامتری که در صفحه ظاهر می شود که رنگ زمینه (مثلاً با رنگ سفید) باشد که برای کاربر هم قابل رویت نیست. به مدت زمانی که از زمان درخواست URL در صفحه تا زمان نمایش اولین نشانه در صفحه مرورگر، First Contentful Paint یا به اختصار FTP گفته می شود. بهترین زمان برای این پارامتر ۰.۹ ثانیه و کمتر است.

پارامتر Time To Interactive یا TTI :

پارامتر TTI به مدت زمان درخواست صفحه در مرورگر تا زمانی گفته می شود که کاربر بتونه به صورت کامل با المان های موجود در صفحه تعامل داشته باشه. باز هم برای درک بهتر این موضوع، برای شما یک مثال می زنم. احتمالاً برای شما پیش آمده باشد که صفحه ای از یک وبسایت را بارگذاری می کنید امّا تا چند ثانیه مثلاً دکمه داخل صفحه کار نمی کند و از یک زمان به بعد دکمه قابل کلیک می شود. یا مثلاً صفحه را باز می کنید و یک Check box در صفحه قابل کلیک نیست و یکی دو ثانیه بعد قابل کلیک می شود. پارامتر Time To Interactive دقیقاً به مدّت زمان درخواست صفحه تا فعال شدن تمامی المان ها در صفحه گفته می شود. بنابراین اگر می خواهید این مدّت زمان کاهش پیدا کند، باید کاری کنید تا کاربر زودتر بتواند با المان های درون صفحه شما ارتباط و تعامل برقرار کند. بهترین زمان برای این پارامتر، ۲.۵ ثانیه و کمتر است.

پارامتر Speed Index یا SI :

پارامتر SI به مدت زمانی گفته می شود که محتوای صفحه وبسایت شما به طور کامل قابل رویت می شود. قطعاً برای شما پیش آمده که یک صفحه از وبسایتی را بارگذاری کرده اید امّا مدت زمانی طول می کشد تا تمام المان های موجود در صفحه برای شما قابل رویت باشد و تمام المان های مجود در صفحه شامل تصاویر، ویدیو، دکمه ها و… به چشم شما قابل دیدن باشد. به این مدّت زمان Speed Index گفته می شود.

بررسی پارامتر Total Blocking Time یا TBT :

شرح این پارامتر کمی سخت و گیج کننده است، اما من سعی می کنم برای شما به زبان ساده بیان کنم. قبل از اینکه پارامتر TBT را برای شما توضیح دهم، باید شما را با مفهوم main thread آشنا کنم. تصور کنید که شما یک مهمانی برپا کرده اید و به این مهمانی ۵۰ نفر دعوت کرده اید. اما تعداد افرادی که به این ۵۰ نفر سرویس می دهند، مثلاً فقط ۳ نفر باشند! زمانی که این سه نفر شروع به سرویس دهی به مهمانان را شروع می کنند، اگر در یک مدت زمان هر سه نفر مشغول باشند و فرد دیگری هم برای سرویس به مهمانان نباشد، قطعاً مدت زمانی طول خواهد کشید که بقیه مهمانان منتظر باشند تا پذیرایی شوند.حال همین مثال را بیاوریم به صفحه وبسایت خودمان. زمانی که یک کاربر صفحه وبسایتی را درخواست می دهد، مرورگر از Main thread استفاده می کند تا المان های صفحه را بارگذاری کند و در پشت صحنه، کدهای بسیار زیادی (نظیر جاوا اسکریپت و Css و …) بارگذاری می شود. حال اگر main thread که نقش آن سه نفر در مهمانی را بازی می کند، برای سرویس دهی و کارهایی که برای لود صفحه باید انجام دهد، بیشتر از ۵۰ میلی ثانیه طول بکشد، main thread بلاک شده و قادر به پاسخگویی نیست. به این مدت زمان قفل شدن، Total Blocking Time یا TBT گفته می شود. بهترین زمان برای این بخش ۱۵۰ میلی ثانیه است.

پارامتر Largest Contentful Paint یا LCP :

این پارامتر مربوط به مدت زمان لود حجیم ترین المان داخل صفحه است که به آن LCP گفته می شود. زمانی که شما درخواست لود یک صفحه را می دهید، فایل های مختلفی در صفحه شروع به لود شدن می کند و هر کدام تا بارگذاری کامل، مدّت زمانی را به خود اختصاص می دهد. به بیشترین زمانی که مربوط به بارگذاری پرحجم ترین المان صفحه است LCP گفته می شود. پس کاری که شما یا برنامه نویس وبسایت شما باید انجام دهد، این است که به کمک کلیک روی نوار این خطا، فایل های پر حجم شناسایی شود و فشرده سازی شود. اگر از وردپرس برای مدیریت وبسایت خودتان استفاده می کنید، احتمالاً افزونه های W3 Total cahce یا wp super cache می توانید برای کاهش حجم فایل های Css و JS استفاده کنید.بهترین زمان برای این پارامتر ۱.۲ ثانیه و کمتر است.

پارامتر Cumulative Layout Shift یا CLS :

قطعاً برای شما پیش آمده که یک صفحه وبسایت را در مرورگر درخواست می دهید و برخی از المان های صفحه (می تواند یک دکمه، تصویر و… باشد) پس از زمانی کوتاه جابجا شده و بعد از لود کامل صفحه در سر جای اصلی خود قرار می گیرد. به این مدت زمان، CLS گفته می شود. این پرش در نمایش المان های داخل صفحه، می تواند تجربه کاربری نه چندان مناسبی را برای کاربر ایجاد کند. بنابراین تمام تلاش شما باید این باشد که المان ها از همان ابتدا به درستی لود شود و این موضوع تا حد ممکن برطرف گردد. بهترین عدد برای این پارامتر ۰.۱ و کمتر است.

پارامترهای بخش Structure :

پارامترها این بخش مربوط به عملکرد بخش های مختلف داخل صفحه فراخوانی شده و البته منابعی است که مربوط به کل محتوای وبسایت شما می شود. بعضی از منابع در همه صفحات وبسایت شما لود می شود و این موضوع باعث شده تا جی تی متریکس (Gtmetrix) خطاها و مشکلاتی را در این بخش به نمایش بگذارد.

در ویدیو زیر، خطاهای بخش structure در ابزار جی تی متریکس را به شما آموزش خواهم داد.

بخش waterfall در جی تی متریکس

اما رسیدیم به آخرین بخش مهمّی که در آموزش جی تی متریکس نسخه جدید می خواهیم به آن اشاره کنیم. همانطوری که در شکل زیر مشاهده می کنید، این بخش تمام منابع کدنویسی شده، وبسایت شما را نمایش می دهد. از کدهای HTML گرفته تا Css و JS و … شما می توانید با کلیک بر روی هر بخش منبع مربوطه را مشاهده و مسیر هر فایل را پیدا کنید .

آموزش جی تی متریکس - روند لود صفحات سایت

۴ پارامتر اصلی در نمودار فوق قابل مشاهده است:

پارامتر URL:

دقیقاً مسیر آدرس URL فایل مورد نظر را نمایش می دهد و شما می توانید با کلیک روی هر ردیف، منبع تصویری، JS ، CSS و … را پیدا کنید.

پارامتر Status:

این پارامتر در اصل، کد وضعیّت منبع مورد نظر را نشان می دهد. کد ۲۰۰: درخواست موفقیت آمیز بوده است. کد ۳۰۰ : درخواست چندین پاسخ احتمالی دارد و کاربر باید یکی را انتخاب کند. کد ۳۰۲ : درخواست مورد نظر در جایی غیر از آدرس مورد نظر پیدا شده است. کد ۴۰۰ : به این معنی است که وبسایت غیر قابل دسترس است. کد ۴۰۴: منبع مورد نظر در دسترس نیست. کد ۵۰۰ : مشکل از سمت سرور است و نمی تواند درخواست را کامل کند. البته این تنها بخشی از کدهای وضعیّت (Status) هست که سعی کردم مهم ترین آن ها را بیان کنم.

پارامتر Domain :

این پارامتر نشان می دهد که منبع مورد نظر مربوط به کدام دامنه است. آیا مربوط به دامنه می شود یا زیر دامنه و یا حتّی این منبع از یک دامنه دیگر دریافت خواهد شد ! پارامتر Timeline : نشان دهنده مدّت زمانی است که طول می کشد تا فایل مورد نظر به طور کامل اجرا شود. در بیشتر مواقع این مدّت زمان بر حسب میلی ثانیه است.

سخن آخر :

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

۴.۷/۵ - (۴ امتیاز)

حرفه خود را با برنامه نویسی تحت وب آغاز کردم و رفته رفته با مباحث دیجیتال مارکتینگ آشنا شدم و در مسیر تحلیل انواع وب‌سایت‌ها،سئو و بازاریابی اینترنتی قرار گرفتم. مجلّه آموزشی مسیر سئو را با علاقه فراوان و برای کمک به رشد کسب‌وکارها در فضای دیجیتال راه اندازی کردم.

عضویت

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

[mailpoet_form id="1"]

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

۲ دیدگاه برای این مطلب ثبت شده است

  1. احمد
    ۵:۴۴ ۱۴۰۰/۰۲/۲۶

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

    • عرفان رحیمی
      ۱:۲۸ ۱۴۰۰/۰۸/۰۸

      سلام ممنونم، از اینکه براتون مفید بود خیلی خوشحالم.