آموزش کامل نسخه جدید GTmetrix

آموزش کامل نسخه جدید GTmetrix

آنچه در این آموزش خواهید آموخت:

Google Lighthouse چیست؟

معیارهای جدید

امتیاز GTmetrix Grade :

 امتیاز Performance

⇐ برگه Performance

 امتیاز Structure

⇐ برگه Struture

ممیزی های سفارشی GTmetrix

بررسی Web Vitals

برگه Summary

⇐ بخش Page Details

سایر برگه ها

جمع بندی آموزش GTmetrix جدید

 

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

در این آپدیت جدید دو معیار YSlow و PageSpeed حذف شدند و جای خود را به معیارهای جدیدی به نام GTmetrix Grade و Web Vitals داده اند. این دو معیار نیز از بخش هایی تشکیل شده اند که در ادامه به آنها خواهیم پرداخت.

 

Google Lighthouse چیست؟

یکی از ابزارهای گوگل است که در حال حاضر در 5 زمینه زیر بررسی و عیب یابی را انجام میدهد:

Accessibility قابلیت دسترسی

Performance کارایی

SEO  سئو

Progressive Web Apps وب اپلیکیشن های پیشرونده

Best Practices برترین تمرین ها

درواقع Google Lighthouse یکی از ابزارهای گوگل جهت بررسی وضعیت کلی و سرعت سایت است. معیار امتیازدهی به سایت ها در این ابزار به گونه ای تعبیه شده است که تجربه کاربری UX بیشتر مدنظر قرار گیرد. ممکن است دلیل استفاده GTmetrix از این معیار نیز همین تاکید بیشتر بر تجربه کاربری باشد.

 

معیارهای جدید

پیش از این دو معیار YSlow و PageSpeed امتیاز صفحه را با عددی بین 0 تا 100 و و متناسب با عدد مشخص شده امتیاز را از بین حروف A تا F تعیین میکردند. اکنون جایگزین های آنها یعنی GTmetrix Grade و Web Vitals این امتیاز را مشخص میکنند.

 

آموزش کامل نسخه جدید GTmetrix

 

امتیاز GTmetrix Grade

پس از آنالیز سایت خود با GTmetrix اولین امتیازی که خواهید دید حروفی است که از A تا F متغیر میباشد. این امتیاز که مربوط به GTmetrix Grade است ارزیابی کلی وضعیت سایت شماست. این فاکتور خود نیز به دو عامل Performance ( اجرای صفحه ) و Structure ( بهینه بودن ساختار صفحه ) وابسته است که هرکدام به نحوی در ایجاد امتیاز صفحه تاثیر گذارند. بطور کلی GTmetrix Grade با الهام گرفتن از Google Lighthouse معیارهای سخت تری را برای امتیازدهی به صفحات درنظر دارد که با توجه به آن دریافت امتیاز A بسیار دشوارتر شده است.

فاکتورهای Performance و Structure به ترتیب از اهمیت 70 و 30 درصدی برخوردارند پس میتوانیم بگوییم که اجرا و کارایی سایت یا درواقع تجربه ی دریافتی توسط کاربر بسیار مهم تر از ساختار سایت است.

در ادامه به توضیح این دو عامل میپردازیم:

 

امتیاز Performance

این امتیاز درواقع یکی از فاکتورهای Google Lighthouse است. معیار Performance اجرای صفحه از دید کاربر را بررسی میکند.

 

آموزش کامل نسخه جدید GTmetrix

 
برگه Performance

امتیاز این معیار خود از 6 فاکتور زیر تشکیل شده است که میتوانید آن را در این برگه مشاهده کنید:

Loading Performance ( عملکرد درحال بارگیری ) 55%

1. First Contentful Paint ( اولین رنگ محتوا ) 15%

2. Speed Index ( شاخص سرعت ) 15%

3. Largest Contentful Paint ( بزرگترین رنگ محتوا ) 25%

Interactivity ( تعامل ) 40%

4. Time To Interactive ( زمان تعاملی ) 15%

5. Total Blocking Time ( کل زمان مسدود کردن ) 25%

Visual Stability ثبات بصری 5%

6. Cumulative Layout Shift ( تغییر چیدمان تجمعی ) 5%

 

آموزش کامل نسخه جدید GTmetrix

 

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

 

آموزش کامل نسخه جدید GTmetrix

 

در ادامه ی آن زمانبدی مرورگر یا Browser Timings را مشاهده خواهید کرد. این زمانبندی تاثیر مستقیم بر روی امتیاز Performance نخواهد داشت اما ممکن است اطلاعات بیشتری بر روی عملکرد صفحه شما فراهم آورد که این قابل بررسی خواهد بود.

 

آموزش کامل نسخه جدید GTmetrix

 

امتیاز Structure

این امتیاز ارزیابی اختصاصی Opportunity ( فرصت ) و Diagnostics ( عیب یابی ) از ابزار Google Lighthouse است که با کلیک بر روی سربرگ آن در GTmetrix مانند معیارهای سابق YSlow و PageSpeed پیشنهادهایی جهت بهبود سرعت بارگذاری صفحه خواهید دید.

امتیاز Structure و رفع خطاها با استفاده از این فاکتور تاثیر مستقیم بر Performance نخواهد داشت اما بطور کلی با بهبود این بخش , وضعیت Performance و در نهایت GTmetrix Grade بهتر خواهد شد.

 

آموزش کامل نسخه جدید GTmetrix

 
برگه Struture

