د جاواسکریپټ ځنډنی بارول (Defer/Async) سره د TBT وخت کمول په ویب‌سایټ کې

د جاواسکریپټ ځنډنی بارول دا یو تخنیک دی چې د براوزر د صفحې منځپانګې رسمول خنډوونکي جاواسکریپټ فایلونه په مناسب ترتیب کې ځنډوي، د ټول بلاکنگ وخت یا TBT کچه راټیټوي. ساده، کله چې غیر مهم اسکریپټ فایلونو ته defer یا async اضافه کړئ، د براوزر اصلي پروسه لږ بندېږي؛ کاروونکي صفحه ژر ویني، ژر کلیک کولی شي، او Core Web Vitals معیارونه ښه کېږي. د خپل سایټ لپاره د جاواسکریپټ ځنډنی بارول عملي کول، اول باید مهم فایلونه معلوم کړئ، د یو بل پورې تړلي اسکریپټونو کې defer انتخاب کړئ، او د مستقل دریم‌ګړی اسکریپټونو لپاره async وکاروئ. وروسته، PageSpeed Insights، Lighthouse، او Chrome DevTools سره TBT اندازه کړئ.

په عصري ویب‌سایټونو کې د سرعت ستونزه اکثر له انځورونو نه، بلکې له کنټرول نه وتلي جاواسکریپټ څخه راځي. مثلاً، که په یوه سوداګریز سایټ کې د محصول فلټرونه، ژوندۍ چټ، اعلان پکسله، تحلیل کوډونه، تبصره پلگینونه، A/B ټیسټ ابزار، او د قالب اسکریپټونه یوځای بار کېږي، براوزر اصلي پروسه اوږده بوختېږي. دا ستونزه په موبایل کې ډېر واضحه ده—کاروونکي سرلیک ویني، خو مینو ته کلیک وکړي، ځواب نه تر لاسه کوي؛ Lighthouse راپور کې TBT لوړ ښکاري.

په دې لارښود کې defer او async خصوصیتونه، کله او څنګه کارول، په WordPress او خاص پروژو کې عملي کول، د اندازه ګیري مهم ټکي، او واقعي TBT لاسته راوړنې ګام په ګام تشریح کوو. Hostragons زیرساخت ته وړاندیزونه د ویب نړیوال معیارونو سره برابر دي؛ همداراز، سم هاستینګ، CDN، SSL او کش کولو پریکړې څنګه د جاواسکریپټ اصلاح ته مرسته کوي، بحث کوو. Hostragons د وېب هاستنګ بسته‌ګانې

TBT څه دی او ولې له جاواسکریپټ سره ټینګ تړاو لري؟

TBT د "Total Blocking Time" لنډیز دی، او دا اندازه کوي چې د براوزر اصلي پروسه څو وخت بلاک شوې چې کاروونکي نشي تعامل کولی. Lighthouse لابراتوار کې، د First Contentful Paint او Time to Interactive تر منځ، هر اوږده وظیفه چې له ۵۰ میلی‌ثانیې زیات دوام وکړي، TBT لوړوي. مثلاً، که یو جاواسکریپټ وظیفه ۱۸۰ میلی‌ثانیې دوام وکړي، نو ۱۳۰ میلی‌ثانیې د بلاک وخت کې حسابېږي.

دا معیار د کاروونکي تجربې لپاره مهم دی. کله چې کاروونکي صفحه خلاصه کړي، مینو، سبت ته اضافه، یا د جستجو بکس کلیک کړي، براوزر که جاواسکریپټ اجرا کوي، تعامل ځنډېږي. دا کاروونکي ته "فریز"، ځنډ او یا خراب سایټ په توګه ښکاري. په ۲۰۲۶ SEO معیارونو کې، Google انټراکشن ته ارزښت ورکوي—سریع او ثابت تعامل لرونکي سایټونه د کاروونکي رضایت او تبدیل نرخ کې برلاسي لري.

د لوړ TBT عام نښې

• په موبایل PageSpeed Insights کې TBT له ۳۰۰ میلی‌ثانیې پورته.
• Lighthouse کې "Reduce JavaScript execution time" یا "Minimize main-thread work" خبرداری.
• صفحه ښکاري، خو مینو، سلایډر، فلټر یا فورم ځنډ سره ځواب ورکوي.
• د دریم‌ګړی اعلان، چټ یا تحلیل اسکریپټونه لوړ لګښت لري.
• په ټیټ کیفیت Android موبایلونو کې سکرول او کلیک ځنډ.

