معیارهای جی تی متریکس نسخه جدید

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

• معیار اول: شاخص سرعت (Speed Index)
• معیار دوم: نمایش اولین محتوی (First Contentful Paint)
• معیار سوم: Largest Contentful Paint
• معیار چهارم: Time to Interactive
• معیار پنجم: Total Blocking Time
• معیار ششم: Cumulative Layout Shift

جی تی متریکس در آبدیت 2020 خود تغییرات زیادی را انجام داده. چنانچه با این تغییرات آشنا نیستید، ابتدا مقاله “آبدیت جدید جی تی متریکس” را مطالعه کنید و در ادامه به مطالعه همین مقاله بازگردید.

معیار اول: شاخص سرعت (Speed Index)

شاخص سرعت یا همان Speed Index (SI)، معیاری برای عملکرد مناسب یک سایت است که سرعت لود شدن و سرعت کامل شدن صفحه وب سایت را اندازه گیری میکند. این معیار به سایز پورت مرورگر شما نیز بستگی دارد و بر خلاف معیارهایی نظیرFirst Contentful Paint (FCP) یا Largest Contentful Paint (LCP) در timeline لود صفحه شما نمایش داده نمی شود.

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

شاخص سرعت چگونه اندازه گیری می‌شود؟

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

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

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

تأثیر شاخص سرعت بر روی امتیاز عملکرد شما (performance)

شاخص سرعت 15٪ از امتیاز عملکرد را به خود اختصاص می‌دهد که نشان دهنده اهمیت نسبتاً بالای آن است. به ازای عدد SI پایین تر می‌توان گفت که محتوی بیشتری در زمان کوتاه تری به کاربران سایت شما نمایش داده شده و باعث ایجاد تجربه کاربری خیلی خوبی برای بازدید کنندگان وب سایت شما خواهد داشت.

حد و حدود شاخص سرعت

GTmetrix شاخص سرعت محاسبه شده را در چند ثانیه نمایش می‌دهد. زمان کمتر نشان دهنده بارگیری سریعتر صفحه وب است. حدود SI به شرح زیر است:

• SI=1311 میلی ثانیه و یا کمتر >->-> خیلی خوبه – کاری برای انجام دادن نیست !!!
• SI بین 1311 الی 1711 میلی ثانیه >->-> خوبه – باید کمی بر روی بهبود وب سایت خودتون کار کنید.
• SI بین 1711 الی 2300 میلی ثانیه >->-> بیش از حد توصیه شد و بد – باید حتما روی بهبود وب سایت خودتون کار کنید.
• SI بیشتر از2300 میلی ثانیه >->-> خیلی بد – باید خیلی خیلی روی بهبود وب سایت خودتون کار کنید.

چگونه شاخص سرعت را بهبود ببخشیم؟

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

به طور کلی، اکثر بهینه سازی‌های عملکردی (performance optimizations) که منجر به سریع تر شدن FCP (First Contentful Paint) و LCP (Largest Contentful Paint) می‌شوند، احتمالاً منجر به سرعت سریعتر لود صفحه نیز می‌شوند.

بهینه سازی‌های انجام شده در لیست کدهای جاوا اسکریپت و CSS‌ها می‌تواند تا حدود زیادی باعث سریع تر لود شدن صفحه وب سایت شما شود. جهت اطلاعات بیشتر می‌توانید به لینک‌های زیر مراجعه کنید.

1. Reducing JavaScript execution time
2. Minimizing main-thread work
3. Removing unused JavaScript
4. Reducing the impact of third-party code
5. Replacing large JavaScript libraries with smaller alternatives

---

منبع : Lighthouse:Speed Index

‌معیار دوم: نمایش اولین محتوی (First Contentful Paint)

نمایش اولین محتوی یا همان First Contentful Paint (FCP) معیاری عملکردی است و اندازه گیری می‌کند که چقدر سریع بازدیدکنندگان می‌توانند محتوی اصلی صفحه را ببینند. محتوایی همچون متن، تصاویر، ویدئو و …‌ این مورد در ورژن قبلی جی تی متریکس نیز وجود داشت و اندازه گیری میشد که می‌توانید اطلاعات آن را در این صفحه مشاهده کنید.

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

