با این کار جزو نفرات اول دوره GA4 منتوریکس هستید. با شما در ارتباط هستیم :)
  • 1
  • 2
  • 3
کتاب الکترونیکی رایگان

برو مرحله بعدی
  • 1
  • 2
  • 3
دوست عزیز
برای ارسال کتاب به ایمیل و شماره موبایل شما نیاز داریم.
برو مرحله آخر
  • 1
  • 2
  • 3
کتاب شما آماده است، دکمه دریافت لینک دانلود را بزنید.

لینک دانلود به شما ایمیل و پیامک شد.

چگونه FID را بهینه کنیم؟ {مراحل و اقدامات}

تحریریه منتوریکس
تحریریه منتوریکس
23:50، 1401/03/09
چگونه FID را بهینه کنیم؟ {مراحل و اقدامات}
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه FID را بهینه کنیم؟ {مراحل و اقدامات}


«من کلیک کردم اما هیچ اتفاقی نیفتاد! چرا نمی‌تونم با این صفحه در تعامل باشم؟»
اولین ترسیم محتوایی (FCP) و بزرگ‌ترین ترسیم محتوایی (LCP) هر دو معیارهایی هستند که زمان رندر بصری محتوا بر روی یک صفحه را اندازه‌گیری می‌کنند. اگرچه مهم است، اما زمان ترسیم پاسخ سریع بارگذاری را ثبت نمی‌کنند. یا به عبارت دیگر، یک صفحه با چه سرعتی به تعامل کاربر پاسخ می‌دهد.
تاخیر ورودی اول (FID) یکی از معیارهای Web vitals به حساب می‌آید که برداشت اول کاربر از تعامل و پاسخگویی سایت را به تصویر می‌کشد. این معیار که در سئو سایت تاثیر بسزایی دارد، زمانی که کاربر برای اولین بار با صفحه تعامل می‌کند و زمانی که مرورگر واقعا به آن تعامل پاسخ نشان می‌دهد را اندازه‌گیری می‌کند. FID یک معیار میدانی است و نمی‌توان آن را در محیط آزمایشگاهی شبیه‌سازی کرد. به منظور اندازه‌گیری تاخیر پاسخ، تعامل واقعی کاربر مورد نیاز است.

چگونه FID را بهینه کنیم؟

به منظور کمک به پیش‌بینی تاخیر ورودی اول (FID) در محیط آزمایشگاهی (LAB)، توصیه‌ی ما استفاده از کل زمان انسداد (TBT) است. آن‌ها موارد متفاوتی را اندازه‌گیری می‌کنند اما بهبود در TBT معمولا با بهبود در FID متناظر است.
دلیل اصلی یک تاخیر ورودی اول (FID) ضعیف، اجرای سنگین جاوا اسکریپت است. بهینه‌سازی چگونگی تجزیه، کامپایل و اجرا و پیاده‌سازی جاوا اسکریپت در صفحه وب به طور مستقیم FID را کاهش می‌دهد.

بیشتر بخوانید:

اجرای سنگین جاوا اسکریپت

مرورگر نمی‌تواند در حالی که درگیر اجرای کدهای جاوا اسکریپت بر روی main thread است، به بیشتر ورودی‌های کاربر پاسخ دهد. به عبارت دیگر، وقتی main thread شلوغ و در حال اجرا است، مرورگر نمی‌تواند به تعاملات کاربر پاسخ دهد. برای بهبود این موضوع:

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

تسک‌های طولانی را تفکیک کنید

اگر تا به امروز تلاش کرده‌اید که مقدار جاوا اسکریپتی که بر روی یک صفحه خاص بارگذاری می‌شود را کاهش دهید، تفکیک و تجزیه‌ی کدهای طولانی به تسک‌های کوچک‌تر و غیر همزمان می‌تواند مفید واقع شود.
تسک‌های طولانی، دوره‌های زمانی اجرای جاوا اسکریپت هستند که در آن‌ها کاربران عدم پاسخگویی UI شما را می‌یابند. هر قسمت از کد که main thread را برای 50 میلی ثانیه یا بیشتر مسدود می‌کند به عنوان یک تسک طولانی مشخصه‌بندی می‌شود. تسک‌های طولانی نشانه‌ای از انباشتگی کد جاوا اسکریپت احتمالی (بارگذاری و اجرای بیشتر از آنچه کاربر بردان نیاز دارد) هستند. تجزیه و جداسازی تسک‌های طولانی می‌تواند تاخیر ورودی وب سایت شما را کاهش دهد.

تاخیر ورودی وب سایت

