بهبود FID سایت

مقدمه

کلیک کردم ولی چیزی نشد! چرا نمی توانم با این صفحه تعامل داشته باشم؟ 😢

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

اولین تأخیر ورودی (FID) یک معیار اصلی Web Vitals است که اولین برداشت کاربر از تعامل و پاسخگویی سایت را به تصویر می‌کشد. این زمان از اولین تعامل کاربر با یک صفحه تا زمانی که مرورگر واقعاً قادر به پاسخگویی به آن تعامل است را اندازه گیری می‌کند. FID یک معیارمیدانی است و نمی توان آن را در محیط آزمایشگاهی شبیه سازی کرد، زیرا یک تعامل کاربر واقعی برای اندازه گیری تاخیر مورد نیاز است.

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

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

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

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

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

کارهای طولانی را به قطعات کوچکتر تقسیم کنید.

قبلاً سعی کردیم برای بهبود LCP مقدار جاوا اسکریپت در یک صفحه را کاهش دهیم، اما برای بهبود FID، تجزیه کدهای طولانی مدت به وظایف کوچکتر و ناهمزمان می‌تواند مفید باشد.

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

با اتخاذ روش‌های کاربردی مانند تقسیم کد و شکستن وظایف طولانی میتوان بهبود FID را به طور قابل ملاحضه مشاهده کرد.

صفحه خود را برای تعامل سریع بهینه کنید.

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

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

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

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

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

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

اسکریپت شخص ثالث می تواند بر FID تاثیر بگذارد

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

استفاده web worker برای بهینه سازی FID

یک رشته اصلی مسدود شده یکی از دلایل اصلی تاخیر ورودی است.web worker ها امکان اجرای جاوا اسکریپت را بر روی یک رشته پس زمینه فراهم می کنند. انتقال عملیات غیر UI به یک نخ worker مجزا می تواند زمان مسدود شدن رشته اصلی را کاهش دهد و در نتیجه باعث بهبود fid شود.

Web Workers چیست ؟ Web Workers ابزاری ساده وب برای اجرای اسکریپت ها در رشته های پس زمینه هستند. Worker Thread می تواند وظایف را بدون تداخل با رابط کاربری انجام دهد.

موزیلا

با استفاده از کتابخانه‌های زیر می‌توانید به سادگی از web worker استفاده کنید.

• Comlink: این ابزار که استفاده از webworker ها را لذت بخش می کند.
• Workway: یک namespace راه دور شامل کلاس ها و متدها و مبتنی بر Web Worker.
• Workerize: یک ماژول را به یک Web Worker منتقل می کند و به طور خودکار توابع صادر شده را به عنوان پراکسی های ناهمزمان منعکس می کند.

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

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

• جاوا اسکریپت استفاده نشده را به تعویق بیندازید
• polyfills استفاده نشده را به حداقل برسانید

جاوا اسکریپت استفاده نشده را به تعویق بیندازید

به طور پیش فرض تمام کدهای جاوا اسکریپت render-blocking هستند یعنی برای اجرا پردازه اصلی را مسدود می‌کنند. هنگامی که مرورگر با یک تگ <script> مواجه می شود که به یک فایل جاوا اسکریپت خارجی پیوند اشاره می‌کند، باید کاری را که در حال انجام آن است متوقف و آن فایل جاوا اسکریپت را دانلود، تجزیه، کامپایل و اجرا نماید، بنابراین برای بهینه سازی FID و افزایش سرعت صفحه باید فقط کدی را که برای صفحه یا پاسخ دادن به ورودی کاربر لازم است بارگذاری نمایید.

جاوا اسکریپت مهمترین دلیل ایجاد تاخیر در FID است، به همین دلیل است که اکثر روشهای بهینه سازی FID با جاوا اسکریپت سروکار دارد.

تب Coverage در Chrome DevTools می تواند به شما بگوید که چه مقدار از جاوا اسکریپت در صفحه وب شما استفاده نمی شود.

برای کاهش جاوا اسکریپت استفاده نشده:

• بسته نرم افزاری خود را با کد نویسی به چند تکه مجزا تقسیم کنید
• به تعویق انداختن هر جاوا اسکریپت غیر بحرانی، از جمله اسکریپت های شخص ثالث، با استفاده از async یا defer

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

import('module.js').then((module) => {
  // Do something with the module.
});

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

<script defer src="…"></script>
<script async src="…"></script>

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

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

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

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

polyfill چیست ؟ polyfill قطعه‌ای از کد است (معمولاً جاوا اسکریپت در طراحی وب) که برای ارائه یک ویژگی مدرن در مرورگرهای قدیمی‌تر که به صورت بومی از آن پشتیبانی نمی‌کنند استفاده می‌شود.

موزیلا

Developer tools

ابزارهایی که برای اندازه گیری و اشکال زدایی و بهبود FID وجود دارد به شرح زیر هستند:

• Lighthouse 6.0 :این ابزار از FID پشتیبانی نمی‌کند زیرا یک متریک میدانی است. با این حال، زمان مسدود کردن کل (TBT) می تواند به عنوان یک جایگزین برای آن استفاده شود. بهینه سازی هایی که TBT را بهبود می بخشد باید FID را نیز بهبود بخشد.

• Chrome User Experience Report : مقادیر FID دنیای واقعی را در سطح مبدأ جمع آوری می کند و می‌تواند اطلاعات بسیار مفیدی برای بهینه سازی FID در اختیارتان بگذارد.

سوالات متداول در مورد بهبود FID (first input delay)