زمانی که وبسایت جی تی متریکس از سال 2021 ورژن خود را معرفی کرده ، معیار بسیار زیادی از آن بیرون درز کرده که ، که الگوریتمهای و شاخصهای بزرگی همانند ، light house و speed index از آن بهره مند هستند. معیارهای این وبسایت همواره بر پی این است که اطلاعاتی را به شما ارائه دهد که کراولر ها ، استاندارد برای آن تعیینشده اند ، و از همه مهم تر کاربرانی که سعی بر دیدن سایت در زمان کمتری دارند.
یکی از این معیارهای پر سروصدایی که از آن صحبت میشود این است که total blocking time چیست؟ مجموعاً این معیار بر پی این است که ، مجموعه تایمهایی که باعث بلاک و مانعشدن رندر و بارگذاری اطلاعات ، در مروگر ما میشود را محاسبه کند ، اطلاعات جمع کند و نسبت به آن به پرفورمنس سایت ما در جی تی متریکس امتیاز دهد.
اما اینکه دلیل کاهش و افزایش این تایم در total blocking time چیست ، باید به این اشاره کرد که مشکلات زیادی در کد نویسی و بهینه نبودن برخی موارد وجود دارد که در افزایش تایم TBT تأثیرگذار است.
برای اینکه بدانید کاملاً این معیار total blocking time چیست T این مقاله را تا انتهای بخوابند و اطلاعات خود را در این زمینه کامل کنید.
پادکست :
در نظر داشته باشید که این معیار خود بهتنهایی چیزی را اندازهگیری نمیکند. این شاخص با اندازهگیری دو معیار مهم دیگر ، سنجش خود را انجام میدهد و اطلاعات مربوطه را استخراج میکند. البته نه اینکه حتماً باید آن دو معیار وجود داشته باشند. در کل سنجش این معیار از طریق شاخص آنها الگو میگیرد ، و کار خود را انجام میدهد.
قبل از اینکه به total blocking time چیست بپردازیم ، به شاخصهای مهم جی تی متریکس میپردازیم تا اطلاعاتی در مورد آنها داشته باشیم و بدانیم که هرکدام برای چه سنجش انجام میدهند .
البته این را در نظر داشته باشید که معیارهای دیگری ممکن است وجود داشته باشد که در این مقاله گنجایش گفتن آن نیست و میتوانید درباره آنها بهطور کامل در مقالات دیگِ پویا وب مطالعه کنید.
مورد اول Speed Index و SI : به شاخص سرعت بارگذاری یک سایت اشاره دارد. سرعت بارگذاری و لود اطلاعات در هر سایتی را نسبت به آیتمهای موجود در آن را با این معیار نشان میدهند.
مورد اول Speed Index و SI : به شاخص سرعت بارگذاری یک سایت اشاره دارد. سرعت بارگذاری و لود اطلاعات در هر سایتی را نسبت به آیتمهای موجود در آن را با این معیار نشان میدهند.
مورد دوم first contentful paint و fcp : همان موضوع این مقاله است ، یعنی از سی پی چیست؟ اینجا یکی از ریز معیارها ملزم به گفتن است. قبل از خود FCP معیاری به نام FP وجود دارد که قبلاً معیار اندازهگیری با آن بوده و آلان دیگر جوابگو نیست. برای همین از معیار first contentful paint استفاده میشود. این معیار به معنی اولین محتوای لود شده که میتواند نوشتهها ، عکسها و آیتمهای موجود دیگر در اول صفحه باشد ، است.
مورد سوم Largest Contentful Paint و LCP : به معیاری گفته میشود که آیتمهای موجود در صفحه کاملاً بارگذاری شده است و برای کاربر قابلدرک و رؤیت است. این معیار از سال 2020 برای تجربه کاربری بهتر کاربران در لایت هاوس (lighthouse) ایجاد و تائید شده.
مورد چهارم Time to Interactive و TTI : که به میزان و معیاری گفته میشود یک site قابلیت تعامل با کاربر را دارد و مرورگر ما نیز قابل انجام دستورات مربوطه را داشته باشد.
مورد پنجم Total Blocking Time و TBT : به طور کلی زمان بین دو معیار FCP و TTI را اندازهگیری میکند. این مقدار ، به زمانی گفته میشود که کاربر کلاً هیچ دسترسی و قابلیت کار کردن با آیتمهای درون سایت ، از لحظه ظاهر شدن تا بندر شدن کامل را ندارد.
مورد ششم Cumulative Layout Shift و CLS : به معیار و امتیاز عملکردی گفته میشود که از ثبات بصری در حین رندر های آخر وب site درخواست شده ، توسط مرورگر است. این معیار و متریک اندازهگیری ، جابجاییهای غیرمنتظره و یهویی عناصر و المانهای موجود در سایت را اندازهگیری میکند و به آن امتیاز میدهد.
معیارهای حائز اهمیت و نکات مهمی در جهت آشنایی کامل با gtmetrix وجود دارد ، که برای سئو کردن یک site بسیار مهم است.
در نظر داشته باشید که تمام معیارهای بالا برحسب زمان و کیفیت در آن مربوط است که بایستی طبق تمامی این الگوها ، طراحی و سئو site صورت بگیرد.
در این قسمت که در اول آن سه معیار را برای شما بولد کرده بودیم ، در اصلی یکی خود معیار tbt بود و دو مورد دیگر معیارهایی بودند که سنجش tbt از آن دو مورد است. یعنی FCP تا TTI که در قسمت بعدی از مقاله total blocking time چیست به آن پرداختهایم.
Tbt که مخفف واژه total blocking time هستش ، به معنی مجموع مدتزمانی است که ، رندرینگ در مرورگر ما ، مسدود یا بلاک شده. میتوانیم برای درک بهتر این موضوع که به طور کلی total blocking time چیست به این شکل توضیح دهیم :
هرگاه درخواستی از مرورگر ما به سرور موردنظر وبسایت داده میشود ، سرور اطلاعاتی بر مبنای کدهایی که سایت ساختهشده است ، پاسخ را به مرورگر ما ارسال میکند. این اطلاعات در قالب فایلهایی در پشتصحنه دریافت شده و سپس مرورگر آن را دانلود میکند. در حین دانلود این اطلاعات ، آنها را نسبت به الگوریتم ، محاسبه و پردازش میکند و درنتیجه اطلاعات را به شکلی که طراحیشده در قالب پیکسل های قابلدرک و محتوا آن ، برای ما در صفحهنمایش به تصویر میکشد.
این اطلاعات و فایلهایی که دریافت میشود ، هم زمان با بارگیری برخی از آنها رندر نیز میشود. به عنوان مثال تگها و المانهای html در اولین حرکت در شکلهای کوچکی و نامرتبی در سایت بارگذاری میشود.
البته بماند که ما قبل از این مرحله ، مراحلاتی چون FP و TTFB نیز داریم. اما این مقوله بین فعالیتهای بین دو معیار FCP و TTI است.
در حین این رندرگیری اطلاعات ، زمانهایی است که مرورگر از رندرکردن بازمیایستد ، و به دانلود کردن ادامه میدهد و یا در حال پراسِس و پردازش کردن اطلاعات است. به طور کلی هر مسدودی و بلاکی که باعث شود رندگیری ریسورس ها ، بایستد ، به آن RBR گفته و مجموع کنار هم قرار گرفتن این RBR ها ، به شاخص TBT یا همان total blocking time منتهی است.
هر عامل یا RBR که مخفف واژه render blocking resources است ، در میان دو پروسه شکلگیری FCP و صورت گیری TTI اتفاق بیفتد ، یک task طولانی یا main thread ایجاد میکند. با مجموع تمام RBR و main thread هایی که در آن رندر گیری ، مسدود و مرورگر ، در حال انجام پروسه دیگری است را TBT میگویند. اما دلیل افزایش total blocking time چیست؟ در ادامه به این موضوع خواهیم پرداخت.
از طریق واترفال خوانی متوجه می شوید که task های طولانی ، هر کدام در چه کد هایی ، و در کدام قسمت هایی باعث مسدود شدن رندر شده است.
در طول اینکه تجربه کاربری یک وبسایت بهشدت مهم است و باید به بهترین شکل به کاربر ارائه شود ، وب مستر سایت نسبت به معیار ، و موضوع آن از خود میپرسد که ، دلیل افزایش total blocking time چیست؟ ببینید شاخصها و عناصر زیاد وجود دارد که باعث مسدود شدن رندرگیری محتوای قابلدرک ، در مرورگر شود.
از طرفی یک موضوع مهمی که لازم به ذکر این است که ، شما المانهای وبسایتتان توی اون مدت زمان اکتیو شده باشه. یعنی همون معیار tti که time to interactive هستش. این معیار نشاندهنده این هستش که چه زمانی محتوای درون سایت و آیتمهای درون آن برای کاربر ، قابل تعامل است و امکان انجام پروسهای را دارد.
همینطور خود fcp که باید در اولین لحظه وبسایت شکل بگیرد خیلی مهمه. از نظر اینکه چطور باید ما یک FCP سریع داشته باشیم تا لود ما با سرعت شکل بگیرد ، و درنتیجه تایم tbt ما نیز کاهش پیدا کنه.
عوامل بسیار مهمی که در افزایش تایم tbt تأثیرگذار است را در قسمت زیر برایتان خلاصه کرده ایم :
اما نکتهای که حائز اهمیت است ، این است که main thread های سایتتان باید کم باشه. به روایتی باید از وظایف و عملکردهای main thread کاهش داد تا از بلاک شدن خود آن و تأثیر total blocking time سئو کمتر شود و بهترین امتیاز در پرفورمنس ثبت کند.
اما اینکه اصلاً main thread در total blocking time چیست را میخواهیم در قسمت بعدی از مقاله توضیح دهیم. پس با ما همراه باشید.
ببینید دوستان maint thread در اصل به این شکل است که ، وظیفه دارد تا تمام پروسه بارگیری فراخوانی و تجزیه تحلیل کدهای چون html , css , js و … انجام دهد. در تمام موارد ساخت dom و حتی اجرای کدهای جاوا اسکریپت به دست این مورد انجام میشود.
برای درک بهتر از مثالی استفاده میکنیم : شما یک کارگر ساختمانی را در نظر بگیرید. این کارگر باید بار مصالخ ساختمانی را دریافت کند که حاوی آجر و سیمان و… است. میزان آن ها را محاسبه کند. سیمان را ملات گیری کند ، آجر هار به نظم رویهم بچید و با سیمان آنها هار لایهلایه پر کند و …
درواقع این کارگر وظیفهای دارد ، که باید آنها را انجام دهد. حال اگر کار این کارگر به طول کشیده شود و نتواند به کار دیگری برسد ، میگویند کارگر سرش شلوغ است. درواقع ما یک main thread داریم که قرار است پاره وظایف مهمی را انجام دهد و اگر این پروسههای نسبت به یک معیار تعیینشده طبق استاندارد ، به طول بینجامد باعث میشود هرکدام از مراحل بین fcp و tti نسبت به مِین تِرِد طولانی شود.
اگر در بین این دو پروسه مین ترد بلاک شود و یا همان مشغول باشد. مجموع این تایم های هر پروسه در کنار یکدیگر ، تایم طولانی را درمجموع ایجاد میکند که TBT یا همان total blocking time نام دارد.
درواقع سؤالی که پرسیده میشود در برخی از دوستان ، به اشتباه صورت میگیرد که اصل آن این است : تأثیر main thread در total blocking time چیست؟
همانطور که می دانید رفتار کاربران در فضا مجازی نسبت به گذاشته بسیار تغییر کرده و نیاز دارند که به یک site محتوای آن در سریعترین زمان ممکن برسند. از طرفی این محتوا باید طبق اصولی که موتورهای جستوجوگر نسبت به این رفتار و استانداردهای آماده کرده ، فعالیت داشته باشیم.
به طور کلی یکی از معیارهای مهم سئو ، رتبه خوب در این سایت است ، که در سرعت لود خوب نسبت به استانداردهای موجود داشته باشد. از طرفی این الگوریتم امتیازدهی سئو در موتورهای جستوجوگر ، همواره در رشد و اصلاح است و نیاز دارد که همواره طبق آن بروز باشیم و مشکلات وبسایت خود را حل کنیم.
الگوریتمهای موتورهای جستوجوگر به این شکل است که همواره یک معدلگیری بین رفتارهای کاربر ، در حین بازدید از سایت که آن را رصد میکنند ، و نتایج کراولر ها و رباتهای گوگل است. یعنی با معدلگیری بین رفتارها کاربر و نتایج کراولر و رباتها درمجموع به site امتیاز میدهد.
پس وقتی یک کاربر در حین لود و تمام با وبسایت کمی در تعلل باشد و یا ربات رصد کند که سایت از لود پایین برخوردار است آنها را در قالب یک اطلاعات به موتورهای جستوجوگر میدهد.
از دید یک کاربر لود site فقط یک مرحله کلی است اما باکمی ریزبینتر شدن به این مسئله توسط وب مستر و متخصصان سئو ، متوجه می شویم که کل مقوله لود از چند مرحله بین سیستم و مرورگر کاربر و سرور تشکیلشده که بایستی طبق آنها این پردازش و رندر گیری صورت گیرد.
پس به طور کلی برای اینکه بخواهیم به سؤال که این نتایج سئو نسبت به total blocking time چیست باید به شما بگوییم که تمام معیارهای جی تی متریکس و لود site ، درمجموع هرکدام امتیاز را به پرفورمنس سایت و جی تی متریکس میدهد که هرکدام بهنوبه خود امتیاز حائر اهمیتی را به سئو رتبه site ما در نتایج گوگل خواهد داشت.
میخواهیم در این قسمت بپردازیم که راههای بهینهسازی total blocking time چیست. نکتهای که در این قسمت حائر اهمیت است این است که باید دانشی درزمینهٔ کد نویسی تحت وب و حوزه طراحی سایت و سئو داشته باشید. معیاری که خود جی تی متریکس پیشنهاد میکند تا آنها بهینهسازی کنیم به شکل زیر است.
در ادامه میخواهیم به تعدادی از رفتارها و فعالیتهایی در این راستا که تایم tbt را کاهش میدهد بپردازیم :
کاهش زمان اجرای جاوا اسکریپت
در حین ارائه کدهای جاوا اسکریپت در شبکه ، اگر کاملاً بهینه باشند و حتی به بهترین شکل ممکن ، اما درصورتیکه روش ارائه آن برای رندرینگ درست نباشد. کلاً یه مشکل مهم ه حسبا میآید و باید بهطرف شود.
از طرفی بهینه کردن اینکه کدهای جاوا اسکریپت به بهریتن شکل تجزیه و تدوین و اجرا شوند از مهمترین عناصری است که میتواند روی TBT تأثیرگذار باشند.
فشردهسازی کدهای html , css , js
مهمترین موردی که در tbt تأثیرگذار است ، بهینهسازی و فشردهسازی کدهایی چون html , css و js است که آنها gzip کرده و تایم آن را کوتاه میکنیم. در نظر داشته باشید که خود unzip کردن این فایل زمانی را اشغال میکند. پس باید بدانید کدام فایلهای لازم است که فشردهسازی شوند تا در حین لود سایت بعد از بارگیری آن را اجرا کند.
کوچک کردن فایل کدهای css
همواره اجرای کدهای اضافه و سنگین استایل css برای مرورگرها و رندرگیری ، وقتگیر است. پس بهتر است آنها را حتماً کوچک و کوتاهتر کنید تا این زمانهای کنار هم چیده شده ، کاهش جمعی پیدا کند.
کاهش تأثیر کد Third-Party
اگر تابهحال سرویسهای Third-Party را با وبسایت خود هم سازی کردهاید ، ممکن است بدانید که لازم است کد جاوا اسکریپت Vendor را ، به صفحه تزریق کنید تا کار کند. به طور کلی ، به خاطر ماهیت جهانی اسکریپتها ، این موارد هیچگاه بهینهسازی نخواهند شد.
حذف جاوا اسکریپتهای بیکار یا کمکار
به طور کلی اگر بخواهیم بگوییم تأثیر این مورد در total blocking time چیست ، یک خودرو را تصور کنید که جدای اینکه شمارا با خود جابجا میکند ، بایستی جنازه خود را جابجا کند. پس ما نمیتوانیم کاری کنیم جز سبک کردن خود لاشه خودرو که از جرم آن کاهش پیدا کند. ولی فقط موارد غیرضروری. اگر شما از صندلیهای عقبی خودرو مثل خودرو 206 استفاده نمیکنید. آنها را جدا کنید تا کل خودرو سبکتر شود. ولی شما به در و فرمان خودرو نیاز دارید چون همواره در حال انجام فعالیت است. این مورد در حذف کدهای جاوا اسکریپت نیز کاملاً صدق میکند.
در بحث main thread این را باید به شما بگوییم که هر 50 میلیثانیهای که در آن بلاک بوده ، شامل مین تردهای سنگین بهحساب میآید و به رواین میگویند مین ترد بلاک شده.
اما در خود اینکه معیار زمانی total blocking time چیست ، در قسمت زیر خلاصه از آن را براش ما گردآوردهایم.
اما نکته دیگر مهم این است که در حدود 25 درصد امتیاز پرفورمنس gtmetrix را همین معیار tbt در آن اختصاص دارد. پس هرچقدر ما بر روی تمام معیارها و شاخصها بهخوبی کارکنیم ، میتوانیم یک لود ترتیبی طبق استاندارد داشته باشیم تا روی کسبوکار ما تأثیر خوبی بگذارد.
یک نکته دیگر که وجود دارد این است که ، فرق TBT با FID چیست؟ در واقع این دو معیار یکی هستند و تفاوت آن ها در مجموع تایم های بلاک و مسدود شده رندرینگ است (TBT) و مجموع تایم های تاخیر در ورودی اطلاعاتاست که قرار است آیتم ها با کلیک کاربر واکنش نشان دهند.
همانطور که در قسمت اینکه نتایج سئو در total blocking time چیست گفتیم ، که این معیار و معیارهای مهم دیگر که از سمت این وبسایت یعنی جی تی متریکس ارائه دادهشده ، به طور کلی هرکدام امتیازی را در جی تی متریکس میدهند که TBT 25 درصد آن را تشکیل میدهد.
نمیتوان گفت که تی بی تی بهتنهایی تأثیری در کسبوکار دارد. اما به طور کلی تمام معیارها در کنار هم ، امتیازی را پرفورمنس ایجاد میکند که یکجا امتیاز و نمره زیاد را در آن مشخص میکند. پسنیاز است که درباره کدام از معیارها تحقیق کرده و در راستای آنها بهینهسازی را انجام داد.
شما میتوانید برای صرفهجویی در وقت خود و ب اصول پیش رفتن این ماجرا ، تمام آن را به یک گروه متخصص در این زمینه بسپارید که د دید بلندمدت بهصرفهتر هم برای شما بهحساب میآید.
گروه پویا وب با داشتن سابقه بیشینه در حوزه طراحی ، امنیت و سئو سایت همواره خدماتی در راستای تمام چیزهایی باعث شود شما بازدید بیشتری در گوگل داشته باشید. و در کل بر روی کسبوکار شما تأثیر بگذارد ، ارائه میدهد.
از همراهی شما تا انتهای این مقاله از شما سپاس گذاریم.
تماس با پویا وب
آژانس طراحی سایت پویا وب با طراحی وب سايت حرفهای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره میکوشد خدمات خود را با بالاترين کيفيت ممکن و با بهرهگيری از جدیدترین متدها به شما ارائه دهد.