پرفورمنس چیه؟ از کجا میتونیم پرفورمنس سایت رو ببینیم؟

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

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

پرفورمنس در ج تی متریکس یکی از سربرگ ها و معیار های مهم در این ابزار است که مجموع امتیاز های اصلی تجربه کاربری و لود سایت را به ما نشان می دهد. در حدود 70 درصد امتیاز gtmetrix grade را معیار های پرفورمنس تشکیل میده که باید تمام اون ها طبق اصول و چیزی که در لایت هاوس گوگل تنظیم شده ، بهینه سازی و انجام بشه.

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

پادکست :

پرفورمنس
پرفورمنس

پرفورمنس از چه معیار هایی تشکیل شده؟

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

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

  1. FCP | First Contentful Pint
  2. LCP | Largest Contentful Paint
  3. SI | Speed Index
  4. TTI | Tme To Interactive
  5. TBT | Total Blocking Time
  6. CLS | Cumulative Layout Shift

تمام این شش مورد از معیار های اصلی پرفورمنس هستند که در امتیازی که از هر کدام حاصل می شود، درصدی را از امتیاز کلی performance تشکیل خواهد داد.

آشنایی با معیار fcp پرفورمنس

FCP : این معیار به این اشاره دارد که وب سایت مورد نظر در چه مدت زمانی ، اولین محتوا را به کاربر نشان می دهد. برای درک بهتر باید یک ریز معیار دیگری وجود دارد که در قسمت پایینی این 6 معیار قرار دارد با تیتر browser timings قرار دارد. این معیار first paint نام دارد و به این معنی است که اولین علائمی از نمایش را به کاربر نشان می دهد. در عکس مربوطه می توانید خوب متوجه شوید منظور چیست.

تفاوت این دو معیار در نمایش محتوا و نمایش علائم لود است. در first paint شما فقط علائم رنگی از اینکه وب سایت در حال بارگذاری است را خواهید دید اما در fcp شما محتوا هایی را نیز در حین لود وب سایت خواهید دید که درحال کامل شدن هستند.

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

استانداردی که برای این مورد از سمت خود وب سایت جی تی متریکس تعیین شده به شرح زیر است :

پرفورمنس
  1. نمایش زیر 0.9 ثانیه : استاندارد خوب و بدون نیاز به بهینه سازی
  2. نمایش بین 0.9 و 1.2 ثانیه : خوب ولی بهتره تا بهینه شه
  3. نمایش بین 1.3 و 1.6 ثانیه : کمی بیشتر از استاندارد و نیاز به بهینه سازی
  4. نمایش بالاتر از 1.6 ثانیه : خیلی بالاتر از استاندارد و نیاز به بهینه سازی

برای این که در پرفورمنس یک نمره خوبی از fcp داشته باشید باید سرور خود را تقویت کنید و سراغ بهینه سازی کد های وب سایت خود بروید. این بهینه سازی خوب در حدود حداکثر 15 درصد از امتیاز performance را از جانب fcp افزایش می دهد. به عنوان مثال :

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

معیار lcp در پرفورمنس

Lcp : این معیار همان مخفف largest contentful paint است. این معیار همان طور که از معنی کردن اون متوجه می شویم ، به معنی به نمایش گذاشته شدن محتوا هایی است که حجم سنگین و بزرگ هستند می باشد. به حالت صریح تر این معیار محاسبه می کند که در حین لود وب سایت و شکل گرفتن fcp ، اولین آیتم ها و المان های بزرگی که به کاربر به نمایش گذاشته می شوند کدامند.

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

نکته مهم در مورد lcp این است که در حدود 25 درصد از امتیاز performance رو تشکیل میده. پس نه تنها خیلی تاثیر گذار هستش ، بلکه از این بابت که باید هر چه سریعت تر بهینه سازی بشه هم مهم هستش.

پرفورمنس

