تاخیر ورودی اول (FID) چیست و چرا اهمیت دارد؟

 در سئو تأخیر ورودی اول یک معیار اصلی Web Vitals است و مدت زمانی را که مرورگر طول می کشد تا به تعامل کاربر اول با یک صفحه پاسخ دهد – یعنی کلیک روی یک پیوند، ضربه زدن روی یک دکمه یا تعامل با عنصر دیگر، اندازه گیری می کند.

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

.

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

بنابراین، به شما برمی گردیم: روی یک پیوند کلیک می کنید و منتظر می مانید تا اتفاقی در صفحه بیفتد… خیلی آزاردهنده است، اینطور نیست؟

به همین دلیل است که FID بخشی از معیارهای Core Web Vitals است و به اندازه‌گیری تجربه کاربری یک صفحه کمک می‌کند.

بر خلاف دو معیار دیگر Core Web Vitals، FID را فقط می توان در میدان اندازه گیری کرد – در نهایت، همه چیز در مورد تعامل کاربران است.

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

TBT 25٪ از امتیاز کلی PageSpeed ​​Insights را به خود اختصاص می دهد. این بالاترین وزن است و فقط LCP همان وزن را دارد. با بهبود عملکرد TBT، احتمالاً درجه سرعت صفحه و عملکرد FID خود را بهبود خواهید داد.

چه نمره در مورد دیگر Core Web Vitals، امتیازات به سه سطل تقسیم می‌شوند: خوب، نیاز به بهبود، و ضعیف.

یک امتیاز FID خوب باید دارای تاخیر ورودی اول کمتر یا مساوی ۱۰۰ میلی ثانیه باشد.

امتیاز اگر بین ۱۰۰ تا ۳۰۰ میلی ثانیه باشد “نیاز به بهبود دارد”.

از سوی دیگر، نمره “ضعیف” فراتر از ۳۰۰ میلی ثانیه است.

نمره کل زمان مسدود کردن خوب چقدر است

ممکن است تعجب کنید که آیا همان سطل های امتیاز برای کل زمان مسدودسازی اعمال می شود یا خیر. امتیاز TBT کمی متفاوت است – همانطور که خود معیار است. تفاوت اصلی این است که TBT تعامل را بدون ورودی کاربر اندازه گیری می کند. به همین دلیل است که می توان آن را به عنوان داده های آزمایشگاهی محاسبه کرد.

زمان انسداد مجموع مدت زمانی را که صفحه قبل از پاسخ دادن به ورودی کاربر مانند فشار دادن صفحه کلید، ضربه زدن روی صفحه یا کلیک ماوس “مسدود” شده است اندازه گیری می کند – می بینید که هیچ تعاملی با کاربر وجود ندارد؟ مجموع تمام “زمان های بلوک” امتیاز TBT را تعیین می کند.

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

طبق معمول، زمان مسدود کردن کل شامل سه سطل است:

خوب – کمتر یا برابر با ۳۰۰ میلی ثانیه

نیاز به بهبود دارد – بین ۳۰۰-۶۰۰ میلی ثانیه

ضعیف – بیش از ۶۰۰ میلی ثانیه.

به طور خلاصه: FID و TBT هر دو تعامل و پاسخگویی صفحه را به تصویر می کشند – حتی اگر FID تعامل کاربر را در نظر بگیرد، در حالی که TBT به ورودی کاربر متکی است. به همین دلیل، هر دو معیار از نظر بهبودهای مورد نیاز مشابه هستند.

حداکثر تاخیر ورودی اول بالقوه چقدر است

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

حداکثر تاخیر ورودی اول پتانسیل حداکثر تاخیر بین تعامل کاربر و پاسخ مرورگر را اندازه گیری می کند.

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

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

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

نحوه اندازه گیری اولین تاخیر ورودی

به عنوان یک متریک میدانی، تاخیر ورودی اول تنها با چند ابزار قابل اندازه گیری است:

• گزارش تجربه کاربر Chrome (CrUX)

• PageSpeed ​​Insights (داده های میدانی)

• کنسول جستجو – گزارش Core Web Vitals.

همچنین می توانید FID را در جاوا اسکریپت با استفاده از Event Timing API اندازه گیری کنید.

می‌توانید متریک پراکسی، کل زمان انسداد، را در این ابزارهای دیگر اندازه‌گیری کنید:

• فانوس دریایی

• PageSpeed ​​Insights (Fied Data)

• Chrome DevTools

• WebPageTest .

اندازه گیری FID و TBT با PageSpeed ​​Insights

PageSpeed ​​Insights به شما ساده ترین فرصت را می دهد تا امتیاز تاخیر ورودی اول را بر اساس صفحه و همچنین کل زمان مسدود شدن را اندازه گیری کنید:

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