ښه هدف دا دی چې TBT تر ۲۰۰ میلی‌ثانیې کم وساتئ. پیجونه چې پیچلي ای‌کامرس یا SaaS UI لري، یوازې defer او async بس نه‌دي؛ باید کوډ تقسیم، غیرضروري پیکجونه لرې، کش کول، سرور ځواب ښه، او مهم CSS هم اصلاح شي. بیا هم، جاواسکریپټ ځنډنی بارول د ډېرو پروژو لپاره لومړی ګړندی اصلاح ده.

Defer او Async څه دي؟

د HTML script ټاګ به صورت عادي، براوزر HTML تجزیه ودروي، جاواسکریپټ فایل ډاونلوډ او اجرا کوي، بیا صفحه رسموي. دا د مهم اسکریپټونو لپاره لازم دی، خو هر فایل ته دا کارول غیرضروري ځنډونه جوړوي. defer او async خصوصیتونه دا رفتار بدلوي، فایلونه مختلف قواعدو سره ډاونلوډ او اجرا کوي.

Defer څنګه کار کوي؟

هغه اسکریپټ چې defer لري، HTML تجزیه جریان کې په پس منظر کې ډاونلوډ کېږي؛ خو اجرا یې وروسته له HTML تجزیې کېږي. متعدد defer فایلونه د HTML ترتیب ساتي. نو، د یو بل پورې تړلي اسکریپټونو لپاره defer خوندي انتخاب دی. مثلاً، اول یو لایبرري، بیا د هغې تابع قالب اسکریپټ defer سره اجرا کړئ.

نمونه: <script defer src=/js/app.js></script>. دلته app.js فایل د صفحې رسمول نه بلاک کوي، DOM چمتو شي، په ترتیب اجرا کېږي. عصري براوزرونه defer ښه ملاتړ کوي.

Async څنګه کار کوي؟

هغه اسکریپټ چې async لري، جریان کې ډاونلوډ کېږي، خو ډاونلوډ ختم شي، اجرا کېږي (هماغه لحظه). د HTML تجزیه ممکن لنډه وقفه ولري. async د فایلونو ترتیب نه تضمینوي؛ هر فایل چې ژر ډاونلوډ شي، ژر اجرا کېږي. نو، تحلیل، اعلان، پکسله، خارجي ویجټ، یا سوشیل اسکریپټونو لپاره async مناسب دی.

نمونه: <script async src=/js/analytics.js></script>. دلته analytics.js باید د بل محلي اسکریپټ انتظار ونه‌کړي؛ که د بلې لایبرري تابع وي، async اجرا کې خطا راځي. async سریع دی، خو د اسکریپټ طبقه‌بندي ته پاملرنه پکار ده.

د Defer او Async پرتله جدول

عملي قاعده: که فایل ترتیب ته اړتیا لري، defer وکاروئ. که فایل مستقل دی، async وڅیړئ. که یقین نه لرئ، اول په staging محیط defer آزموئ، کنسول خطا او تعاملات تست کړئ. د سټېجینګ چاپېریال او بیک اپ لارښود

د جاواسکریپټ ځنډنی بارول لپاره عملی پلان

هر اسکریپټ ته defer یا async ورکول، ممکن لنډمهاله سکور ښه کړي، خو په فعال سایټ کې د پیسو، جستجو، مینو، فورم یا سبت مهم فعالیتونه خرابولی شي. سالم عملي کول، اندازه، طبقه‌بندي، کوچني تغییر، تست او نظارت لړۍ ته اړتیا لري.

۱. موجوده سرعت اندازه کړئ

اول د صفحې اساسي ارزښتونه ثبت کړئ. PageSpeed Insights سره موبایل او ډیسکتاپ سکورونه یادداشت کړئ. Lighthouse راپور کې TBT، First Contentful Paint، Largest Contentful Paint، او Speed Index ثبت کړئ. Chrome DevTools Performance کې اصلي پروسه وګورئ؛ اوږده ژیړ بلاکونه اکثراً د جاواسکریپټ اجرا لګښت ښيي.