و محاسبه lcp بیشتر از این نقطه است که مثلا اگر شما بنر و یا تیتر و آیتم سنگینی دارید که کاربر باید آن را ببینید ، در چه مدت زمانی طول می کشد که حجم بالایی که آن دارد ، درمرورگر اون paint یا همان نمایش داده شود.

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

  1. نمایش زیر 1.2 ثانیه : خوب و بدون نیا به بهینه سازی
  2. بین 1.2 تا 1.6 ثانیه : قابل قبول ولی جای بهینه سازی دارد
  3. بین 1.7 تا 2.4 ثانیه : مدت زمان بالا و باید بهینه سازی شود.
  4. بالا تر 2.4 ثانیه : مدت زمان خیلی بالا و حتما باید بهینه بشه.

برای اینکه بتوانیم lcp را بهینه کنیم و ببینیم پرفورمنس چه تاثیری در سئو دارد ، مواردی را قسمت زیر در خصوص آن آورده ایم.

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

معیار si در performance

Si : این معیار نیز همانند lcp به قسمت اول وب سایت که بالاترین نقطه آن است ، و در اولین لحظه به کاربر نشان داده می شود ، اشاره دارد. اما با fcp و lcp متفاوت هستش.

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

در نظر داشته باشید که بالاترین قسمت از وب سایت ، منظور اول صفحه مورد نظر است که هیچ اسکرولی صورت نگرفته و اصطلاحا above the fold نام دارد. به طور کلی این شاخص 15 درصد از امتیاز پرفورمنس را به خود اختصاص داده و بر این مبنا امتیاز می دهد که نمایش سریع بصری در اولین قسمت از وب سایت که به نمایش گذاشته می شود ، در چه مدت زمان صورت می گیرد.

استانداردی که خود وب سایت جی تی متریکس برای این موضوع در نظر گرفته به شرح زیر است :

پرفورمنس
  1. شکل گیری زیر 1.3 ثانیه : عالی و بدون نیاز به بهینه سازی
  2. بین 1.3 تا 1.7 ثانیه : قابل قبول ولی جای بهینه شدن داره
  3. بین 1.8 تا 2.3 ثانیه : بالاتر از حد مجاز و نیاز به بهینه سازی
  4. بالا تر از 2.3 ثانیه : بشدت زمان بالایی هستش و باید زود بهینه شه

معمولا بهینه سازی خود معیار های fcp و lcp که روی پرفورمنس تاثیر گذار هستند ، در مجموع روی si نیز تاثیر می گذارد. اما موارد مهمی که می توان به صورت اختصاصی به بهینه سازی SI پرداخت به شرح زیر است.

  • فایل های جاوا اسکریپت بلا استفاده را حذف کنید
  • کتابخانه ها و لایبری های جاوا اسکریپت را از موارد کوچک‌تر استفاده کنید
  • مدت زمان ارجا و اجرا شدن کد های جاوا اسکریپت رو کاهش بدید

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

پرفورمنس

tti در پرفورمنس چه تاثیری دارد؟

Tti : در صفحه گزارشات پرفورمنس بعد از این موارد از معیار ها باید به مورد tti بپردازیم. این مورد اطلاعات را بعد از به نمایش در آمدن محتوا ها و آیتم ها می سنجد. در معیار های قبلی در نظر داشته باشید که آن ها فقط در صدد نشان دادن و به نمایش درآمدن محتوا و آیتم ها بودند. اما حال اگر کاربر بخواهد با آیتم هایی که ری اکشن دارند و می خواهند با آن تعامل داشته باشند چه می شود.

این موضوع بر میگردد به این که المان ها ، آیتم ها ، دکمه ها ، لینک ها و … که با کلیک کردن و رفتار کاربر قرار است تا ، تعامل و ری اکشن داشته باشد. اما نکته اینجاست که این ری اکشن و تعامل با کاربر ، در مدت زمان های معینی مسدود است و نمی تواند ری اکشنی را به کاربر نشان دهد.

پس این مورد را با معیار tti که مخفف time to interactive است مشخص می کنند. این معیار در پرفورمنس به معنی مدت زمان جهت فعال شدن است. یعنی المان و آیتم های ما در آن جهت کلیک و تعامل کاربر  فال شده باشند و قابلیت انجام موارد تعریف شده ای چون تگ ها و اسکریپت ها باشد.

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

پرفورمنس

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

