ال TBT في الLight house
ال TBT في الLight house بيقولك إن كودك ثقيل لدرجة إنه شل حركة المتصفح ومنع المستخدم من التفاعل مع الموقع.
تيجي تضغط على زرار أو تفتح منيو تلاقي الموقع مهنج لثواني وبعدين يستجيب.
لو الـ TBT عندك أكتر من 200 ms يبقى إنت بتقدم تجربة مستخدم سيئة.
الحل :
# كسر المهمات الكبيرة
المتصفح بيمشي في تنفيذ الكود سطر سطر. لو قابل Task واحدة بتاخد أكتر من 50 msبيعتبرها Long Task وبيوقف أي تفاعل تاني زي الضغط أو الـ Scroll
الحل: استخدم تقنيات الـ Code Splitting بلاش تبعت ملف JS واحد حجمه 2 ميجا قطع الكود لأجزاء صغيرة تتحمل بس لما نحتاجها او استخدم الdynamic import
# تقليل وقت تنفيذ الـ JavaScript
امسح الـ Unused JS الكود اللي مش مستخدم في الصفحة الحالية.
قلل الاعتماد على المكتبات الضخمة لو تقدر تستبدلها بـ Native JS
مثلا: بدل ما تستخدم Moment.js عشان التاريخ استخدم Intl.DateTimeFormat
# تحسين الـ Third-Party Scripts
أكبر عدو للـ TBT هو السكريبتات الخارجية (إعلانات، شات، تحليلات) دي سكريبتات إنت مش متحكم فيها وبتحجز الـ Main Thread لنفسها.
الحل:استخدم خاصية defer أو async.
# الـ Web Workers
لو عندك حسابات معقدة أو معالجة داتا كبيرة في الـ Frontend، بلاش تعملها في الـ Main Thread.
الحل: انقل العمليات التقيلة لـ Web Workerده بيسمح للكود يشتغل في Thread منفصل تماماً، ويسيب الـ Main Thread فاضي عشان يستجيب لضغطات المستخدم.

hashtagReactJS
hashtagFrontendDevelopment
hashtagWebDevelopment
hashtagJavaScript
hashtagNextJS
hashtagTypeScript
hashtagUIUX
hashtagWebDesign
hashtagFrontend
hashtagCoding
hashtagProgramming
hashtagWebPerformance
hashtagCSS
hashtagAnimation
hashtagReactDeveloper
hashtagSoftwareEngineering
hashtagWebDev
hashtagTech
hashtagOpenSource
hashtagDeveloperTools
hashtagUIComponents
hashtagCreativeDevelopment
hashtagFrontendEngineering
hashtagDevCommunity
hashtagSoftwareDevelopment

