سلام اگه درحال مطالعه این مقاله هستید میدونید یکی از اصلی ترین ابزار ها برای هر وبمستر و طراح وبی یعنی جی تی متریکس آپدیت جدیدش رو منتشر کرده و میشه گفت کاملا با شکل شمایل قبلش متفاوت تر برگشته; ما توی این مقاله میخوایم بخش های مختلف رو در آپدیت جدید gtmetrix بهتون معرفی کنیم و آموزش های اولیه رو بدیم :)
این آپدیت بسیار پیچیده و سنگین هست اما هرچقدر که میریم جلو جذاب تر میشه و بدون شک برای وبمستر های حرفه ای و مدیر های وبسایت که با این ابزار کار میکنن بدون شک این مسئله مهم هست که بدونن قضیه از چه قراره و از همین اول مسیر میگم بهتون این یه آپدیت ساده نیست و فوق العاده قراره شگفت زده بشید ! پیشنهاد میکنم سر فرصت تا آخر این مقاله رو بخونید و حتما نظراتتون رو با ما به اشتراک بذارید !
نمونه بهینه سازی وبسایت دانلود فیلم و سریال دیما موویز که به سفارش دوستان سعی کردم به عنوان اولین تست روی آپدیت جدید بهینه کنم و البته بعضی از بخش ها نیاز هست که توسط برنامه نویس رفع بشه :
تفاوت اپدیت جدید gtmetrix با نسخه ی قبل
اگه یه سر به بلاگ وبسایت GTmetrix مقاله ی جدیدی که در 1 نوامبر 2020 منتشر شده مواجه میشید که جدیدترین تغییرات GTmetrix رو براتون تشریح کرده ما در ادامه به این قابلیت ها میپردازیم !
اولین و مهم ترین چیزی که باید بدونید اینه که gtmetrix توی نسخه ی جدیدش سعی کرده بیش از پیش برحسب الگوریتم Google Lighthouse فعالیت داشته باشه، اما خب به طور کلی شاید ندونید که Google Lighthouse چیه هست پس به صورت خلاصه میگم و از طریق یه مقاله ی مجزا بیشتر بهش میپردازیم!
به طور خیلی خلاصه ( نه کاملا دقیق ) میتونیم بگیم هر وبسایت از اجزای مختلفی ساخته میشه و در نهایت یه نمای کُلی به یوزری که وارد سایتتون میشه رو ارائه میکنه، حالا این الگوریتم بررسی میکنه که ببینه متغییر های مهم داخل وبسایت شما توی چه وضعیتی هستش. 5 نمونه اصلی که میتونیم بهشون اشاره کنیم :
در ادامه شاید براتون سوال اصلی تری مطرح بشه چرا Google Lighthouse ؟
به صورت خودمونی بگم که Google Lighthouse هدفش تجزیه و تحلیل مقادیر مرتبط با خوده کاربره و بیشتر همونطور که بالا عنوان کردم دیگه فقط سرعت نیست که میشه سنجید و مقادیر جذاب تر و کلیدی تری برای بررسی یک وبسایت حرفه ای وجود داره و جی تی متریکس هم هدفش از این آپدیت در اصل همین بوده.
افزونه Google Lighthouse برای کروم
خب حالا که متوجه شدیم جی تی متریکس داده های خودش رو برحسب الگوریتم گوگل پردازش میکنه و به نظر هم خیلی خوب میرسه اما واقعا چرا؟
در اصل GTmetrix توضیح داده که PageSpeed and YSlow در گذشته به خوبی میتونست توی تحلیل ها کمک کننده باشه که امتیاز نهایی رو بسنجه اما تمرکز اصلی PageSpeed and YSlow به عبارتی front-end structure بوده و همون چیزی که فقط کاربر میبینه که میشه گفت این نمرات با عملکرد واقعی صفحه مطابقت داشت ولی نه همیشه ! در ادامه بیشتر به شرح این موضوع پرداخته ...
آیا تا به حال یه امتیاز خوب برای PageSpeed / YSlow کسب کردید اما سرعت لود صفحه پایین باشه ؟
این اتفاق یکی از دلایل آپدیت بود، چرا که در اصل امتیازی که دریافت میکردید برحسب این میزان که صفحه شما چقدر خوب ساخته شده بود تغییر میکرد نه اینکه صفحه شما چقدر به کاربر سریعتر نمایش داده میشه !
در ادامه ی مقاله میخوایم به اجزا و جزئیات نسخه ی جدید gtmetrix بپردازیم و به طور کلی مفهوم اصلی و جدید هر بخش رو که توی تصویر بالا هم مشخص هست رو توضیح بدیم، اما قبل از هرچیز طبق گفته ی جی تی متریکس این امر باعث میشه که هردو مقدار طراحی وبسایت و عملکرد کاربر مورد بررسی قرار بگیره و نتایج به دست آمده هم در نهایت دقیق تر و حرفه ای تر باشن :
امتیاز LCP : همون لود سایت هست وقتی لود سایت تموم بشه و سایت رو به کاربر نشون بده.
امتیاز TBT : اسکریپت ها چقدر روی فرایند بارگزاری صفحه تاثیر میزارن، هر چی کمتر باشه بهتره.
امتیاز CLS : تعریف کلی این هست که کاربر زمان بارگذاری صفحه چقدر تغییر حالت رو دیده یا حس کرده. این رو با یه مثال بگیم مثلا وقتی داره سایت باز میشه ممکنه سایت بهم ریخته باشه و وقتی کامل شد چیدمان عوض بشه یا ارتفاع زیاد بشه که باید کمتر از یک دهم باشه و برای گوگل خیلی مهمه !
میشه گفت GTmetrix Grade نمایشی کلی از بارگذاری صفحه بازدید کنندگان شماست هم از نظر ساخت و کدنویسی و هم از لحاظ عملکرد ! در نهایت Performance معادل 70% و Structure معادل 30% روی امتیاز نهایی تاثیر داره که مثل سابق رتبه A بهترین و F بدترین محسوب میشه. البته در ادامه توضیح داده شده که این بخش و نحوه محاسبه و بررسی امتیازات و امتیاز نهایی به مرور زمان متغییر هست تا به یه تکامل اصلی و ثبات برسه و بعد از انالیز های مختلف توسط وبسایت ها به هدف اصلیش نزدیک تر میشه ... *** یعنی خودمونیش اینه که این نسخه اوله فعلا حال کنید به مرور هی مثل گوگل اپدیت میدیم و پوست از کله ی همه میکنیم :)))
اما همه ی این داستان به اینجا ختم نمیشه چرا که قراره بیشتر وارد جزئیات بشیم و هر توضیح بدیم که تب های Performance و Structure در اصل چه چیز هایی روش اثر گذاره که اون امتیاز رو از 100 به ما میده پس محکم سر جاتون بشینید که اصل قضیه برای درک بهتر از اینجا شروع میشه !
عوامل تاثیر گذار بر امتیاز Performance در Gtmetrix
بهتره این امتیاز رو Lighthouse Performance نام گذاری کنیم چرا که بخش های مختلفی روش تاثیر گذار هستن که شاید اولین بار باشه به صورت دقیق متوجه اونها باشیم مثل ( مشخصات سرور، AdBlock، سرعت اتصال و ... ) این مقادیر اگر بخوایم وارد جزئیات دقیق تر بشیم از 6 زیر مجموع کلیدی تشکیل شدن :
1. کیفیت لودینگ (55%) :
2. تعامل (40%) :
دوتا تعریف ساده بگم، زمان تعاملی شدن صفحه ینی چقدر طول میکشه تا کاربر بتونه رو صفحه اسکرول کنه یا روی چیزی کلیک کنه درکل و زمان بلاک بودن تعامل کاربر هم ساده س ینی کاربر چقدر باید منتظر بمونه تا صفحه لود بشه و بتونه با سایت تعامل داشته باشه !
3. ثبات بصری (5%) :
تعریف ساده ش هم این هست که توی الگوریتم Lighthouse هرچقدر ثبات اولیه با نهایی صفحه یکسان باشه بهتره شاید براتون پیش اومده وارد وبسایتی بشید، حس کنید صفحه لود شده و بخواید تعامل کنید اما یهو یه سری اجزا تکون میخورن تا برن سر جای اصلیشون ؟
عوامل تاثیر گذار بر امتیاز Structure در Gtmetrix
طبق توضیحی که جی تی متریکس داده این بخش از ساختار های مختلف و متنوعی تشکیل شده و هدفش محاسبه عملکرد بهینه صفحه هستش که در ادامه یه سری ساختار معرفی کرده که حواسمون باید بهشون باشه مثل :
شاید سوالی که پیش بیاد اینه که آیا امتیاز Structure روی امتیاز Performance من تاثیر میذاره ؟
درجواب این سوال هم توضیح داده شده که به طور مستقیم خیر ! اما در نهایت بهبود ساختار صفحه شما به بهبود عملکرد صفحه کمک میکنه.
میشه گفت که این تب اصلی ترین بخش مرتبط و تحلیل دیتا برای هر وبمستر هستش که سعی میکنیم درباره هر بخش یه توضیح بدیم.
بخش Speed Visualization :
همونطور که در تصویر بالا مشخص هست به صورت دقیق میتونیم ببینیم که در هر ثانیه و لحظه کاربر چه چیزی رو مشاهده میکنه و چه زمانی اولین نمای صفحه، زمان فعال شدن تعامل و ... برای شخص نمایش داده میشه.
بخش Top Issues :
خب این بخش میشه گفت ساده س، ایرادات و مشکلات جدیی که تاثیر روی لود وبسایت شما داره رو بهتون نمایش میده، البته دقت کنید بعد از رفع این مشکل با تست مجدد احتمالش هست مشکلات دیگه ای رو نمایش بده و مشکل قبلی رو حل شده فرض کنه پس اولیت های جدیدتری رو نمایش میده !
بخش Page Details :
با توجه به تصویر این بخش میتونیم بفهمیم که اجزای تشکیل دهنده ی صفحه ای که تست گرفتیم چی هستش، چقدر از حجم صفحه رو تشکیل دادن، چقدر ریکوئست ارسال میکنن و سایز هر متغییر چقدر هستش.
در نسخه ی جدید تب Tab Timings به خاطرات پیوست و تب Performance جایگزینش شده که معیار های متفاوت و بهتری رو با ظاهر شیک بهمون نمایش میده که روی بهینه سازی وبسایت تاثیر داره. همونطور که در تصویر مشاهده میکنید بخش Performance Metrics با رنگ های متنوعی نمایش داده شده که معنی هر رنگ بیانگر یه توضیح کوتاه و خاص هست :
تب Browser Timings که میشه گفت توی تعریف کوتاه یاد خاطره ی Legacy GTmetrix Reports رو برامون زنده میکنه و درکل نشون میده یه وبسایت از وقتی بهش درخواست فرستاده میشه تا لحظه نهایی که نمایش داده میشه هرکدوم از این عملکرد و درخواست ها چقدر زمان میبره!
این تب خلاصه که از نوه نتیجه های PageSpeed و YSlow هستش اما با این تفاوت که کل مفاهیم جدید و مهم الگوریتم Lighthouse و هرچیزی که بالا گفته شده داخلش جا گرفته، به طور خودمونی بخوام عرض کنم خدمتتون اصل کار بهینه ساز های گُل میتونه این تب هم باشه که به زبون ساده میگه بهمون کجای کار مشکل داره و باید فیکس بشه اما خب همونطور که گفتم یکم تغییر کرده و نوع برخورد با هر خطا متفاوت تره شاید خطا های جدید هم به وجود بیاد که توی نسخه قبل نبوده و باید تحلیل بشه ! رنگ بندی هر تب هم که نشون دهنده اولیت هست که میشه گفت تقریبا همون معنی رنگ بندی تب Performance رو میده.
نکته جالبی که بهش برخوردم این بود که اگه خطا داشته باشیم میاد و اون کدی که توی سایت باعث خطا شده رو بهمون نشون میده و توی نسخه ی قبلی این مشکل رو نمیتونستیم به خوبی تحلیل کنیم و شاید کارمون به استخدام برنامه نویس هم میکشید ... :)
تب های دیگه ای هم هستند که مثل قدیمه ( Waterfall ، Video و History ) که ترجیحا درباره شون صحبت نمیکنیم چون تغییر خاصی نداشتن.
و در نهایت چون میدونم شما هم مثل من اگر تا اینجای مقاله اومدید براتون جذابه بدونید یه تست که توی ظاهر میگیریم توی نسخه قدیم چه شکلی میشد به دیدن تصویر زیر دعوتتون میکنم.
کلام آخر
دو مسئله رو فراموش نکنید اول اینکه روی اکانت های رایگان محدودیت زمانی مثل اینکه به وجود اومده و مسئله دوم اینکه این آپدیت به مرور زمان کامل تر میشه و تحلیل ها قوی تر میشن درنتیجه اماده ی هر تغییری باشید !
ممنون از نگاه نازنین تموم رفقایی که تا اینجا همراه من بودن، سعی کردم این مقاله رو برحسب چیزی که تحت عنوان هر آنچه در مورد گزارش جدید GTmetrix باید بدانید بنویسم و یه سری جاها برداشت خودمونی رو در نظر بگیرم تا معنی دقیق اون جمله که باعث بشه به یه درک بهتری هم برسیم اگر جایی اشتباهی دیدین یا تعریف من از مسئله ای اشتباه بود حتما داخل کامنت ها بهم اطلاع بدید ممنون از همه ی عزیزان جان.
