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

این وبسایت استاندارد ها کارایی وب خود از PageSpeed/YSlow به Lighthouse تغییر داده.

در این مقاله ما به طور کامل تمام تغییرات در گزارش جدید را توضیح خواهیم داد.

درجه بندی و امتیازدهی

سیستم امتیاز دهی استفاده شده در GTmetrix جدید گزارش هایی مبتی بر سیستم امتیاز دهی Lighthouse است . هرچند که توسط GTmetrix در آن با توجه به فرمول های اختصاصی و تجربه چندین ساله تغییراتی صورت گرفته.

( GTmetrix Grade)

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

GTmetrix grade بر اساس عمکلرد (سرعت لود صفحه چقدر است) و ساختار( کد های بهینه شده و …) سایت است.به این صورت که تاثیر عملکر 70% و تاثیر ساختار 30% است.این درجه بندی به سطوح A,B,C,D و F تقسیم شده که در ادامه با انها بیشتر اشنا میشویم.

امتیاز عملکرد

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

این امتیاز از 3 قسمت اصلی تشکیل میشود

  • عملکرد بارگذاری صفحه 55%
  • تعامل 40%
  • ثبات بصری 5%

امتیاز ساختار

این امتیاز نشان میدهد که ساختار صفحات چند درصد بهینه شده.

Web Vitals

این قسمت از 3 جز تشکیل شده

1-LCP : مدت زمان بارگیری کامل وبسایت

2- TBT: مدت زمان بارگیری اسکریپ ها

3- CLS: در طول بارگیری صفحه چه میزان تغییر حالت دارد.

برگه خلاصه ( summery)

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

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

در قسمت Top Issues خطاهای اصلی مشاهده شده از سمت GTmetrix به ترتیب اهمیت آن ها برروی عملکرد سایت مشاهده میکنید.در سمت چپ اهمیت ایرادات با رنگ های قرمز تا سبز که با عنوان های مختلف دسته بندی شده را مشاهده کنید.

در سمت راست میزان تاثیر آن ها بر روی عملکرد سایت قابل مشاهده است.

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

در قسمت More From GTmetrix میتوانید با توجه به انالیز انجام شده مقالاتی برای رفع ایرادات و همچنین بهبود عملکرد سایت مشاهده کنید.

برگه عملکرد ( performance)

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

هر یک از اجزا با توضیح مختصر نوشته شده که هر کدام با رنگ های مجزا نمایش داده میشود

با روشن کردن گزینه Metric details میتوانید اطلاعات بیشتری در مورد جزئیات بدانید

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

رنگ ها و پیام ها

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

برگه ساختار ( stucture)

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

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

گزارشات

خطاهای GTmetrix

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

1- فعال سازی keep-alive که http/1.1 فاقد این ویژگی بوده و باید از http/2 استفاده کنید.
2- ترکیب تصاویر با استفاده از CSS Sprites
3- استفاده از شبکه ارائه محتوا یا CDN
4- خودداری از CSSimport
برخی از خطاهای جدید GTmetrix که در آپدیت جدید اضافه شده و یا از اهمیت بیشتری برخوردار شده اند:
Eliminate render-blocking resources
Minimize main-thread work
Reduce the impact of third-party code
Efficiently encode images
Remove unused CSS
Avoid large layout shifts
Use a Content Delivery Network (CDN)
Use HTTP/2 for all resources
بهبود هر کدام از Url های گزارش شده در این خطاها بر روی معیار های متفاوتی تاثیر گذاشته و آن ها را بهینه سازی می کند.

منبع:gtmerix