آپدیت جدید GTmetrix

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

هدف از تغییرات و بخش های تغییر کرده

به گفته سایت GTmetrix با توجه به معیار های جدید گوگل و تاثیر کاربران بر روی آن، سعی شده است با همکاری Lighthouse در آپدیت جدید GTmetrix معیار های نمره دهی سایت را هر چه بیشتر به تجربه واقعی کاربر نزدیک شود. بخشی از این تغییرات و قسمت ها از قبل وجود داشته اما مورد توجه بیشتری قرار گرفته اند و برخی از این بخش ها به تازگی اضافه شده اند. در آپدیت جدید توجه زیادی به بهینه سازی کد و پایگاه داده (Database) سایت و بهینه سازی سرور های مورد استفاده، شده است. همچنین تاکید زیادی به تاثیر المان های مختلف بر یکدیگر شده است و بر خلاف گذشته که عموما رفع هر یک از ایرادات گرفته شده بر روی بهبود یک قسمت تاثیر می گذاشت، در آپدیت جدید ایرادات گزارش شده، بر روی چندین معیار سنجش تاثیر مستقیم دارند. در ادامه به تغییرات بخش رایگان GTmetrix می پردازیم.

آموزش جی تی متریکس - GTmetrix Grade

در این بخش از آموزش جی تی متریکس به بررسی gtmetrix grade  می پردازیم. پس از وارد کردن url خود در سایت و آنالیز آن توسط GTmetrix با صفحه ای مشابه عکس بالا مواجه می شوید که در نگاه اول بخش جدید GTmetrix Grade به چشم می خورد.

GTmetrix Grade معیاری است که تاثیر گرفته از performance و Structure می باشد. به این صورت که تاثیر Performance بر روی آن 70% و تاثیر Structure بر آن 30% می باشد و به سطوح D ،C ،B ،A و F تقسیم بندی می شود که در ادامه به توضیح این دو المان می پردازیم.

آموزش جی تی متریکس - بخش Summary

در قسمت پایین تر بخش Summary را می بینید. این بخش تشکیل شده از قسمت های Speed Visualization ،Top Issues ،Page Details و More from GTmetrix می باشد.

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

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

Page Details: در بخش Page Details درصد و مقدار دقیق تشکیل دهنده عوامل مختلف (JS ،CSS ،IMG و...) در حجم سایت (Total Page Size) و تعداد درخواست های فرستاده شده به سرور (Total Page Requests)، را به صورت تفکیک شده با رنگ های مختلف و همچنین زمان بارگیری کامل سایت (Fully Loaded Time) را مشاهده می کنید.

More from GTmetrix: سایت GTmetrix بر اساس آنالیز انجام شده بر روی سایت شما، مقالاتی را برای بهبود عملکرد و رفع ایرادات سایت، به شما پیشنهاد می کند. این امر به این معناست که مقالات پیشنهادی پس از آنالیز هر سایت با توجه به ایرادات آن، متفاوت است.

آموزش جی تی متریکس - Performance

همانطور که گفته شد، Performance   هفتاد درصد از Grade شما را تعیین می کند. در این بخش 6 المان تاثیر گذار بر روی Performance یا عملکرد سایت قرار داده شده اند که درصد تاثیر آن ها و معانی هر رنگ را در عکس پایین مشاهده می کنید. در ادامه به معرفی و روش های بهبود هر کدام از این بخش ها می پردازیم.

First Contentful Paint (FCP)

First Contentful Paint به زمان بارگذاری اولین محتوا یا ساختار در صفحه به همراه رنگ پس زمینه سایت گفته می شود. به زبان ساده تر مدت زمانی که طول می کشد تا اولین جزو صفحه بعد از رنگ اولیه سایت نمایش داده شود.
معیار های GTmetrix برای نمره دهی به FCP سایت ها به صورت زیر می باشد:

• رنگ سبز: FPC برابر 934 میلی ثانیه و یا کمتر از آن.
• رنگ سبز کم رنگ: FPC بین 934 تا 1205 میلی ثانیه.
• رنگ نارنجی: FPC بین 1205 تا 1600 میلی ثانیه.
• رنگ قرمز: FPC برابر 1600 میلی ثانیه و یا بیشتر از آن.

از عوامل اصلی تاثیر گذار بر FPC می توان به این موارد اشاره کرد:
1- زمان پاسخگویی سرور
2- عوامل مسدود کننده رندر
3- تعداد درخواست ها و حجم سایت

Speed Index

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