First Contentful Paint چه چیزی را اندازه گیری می‌کند؟

به گفته گوگل:
بعد از اینکه کاربر به صفحه شما وارد شد، برای ارائه اولین قطعه محتوای DOMبه مرورگر زمانی صرف خواهد شد. تصاویر، آیکون‌ها وفایل‌های SVG موجود در صفحه به عنوان محتوای DOM در نظر گرفته می‌شوند. البته به شرط آنکه داخل iframe گنجانده نشده باشد.

FCP یک معیار مهم و کاربر محور برای اندازه گیری عملکردی است که قابل درک باشد. به این معنی که اولین محتوایی که به کاربر نمایش داده شده و وی می‌تواند از آن استفاده نماید. برای درک بیشتر این موضوع در مقابل FCP، زمان نمایش اولین تغییر (First Paint Timing) نقطه ای را نشان می‌دهد که هر چیزی روی صفحه نمایش داده می‌شود. به عنوان مثال، یک رنگ زمینه، یک حاشیه و غیره که این موارد کمتر مفید بوده و چندان مورد استفاده کاربر قرار نمی گیرد.

تأثیر FCP در امتیاز عملکرد شما

این معیار 15٪ از کل امتیاز عملکرد را به خود اختصاص می‌دهد، که اهمیت نسبتاً بالای آن را نشان می‌دهد. بهینه سازی صفحه برای بهبود FCP معمولاً دستاوردهای قابل توجهی در زمان بارگذاری صفحه و درک کاربر از عملکرد سایت شما به همراه دارد.

حد و حدود FCP

حدود FCP به شرح زیر است:

• FCP در حدود 934 میلی ثانیه و کمتر = حالت خوب و ایده آل است و نیاز به انجام کاری نیست.
• FCP بین 934 و 1205 میلی ثانیه = خوب است اما کمی نیاز به بهینه سازی دارد.
• FCP بین 1205 تا 1600 میلی ثانیه = بیشتر از مقدار قابل قبول است و نیاز است که اصلاحات اندکی انجام شود.
• FCP بیشتر از 1600 میلی ثانیه = اصلاح وضعیت خوبی نیست و باید تغییرات بیشتر انجام شود.

چطور FCP را بهبود ببخشیم؟

توجه داشته باشید که موارد ذکر شده در زیر بیشترین کمک را به بهینه سازی FCP شما می‌کنند. با این حال، ممکن است FCP صفحه شما تحت تأثیر موارد دیگری باشد که در اینجا ذکر نشده است.

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

بدون شک کاهش زمان پاسخ سرور کمک می‌کند تا یک زمان FCP سریع در صفحه وب سایت شما ارائه شود. برای این منظور می‌توانید از شبکه CDN استفاده کنید، مقدار ریدایرکت‌های موجود را کاهش دهید و یا از راه حل‌هایی که در مقالات زیر ارائه شده است استفاده نمایید.

مورد دوم : منابع مسدود شده

منابع مسدود شده (render-blocking resources) در واقع فایل‌هایی هستند که شما تصمیم می‌گیرید تا بعد از لود اولیه وارد پروسه لود شوند. در واقع می‌توان گفت شما فایل‌های غیر ضروری را دیرتر لود میکنید تا صفحه وب سایت شما به سرعت برای کاربر نمایش داده شده و به مرور تکمیل گردد.
به منظور مطالعه بیشتر در اینباره حتما مقاله زیر را مطالعه کنید

مورد سوم : به حداقل رساندن تعداد درخواست (request) و سایز آنها

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

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

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

---

منبع : Lighthouse: First Contentful Paint

معیار سوم: Largest Contentful Paint

Largest Contentful Paint یا همان LCP معیار عملکردی است که در سال 2020 توسط Lighthouse برای سنجش بهتر تجربه بارگیری قابل درک برای کاربران ارائه شده است.‌ درواقع، LCP اندازه گیری می‌کند که چه مدت طول می‌کشد تا بزرگترین “عنصر محتوا” (به عنوان مثال، تصویر قهرمان، متن عنوان و غیره) در صفحه شما در صفحه نمایش بازدید کننده شما قابل مشاهده باشد.