مثلاً، موبایل TBT ۷۸۰ میلی‌ثانیې، جاواسکریپټ اجرا وخت ۲.۸ ثانیې، اصلي پروسه کار ۴.۵ ثانیې. که اصلاح وروسته TBT تر ۲۸۰ میلی‌ثانیې راځي، شاوخوا ۶۴٪ ښه والی ترلاسه کوئ. دا ثبتونه د ټیم لپاره د مؤثر تغییر معلومولو آسانوي.

۲. د اسکریپټ لیست جوړ کړئ

د صفحې سورس یا Network ټب کې ټول جاواسکریپټ فایلونه لیست کړئ. د هر فایل سرچینه، اندازه، اړین وخت، او وابستګي معلوم کړئ. دا فایلونه دغو ګروپونو کې وویشئ:

• مهم اسکریپټونه: د لومړي نمایش یا اساسي ناویګیشن لپاره.
• تابع محلي اسکریپټونه: قالب، سلایډر، فلټر، ګالري، اپلیکیشن ماډولونه.
• مستقل دریم‌ګړی اسکریپټونه: تحلیل، اعلان، پکسله، چټ، سوشیل.
• غیرضروري یا زوړ اسکریپټونه: د نه استعمال پلگینونه.
• شرطي اسکریپټونه: یوازې ځانګړو صفحو کې لکه فورم تصدیق.

غوره اصلاح اکثر په defer ورکولو نه، بلکې غیرضروري اسکریپټ لرې کولو کې وي. ۹۰ کیلوبایټ فایل، موبایل کې د تجزیې او اجرا سره ۳۰۰ میلی‌ثانیې لګښت لري. نو، اول غیرضروري لرې کړئ، بیا پاتې ځنډ کړئ.

۳. د defer لپاره مناسب فایلونه وټاکئ

عموماً قالب اسکریپټونه، مینو، سلایډر، محصول ګالري ماډولونه، او اپلیکیشن bundle فایلونه defer ته مناسب دي. مهم دا چې اسکریپټ باید document.write یا نورو بلاکنگ میتودونو ته شدید تابع نه وي، او DOM پس اجرا یې منل کېږي.

په WordPress قالب کې jquery-migrate، اصلي قالب فایل، او پلگین اسکریپټونه پیچلي وابستګۍ لري. jQuery ته async ورکول اکثر خطرناک دي؛ ځکه اکثر پلگینونه د jQuery ترتیب ته انتظار کوي. د jQuery تابع فایلونو ته defer ورکول یا پلگین سطحه اصلاح کول خوندي دي. د WordPress د سرعت اصلاح لارښود

۴. د async لپاره فایلونه وټاکئ

Google Analytics، اعلان ټاګونه، Facebook Pixel، LinkedIn Insight Tag، خارجي چټ ویجټونه او سوشیل اسکریپټونه async ته مناسب دي. خو هر دریم‌ګړی اسکریپټ یو شان نه دی؛ بعضې چټ ابزارونه صفحه سره کاروونکي جلسه جوړوي، بعضې اعلان سیستمونه ځانګړي container ته انتظار کوي—نو مستندات وګورئ.

مستقل تحلیل کوډ async کول معمولاً کاروونکي ته زیان نه رسوي. خو د حقیقي راپور ضایع شوې خطر کمولو لپاره trigger کنټرول وکړئ. د tag manager سره، ټول ټاګونه یو container کې نه، trigger شرایط تنظیم کړئ. مثلاً، تبصره نه لرونکي صفحو کې تبصره اسکریپټ، یا محصول نه لرونکي صفحو کې محصول اسکریپټ مه باروئ.

۵. شرطي او event-based بارول اضافه کړئ

defer او async ښه پیل دي؛ خو advanced ډول، جاواسکریپټ فایلونه د کاروونکي رفتار سره بارول TBT ته ستر تاثیر لري. مثلاً، چټ بکس اول نه، بلکې کاروونکي ۵ ثانیې پاتې شي یا د مرستې بټن کلیک کړي، بار کړئ. نقشه embed کوډ د کاروونکي سکول سره بار کړئ. ویدیو اسکریپټ د play بټن کلیک سره بار کړئ.