استاندارد هایی که خود وب سایت جی تی متریکس برای این معیار اعلام کرده ، برحسب زمان و نسبت به فعال شدن آیتم ها در آن زمان در نظر گرفته شده که در قسمت زیر برای شما آن ها را آماده و شرح داده ایم :

  1. فعال شدن زیر 2.5 ثانیه : عالی و بدون نیاز به بهینه سازی
  2. فعال شدن بین 2.5 تا 3.2 ثانیه : خوبه ولی بازم جای بهینه شدن رو داره
  3. فعال شدن بین 3.3 تا 4.5 ثانیه : مدت زمان بالاست و باید بهینه بشه
  4. فعال شدن بالا 4.5 ثانیه : خیلی بالاست و باید حتما بهینه سازی بشه
  •  

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

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

آشنایی با tbt از performance

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

قابل ارسال شده توسط سرور دریافت می شود و پس از بازگشایی ، آن را پردازش یا همان پراسس می کند. سپس نسبت به درخواستی که ارسال شده ، سرور اطلاعات را در قالب یک فایل به مرورگر متقاضی ارسال می کند.

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

نحوه خواندن waterfall

شاید شنیده باشید که بسیاری از طراحان گرافیکی و تدوین گر از سیستم های رندرینگ برای افزایش سرعت پروسه پردازش آن تهیه می کنند. این قسمت از رندرینگ در مرورگر نیست مشابه همان است.

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

اما رفته رفته با تکامل بشر و افزایش نیاز های کاربر ، کوچک ترین تاخیر ها در نمایش محتوا و فعال شدن المان ها برای کاربر بسیار مهم شده است. برای حل این مشکل از معیاری به نامtotal blocking time ایجاد شدن تا طبق آن مجموع تایم هایی که رندر شدن منابع  و اطلاعات بلاک یا مسدود بوده را سنجش و محاسبه می کند و در مجموع آن را اعلام می کند.

پرفورمنس

نکته اینجاست که این مورد زمانی رخ می دهد که ما یک main thread شلوغ و بلاک داشته باشیم. مواردی که در سربرگ واترفال مربوطه به سایت می توان تمام آن و task های طولانی آن را بررسی کرد و شناسایی کرد که چه منابع و مواردی باعث مسدود سازی رندرینگ محتوا شده است.

لازم به ذکر است که این معیار سنجش خود را از میان دو معیار fcp و tti شروع و انجام می دهد و به این شکل می شود که سنجش از زمان شکل گیری fcp و تا صورت گرفتن tti ادامه دارد. باید این را نیز در نظر داشته باشید که این مورد از موارد اصلی core web vitals هستش و تمام این موارد برای داشتن یک تجربه کاربری خوب برای متقاضی بازدید کننده وب سایت است.

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

پرفورمنس
  1. زیر 150 میلی ثانیه : عالی بدون نیاز به بهینه سازی
  2. بین 150 تا 225 میلی ثانیه : خوب ولی جای بهینه سازی دارد
  3. بین 225 تا 350 میلی ثانیه : بالا و نیاز به بهینه سازی دارد
  4. بیشتر از 350 میل ثانیه : بسیار بالا و نیاز به بهینه سازی دارد

راه های بهینه سازی نیز به شکل های زیر امکان پذیر است ، اما در نظر داشته باشید که به بهینه سازی هر یک از معیار ها fcp و tti ، تا حد قابل توجهی روی این معیار نیز تاثیر گذار خواهی بود اما موارد زیر تاثیر گذار نیز هستند :

  • زمان اجرا جاوا اسکریپت را کاهش دهید
  • فایل های و کد های جاوا اسکریپت بلا استفاده را حذف کنید
  • جایگرین کردن لایبری های کوچکتر js به جای موارد بزرگتر
  • Main thread وب سایت را بهینه سازی کنید
پرفورمنس
معیار cls در پرفورمنس چیست؟

Cls : این معیار که مخفف واژه cumulative layout shift است. به معین این است که محتوای ما درون وب سایت چه مقدار جابجایی در آن صورت گرفته است. بگذارید با یک مثال عملی برای درک بهتر شما توضیح دهیم.

حتما برای شما هم پیش آمده که پس از ورود به وب سایتی ، در حین اینکه دارید مطالب آن را می خوانید و یا می خواهید روی گزینه ای کیلک کنید ، ناگهان تغییر مکان در آیتم های آن رخ می دهد و المان های آن به مراتب پایین تر کشیده می شود. 

خب این همان cls است. در واقع این معیار نسبت به آیتم هایی در صفحه مربوطه وجود دارند ، آن ها شناسایی می کند و بعد از ظاهر شدن تک تک آن ها به روی هم دیگر و جابجایی که صورت می گیرد. نسبت به مدت زمانی که این اتفاق رخ میدهد ، شاخصی را دراین پروسه محسابه می کند و اعلام می کند. به حالتی صریح تر می شود که؛ در حین لود سایت ، آیتم هایی که یکی یکی ظاهر و روی هم به ترتیب لود می شوند ، نسبت به مدت زمانی که این جایجایی رخ داده ، معیاری از آن به وجود می آید که به اختصار به آن می گوییم cls.

cumulative layout shift چیست

استانداردی که برای این موضوع در نظر گرفته شده است به شرح زیر است :

  1. جابجایی در مدت زمان زیر 0.1 ثانیه : عالی و بدون نیاز به بهینه سازی
  2. بین 0.1 تا 0.15 ثانیه : خوب ولی جای بهینه سازی دارد
  3. بین 0.15 تا 0.25 ثانیه : بالا و نیاز به بهینه سازی دارد
  4. بالای 0.25 ثانیه : بسیار بالا و باید حتما بهینه سازی شود

برای کاهش تایم cls موارد زیر بسیار توضیح می شود :

  • انتخاب و مشخص کردن سایز و ابعاد دقیق عکس ها و آیتم ها
  • ایجاد مکان های مربوطه برای المان
  • کاهش آیتم های embeds و iframes
  • حذف محتوای داینامیک زیاد از صفحه مورد نظر
cumulative layout shift چیست
Browser timings در سربرگ و اطلاعات performance

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

Redirect duration : اشاره به مدت زمان هایی که اگر قبل از ورود به صفحه ، ریدایرکت صورت گرفته شده باشد دارد.

Connection duration : اشاره به مدت زمانی هستش که بعد از ریدایرکت اولیه ، تلاش برای اتصال به صفحه مربوطه هستش.

Backend duration : اشاره به مدتی زمانی که طول می کشد بعد از کانکشن به سرور ، پاسخی از جانب آن دریافت شود.

پرفورمنس

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

First paint : همانطور که قبلا در fcp اشاره شد ، منظور این معیار اولین علائم و تغییر رنگ ها از مراحل لود و ایندکس شدن صفحه است.

Dom interactive time : اشاره به مدت زمانی که مرورگر کلاینت تمام مراحل لود و تجزیه و تحلیل فایل های و کد های html را به پایان رسانده است.

Dom content loaded time : اشاره به آماده بودن dom برای اجرا استایل ها و کد و فایل های js است.

Onload time : اشاره به مدت زمانی است که در آن تمام منابع استایلی ، عکس ها ، کد های css و … دانلود شده اند.

Fully load time : اشاره به معیار اندازه گیری است که بعد از انجام شدن onload time ، منابع دریافتی ، درخواست ها و فراخوانی های دیگری را از سرور می خواهند

پرفورمنس

بهینه سازی پرفورمنس چه تاثیری روی سئو دارد؟

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

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

با بهینه سازی هر یک از این موارد شما روی سئو خود تاثیر بسیار زیاد خواهید داشت. به شکلی که کاملا تاثیر آن را با بررسی رخ ctr و سایر معیار های دیگر ، می توانید به مرور زمان ببینید.

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

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

اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در facebook
اشتراک گذاری در google

دیدگاه ها بسته شده است

آژانس طراحی سایت پویا وب با طراحی وب سايت حرفه‌ای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره می‌کوشد خدمات خود را با بالاترين کيفيت ممکن و با بهره‌گيری از جدیدترین متدها به شما ارائه دهد.