معیار های GTmetrix برای نمره دهی به Speed Index سایت ها به صورت زیر می باشد:

• رنگ سبز: Speed Index برابر 1311 میلی ثانیه و یا کمتر از آن.
• رنگ سبز کم رنگ: Speed Index بین 1311 تا 1711 میلی ثانیه.
• رنگ نارنجی: Speed Index بین 1711 تا 2300 میلی ثانیه.
• رنگ قرمز: Speed Index برابر 2300 میلی ثانیه و یا بیشتر از آن.

از عوامل اصلی تاثیر گذار بر Speed Index می توان به این موارد اشاره کرد:

1. مدت زمان اجرای اسکریپت ها
2. کار main-thread
3. اسکریپت های اضافه
4. کد های third-party
5. حجم کتابخانه های جاوا اسکریپ استفاده شده

Large Content Paint (LCP)

Large Content Paint معیاری است که زمان بارگذاری بزرگ ترین المان صفحه شما را مشخص می کند. به عنوان مثال شما در بالای صفحه خود می خواهید عکس یک قهرمان را به عنوان بزرگ ترین المان صفحه نمایش دهید. بارگذاری سریع تر این عکس باعث ایجاد تجربه کاربری بهتری برای مخاطب می شود زیرا قبل از آن، بخش زیادی از صفحه شما خالی می مانده است. این امر را می توانید به صورت ساده تر در عکس بالا مشاهده کنید. از نظر GTmetrix در این عکس، سایت پایین تاثیر بهتری بر روی مخاطب مخصوصا کاربران موبایل ایجاد می کند.
معیار های GTmetrix برای نمره دهی به LCP سایت ها به صورت زیر می باشد:
رنگ سبز: LCP برابر 1311 میلی ثانیه و یا کمتر از آن.
رنگ سبز کم رنگ: LCP بین 1311 تا 1711 میلی ثانیه.
رنگ نارنجی: LCP بین 1711 تا 2300 میلی ثانیه.
رنگ قرمز: LCP برابر 2300 میلی ثانیه و یا بیشتر از آن.
از عوامل اصلی تاثیر گذار بر LCP می توان به این موارد اشاره کرد:
1- زمان پاسخگویی سرور
2- عوامل مسدود کننده رندر
3- حجم عکس و فیلم ها

آموزش جی تی متریکس - بخش Time to Interactive (TTI)

حتما برایتان پیش آمده است که پس از ورود به یک سایت، در ابتدای بارگذاری روی یکی از بخش های قابل کلیک آن، کلیک کنید و سایت واکنشی به آن نشان ندهد. Time to Interactive معیاری است که زمان بارگذاری FCP تا زمانی که صفحه به صورت کاملا تعاملی (responsive) باشد را اندازه گیری می کند. زمانی که صفحه کاملا تعاملی می شود، به زمانی گفته می شود که اجرا آخرین Long task به پایان رسد. TTI بر روی تجربه کاربری تاثیر زیادی می گذارد زیرا ممکن است کاربر حس کند سایت شما ایراد داشته و یا از استفاده کردن از سایت شما منصرف شود.

معیار های GTmetrix برای نمره دهی به TTI سایت ها به صورت زیر می باشد:

• رنگ سبز: TTI برابر 1311 میلی ثانیه و یا کمتر از آن.
• رنگ سبز کم رنگ: TTI بین 1311 تا 1711 میلی ثانیه.
• رنگ نارنجی: TTI بین 1711 تا 2300 میلی ثانیه.
• رنگ قرمز: TTI برابر 2300 میلی ثانیه و یا بیشتر از آن.

از عوامل اصلی تاثیر گذار بر TTI می توان به این موارد اشاره کرد:

• زمان پاسخگویی سرور
• Speed Index
• تعداد درخواست ها

Total Blocking Time (TBT)

Total Blocking Time (TBT) مدت زمانی در نظر گرفته می شود صفحه شما قابلیت تعاملی ندارد. به گفته GTmetrix باید زمانی بین اجرای Long task ها وجود داشته باشد که Long task اجرا شده به حالت تعاملی در آمده باشد تا Long task بعدی اجرا شود. این کار نسبت به حالتی که صفحه شما بدون واکنش بوده و پس از مدتی کل صفحه responsive می شود، حس بهتری به کاربر منتقل می کند.
به تفاوت TBT و TTI دقت کنید. TTI از FCP تا زمان تعاملی شدن کامل صفحه محاسبه می شود و فرآیند این بین اهمیتی ندارد اما TBT مجموع زمان هایی است که صفحه حالت تعاملی ندارد.