LCP یکی از معیارهایی است که Google’s Web Vitals را تشکیل می‌دهد.

Largest Contentful Paint چه چیزی را اندازه گیری می‌کند؟

با توجه به گفته گوگل:
” LCP یک معیار کاربرپسند برای اندازه گیری بهتر سرعت بارگیری وب سایت است؛ زیرا هنگامی که محتوای اصلی صفحه بارگیری می‌شود، نقطه ای را در جدول زمانی بارگیری صفحه نشان می‌دهد – یک LCP سریع، حس اعتماد را در کاربران افزایش می‌دهد.”
LCP میزان مصرف محتوای قابل توجه در صفحه وب شما توسط بازدید کنندگان را اندازه گیری می‌کند. فرض کنید که بزرگترین عنصر محتوای صفحه خود را بارگذاری کنید، LCP اندازه گیری می‌کند که بزرگترین عنصر محتوای صفحه با چه سرعتی بارگیری می‌شود. هر “عنصر محتوا” از عنصر HTML است، مانند:

• یک عنصر تصویر
• یک عنصر ویدیویی
• عنصری که تصویر پس زمینه از طریق تابع URL بارگیری می‌شود (به جای اعلام آن در CSS)
• عناصر سطح بلوک مانند و غیره‌

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

تأثیر Largest Contentful Paint’s در امتیاز عملکرد

جی تی متریکس بیان می‌کند که LCP، مقدار 25٪ از امتیاز بهینه سازی Web Vital را به خود اختصاص داده و یکی از مهمترین معیارهای بهینه سازی است. در حالی که معیارهای دیگر مانند First Contentful Paint (FCP) یا (Time-to-First-Byte (TTFB همچنان وابسته به سرعت متن صفحه هستند، LCP نمایانگر انتظار بازدید کنندگان شما در دنیای واقعی به هنگام بررسی وب سایت شماست.

به طور مثال وب سایت سبز از نظر بصری از ثانیه ۰.۲ کامل می‌شود در حالیکه وب سایت قرمز این فرآیند را طولانی تر طی می‌کنند. این بدان معناست که، بهینه سازی LCP شما می‌تواند بیشترین پیشرفت را در عملکرد وب سایت شما از نظر امتیاز بهینه سازی و هم از نظر عملکرد بازدیدکنندگان ایجاد کند.

حدود Largest Contentful Paint

• خوب، کاری برای انجام دادن نیست = LCP برابر 1200 میلی ثانیه یا کمتر
• بد نیست، اما میشه بهترش کرد = LCP بین 1200 تا 1666 میلی ثانیه
• جالب نیست و بیشتر از حد توصیه شده = LCP بین 1666 تا 2400 میلی ثانیه
• اصلا وضعیت خوبی نیست و باید درست بشه = LCP بالاتر از 2400 میلی ثانیه‌

Largest Contentful Paint Element در تب Structure

آنچه را GTmetrix به عنوان بزرگترین عنصر محتوای صفحه شناسایی کرده است، می‌توانید در تب Structure مشاهده کنید. در فهرست بررسی عبارت “Largest Contentful Paint Element” ذکر شده است.

چگونه Largest Contentful Paint را بهبود ببخشیم؟

توجه داشته باشید که بررسی‌های خاصی که در زیر ذکر شده بیشترین کمک را به LCP شما می‌کنند. با این حال، ممکن است زمان بندی LCP صفحه شما تحت تأثیر بهینه سازی‌های دیگری باشد که در اینجا ذکر نشده است. در اینجا برای نمونه چند نمونه مثال می‌زنیم:

1. کاهش زمان پاسخ سرور: کاهش زمان پاسخ سرور به بارگیری سریعتر منابع و تحویل سریع LCP در صفحه کمک می‌کند. می‌توانید با کاهش زمان پاسخ اولیه سرور و یا استفاده از شبکه تحویل محتوا (CDN) می‌توانید این بهینه سازی را انجام دهید.
2. از بین بردن رفتار render-blocking: از بین بردن رفتار render-blocking در صفحه شما بارگذاری منابع را در سریعترین زمان ممکن تضمین می‌کند.
3. بهینه سازی عکس‌ها و ویدئو ها: تصاویر و فیلم‌ها را در صفحه خود بهینه کنید تا زمان بارگیری کاهش یابد. برخی از کارهایی که می‌توانید انجام دهید شامل موارد زیر است:

• اندازه مناسب تصاویر
• فرمت مناسب تصاویر
• ترکیب تصاویر کوچک با استفاده از Sprites CSS
• استفاده از قالب‌های ویدئویی برای محتوای متحرک

‌توجه: برخی از بررسی‌ها با هم دارای اشتراکاتی هستند که بهبود یک عنصر از اجزای سایت باعث بهبود سایر گزینه‌ها نیز خواهد شد.

---

منبع : Largest Contentful Paint

معیار چهارم: Time to Interactive

Time to Interactive یا همان TTI اندازه گیری می‌کند که چه مدت طول می‌کشد تا یک صفحه کاملاً قابلیت تعامل با کاربران را پیدا کند. یعنی مدت زمان بین اولین Contentful Paint (FCP) و آخرین long-task در main-thread را اندازه گیری می‌کند و نقطه ای را نشان می‌دهد که مرورگر قادر به پاسخگویی مطمئن به کاربر است. به زبان ساده، TTI سریع به شما اطمینان می‌دهد که صفحه قابل استفاده برای کاربران است.

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

کاهش TTI برای عملکرد وب شما بسیار مهم است، به ویژه در دستگاه‌های تلفن همراه که این موضوع از اهمیت بالاتری برخوردار است.

اثر Time to Interactive بر روی امتیاز Performance

معیار TTI مقدار 15٪ از کل امتیاز عملکرد (Performance Score) را به خود اختصاص می‌دهد، که اهمیت نسبتاً بالای آن را نشان می‌دهد. توجه داشته باشید که TTI معیاری است که با زمان مسدود کردن کل (TBT) در کنار هم هستند، و این دو معیار اطلاعات بیشتری در مورد پاسخگویی صفحه شما به کاربر ارائه می‌دهند.

حدود قابل قبول برای Time to Interactive

• TTI برابر 2468 میلی ثانیه یا کمتر = خوب است و نیاز به بهبودی ندارد.
• TTI را بین 2468 تا 3280 میلی ثانیه = خوب، اما نیاز بهبودی دارد.
• TTI بین 3280 تا 4500 میلی ثانیه = بیشتر از حد توصیه شده و کمی بهینه سازی لازم دارد.
• TTI بالاتر از 4500 میلی ثانیه = خیلی بیشتر از حد توصیه شده و حتما باید فکری به حال سایت خودتون کنید.

چگونه زمان تعامل را بهبود ببخشیم؟

توجه داشته باشید که بررسی‌های خاصی که در زیر ذکر شده اند بیشترین کمک را به TTI شما می‌کنند. با این حال، TTI صفحه شما ممکن است تحت تأثیر بهینه سازی‌های دیگری باشد که در اینجا ذکر نشده است.

1. بهینه سازی اجرای جاوا اسکریپت: برای کاهش main-thread blocking time، اجرای JavaScript خود را بهینه کنید و اطمینان حاصل کنید که صفحه شما سریع به ورودی‌های کاربر پاسخ می‌دهد.

• کاهش زمان اجرای جاوا اسکریپت
• به حداقل رساندن کار main-thread
• جاوا اسکریپت استفاده نشده
• جایگزینی کتابخانه‌های بزرگ JavaScript با گزینه‌های کوچکتر

2. ارائه درخواست‌های کوچک: اطمینان حاصل کنید که تعداد درخواست‌ها در کمترین حالت خودش باشد. به همین ترتیب، از chaining critical requests برای تسریع در بارگذاری منابع اصلی، خودداری کنید.

3. استفاده از Preconnect to required origins، این مورد یک مورد تخصصی است.

---

منبع: Time to Interactive

معیار پنجم: Total Blocking Time

Total Blocking Time یا همان (TBT)، یکی از معیارهای عملکردی lighthouse است که در سال 2020 معرفی شد. این معیار میزان پاسخگویی صفحه شما را نسبت به ورودی کاربر مشخص می‌کند. به عبارت ساده ترTBT کل زمان مسدود بودن صفحه وب شما را اندازه گیری می‌کند. منظور از مسدود بودن در این عبارت زمانی است که کاربر نمی تواند با صفحه شما تعامل داشته باشد.

این معیار جایگزینی برای معیار field-only First Input Delay (FID) است که در PageSpeed Insights مشاهده می‌شود.

Total Blocking Time چه چیزی را اندازه گیری می‌کند؟

‌بر اساس بیانات گوگل :
TBT زمان کل بین First Contentful Paint (FCP) و Time to Interactive را اندازه گیری می‌کند. یعنی دقیقا زمانی که main-thread به حالت مسدود قرار گرفته و از پاسخگویی نسبت به کاربران جلوگیری می‌کند.

main-thread، جایی است که مرورگر اکثر موارد مرتبط با بارگذاری صفحه را مانند رندر یا چاپ محتوا (rendering/painting) و مدیریت تعاملات کاربران، پردازش می‌کند. اساساً، مرورگر از main-thread، برای تجزیه HTML، ساخت DOM، اجرای CSS و JavaScript، پردازش رویدادهای کاربر و انجام سایر کارهای مهم استفاده می‌کند.

وقتی انجام هر یک از این کارها بیش از 50 میلی ثانیه زمان ببرد، main-thread “مسدود” در نظر گرفته می‌شود زیرا مرورگر نمی تواند یک کار در حال انجام را قطع کند. و اگر main-thread مسدود یا بلاک شده باشد، صفحه شما نمی تواند به اطلاعات ورودی کاربر مانند ضربه زدن روی صفحه، فشار صفحه کلید یا کلیک ماوس پاسخی دهد.

زمان بیش از 50 میلی ثانیه، زمانindividual blocking آن درخواست در نظر گرفته می‌شود و مجموع تمام این زمانهای مسدود شده، کل زمان مسدود کردن صفحه شما یا Total Blocking Time است.

به عنوان مثال، در تصویر بالا، 5 وظیفه یا مورد در main-thread وجود دارد که 3 مورد از آنها Long Tasks هستند، زیرا مدت
زمان لازم برای انجام هریک از آن‌ها بیش از 50 میلی ثانیه است. زمان مسدودی هر یک از این long taskها به شرح زیر است:

• Task A – 220 ms
• Task B – 70 ms
• Task E – 145 ms

TBT در این سناریو برابر با 435 میلی ثانیه است. اما بهرحال اگر main-thread فقط یک مورد داشت که 500 میلی به طول می
انجامید، TBT نیز برابر 500 میلی ثانیه می‌شد.

مقایسه Total Blocking Time و Time to Interactive

Time to Interactive (TTI) معیار دیگری است که به تعامل صفحه شما مربوط می‌شود. TBT و TTI مکمل یکدیگر هستند اما در عین حال جنبه‌های کاملاً متفاوتی از تجربه کاربری صفحه شما گزارش می‌دهند. TTI مدت زمانی را بیان می‌کند که طول می‌کشد تا صفحه شما کاملاً تعاملی شود.

TBT به طور خاص به شما می‌گوید که کدام یک از موارد جاوا اسکریپت طولانی ترین زمان را برای اجرا شدن صرف کرده است. ‌ درصورتی که main-thread، حداقل به مدت 5 ثانیه آزاد باشد، TTI صفحه را کاملا تعاملی فرض می‌کند.‌ سناریوهای زیر را در نظر بگیرید:

الف) سه کار 60 میلی ثانیه ای در یک دوره 5 ثانیه ای انجام شده

ب) یک Long Task به مدت 5 ثانیه‌ هر دو سناریوی فوق TTI را به یک اندازه افزایش می‌دهند. سناریوی A در طول بارگذاری صفحه تا حد زیادی تعاملی است، چرا که هیچ long task یا کار طولانی ای در آن اتفاق نیفتاده و وقت مرورگر را نمی گیرد.
اما این دو سناریو از نظر کاربر بسیار متفاوت هستند زیرا TBT در سناریوی اول فقط 30 میلی ثانیه و در سناریوی دوم 4950 میلی ثانیه است.
سناریوی A در طول بارگذاری صفحه تا حد زیادی تعاملی است، چرا که هیچ long task یا کار طولانی ای در آن اتفاق نیفتاده و وقت مرورگر را نمی گیرد.در حالی که در سناریو B هنگامی که مرورگر مشغول انجام Long Task است، به هیچ وجه به کاربر اجازه تعامل با صفحه را نمی دهد. همین ویژگی باعث میشود TBT، هم بعنوان یک معیار مستقل و هم با بکارگیری آن همراه TTI، مفید باشد.