اگر می خواهید عملکرد FID سایت خود را در سراسر سایت ارزیابی کنید، باید نگاهی به گزارش Core 

Web Vitals در کنسول جستجو بیندازید. این گزارش بر اساس گزارش تجربه کاربر Chrome است.

با انتخاب گزارش تلفن همراه یا دسکتاپ، می‌توانید مشکلات بالقوه عملکرد FID را شناسایی کنید و به آدرس‌های اینترنتی تحت تأثیر همان مشکل عمیق‌تر بروید – برای مثال، مشکل FID: بیشتر از ۱۰۰ میلی‌ثانیه

چه عواملی بر FID تأثیر می گذارد و باعث کاهش امتیاز در وردپرس می شود

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

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

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

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

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

به همین دلیل است که هر چه موضوعات پیچیدگی کمتری داشته باشند، بهتر است. و همچنین به همین دلیل است که اکنون تمایل به ساده کردن همه چیز است: طرح‌بندی‌ها، انیمیشن‌ها، استفاده بیشتر از JS بومی در مقابل تکیه بر کتابخانه‌های پیچیده  

چگونه تاخیر ورودی اول را بیش از ۱۰۰ میلی‌ثانیه یا ۳۰۰ میلی‌ثانیه در موبایل و دسک‌تاپ کاهش دهیم

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

هدف این است که فرآیند را سریعتر و روانتر کنیم تا تعامل و پاسخگویی بهتر شود.

اگر درجه FID شما مشکلی دارد، در گزارش Core Web Vitals در کنسول جستجو، « مشکل FID: بیش از ۱۰۰ میلی‌ثانیه » یا « مشکل FID: بیشتر از ۳۰۰ میلی‌ثانیه » را می‌خوانید. مشکل می تواند از موبایل و/یا دسکتاپ باشد.

چندین روش برای بهینه سازی درجه تاخیر ورودی اول در وردپرس وجود دارد:

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

بیایید با جزئیات ببینیم چه اقداماتی باید انجام دهید و چه تأثیری بر عملکرد شما دارد.

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

تاثیر عملکرد: بالا

در مورد بهینه سازی اجرای جاوا اسکریپت، باید فایل های جاوا اسکریپت را به تعویق بیندازید.

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

در نتیجه، زمان بارگذاری و همچنین درجه FID بهبود خواهد یافت.

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

<script defer src=”/example-js-script“></script>

با WP Rocket و ویژگی Load Javascript Deferred آن می توانید به راحتی تعویق فایل های جاوا اسکریپت را مدیریت کنید .

این گزینه را در تب File Optimization پیدا خواهید کرد. همچنین می‌توانید فایل‌های JS خاص را از به تعویق انداختن حذف کنید — در صورتی که به دلیل هرگونه تضاد به این گزینه نیاز داشته باشید.

 defer آورده شده است:

.شما به توصیه‌های PageSpeed ​​« حذف منابع مسدودکننده رندر » و «کاهش تأثیر کد شخص ثالث» رسیدگی می‌کنید — حتی اگر مشکلات منابع مسدودکننده رندر JS در اینجا متوقف نشود.

به خواندن ادامه دهید تا بدانید چه اقدامات دیگری را باید اجرا کنید.

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

تاثیر عملکرد: متوسط

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

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

گزارش PageSpeed ​​Insights لیستی از فایل های JS استفاده نشده را که باید از آنها مراقبت کنید به شما نشان می دهدشما دو گزینه برای مقابله با فایل های جاوا اسکریپت استفاده نشده دارید:

1. فایل های جاوا اسکریپت را فقط در صورت نیاز بارگیری کنید.

شما می توانید از افزونه هایی مانند Perfmatters و Assets Cleanup برای بارگیری این فایل ها فقط در صورت نیاز استفاده کنید. اجرای فایل های جاوا اسکریپت باید در هر حالت دیگری غیرفعال شود. به عنوان یک نکته اضافی، می توانید از توسعه دهندگان طرح زمینه و افزونه خود بخواهید اطمینان حاصل کنند که تنها دارایی های مورد نیاز در هنگام استفاده از ویژگی های مربوطه بارگیری می شوند.

2. فایل های جاوا اسکریپت را به تاخیر بیندازید.