دا طریقه خاصاً د محتوا او رسمي سایټونه کې مؤثره ده؛ ځکه کاروونکي هر صفحه کې هر ویجټ ته اړتیا نه لري. د ابتدایي بار نه ۲۰۰ کیلوبایټ جاواسکریپټ لرې کول، ضعیف موبایل پروسسور کې TBT سلګونه میلی‌ثانیې کموي.

۶. تست او تدریجي خپرول

تغییرات اول په test محیط آزموئ، نه په live سایټ. اصلي صفحه، کټګوري، محصول یا خدمت صفحه، تماس صفحه، login، او payment flows کې manual تست وکړئ. د براوزر کنسول خطا وګورئ—"Cannot read property"، "is not defined"، "undefined function" خطا ترتیب یا وابستګي مشکل ښيي.

په live کې تدریجي خپرول—اول مستقل دریم‌ګړی اسکریپټونه اصلاح کړئ، بیا قالب اسکریپټونه. هر تغییر وروسته Lighthouse راپور د ورته شبکه او device سره تکرار کړئ. یوازې یو اندازه مه اخلو؛ ۳ تستونه اوسط واخلئ.

په WordPress سایټونو کې defer او async یادونې

WordPress کې جاواسکریپټ فایلونه د قالب او پلگین wp_enqueue_script سره بارېږي. په عصري WordPress کې د اسکریپټ ستراتیژی کنټرول شته، خو زوړ قالبونه، page builder پلگینونه، او غیرمطابق اصلاح پلگینونه تضاد جوړوي.

که د سرعت پلگین کاروئ، ټول جاواسکریپټ defer کول مه کړئ؛ exclusion لیست جوړ کړئ. د پیسو صفحه، login، admin bar، security verification، captcha اسکریپټونه حساس دي. د WooCommerce سایټ کې سبت پارټونه، payment gateway اسکریپټونه، variation selectors حتماً تست کړئ. د WooCommerce هاستنګ حللار

WordPress کې عملي ترتیب: اول غیرضروري پلگینونه لرې کړئ؛ بیا یوازې اړینو صفحو کې پلگین فایلونه شرطی کړئ؛ قالب او پلگین اسکریپټونه defer کړئ؛ آخر مستقل دریم‌ګړی کوډونو کې async یا delayed loading وکاروئ. دا طریقه د یو ځل ستر خرابۍ خطر کموي.

په خاص سافټویر او فریم‌ورک پروژو کې مهم ټکي

React، Vue، Angular، Next.js، Nuxt یا مشابه عصري محیطونو کې جاواسکریپټ اصلاح یوازې defer نه دی؛ package size، code splitting، tree shaking، dynamic import، او hydration لګښت TBT ته مهم دي. که یوازې یو ستر bundle ۷۰۰ کیلوبایټ وي، defer سره هم د اجرا مرحله کې اصلي پروسه بندېږي.

په خاص پروژو کې route-based code splitting وکاروئ. کاروونکي په اصلي صفحه کې، admin panel، chart library، یا advanced editor کوډ مه باروئ. درانه components dynamic import سره یوازې اړتیا وخت بار کړئ. غیرضروري وابستګۍ د package analysis سره معلومې کړئ. ستر date، chart، یا animation libraries پر ځای سپک بدیلونه وکاروئ.

که سرور-side rendering یا static generation کاروئ، احتیاط وکړئ—HTML ژر راځي، خو hydration کې سلګونه components هممهاله فعال شي، TBT لوړوي. غیر interactable content کې غیرضروري client-side جاواسکریپټ مه باروئ؛ دا د ۲۰۲۶ سرعت معیارونو اصل دی.

هاستینګ، سرور ځواب، او جاواسکریپټ سرعت اړیکه

TBT براوزر کې د جاواسکریپټ اجرا وخت پورې مربوط دی؛ خو هاستینګ زیرساخت غیرمستقیم تاثیر لري. کمزوری TTFB، د کمپریشن نشتوالی، HTTP/2 یا HTTP/3 نشتوالی، ضعيف کش، او لرې موقعیت فایلونه ځنډوي. فایلونه چې ناوخته راځي، د صفحې ژوند دوره اوږده، کاروونکي تجربه خرابېږي.