مقایسه Total Blocking Time و First Input Delay

همانطور که قبلاً اشاره کردیم، TBT جایگزینی برای First Input Delay (FID) است که یکی از معیارهای Vital Web است. این داده‌های واقعی کاربر از طریق گزارش‌های تجربه کاربری Chrome (CrUX) – پایگاه داده رفتاری مرورگر Chrome که از کاربران سرتاسر دنیا جمع آوری شده است، به دست می‌آید.
اما GTmetrix از این معیار در سنجش‌ها استفاده نمی کند. GTmetrix، به جای First Input Delay، Total Blocking Time را گزارش می‌دهد. بنابراین جی تی متریکس، TBT را به جای FID گزارش می‌کند چراکه همان بهینه سازی‌ها را به شما توصیه می‌کند.

تاثیر Total Blocking Time بر نمره عملکرد یا performance

TBT به عنوان یک معیار Web Vital، 25٪ از امتیاز performance را به خود اختصاص داده و همین مسئله این معیار را به یک معیار مهم برای بهینه سازی تبدیل کرده است. به عبارت دیگر، بهینه سازیTBT می‌تواند موثرترین پیشرفت را در پاسخگویی وبسایت شما ایجاد کند.

حدود Total Blocking

• TBT=150 میلی ثانیه یا کمتر، عالی، این حالت ایده آل است و TBT شما نیازی به بهینه سازی ندارد.
• TBT بین 150 تا 224 میلی ثانیه = این حالت خوب است اما بهینه سازیTBT را انجام دهید.
• TBT بین 224 تا 350 میلی ثانیه = کمی بیشتر از حد توصیه شده که نیاز به بهینه سازی دارد.
• TBT بالاتر از 350 میلی ثانیه = خیلی بیشتر از حد توصیه شده است و نیاز حتمی به بهینه سازی دارد.

چگونه Total Blocking Time را بهبود ببخشیم؟

Total Blocking Time با عملکرد جاوا اسکریپت ارتباط زیادی دارد و هرگونه پیشرفت در اجرای جاوا اسکریپت (بهینه سازی‌هایی که باعث بهبود TTI می‌شوند) TBT شما را کاهش می‌دهد.

برخی از این بهینه سازی‌ها عبارتند از:

---

منبع مقاله: Total Blocking Time

معیار ششم: Cumulative Layout Shift

Cumulative Layout Shift (CLS) معیار عملکردی است که در سال 2020 توسط Lighthouse معرفی شده است تا میزان ثبات بصری یا ظاهری صفحه را اندازه گیری کند. به عبارت ساده تر CLS، تغییر مکان غیرمنتظره عناصر صفحه را هنگام بارگذاری اندازه گیری می‌کند. در واقع نمره CLS، مجموع همه امتیاز‌های layout shift در صفحه است.

اساساً، هر زمان که یک صفحه بارگیری می‌شود، برخی از عناصر صفحه به طور غیرمنتظره ای جابجا می‌شوند و این امر بر نحوه تعامل کاربران با صفحه وب تأثیر می‌گذارد.

---

با بارگیری صفحه، تصاویر قرمز باعث جابجایی سایر عناصر شده و به یک امتیاز بد CLS می‌انجامد. این عناصر تغییر کننده می‌توانند دکمه ها، فرم‌های تماس، تصاویر، فیلم ها، فونت‌ها یا انواع دیگر محتوا باشند. یک وب سایت با مقدار CLS پایین دارای ظاهری پایدار است که عناصر آن جابجا نمی شوند و بارگیری تمام محتوای آن به شکل ثابت، منظم و قابل پیش بینی انجام می‌شود.

کاهش صفحه CLS امری بسیار مهم است زیرا صفحاتی که عناصر آن درحین بارگیری جابجا می‌شوند میتوانند منجر به تجربه منفی کاربری شوند (به ویژه در دستگاه‌های تلفن همراه).

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