تأخیر در منابع جاوا اسکریپت به این معنی است که فایل‌های جاوا اسکریپت تا اولین تعامل کاربر بارگیری نمی‌شوند (مثلاً پیمایش

، کلیک کردن روی یک دکمه). به عبارت دیگر، هیچ فایل JS بارگذاری نخواهد شد مگر اینکه تعامل کاربر وجود داشته باشد. مهم است که به خاطر داشته باشید که همه اسکریپت‌های فهرست توصیه‌های PageSpeed، مانند آنچه در بالا آمده است، نمی‌توانند با خیال راحت به تأخیر بیفتند. یک مزیت دیگر تاخیر در جاوا اسکریپت این است که Lighthouse هیچ فایل JS را شناسایی نمی کند. در نتیجه، ابزار هیچ یک از این منابع JS را در توصیه “حذف فایل های جاوا اسکریپت استفاده نشده” شامل نمی شود.

واضح است: برای حل این توصیه PSI نباید فایل های JS را به تاخیر بیندازید. در مورد دلیل اصلی که چرا باید JS را به تأخیر بیندازید، اطلاعات بیشتری در مورد بعدی پیدا خواهید کرد. با این حال، برای شما مفید است که به عنوان یک ارزش افزوده برای بهبود نمره PSI خود بدانید.

بنابراین، چگونه می توان فایل های جاوا اسکریپت را به تاخیر انداخت؟ می توانید از یک افزونه رایگان مانند Flying Scripts استفاده کنید.

از طرف دیگر، می توانید از WP Rocket و قابلیت اجرای Delay JavaScript آن بهره ببرید. برگه بهینه سازی فایل به شما امکان می دهد اجرای جاوا اسکریپت را با چند کلیک به تاخیر بیندازیددر نهایت، در اینجا لیستی از افزونه های دیگر وجود دارد که می تواند به شما کمک کند JS استفاده نشده را به حداقل برسانید. توصیه می کنیم با دقت از آنها استفاده کنید:

• Plugin Organizer

• پاکسازی دارایی

• گونزالس

حذف فایل‌های جاوا اسکریپت بلااستفاده به توصیه‌های PageSpeed ​​خاص فهرست شده در گزارش پاسخ می‌دهد. همچنین به توصیه‌های «حذف منابع مسدودکننده رندر» و «کاهش زمان اجرای جاوا اسکریپت» می‌پردازید۳. زمان اجرای JS را تا زمان تعامل کاربر به تاخیر بیاندازید

تاثیر عملکرد: بسیار بالا

می‌توانید منابع جاوا اسکریپت را بهینه کنید و اسکریپت‌های مورد نیاز برای تعامل را با به تاخیر انداختن فایل‌های JS و اجرای آن‌ها تا زمان تعامل کاربر، اولویت‌بندی کنید.

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

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

همانطور که می دانید، گزینه های مختلفی برای به تاخیر انداختن فایل های جاوا اسکریپت دارید. می‌توانید از یک پلاگین رایگان مانند Flying Scripts استفاده کنید یا از گزینه Delay JavaScript execution که توسط WP Rocket ارائه شده است استفاده کنید – جزئیات بیشتر در بالا.

این روشی است که به توصیه PSI «کاهش زمان اجرای جاوا اسکریپت» رسیدگی می کنید.

۴. Minify JS

تاثیر عملکرد: کم

یکی دیگر از راه های موثر برای مدیریت زمان اجرای جاوا اسکریپت، کوچک کردن فایل های جاوا اسکریپت است.

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

کوچک سازی می تواند زمان بر باشد و همیشه خطر از دست دادن هر چیزی وجود دارد. به این دلایل، بهتر است از ابزار Minification یا WP Rocket استفاده کنید. WP Rocket ساده ترین راه برای کوچک کردن فایل های JS با چند کلیک است. فقط باید گزینه Minify JavaScript file را در تب بهینه سازی فایل فعال کنیدشما به توصیه های PageSpeed ​​Insights زیر توجه خواهید کرد:

• Minify JS

• از بارهای سنگین شبکه خودداری کنید.

۵. حذف (یا کاهش) CSS استفاده نشده

تاثیر عملکرد: متوسط

همانطور که در بخش LCP توضیح داده شد، حذف یا کاهش CSS استفاده نشده به بهبود زمان بارگذاری کمک می کند – بنابراین، تعامل و متریک FID را بهبود می بخشد.

WP Rocket یک ویژگی قدرتمند ارائه می دهد که به شما امکان می دهد با یک کلیک CSS استفاده نشده را کنترل کنید. فقط باید گزینه زیر را فعال کنید و افزونه CSS استفاده نشده موجود در HTML صفحه را حذف می کند.

با فعال کردن این ویژگی، به راحتی می‌توانید به توصیه «کاهش CSS استفاده نشده» رسیدگی کنید.

۶. Async یا Defer CSS

تاثیر عملکرد: متوسط

کار رشته اصلی می تواند تأثیر قابل توجهی بر تعامل و عملکرد FID داشته باشد. به همین دلیل است که یکی از توصیه های PSI این است که ” کار رشته اصلی را به حداقل برسانید .” برای رفع مشکل و بهبود زمان FID، باید فایل‌های CSS را به تعویق بیندازید یا آن‌ها را همگام‌سازی کنید.

