امروزه بیشتر اشخاصی که در حوزه طراحی و سئو site کار میکنند ، و یا حتی وبمستر سایتی هستند ، دغدغهای که همیشه دارند این است که سایتشان با بالاترین سرعت لود شود و به کاربران نشان داده شود. ببینید دوستان ، لود سایت از دید کاربران معمولی یک مرحله کلی است. اما از دید یک طراح و متخصص سئو سایت ، مرحله لود site از چند بخش تقسیمشده.
مشکل این جاست که متخصصان این زمینه باید از دید کاربر ، موارد موردنیاز از دید خودشان را باید تأمین و درست کنند. بهطورکلی مراحل لود سایت از 6 بخش تشکیلشده است که باید به تکتک آنها جداگانه پرداخته شود. در این مقاله میخواهیم بپردازیم به اینکه tti چیست و در کدام مرحله لود قرار دارد.
در این مقاله به سؤالاتی جامع در مورد آن پرداختهشده. اعم از دلیل افزایش تایم tti چیست و یا راههای کاهش tti چیست.
اگر اشاره کوچکی بخواهیم به آن داشته باشیم میشود مرحلهای است که ،از زمان fcp یا همان first contentful page تا زمان قابل تعامل بودن ایلمان و آیتمهای درون site را TTI میگویند.
اگر یک وبمستر هستید حتماً از این مقاله استفاده کنید. در این مقاله جدا از خود tti به مطالب مرتبط دیگری اشارهشده و بهتر از آنها را از دست ندهید.
بیشتر بخوانید: چرا باید اصول سئو را یاد بگیریم ؟
پادکست :
جی تی متریکس یک ابزار جهانی است که با سرمایهگذاری دو شرکت بزرگ یاهو و گوگل ساخته شد. این ابزار با معیارهای جهانی که برای لود سایت در نظر گرفته شد ، SITE موردنظر را ، از تمام عوامل مورد برسی قرار میدهد.
با واردکردن آدرس URL کامل site، پس از گذشتن کمی زمان و آنالیز آدرس ، جی تی متریکس یکسری اطلاعات جامع نسبت به معیارها تعریفشده بر آن ، به شما نشان خواهد داد.
بیشتر وبمستران و متخصصان سئو ، همواره با اطلاعاتی که از Gtmetrix میگیرند ، در تلاش هستند که مشکلات SITE خود را برطرف کنند و افزایش لود سایت و بارگذاری خوبی برای کاربران ایجاد کنند. اما جی تی متریکس با اف سی پی چیست؟
یکی از همین معیارهای جی تی متریکس ، TTI نام دارد. این معیار مخفف time to interactive است.
Tti که مخفف واژه time to interactive است به معنی مدتزمانی است که site مورد نظر ما قابل تعامل با آیتمهای آن برای کاربر فراهمشده باشد. این معیار پس از با گذاری صفحه موردنظر ، زمانی که صفحه موردنظر باشد برای کاربر از زمانی که برای او نمایش دادن آن شروعشده تا زمانی که آیتمهای آن قابلاجرا شود را اندازهگیری میکند و به کاربر موردنظر ، نسبت به چیزی که سرچ کرده ، سایت هایی با امتیاز بالاتر را نمایش می دهد.
برای کاربران امروز سرعت عمل و سریع پیش رفتن ماجرا بسیار مهم بوده و site مورد نظر سرعت داشتن در تعامل برقرار کردن با انتخابهای کاربر ، برای خود کاربر بسیار حائز اهمیت است.
سؤال بسیار مهمی که پیش میآید این است که زمان تعامل در tti چیست ؟ بگذارید کمی تخصصیتر به مفهوم کلی اینکه tti چیست و چگونه سنجش معیار میکند را موردبررسی قرار دهیم.
اولین مفهوم موردنظر FCP است که باید با آن آشنا شوید که در مقاله قبلی در مورد آن صحبت کردهایم. این معیار جی تی متریکس که مخفف first vontentful page است ، بیانگر زمانی است که اولین محتوا و آیتمهای در صفحه مرورگر ، به کاربر نشان دادهشده است.
در نظر داشته باشید که بعدازاین معیار از مراحل لود صفحات site ، معیار دیگری نیز داریم که در آخر به همه آنها جزئی پرداخته میشود.
با خود میگویید تأثیر معیار FCP در TTI چیست. خب ببینید درواقع معیار تی تی ای با معیار اف سی پی سنجیده میشود. به این صورت که ، از زمانی کاربر اولین درخواست را داده و محتواهای اولیه به آن نمایش داده میشود. تاز مانی که تمام آیتمها لود شود و برای کاربر قابلاجرا باشد و تمام مراحل بکاند آن را بهطور صحیح و بدون ایراد اجرا کند.
معیار time to interactive همواره برحسب زمان است و مقادیر و استانداردهای متغیری دارد که در قسمت زیر به تمام زمانهایی که از سمت جی تی متریکس تعیینشده خواهیم پرداخت.
کمتر از ۲.۵ ثانیه : خوب
بین ۲.۵ تا ۳.۲ ثانیه : قابلقبول، اما نیازمند بهینهسازی
بین ۳.۳ تا ۴.۵ ثانیه : کمی طولانیتر از حد استاندارد
بیشتر از ۴.۵ ثانیه : خیلی طولانیتر از حد استاندارد
در نظر داشته باشید که این معیارها را سایت جی تی متریکس بر استانداردهای جهانی و بالا ارائه و پیشنهاد داده که بهتر از تا حد ممکن از تمام آن زمانهای اعلامشده پیروی کرد.
مهمترین بحث در امتیاز دهی این معیار این است که ، site جی تی متریکس پس از واردکردن URL سایتتان در آن ، سرعت و تمام معیارهای تعریفشده نسبت به اجرای جدای هر لود را ، سنجیده و هرکدام را جدا در قسمت performance مجموع آنها را محاسبه و درصد امتیاز میدهد.
امتیازی و درصدی که مولا time to interactive برای پرفورمنس در نظر گرفته ، بین 10 تا 15 درصد از آن است که بسیار حائز اهمیت است.
همانطور که در قسمت قبل خواندید ، معیار tti ، همواره نشاندهنده یکی از مراحل لود و اندازهگیری بسیار مهمی است که باید به دنبال رفع آن باشید. اما دلیل افزایش تایم tti چیست. یعنی قبل از بهینه سازی تی تی ای باید بدانیم اصلاً دلیل افزایش تایم آن چیست و تأثیر آن بر روی مواردی چون سئو و UI و UX چیست؟
اینها از مهمترین مواردی هستند که در افزایش تایم tti بسیار تأثیرگذار هستند. اما نکته مهمی که میتوان آن را گفت این است که ، ابزار جی تی متریکس سرعت لود کل سایت را نمیسنجد! یعنی اینکه شما ممکن است در صفحههای دیگر از المان و آیتمها و محتوای دیگر و در حجم اطلاعاتی و کدهای سبک و سنگین داشته باشید.
ابزار جی تی متریکس با واردکردن URLصفحه مربوطه ، اطلاعات و مراحل و میزان لود هر مرحله از صفحه را برای شما میسنجد و با شما نمایش میدهد.
اما حرف از main thread شد که میاز میدانیم از آنهم مقداری به شما بگوییم. این مفهوم بخشی است که مرورگر کاربران فعالیتها و پردازشهای مربوطه را انجام میدهد. این کارها میتواند شامل بارگذاریها، فراخوانیها یا مدیریت تعامل با کاربران باشد ، این فعالیت میتواند ، پردازش کدهای بکاند html و css باشد یا تجزیه تحلیل کدهای dom در javascrip .
این پروسه مانند این است که شما یک فروشنده لباس هستید و باید لباس دریافت کنید ، آن را برای مشتری بستهبندی کنید و هزینه موردنظر را دریافت و آن را مدیریت کنید.
بیشتر بخوانید: افزایش سرعت سایت ، رعایت این اصول برابر با افزایش لود سایت
اگر تا الان متنهای بالا را بهدقت خوانده باشید ، متوجه خواهید شد که این معیار بهطورکلی از مراحل لود و سرعت آن است. از طرفی همواره سرعت لود سایت تأثیر بسیاری زیادی در سئو سایت دارد.
همچنین لازم به ذکر است که جی تی متریکس معیاریهایی که در آن برنامه ریزه شده است ، معیارهای درخواستی و الگوریتمهای گوگل و سایر موتورهای جستوجوگر است. همان طور که از اسم کلمه seo روشن است معنی آن یعنی بهینهسازی موتورهای جستوجوگر ، خب وقتی این یک معیار از خود این موتورهای جستوجوگر باشد ، مسلماً تأثیر بسیار زیادی در سئو سایت خواهد داشت. بگذارید الگوریتم کلی موتورهای جستوجوگر را برای شما شرح دهیم.
بهعنوانمثال الگوریتم موتور جستوجوگر گوگل ، به این شکل است ته با یک معدلگیری با نتایج کراولر ها یا همان رباتهای گوگل میان رفتارهایی که کاربر دارد و آن را رصد میکند ، ایجاد میکند. سپس با آن به سئو site امتیاز میدهد.
از طرفی اگر از دید کاربر نگاه کنیم ، لود سایت ازنظر او کلاً یک مرحله بیش نیست و انتظار دارد بعد از به نمایش گذاشته شدن محتواها ، تمامی آیتمها و المانها با انتخاب او بهدرستی کار کند. پس اگر آیتمها بهدرستی کار نکند یا مراحل و معیارهای لود سایت بالا باشد ، کاربر سریعاً از site خارجشده و باعث ایجاد امتیاز منفی به site میشود.
وظیفه یک طراح و متخصص در حوزه طراحی سایت و سئو ، این است که از دید کاربر ، مراحل لود site که از دید خود است را بهینه کند تا در نتایج بهتری از قرچ کیورد ها قرار گیرد. اما منظور از بهینهسازی tti چیست ؟
تمام فعالیتها و رفتارهایی که یک متخصص سئو ، طراح سایت و یا وبمستر مربوطه وبسایتی که باید در راستای کاهش تایم معیارهای گوگل و از همه مهمتر ، معیار time to interactive انجام دهد را ، بهینهسازی تی تی ای میگویند.
در نظر داشته باشید که بهینه سازی تی تی ای بهتنهایی تأثیری در کاهش تایم لود site ندارد و بایستی تمام معیارهای متریکی لود سایت را بلد و آشنا باشید و هرکدام را به روش مخصوص خود بهینه کنید. تا درمجموع یک امتیاز performance خوب و افزایش سرعت لود site خوبی را تجربه کنید.
اما چون این مقاله به مبحث tti چیست اختصاص دارد و بیشتر محتوای آن باید در راستای آشنایی بیشتر با آن باشد ، در قسمت بعد مواردی را برای بهینه سازی تی تی ای برای شما آماده کردهایم.
برای اینکه رفتار مناسبی بعد از سنجیدن سرعت لود سایت در جی تی متریکس ، با دیدن بالا بودن تایم tti داشته باشیم ، مواردی را در قسمت زیر برای شما آماده کردهایم که با حل مشکلات و بهینه کردن آنها ، به طرز چشمگیری کاهش تایم time to interactive خواهید داشت.
همزمان روی UX سایت و بکاند های مربوطه به آن کارکنید و بهینهسازی کنید.
در نظر داشته باشید که مدتزمان ارتباط و تعامل زمانی کامل مشخص میشود که محتوای اصلی سایت نسبت به برنامههای دادهشده کامل بارگیری شود و از طرفی کاربر بدون معطلی و صبر کردن ، حال با اسکرول کردن و راه دیگر مابقی محتوای درون site و آیتمهای ورد نظر را ببینند با آن ارتباط برقرار کنند. از طرفی این معیار ، یک ملاک کاربر محور است که باید آن را با اضافهبار main thread ارتباط داد.
برای تجزیه تحلیل بهتر این موضوع و رصد تمام موادی چون long task های مربوطه و … را در ابزار chrome web tools بازکنید و آن را مشاهده کنید.
در آن شما میتوانید تمام وظایف و کار هایی که بعد از fcp صورت گرفته و باید تا tti صورت بگیرد را ببینید ، مثلاً میبیند که cpu پس از دریافت اطلاعات معیار اولیه فعالیت کمتری دارد و یا فعالیت بیشازاندازه دارد.
در ادامه بخش هایی را بهینهسازی کدهای جاوا اسکریپت و html و css خواهیم پرداخت که هرکدام مجزا هستند و درصدد رسیدن بهینه سازی تی تی ای بهترین شکل هستند.
روشهای بهینهسازی جاوا اسکریپت در tti چیست ؟
با توجه به وضعیت Main Thread از defer و async استفاده کنید.
روشهای بهینهسازی css در tti چیست ؟
از مهمترین عواملی که در بهینهسازی تی تی ای باید صورت بگیرد ، بهینهسازی فایلهای و تصاویر css است که در جهت رسیدن به یک سئو و تایم کمتری از تی تی ای است. در قسمت زیر به برخی از آنها پرداختهایم.
کدهای استفادهنشده و مرده را از CSS Files پاککنید.
چندین شناسه را از CSS Files پاککنید.
برای کاهش تعداد درخواستها، فایلهای CSS را یکی کنید.
برای ایجاد ارتباط بصری سریعتر با کاربر، کدهای CSS حیاتی را وارد کنید.
مهمترین فایلهای CSS را پیش بارگیری کنید.
برخی از فایلهای CSS را بهصورت غیر همزمان بارگیری کنید تا منابع مسدودکننده بندر حذف شوند.
برای جلوگیری از Bloating فایلهای CSS از کدهای رنگی کمتری استفاده کنید.
برای جلوگیری از Bloating، فایلهای CSS را تغییر شکل دهید.
سعی کنید از تصاویر خطی مانند Base64 یا SVG استفاده کنید.
پیکسلهای غیرضروری تصویر را حذف کنید تا اندازه تصویر کاهش یابد.
برای بهینهسازی فایلهای تصویری ازنظر بهبود مدتزمان تعامل، میتوانید از روشهای زیر استفاده کنید:
سعی کنید از CDN برای ارسال سریعتر تصاویر بدون بارگذاری سرور وبسایت واقعی استفاده کنید.
برای کاهش حجم فایلهای تصویری، فراداده تصویر را حذف کنید.
از فرمتهای تصویر کارآمدتر و پسوندهای متداول استفاده کنید.
سعی کنید بهترین الگوریتم بهینهسازی تصویر را برای UX و همچنین عملکرد صفحه وب استفاده کنید.
بیشتر بخوانید: چگونه سئو یاد بگیریم؟ سئو چیست و چگونه آن را یاد بگیریم؟
البته این را در نظر داشته باشید که معیارهای دیگری ممکن است وجود داشته باشد که در این مقاله گنجایش گفتن آن نیست و میتوانید درباره آنها بهطور کامل در مقالات دیگِ پویا وب مطالعه کنید.
مورد اول 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 صورت بگیرد.
حتماً در حوزه که در آن وب سایت دارید و یا یک متخصص سئو و طراح سایت هستید ، مسائلی که در بالا گفته شد را همواره بسنجید و آنها را بهینه کنید که در، هم افزایش لود site و هم رشد رتبه سئو ، تجربه بینظیری را کسب کنید.
جدای این ماجرا اگر میخواهید بهترین شکل ممکن رو این موارد و حوزه افزایش سرعت سایت خود سرمایهگذاری کنید ، باید از فردی متخصص درزمینه سئو و طراحی site کم بگیرید. این افراد با داشتن دانش درزمینه برنامهنویسی ، بهینهسازی و طراحی site ، بسیار کمک خوبی میتوانند در سریع پیش رفتن این ماجرا به شما کنند.
شما در صورت تمایل میتوانید برای بهتر پیش رفتن این مورد ، تمام پروسه مدنظر را به تیم ما یعنی تیم پویا وب بسپارید. تیم پویا وب با داشتن سابقه بیشینه در زمینه طراحی ، امنیت و سئو سایت ، همواره سایر رقبای خود چند قدم جلوتر است.
برای کسب اطلاعات بیشتر و دریافت مشاوره رایگان در این زمینه میتوانید با اطلاعات تماسی که در پایین این صفحه درجشده با ما در تماس باشید.
از همراهی شما تا انتهای این مقاله بسیار سپاس گذاریم.
تماس با پویا وب
آژانس طراحی سایت پویا وب با طراحی وب سايت حرفهای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره میکوشد خدمات خود را با بالاترين کيفيت ممکن و با بهرهگيری از جدیدترین متدها به شما ارائه دهد.