تفاوت Layout Shift غیر منتظره و مورد انتظار

توجه به تفاوت بین شیفت‌های مورد انتظار و غیر منتظره امری مهم است که در ادامه بصورت کامل بیان شده است:
یک Layout Shift، زمانی موردانتظار محسوب می‌شود که در پاسخ به ورودی کاربر اتفاق افتاده باشد. به عنوان مثال وقتی با کلیک بر روی نماد جستجو، یک قسمت برای گرفتن واژه جستجو از کاربر، باز می‌شود، یک Layout Shift مورد انتظار اتفاق افتاده است.

از طرف دیگر، Layout Shift یا تغییر طرح غیر منتظره معمولاً توسط تصاویری که طول و عرض آن‌ها مشخص نشده یا سایر محتوای پویا ایجاد می‌شود. به عنوان مثال، هنگامی که یک تبلیغ به طور ناگهانی ظاهر می‌شود و یک تصویر یا عنصری دیگر را به پایین صفحه هل می‌دهد، Layout Shift غیرمنتظره اتفاق افتاده است. GTmetrix با استثنا درنظر گرفتن Layout Shift‌هایی که در عرض 0.5 ثانیه از ورود کاربر رخ می‌دهد، بین Layout Shift‌های موردانتظار و غیر منتظره تفاوت قائل می‌شود.

تأثیر Cumulative Layout Shift در امتیاز عملکردی شما

حتی اگر تأثیر مستقیم CLS در امتیاز عملکرد نسبتاً کم باشد (5٪)، نباید فراموش کنیم که این مورد یک کمک بزرگ به حاصل شدن یک تجربه کاربری مطلوب است تا بتوانید تجربه ای روان و بدون تأخیر را به بازدیدکنندگان خود ارائه دهید. در حالی که برخی دیگر از معیارهای نمره عملکرد صفحه مستقیماً با سرعت بارگیری صفحه ارتباط دارند، CLS بر بررسی کیفیت تجربه کاربری صفحه شما متمرکز است.

حد آستانه Cumulative Layout Shift

توجه کنید که CLS یک امتیاز است و نه مقداری بر پایه زمان. و مقدار آن عددی بین 0 تا 1 است.

• CLS برابر 0.1 یا کمتر = خوب، نیازی به بهینه سازی وجود ندارد
• CLS بین 0.1 تا 0.15 = خوب، اما میتوانید آن را بهبود بخشید
• CLS بین 0.15 تا 0.25 = بیشتر از حد توصیه شده اما بهتر است بهینه سازی انجام شود
• CLS برابر 0.25 یا بالاتر = خیلی بیشتر از حد توصیه شده و نیاز به بهینه سازی دارد‌

چگونه Cumulative Layout Shift را بهبود ببخشیم؟

توجه داشته باشید که اقدامات خاص ذکر شده در زیر، بیشترین تأثیر را در میزان CLS شما دارند. اما ممکن است نمره CLS صفحه شما تحت تأثیر بهینه سازی‌های دیگری باشد که در اینجا ذکر نشده است.

1) تعیین ابعاد تصویر: همیشه، عرض و ارتفاع را برای عناصر تصویر و فیلم وبسایت خود مشخص کنید تا از فاصله ای مناسب برای تصاویر و فیلم‌ها استفاده شود. همچنین میتوانید این کار را با مشخص کردن نسبت ابعاد باکس‌ها در CSS انجام دهید.

2) برای کاهش تغییرات چیدمان ناشی از تبلیغات، embed و iframes ها، اقدامات زیر را را انجام دهید:

• قبل از بارگذاری کتابخانه تبلیغات، اندازه شیار تبلیغات (ترجیحاً بزرگترین) را رزرو کنید.
• تبلیغات را به پایین صفحه یا خارج از ویوپورت انتقال دهید.
• وقتی هیچ تبلیغی برای نمایش در دسترس نیست، از نگه دارنده فضا یا placeholder استفاده کنید.

3) از درج مطالب جدید با محتوی پویا بالاتر از مطالب موجود خودداری کنید

---

• منبع مقاله: Cumulative Layout Shift