غوره هاستینګ زیرساخت، Brotli یا Gzip کمپریشن، فعال براوزر کش، تازه PHP نسخه، چټک disk تکنالوژي، او CDN سره اصلاح ته مرسته کوي. SSL سم نصب کول هم مهم دی—عصري براوزر، HTTP/2، او خوندي دریم‌ګړی integration لپاره. Hostragons د SSL سندونه Hostragons د ډومېن لټون

مثلاً، یو جاواسکریپټ فایل چې بې‌کمپریش ۳۲۰ کیلوبایټ دی، Brotli سره ۹۵ کیلوبایټ کېږي. دا TBT ته مستقیم تاثیر نه لري (TBT اجرا لګښت دی)، خو د ډاونلوډ وخت کمېږي، resource prioritization آسانېږي، او مجموعي بار ښه کېږي. نو، defer، async، کش، او مناسب هاستینګ یوځای فکر کړئ.

اندازه او تصدیق چک‌لیست

د اصلاح نتیجې پوهېدو لپاره یوازې PageSpeed سکور کافی نه دی. دا چک‌لیست واقعي تاثیر معلومولو کې مرسته کوي:

• موبایل TBT اصلاح مخکې او وروسته مقایسه شو؟
• د جاواسکریپټ اجرا راپور کې ستر فایلونه کم شول؟
• Chrome DevTools کې اوږده وظیفه شمېر کم شو؟
• کنسول کې جاواسکریپټ خطا شته؟
• مینو، جستجو، فلټر، فورم، سبت، او payment flows صحیح کار کوي؟
• د دریم‌ګړی تحلیل او اعلان ټاګونه صحیح trigger کېږي؟
• په حقیقي کاروونکو کې INP او تعامل ځنډ ښه شوی؟
• تغییرات کش پاکولو وروسته بیا تست شول؟

دلته مهم دا دی چې لابراتوار او field data جلا کړئ. TBT د Lighthouse لابراتوار معیار دی؛ حقیقي تجربه کې Interaction to Next Paint (INP) مهم دی. خو TBT کمول اکثر INP ته هم ښه والی ورکوي.

عام غلطۍ او د مخنیوي لارې

ټول اسکریپټونه async کول

دا عامه غلطي ده. async ترتیب نه تضمینوي، تابع فایلونه کې خطا راځي. یو صفحه سم ښکاري، خو په کمزوري انټرنیټ یا مختلف براوزر کې خرابېږي. تابع اسکریپټونه defer سره خوندي دي.

jQuery او تابع پلگینونه ناسم ځنډول

په WordPress کې اکثر پلگینونه د jQuery ترتیب ته تابع دي. jQuery ته async ورکول، پلگینونه د jQuery نه مخکې اجرا کوي. حل دا دی چې وابستګي شبکه وګورئ، مهم فایلونه exclusion لیست ته ور اضافه کړئ.

د دریم‌ګړی اسکریپټونه بې‌کنټروله پرېښودل

د قالب فایلونه اصلاح کوئ، خو اعلان، چټ، تحلیل اسکریپټونه هېرېږي. اکثر Lighthouse کې ستر وظیفې د دریم‌ګړی سرچینه لري. غیرضروري ټاګونه لرې کړئ، شرطی trigger کړئ، او که اړتیا وي، تعامل ته ځنډ کړئ.

اندازه نه کول، یوازې پلگین نصبول

د سرعت پلگینونه مؤثر دي، خو اندازه نه کول، هر ابزار نوی جاواسکریپټ او CSS بار کوي. اول ستونزه تشخیص کړئ، بیا ابزار انتخاب کړئ. پلگین واقعاً TBT کموي، د تست راپور سره تصدیق کړئ.

کش او minification تضاد ته پاملرنه نه کول

Minification، merging، defer، او async یو ځای چې کاروئ، فایل ترتیب ګډوډېږي. دا په live سایټ کې غیرمتوقع خطا راوړي. که CDN، سرور کش، اپلیکیشن کش یوځای کاروئ، وروسته له تغییر، ټول لایه کش پاک کړئ.

واقعي اصلاح سناریو

په یوه متوسط رسمي ویب‌سایټ کې فرض کړئ اصلي صفحه کې ۱۸ جاواسکریپټ درخواستونه دي—۵ قالب/مینو، ۴ سلایډر/انیمیشن، ۳ فورم/نقشه، ۶ تحلیل/پکسله/چټ. د پیل Lighthouse موبایل TBT ۹۲۰ میلی‌ثانیې.