این برگه جایگزین YSlow و PageSpeed است که شامل تمامی گزینه های ساختار بر اساس Lighthouse است و بهترین روش برای بهینه سازی عملکرد وب میباشد.

 

آموزش کامل نسخه جدید GTmetrix

 

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

 

آموزش کامل نسخه جدید GTmetrix

 

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

 

آموزش کامل نسخه جدید GTmetrix

 
ممیزی های سفارشی GTmetrix

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

 

Enable Keep-Alive

این تنها بر روی صفحاتی که از HTTP/1.1 بدون Keep-Alive استفاده میکنند موثر است.

اگر صفحه شما از HTTP/2 استفاده میکند این بررسی برای صفحه شما تاثیرگذار نخواهد بود.

 

Combine images using CSS sprites

اگر صفحه شما چندین تصویر کوچک ارائه میدهد این بررسی انجام خواهد شد.

توجه کنید که این بررسی آستانه متفاوتی بسته به اینکه صفحه شما از HTTP/1.1 یا HTTP/2 استفاده میکند دارد.

 

Use a Content Delivery Network (CDN)

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

 

Avoid CSS @import

اجتناب از CSS @import هنوز هم یک روش توصیه شده توسط مرورگر است (بدون defer) که بلافاصله دانلود تجزیه و اجرا خواهد شد.

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

 

بررسی Web Vitals

این معیار که در Search Console با نام Core Web Vitals موجود است , از معیارهای مهم گوگل جهت بررسی سرعت صفحات سایت در موبایل و دسکتاپ است. این فاکتور از عوامل مهم تاثیرگذارنده بر Performance و نمره نهایی GTmetrix Grade میباشد.

پیشنهاد خود جی تی متریکس نیز بررسی Web Vitals پیش از انجام بررسی های دیگر است. معیارهای Web Vitals شامل 3 مورد زیر هستند:

LCP یا Largest Contentful Paint مدت زمانی است که بزرگترین محتوای صفحه بارگذاری شده و به کاربر نمایش داده میشود. استاندارد این تایم از نظر جی تی متریکس 1.2 ثانیه یا کمتر است.

TBT یا Total Blocking Time مدت زمانی است که هنگام بارگذاری صفحه توسط فایل های اسکریپت بلاک شده است. تایم مناسب برای این گزینه 150 میلی ثانیه یا کمتر است.

CLS یا Cumulative Layout Shift میزان جابجایی غیرمنتظره عناصر صفحه هنگام بارگذاری است که توسط کاربر احساس میشود. استاندارد این معیار 0.1 یا کمتر است.

 

آموزش کامل نسخه جدید GTmetrix

 

برگه Summary

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

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

در ادامه مشکلات اصلی ساختار را مشاهده میکنید که بیشترین تاثیر را بر عملکرد صفحه شما دارد.

 

آموزش کامل نسخه جدید GTmetrix

 

بخش Page Details

پیش از این بخش Page Details که شامل زمان لود کامل صفحه ( Fully Loaded Time ) , حجم کلی صفحه ( Total Page Size ) و تعداد درخواست های ارسالی به سرور ( Requests ) بود در کادری کنار YSlow و PageSpeed قرار میگرفت. این بخش حذف نشده بلکه در آپدیت جدید این بخش دیگر در ابتدا صفحه نیست و در انتهای صفحه گزارش میتوانید آن را بطور کامل مشاهده کنید.

آموزش کامل نسخه جدید GTmetrix

 

سایر برگه ها

سایر برگه های موجود در GTmetrix به طور کلی با کمی تغییر مواجه شدند:

برگه Waterfall

این نمودار تغییری نکرده است و همراهی عالی برای اطلاعات Lighthouse است.

برگه Video

نوار فیلم که قبلا در برگه Video بود حذف شده است و به جای آن Speed Visualization یا تصویر سرعت در برگه Summary قرار گرفت.

برگه History

تغییرات برگه History شامل اضافه شدن نمودارهای جدید برای امتیاز Performance میباشد و جایگزینی نمودار YSlow و PageSpeed با نمودار امتیاز GTmetrix Grade , Performance و Structure انجام شده است.

 

جمع بندی آموزش GTmetrix جدید

در این آموزش درباره آپدیت جدید جی تی متریکس برای شما توضیح دادیم. از جمله تغییرات ایجاد شده در این نسخه حذف فاکتورهای YSlow و PageSpeed میباشد که در ازای آن فاکتورهای GTmetrix Grade و Web Vitals به آن اضافه شده است.

همچنین آموختید که در این نسخه از جی تی متریکس , تجربه کاربری در فاکتورهای امتیازدهی بیشترین تاثیر را داراست. زیرا این این ورژن جدید الهام گرفته از Google Lighthouse است که این ابزار نیز معیارهای سخت گیرانه ای برای تجربه کاربری دارد. اما تمرکز ورژن قبلی جی تی متریکس تنها بر روی ساختار یا میزان خوبی ساختار صفحه شما برای سرعت بهتر بود.

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

 

دیدگاه‌ها  

0 #2 کارشناس فنی 1399-10-21 08:05
به نقل از Agahi90.iR:
بسیار عالی بود موفق باشید سپاس از شما

خوشحالیم که مفید واقع شد
نقل قول کردن
0 #1 Agahi90.iR 1399-10-16 15:24
بسیار عالی بود موفق باشید سپاس از شما
نقل قول کردن

نوشتن دیدگاه


تصویر امنیتی
تصویر امنیتی جدید

آموزش های مرتبط