معیار های GTmetrix برای نمره دهی به TBT سایت ها به صورت زیر می باشد:

• رنگ سبز: TBT برابر 150 میلی ثانیه و یا کمتر از آن.
• رنگ سبز کم رنگ: TBT بین 150 تا 224 میلی ثانیه.
• رنگ نارنجی: TBT بین 224 تا 350 میلی ثانیه.
• رنگ قرمز: TBT برابر 350 میلی ثانیه و یا بیشتر از آن.

ددر آموزش جی تی متریکس آمده است از عوامل اصلی تاثیر گذار بر TBT می توان به این موارد اشاره کرد:

• زمان پاسخگویی سرور
• Speed Index
• تعداد درخواست ها

دقت داشته باشید که راه حل های گفته شده برای TTI و TBT یکسان می باشد. این موضوع خود تاییدی بر تاثیر معیار های مختلف بر یکدیگر می باشد.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift معیاری برای میزان تغییرات مکان عناصر صفحه، هنگام بارگذاری می باشد. GTmetrix این معیار را بین 0 تا 1 امتیاز بندی می کند. جابجایی غیر منتظره عناصر صفحه تجربه کاربری بدی برای کسانی که از سایت شما بازدید می کنند رقم می زند و باعث کلیک های اشتباه می شود.

معیار های GTmetrix برای نمره دهی به CLS سایت ها به صورت زیر می باشد:

• رنگ سبز: CLS برابر 0.1 و یا کمتر از آن.
• رنگ سبز کم رنگ: CLS بین 0.1 تا 0.15
• رنگ نارنجی: CLS بین 0.15 تا 0.25
• رنگ قرمز: CLS برابر 0.25 و یا بیشتر از آن.

از عوامل اصلی تاثیر گذار بر CLS می توان به این موارد اشاره کرد:

• ابعاد تصاویر
• جابجایی ناشی از تبلیغات، Ifram ها و...
• ترتیب بارگذاری مطالب

آموزش جی تی متریکس - روش های بهینه سازی

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

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

1- کاهش زمان پاسخگویی اولیه سرور (time to first byte):

• بهینه سازی کد و دیتا بیس
• استفاده از کش ذخیره شده بر روی مرورگر
• بهبود سخت افزاری سرور

2- استفاده از CDN
3- تعیین بخش های ضروری بر روی حافظه کش
4- کاهش تعداد ری دایرکت ها
5- استفاده از Preconect

حذف عوامل مسدود کننده رندر سایت که شامل بخش های زیر می شود:
1- اسکریپت ها بعد از کد های html اصلی اجرا شوند. برای این منظور می توانید از async یا defer در تگ های اسکریپت و لینک، استفاده کنید.

بهینه سازی درخواست ها به سرور که شامل بخش های زیر می شود:
1- سعی شود از Request های ضروری و وابسته به هم کمتر استفاده شود، زیرا زمان بارگذاری صفحه را بالا می برند.
2- کاهش تعداد ری دایرکت ها
3- ترکیب تصاویر با استفاده از CSS sprites
4- حذف اسکریپت های third-party (تبلیغات، سرویس های خارجی و به کل تمام عواملی که خارج از Url شما می باشند)

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

• کاهش حجم صفحه (Total Page Size)
• کاهش زمان اجرای اسکریپت ها
• به حداقل رساندن کار Main-thread
• حذف اسکریپت های اضافه و استفاده نشده
• جایگزین کردن کتابخانه های کوچک تر جاوا اسکریپت (JS) به جای کتابخانه های بزرگ
• بهینه سازی و فشرده سازی صحیح متن، عکس و فیلم ها
• تعیین ابعاد تصاویر
• کاهش جابجایی ناشی از تبلیغات، Iframe ها و...
• خودداری از لود کردن مطالب پایین تر (مطالب از بالای صفحه لود شوند)

Structure

Structure به طور کلی میزان بهینه بودن ساختار صفحه شما را بررسی می کند. این بخش مشابه Legacy در گزارش Page Speed و YSlow که در گذشته وجود داشت، می باشد. در این بخش علاوه بر گزارشات استاندارد، گزارشات اختصاصی GTmetrix اضافه شده است.

آموزش GTmetrix - گزارشات

آموزش 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 های گزارش شده در این خطاها بر روی معیار های متفاوتی تاثیر گذاشته و آن ها را بهینه سازی می کند.

سخن پایانی

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