با به کارگیری روش‌هایی مانند جداسازی کدها و تجزیه و تفکیک تسک‌های طولانی، FID باید به طرز چشمگیری بهبود یابد. در حالی که TBT یک معیار میدانی نیست اما می‌تواند ابزار سودمندی برای بررسی روند پیشبرد در جهت بهبود زمان تعامل (TTI) و نیز تاخیر ورودی اول (FID) باشد.

بهینه‌سازی صفحه برای آمادگی به تعامل

دلایل عمده‌ای برای امتیازهای ضعیف FID و TBT در اپلیکیشن‌های وبی وجود دارند که به شدت به جاوا اسکریپت وابسته‌اند.

اجرای اسکریپت اول شخص می‌تواند آمادگی به تعامل را به تاخیر اندازد

  • اندازه‌ی انباشتگی کد جاوا اسکریپت، زمان اجرای سنگین و تفکیک ناکارآمد می‌تواند زمان پاسخگویی یک صفحه به تعامل کاربر را کاهش داده و در نتیجه معیارهای FID، TBT و TTI را تحت تاثیر قرار دهد. بارگذاری تدریجی کد و ویژگی‌های صفحه می‌تواند به گسترش این کار و بهبود آمادگی به تعامل کمک کند.
  • اپلیکیشن‌های رندر شده در سمت سرور به سرعت بر روی صفحه نمایش ترسیم می‌شوند اما مراقب باشید که تعاملات کاربر توسط اجراهای اسکریپت بزرگ مسدود نشوند (به عنوان مثال، انباشتگی مجدد به دلیل راه‌اندازی شنونده‌های رویداد). این امر می‌تواند چند صد میلی ثانیه به طول انجامد. گاهی اوقات در حد چند ثانیه اگر جداسازی کد مبتنی بر مسیر مورد استفاده قرار گرفته باشد. جا به جایی بیشتر در سمت سرور منطقی یا تولید محتوای استاتیکی در زمان ساخت را در نظر بگیرید.

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

بهینه‌سازی بارگذاری اسکریپت اول شخص

واکشی داده می‌تواند بر جنبه‌های مختلفی از آمادگی به تعامل تاثیرگذار باشد

  • انتظار برای زنجیره‌ای از فچ‌ها (به عنوان مثال، جاوا اسکریپت و واکشی داده برای اجزا) می‌تواند آمادگی به تعامل را تحت تاثیر قرار دهد. به حداقل رساندن وابستگی به فچ داده‌های زنجیره‌ای را مورد هدف قرار دهید.
  • ذخیره‌ی داده‌های بزرگ خطی می‌تواند زمان تجزیه‌ی HTML را افزایش داده و معیارهای تعامل و ترسیم را تحت تاثیر قرار دهد.

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

  • اجرای اسکریپت شخص ثالث می‌تواند زمان پاسخگویی به تعامل را به تاخیر اندازد
  • بسیاری از سایت‌ها حاوی تحلیل‌ها و برچسب‌های Third-Party هستند که همین شبکه را شلوغ کرده و موجب می‌شود تا main thread به صورت دوره‌ای پاسخگو نباشد. همه‌ی این‌ها بر زمان پاسخگویی به یک تعامل تاثیرگذار است. بارگذاری کدهای Third-Party بر مبنای درخواست را کاوش کنید (به عنوان مثال، تبلیغات پایین صفحه را تا وقتی که کاربر صفحه را به نزدیکی آن‌ها اسکرول نکرده است، بارگذاری نکنید).
  • در برخی موارد، اسکریپت‌های Third-Party می‌توانند به لحاظ اولویت و پهنای باند بر روی main thread بر اسکریپت‌های اول شخص تقدم پیدا کنند و همین موجب به تاخیر افتادن آمادگی به تعامل یک صفحه شود. سعی کنید بارگذاری آنچه برای کاربرانتان ارزش بیشتری دارد را در اولویت اول قرار دهید.

استفاده از یک web worker

انسداد main thread یکی از مهم‌ترین دلایل تاخیر ورودی است. web worker این امکان را به شما می‌دهند تا جاوا اسکریپت را بر روی background thread اجرا کنید. انتقال عملیات غیر UI به یک worker thread جداگانه می‌تواند زمان انسداد main thread را کاهش دهد و در نتیجه موجب بهبود معیار تاخیر ورودی اول (FID) شود.
به کارگیری کتابخانه‌های زیر را در نظر بگیرید تا استفاده از web worker بر روی صفحه آسان‌تر شود:

  • Comlink: یک کتابخانه‌ی کمکی که postMessage را به حالت انتزاعی درآورده و استفاده از آن را آسان‌تر می‌کند.
  • Workway:  یک صادر کننده‌ی web worker با هدف عمومی
  • Workerize: یک ماژول را به یک web worker انتقال می‌دهد