در بخش Defer JavaScript، می خوانید که چرا defer ضروری است تا مرورگر فقط بر منابع ضروری برای رندر صفحه تمرکز کند. همین امر در مورد فایل های CSS که منابع مسدود کننده رندر هستند نیز صدق می کند.

یک گزینه این است که ویژگی Defer را به تمام فایل های CSS اضافه کنید:

<script defer src=”/example-css-script“></script>

و در اینجا یک فرآیند ۲ مرحله‌ای دیگر برای بارگیری ناهمزمان منابع مسدودکننده رندر CSS وجود دارد:

• با استفاده از ابزار مولد موجود مانند این ، Critical Path CSS (CPCSS) را استخراج و درون خط کنید .

• با اعمال الگوی زیر بقیه کلاس ها را به صورت ناهمزمان بارگذاری کنید .

اگر به دنبال اطلاعات دقیق تری هستید، توصیه می کنیم منبع اختصاصی Google را مطالعه کنید.

نکته اضافی که باید در نظر داشته باشید این است که از قرار دادن کدهای CSS بزرگ غیر بحرانی در <head> کد خودداری کنید.

اگر به دنبال راهی سریع‌تر و آسان‌تر برای مراقبت سریع از CSS مهم و غیر بحرانی هستید، WP Rocket می‌تواند به شما کمک کند. تحت Optimize CSS delivery، افزونه کش ما گزینه Load CSS به صورت ناهمزمان را ارائه می دهد که CSS غیر بحرانی و CSS بحرانی درون خطی را به تعویق می اندازد .

با فعال کردن گزینه موجود در تب File Optimization، تمام منابع CSS مسدودکننده رندر را حذف خواهید کرد:

لطفاً توجه داشته باشید که اگر قبلاً گزینه Remove Unused CSS (RUCSS) را فعال کرده اید، نمی توانید این گزینه را انتخاب کنید – صرفاً به این دلیل که به آن نیاز ندارید. WP Rocket در حال حاضر در حال بهینه سازی فایل های CSS در بهترین حالت خود است. توصیه می کنیم تحویل CSS را فقط در صورتی بهینه کنید که RUCSS برای شما کار نکند.

با اجرای این اقدامات، یک بار دیگر مراقب توصیه‌های PageSpeed ​​Insights «حذف منابع مسدودکننده رندر» هستید. شما همچنین به توصیه “جلوگیری از زنجیره درخواست های حیاتی” توجه خواهید کرد.

۷. فایل های متنی را فشرده کنید

تاثیر عملکرد: بالا

همانطور که در این مرحله می توانید حدس بزنید، فشرده سازی چیزی است که باید از آن مراقبت کنید. ناگفته نماند که “فعال کردن فشرده سازی متن” یکی از توصیه های PSI است که برای زمان های FID اعمال می شود.

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

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

ساده ترین راه برای فعال کردن فشرده سازی Gzip در وردپرس استفاده از یک افزونه است. شما می توانید بین گزینه های مختلف، از افزونه Enable Gzip Compression گرفته تا WP Rocket، که به طور پیش فرض شامل فشرده سازی GZIP می شود، یکی را انتخاب کنید. به خاطر داشته باشید که برخی از هاست ها فشرده سازی GZIP را به صورت خودکار فعال می کنند.

۸. کارهای طولانی را از بین ببرید

تاثیر عملکرد: بالا

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

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

برای حل این مشکل، باید اسکریپت‌های طولانی‌مدت را به تکه‌های کوچک‌تری تقسیم کنید که می‌توانند در کمتر از ۵۰ میلی‌ثانیه اجرا شوند.

content-visibility یک ویژگی جدید قدرتمند CSS است که می‌تواند به افزایش عملکرد رندر کمک کند و عامل کاربر را قادر می‌سازد تا کار رندر یک عنصر را تا زمانی که مورد نیاز باشد رد کند.

می‌توانید عملکرد بارگذاری خود را با اعمال نمایان بودن محتوا بهبود بخشید: auto; contain-intrinsic-size: 1px 5000px; به عناصری که می خواهید رنگ را به تأخیر بیندازید. بخش دوم را فراموش نکنید: رفع برخی از مشکلات قابلیت استفاده بسیار مهم است.

در حال حاضر، این ویژگی CSS فقط بر روی کروم و اکثر مرورگرهای مبتنی بر آن کار می کند.

در نهایت، خواندن دو منبع در مورد این موضوع، در مورد وظایف طولانی و جاوا اسکریپت فشرده را توصیه می کنیم