لومړی، دوه غیرضروري انیمیشن پلگینونه لرې کړئ، ۱۴۰ کیلوبایټ جاواسکریپټ کم کړئ، TBT ۷۶۰ میلی‌ثانیې ته راځي. دویم، قالب او سلایډر فایلونه defer کړئ، ترتیب تست کړئ، TBT ۴۸۰ میلی‌ثانیې شي. دریم، نقشه اسکریپټ یوازې د تماس برخه کې بار کړئ، چټ ۷ ثانیې وروسته اجرا کړئ، تحلیل او پکسله async کړئ، TBT ۲۱۰ میلی‌ثانیې ته راځي.

دا سناریو ښيي چې یو جادويي تنظیم نه، بلکې طبقه‌وار طریقه مؤثره ده. defer او async قوي ابزارونه دي، خو غوره نتیجه غیرضروري کوډ لرې کول، شرطی بارول، کش، او ښه زیرساخت سره ترلاسه کېږي.

پایله: د TBT کمولو لپاره متوازن او تست شوی جاواسکریپټ ستراتیژي

په سایټ کې د جاواسکریپټ ځنډنی بارول د TBT کمولو تر ټولو عملي او مؤثره لاره ده. defer د ترتیب او DOM پس اجرا مناسب فایلونو کې خوندي حل دی؛ async مستقل دریم‌ګړی اسکریپټونه ژر بارولو لپاره غوره دی. بریالي اصلاح لپاره اول اندازه، طبقه‌بندي، غیرضروري فایلونه لرې، تغییرات تدریجي تست، او حقیقي تجربه تعقیب کړئ.

Hostragons زیرساخت کې چټک، خوندي، او scalable خدمات، د جاواسکریپټ اصلاح، کش کولو، او SSL تنظیم سره با‌ثباته ویب سرعت ته مرسته کوي. که غواړئ د سایټ TBT ښه کړئ، اول موجود راپور واخلئ، وروسته کوچني او اندازه پذیره ګامونه واخلئ. د مناسب هاستینګ او سرعت زیرساخت لپاره Hostragons حلونه وګورئ. Hostragons د وېب هاستنګ بسته‌ګانې

اکثر پوښتل شوي پوښتنې

Defer او async یوځای کارولای شو؟

که defer او async یو فایل کې یوځای وکاروئ، عصري براوزرونه async ته ترجیح ورکوي—ترتیب تضمین له منځه ځي. نو، عملاً دا یوځای مه کاروئ؛ تابع فایلونو defer، مستقل فایلونو async غوره کړئ.

د جاواسکریپټ ځنډنی بارول SEO ته مستقیم رتبه ورکوي؟

مستقیم رتبه نه ورکوي، خو صفحه تجربه، تعامل سرعت، او Core Web Vitals ښه کوي، SEO ملاتړ کوي. ژر تعامل لرونکي صفحې د کاروونکي رضایت، تبدیل، او کیفیت درک لوړوي.

هر جاواسکریپټ فایل defer کول خوندي دي؟

نه. بعضې اسکریپټونه باید د صفحې لومړي مرحله کې اجرا شي، یا ترتیب ته تابع وي. نو، هر فایل لپاره هدف، وابستګي، اجرا وخت وګورئ؛ تغییرات په test محیط آزموئ.

د TBT کمولو لپاره یوازې defer او async بس دي؟

په کوچني/متوسط سایټونو کې ستر ښه والی ورکوي؛ خو درانه فریم‌ورکونه، زیات دریم‌ګړی کوډ، یا ستر bundle فایلونه اضافي تدابیر غواړي—کوډ تقسیم، غیرضروري جاواسکریپټ لرې کول، شرطی بارول، کش، او قوي هاستینګ لازم دي.

په WordPress سایټ کې کوم اسکریپټونه async مه کوئ؟

د jQuery تابع پلگینونه، payment/sepet اسکریپټونه، فورم تصدیق، امنیت تصدیق، مهم قالب فعالیتونه باید random async نه شي. که ترتیب ګډوډ شي، کاروونکي تعامل خرابېږي. اول defer آزموئ، که اړتیا وي، exclusion لیست جوړ کړئ.