زمان اجرای جاوا اسکریپت را کاهش دهید

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

  1. جاوا اسکریپت استفاده نشده را به تعویق بیاندازید
  2. Polyfillهای استفاده نشده را به حداقل برسانید

به صورت پیشفرض، تمامی جاوا اسکریپت‌ها رندر بلاکینگ (Render Blocking) هستند. وقتی مروگر با یک برچسب اسکریپت مواجه می‌شود که به یک فایل جاوا اسکریپت خارجی متصل شده است، باید هر کاری که می‌کند را متوقف کرده و آن جاوا اسکریپت را دانلود، تجزیه، کامپایل و اجرا کند. بنابراین، شما باید تنها کدی را بارگذاری کنید که برای صفحه یا پاسخگویی به ورودی کاربر مورد نیاز است.
زبانه‌ی Coverage در Chrome DevTools به شما می‌گوید که چه مقدار از جاوا اسکریپت در صفحه‌ی وب شما استفاده نشده است.

حذف جاوا اسکریپت‌های استفاده نشده

به منظور حذف جاوا اسکریپت‌های استفاده نشده:

  • دسته کد را به چندین قسمت تقسیم‌بندی کنید.
  • هرگونه جاوا اسکریپت غیر ضروری را با استفاده از کد async یا defer به تعویق بیاندازید که این می‌تواند شامل اسکریپت‌های Third-Party باشد.

تقسیم کد (Code-splitting) مفهوم تقسیم کردن یک دسته کد جاوا اسکریپت بزرگ به قسمت‌های کوچک‌تر است که تحت شرایط خاصی بارگذاری می‌شوند. (که با نام بارگذاری تنبل نیز شناخته می‌شود). اکثر مرورگرهای جدید از استخراج دینامیک سینتکس پشتیبانی می‌کنند که امکان واکشی ماژول بنا به درخواست را مهیا می‌سازد:

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

  • اگر از webpack، Rollup یا Parcel به عنوان یک دسته ماژول استفاده می‌کنید،‌ از پشتیبانی استخراج دینامیکی آن‌ها نهایت استفاده را ببرید.
  • چارچوب‌های سمت مشتری مانند React، Angular و Vue حالت انتزاعی را ایجاد می‌کنند که بارگذاری تنبل در سطح اجزا را آسان می‌کند.

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

 اسکریپت‌های شخص ثالث
تمام اسکریپت‌های Third-Party باید به صورت پیشفرض با async یا defer بارگذاری شوند مگر این که دلیل خاصی برای استفاده نکردن از این دستورها وجود داشته باشد.

Polyfillهای استفاده نشده را به حداقل برسانید

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

  • اگر از Babel به عنوان ترنسپایلر استفاده می‌کنید، از @babel/preset-env  برای شامل کردن polyfillهای مورد نیاز مرورگرهایی که قصد استفاده از آن‌ها را دارید، استفاده کنید.
  • از الگوی ماژول/بدون ماژول برای ارائه‌ی دو دسته‌ی جدا استفاده کنید (@babel/preset-env و از طریق target.esmodules آن را پشتیبانی کنید).
ویژگی‌های ECMAScript

بسیاری از ویژگی‌های ECMAScript جدیدتر کامپایل شده با Babel در محیط‌هایی که از ماژول‌های جاوا اسکریپت پشتیبانی می‌کنند، پشتیبانی می‌شوند. بنابراین با انجام این کار شما اطمینان پیدا می‌کنید که فقط از کد ترنسپایل شده برای مرورگرهایی که واقعا به آن نیاز دارند، مورد استفاده قرار می‌گیرد.
برای کسب اطلاعات بیشتر در مورد این موضوع به مقاله‌ی استفاده از کد مدرن برای مرورگرهای مدرن به منظور بارگذاری سریع‌تر صفحه مراجعه کنید.

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

ابزارهای مختلفی برای اندازه‌گیری و عیب‌یابی تاخیر ورودی اول (FID) در دسترس هستند.

  • Lighthouse 6.0 شامل پشتیبانی برای تاخیر ورودی اول (FID) نیست زیرا آن یک معیار میدانی است. با این وجود، کل زمان انسداد (TBT) را می‌توان به عنوان یک پروکسی استفاده کرد. بهینه‌سازی‌هایی که برای بهبود TBT استفاده می‌شوند باید تاخیر ورودی اول را در میدان بهبود دهند.
ابزارهای توسعه‌دهنده
  •  Chrome User Experience Report  مقادیر تاخیر ورودی اول واقعی ادغام شده در سطح مبدا را تامین می‌کند.

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

تحریریه منتوریکس
تحریریه منتوریکس

این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف