کاهش زمان Total Blocking Time (TBT) با بارگذاری تأخیری جاوااسکریپت در سایت شما

بارگذاری تأخیری جاوااسکریپت روشی است که با به تعویق انداختن اجرای فایل‌های جاوااسکریپت که مانع رندر شدن سریع محتوای صفحه می‌شوند، زمان کل انسداد (Total Blocking Time یا TBT) را کاهش می‌دهد. به طور خلاصه، با افزودن ویژگی defer یا async به اسکریپت‌هایی که برای نمایش اولیه صفحه ضروری نیستند، از قفل شدن طولانی نخ اصلی جلوگیری می‌کنید؛ بدین ترتیب کاربران سریع‌تر صفحه را مشاهده می‌کنند، زودتر می‌توانند تعامل داشته باشند و معیارهای Core Web Vitals بهبود می‌یابد. برای پیاده‌سازی بارگذاری تأخیری جاوااسکریپت در سایت خود، ابتدا باید فایل‌های حیاتی را شناسایی کنید، برای اسکریپت‌های وابسته معمولاً از defer و برای اسکریپت‌های مستقل شخص ثالث بیشتر از async استفاده کنید و پس از تغییرات با ابزارهایی مانند PageSpeed Insights، Lighthouse و Chrome DevTools مقدار TBT را اندازه‌گیری نمایید.

در سایت‌های مدرن، مشکل عملکرد اغلب به دلیل استفاده نابه‌جا و کنترل‌نشده از جاوااسکریپت است نه تصاویر. مثلاً در یک سایت فروشگاهی، اگر همزمان فیلتر محصولات، پشتیبانی زنده، پیکسل‌های تبلیغاتی، کدهای تحلیل، افزونه‌های نظرات، ابزارهای A/B تست و اسکریپت‌های قالب بارگذاری شوند، نخ اصلی مرورگر برای مدت طولانی مشغول خواهد بود. این موضوع در دستگاه‌های موبایل بیشتر به چشم می‌آید؛ حتی اگر کاربر عنوان صفحه را ببیند، ممکن است هنگام لمس منو پاسخی دریافت نکند و گزارش Lighthouse زمان کل انسداد بالایی را نشان دهد.

در این راهنما به صورت گام به گام ویژگی‌های defer و async، زمان مناسب استفاده از هر کدام، نحوه پیاده‌سازی در پروژه‌های وردپرس و نرم‌افزارهای اختصاصی، نکات اندازه‌گیری و بهبودهای واقعی TBT می‌پردازیم. توصیه‌های ارائه شده برای سایت‌های میزبانی شده روی زیرساخت‌های Hostragons مطابق استانداردهای جهانی وب است؛ همچنین به نقش انتخاب درست هاست، CDN، SSL و کشینگ در بهینه‌سازی جاوااسکریپت اشاره خواهیم کرد. بسته های هاستینگ وب Hostragons

TBT چیست و چرا به جاوااسکریپت مرتبط است؟

TBT مخفف Total Blocking Time است و مدت زمانی را می‌سنجد که نخ اصلی پردازش مرورگر به دلیل اجرای طولانی کدها مسدود می‌شود و باعث تأخیر در آماده شدن صفحه برای تعامل کاربر می‌شود. در تست‌های آزمایشگاهی Lighthouse، TBT مقدار مجموع وظایف طولانی (بیش از ۵۰ میلی‌ثانیه) بین First Contentful Paint و Time to Interactive است. برای مثال اگر یک وظیفه جاوااسکریپت ۱۸۰ میلی‌ثانیه طول بکشد، ۱۳۰ میلی‌ثانیه آن (پس از ۵۰ میلی‌ثانیه اولیه) به TBT اضافه می‌شود.

این معیار برای تجربه کاربری حیاتی است، زیرا وقتی کاربر بعد از بارگذاری صفحه روی منو، دکمه افزودن به سبد یا کادر جستجو کلیک می‌کند و مرورگر هنوز در حال اجرای جاوااسکریپت است، تعامل با تأخیر مواجه می‌شود. کاربر این وضعیت را به عنوان فریز شدن، تأخیر در پاسخ یا سایت خراب برداشت می‌کند. در استانداردهای سئو ۲۰۲۶، گوگل هنوز امتیاز واحدی برای تجربه صفحه ارائه نمی‌دهد، اما سایت‌هایی که تعامل سریع و پایدار دارند، از نظر رضایت کاربر و نرخ تبدیل برتری دارند.

نشانه‌های رایج TBT بالا

• در گزارش موبایل PageSpeed Insights مقدار TBT بیش از ۳۰۰ میلی‌ثانیه باشد.
• در گزارش Lighthouse هشدارهای Reduce JavaScript execution time یا Minimize main-thread work مشاهده شود.
• صفحه بارگذاری شده اما منو، اسلایدر، فیلتر یا فرم‌ها دیر واکنش نشان دهند.
• کدهای تبلیغات، پشتیبانی زنده یا تحلیل شخص ثالث هزینه بالایی در گزارش داشته باشند.
• در دستگاه‌های اندروید پایین‌رده، تأخیر در اسکرول و کلیک دیده شود.

هدف قابل قبول این است که مقدار TBT زیر ۲۰۰ میلی‌ثانیه نگه داشته شود که برای اکثر سایت‌های محتوایی مناسب است. در سایت‌های پیچیده‌تر مانند فروشگاه‌های آنلاین یا رابط‌های SaaS، صرفاً استفاده از defer و async کافی نیست و باید تقسیم کد، حذف بسته‌های غیرضروری، کشینگ، بهبود زمان پاسخ سرور و بهینه‌سازی CSS حیاتی نیز انجام شود. با این حال، بارگذاری تأخیری جاوااسکریپت یکی از اولین و ساده‌ترین روش‌های بهینه‌سازی است که معمولاً تأثیر قابل توجهی دارد.

defer و async چیستند؟

زمانی که یک تگ script بدون ویژگی خاصی در HTML قرار می‌گیرد، مرورگر پردازش 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 دانلود می‌کند، اما به محض پایان دانلود، اجرای فایل بلافاصله آغاز می‌شود که ممکن است باعث توقف کوتاه در پردازش HTML شود. async ترتیب اجرای فایل‌ها را تضمین نمی‌کند و هر فایلی که زودتر دانلود شود، زودتر اجرا می‌شود. بنابراین async برای اسکریپت‌های مستقل مثل کدهای تحلیل، تبلیغات، پیکسل‌های ردیابی، ویجت‌های خارجی یا اسکریپت‌های شبکه‌های اجتماعی مناسب‌تر است.

نمونه استفاده: <script async src="/js/analytics.js"></script>. این اسکریپت نباید منتظر اجرای سایر اسکریپت‌های محلی باشد. اگر analytics.js به متغیرهایی که بعداً تعریف می‌شوند یا کتابخانه‌ای مانند jQuery وابسته باشد، استفاده از async ممکن است باعث خطا شود. بنابراین async سریع است اما نیاز به دسته‌بندی دقیق دارد.

جدول مقایسه defer و async

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

برنامه مرحله‌ای برای پیاده‌سازی بارگذاری تأخیری جاوااسکریپت

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

۱. اندازه‌گیری عملکرد فعلی

قبل از شروع، معیار پایه را ثبت کنید. امتیازهای موبایل و دسکتاپ در PageSpeed Insights را ذخیره کنید. در گزارش Lighthouse مقادیر TBT، First Contentful Paint، Largest Contentful Paint و Speed Index را یادداشت کنید. در تب Performance کروم، نخ اصلی را بررسی کنید؛ بلوک‌های زرد طولانی معمولاً نشان‌دهنده هزینه‌های پردازش، کامپایل و اجرای جاوااسکریپت هستند.

می‌توانید جدولی مشابه زیر داشته باشید: TBT موبایل ۷۸۰ میلی‌ثانیه، زمان اجرای جاوااسکریپت ۲.۸ ثانیه، فعالیت نخ اصلی ۴.۵ ثانیه. اگر پس از بهینه‌سازی TBT به ۲۸۰ میلی‌ثانیه کاهش پیدا کند، حدود ۶۴٪ بهبود ایجاد شده است. این ثبت‌ها به تیم کمک می‌کند تغییرات موثر را شناسایی کند.

۲. فهرست اسکریپت‌ها

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

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

بهترین بهینه‌سازی گاهی حذف کامل اسکریپت غیرضروری است نه فقط افزودن defer. یک فایل ۹۰ کیلوبایتی فشرده ممکن است روی موبایل بیش از ۳۰۰ میلی‌ثانیه زمان اجرای جاوااسکریپت مصرف کند. بنابراین ابتدا حذف موارد غیرضروری و سپس تأخیر در اجرای باقی‌مانده منطقی‌تر است.

۳. انتخاب فایل‌های مناسب برای defer

معمولاً اسکریپت‌های اصلی قالب، رفتارهای منو، کد اسلایدر، ماژول‌های گالری و فایل‌های bundle برنامه گزینه‌های خوبی برای defer هستند. شرط مهم این است که اسکریپت به روش‌های قدیمی و مسدودکننده مثل document.write وابسته نباشد و اجرای آن بعد از آماده شدن DOM قابل قبول باشد.

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

۴. انتخاب فایل‌های مناسب برای async

کدهایی مانند Google Analytics، تگ‌های تبلیغاتی، Facebook Pixel، LinkedIn Insight Tag، برخی ویجت‌های چت خارجی و کدهای اشتراک‌گذاری اجتماعی معمولاً برای async مناسب‌اند. البته همه اسکریپت‌های شخص ثالث یکسان نیستند. برخی ابزارهای پشتیبانی زنده ممکن است بلافاصله پس از بارگذاری صفحه نیاز به ایجاد نشست کاربر داشته باشند و برخی سیستم‌های تبلیغاتی ترتیب خاصی انتظار دارند. بنابراین مستندات هر سرویس را بررسی کنید.

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

۵. بارگذاری شرطی و مبتنی بر رویداد

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

این روش به ویژه در سایت‌های محتوایی و شرکتی موثر است چون هر بازدیدکننده به همه ویجت‌ها نیاز ندارد. حذف ۲۰۰ کیلوبایت جاوااسکریپت از بار اولیه می‌تواند TBT را در دستگاه‌های موبایل ضعیف صدها میلی‌ثانیه کاهش دهد.

۶. تست و انتشار تدریجی

تغییرات را مستقیم روی سایت زنده اعمال نکنید، ابتدا در محیط تست امتحان کنید. صفحات حیاتی مانند صفحه اصلی، دسته‌بندی، محصول یا خدمات، تماس، فرم ورود و فرآیند پرداخت را به صورت دستی بررسی کنید. خطاهای کنسول مرورگر را چک کنید؛ به خصوص خطاهایی مثل Cannot read property، is not defined و undefined function که معمولاً به مشکلات ترتیب یا وابستگی اشاره دارند.

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

نکات پیاده‌سازی defer و async در سایت‌های وردپرس

در اکوسیستم وردپرس فایل‌های جاوااسکریپت از طریق تابع wp_enqueue_script در قالب و افزونه‌ها بارگذاری می‌شوند. تا سال ۲۰۲۶ استراتژی‌های بارگذاری اسکریپت در نسخه‌های مدرن وردپرس قابل کنترل‌تر شده است؛ اما قالب‌های قدیمی، افزونه‌های صفحه‌ساز و افزونه‌های بهینه‌سازی ناسازگار می‌توانند مشکل‌ساز شوند.

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

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

نکات مهم در پروژه‌های نرم‌افزاری اختصاصی و فریم‌ورک‌ها

در پروژه‌های مدرن با React، Vue، Angular، Next.js، Nuxt یا مشابه آن‌ها، بهینه‌سازی جاوااسکریپت فقط محدود به اضافه کردن defer به تگ script نیست. حجم بسته، تقسیم کد (code splitting)، حذف کدهای استفاده نشده (tree shaking)، واردات داینامیک و هزینه hydration در TBT تعیین‌کننده‌اند. حتی اگر یک فایل bundle بزرگ ۷۰۰ کیلوبایتی با defer بارگذاری شود، هنگام اجرا نخ اصلی برای مدت طولانی مسدود خواهد بود.

در پروژه‌های اختصاصی از تقسیم کد بر اساس مسیر (route-based code splitting) استفاده کنید. وقتی کاربر در صفحه اصلی است، نباید کدهای پنل مدیریت، کتابخانه‌های گرافیکی یا ویرایشگرهای پیشرفته بارگذاری شوند. کامپوننت‌های سنگین را با dynamic import به زمان نیاز موکول کنید. وابستگی‌های بلااستفاده را با ابزارهای تحلیل بسته شناسایی حذف کنید. به جای کتابخانه‌های سنگین تاریخ، گراف یا انیمیشن، گزینه‌های سبک‌تر را انتخاب کنید.

اگر از رندر سمت سرور (SSR) یا تولید استاتیک استفاده می‌کنید، توجه کنید که حتی اگر HTML سریع بارگذاری شود، در مرحله hydration فعال شدن همزمان صدها کامپوننت می‌تواند TBT را افزایش دهد. اجتناب از جاوااسکریپت غیرضروری سمت کاربر در محتوای غیرتعاملی یکی از اصول مهم رویکردهای عملکردی ۲۰۲۶ است.

رابطه هاستینگ، زمان پاسخ سرور و عملکرد جاوااسکریپت

TBT مستقیماً به مدت اجرای جاوااسکریپت در مرورگر مربوط است اما زیرساخت هاستینگ به صورت غیرمستقیم تأثیرگذار است. زمان TTFB بالا، عدم فشرده‌سازی، نبود پشتیبانی از HTTP/2 یا HTTP/3، کشینگ نامناسب و تأخیرهای موقعیتی باعث می‌شوند فایل‌های جاوااسکریپت دیرتر به مرورگر برسند. این موضوع طول چرخه عمر صفحه را افزایش داده و تجربه کاربری را تضعیف می‌کند.

یک زیرساخت هاستینگ باکیفیت، پشتیبانی از فشرده‌سازی Brotli یا Gzip، کش مرورگر فعال، نسخه PHP به‌روز، تکنولوژی دیسک سریع و یکپارچگی با CDN به بهینه‌سازی کمک می‌کند. نصب صحیح گواهینامه SSL نیز از نظر ویژگی‌های مرورگر مدرن، HTTP/2 و ادغام‌های امن شخص ثالث اهمیت دارد. گواهی SSL Hostragons استعلام دامنه Hostragons

برای مثال یک فایل جاوااسکریپت بدون فشرده‌سازی ۳۲۰ کیلوبایت است که با Brotli به ۹۵ کیلوبایت کاهش می‌یابد. این کاهش حجم به صورت مستقیم زمان TBT را کاهش نمی‌دهد چون TBT زمان اجرا را اندازه می‌گیرد، اما زمان دانلود کم شده، اولویت‌بندی منابع بهتر شده و تجربه بارگذاری کلی بهبود می‌یابد. بنابراین defer، async، کشینگ و انتخاب هاست مناسب باید همراه هم در نظر گرفته شوند.

چک‌لیست اندازه‌گیری و اعتبارسنجی

برای ارزیابی موفقیت بهینه‌سازی صرفاً نگاه کردن به نمره PageSpeed کافی نیست. فهرست زیر به شما کمک می‌کند تأثیر واقعی را بهتر تحلیل کنید:

• مقایسه مقدار TBT موبایل قبل و بعد از بهینه‌سازی انجام شده است؟
• در گزارش زمان اجرای جاوااسکریپت، فایل‌های پرهزینه کاهش یافته‌اند؟
• تعداد وظایف طولانی در ثبت Performance کروم کم شده است؟
• خطاهای جاوااسکریپت در کنسول وجود ندارد؟
• منو، جستجو، فیلتر، فرم، سبد خرید و پرداخت بدون مشکل کار می‌کنند؟
• کدهای تحلیل و تبلیغات شخص ثالث به درستی فعال می‌شوند؟
• در داده‌های واقعی کاربران، INP و تأخیرهای تعامل بهبود یافته است؟
• پس از پاک کردن کش، تست‌ها تکرار شده‌اند؟

تفاوت داده‌های آزمایشگاهی و واقعی را در نظر داشته باشید. TBT یک معیار آزمایشگاهی در Lighthouse است اما در تجربه واقعی کاربر Interaction to Next Paint (INP) اهمیت بیشتری یافته است. کاهش TBT معمولاً به بهبود INP کمک می‌کند چون انسداد نخ اصلی کمتر می‌شود.

اشتباهات رایج و راهکارهای پیشگیری

همه اسکریپت‌ها را به صورت async بارگذاری کردن

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

بارگذاری نادرست jQuery و افزونه‌های وابسته

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

کنترل‌نکردن اسکریپت‌های شخص ثالث

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

نصب افزونه بدون اندازه‌گیری

افزونه‌های بهینه‌سازی ممکن است مفید باشند اما نصب بدون ارزیابی قبلی می‌تواند بار اضافی جاوااسکریپت و CSS ایجاد کند. ابتدا مشکل را شناسایی و سپس ابزار مناسب را انتخاب کنید. با گزارش‌های تست موفقیت کاهش TBT را تأیید کنید.

نادیده گرفتن تداخل کش و مینیفیکیشن

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

مثال عملی از بهینه‌سازی واقعی

فرض کنیم یک سایت شرکتی متوسط ۱۸ درخواست جاوااسکریپت در صفحه اصلی دارد. ۵ فایل مربوط به قالب و منو، ۴ فایل اسلایدر و انیمیشن، ۳ فایل فرم و نقشه و ۶ فایل تحلیل، پیکسل و پشتیبانی زنده باشد. مقدار TBT موبایل در گزارش Lighthouse برابر ۹۲۰ میلی‌ثانیه است.

در مرحله اول، دو افزونه انیمیشن بلااستفاده حذف شده و ۱۴۰ کیلوبایت جاوااسکریپت فشرده کمتر بارگذاری می‌شود. TBT به ۷۶۰ میلی‌ثانیه کاهش می‌یابد. در مرحله دوم، فایل‌های قالب و اسلایدر با defer بارگذاری می‌شوند و ترتیب وابستگی‌ها بررسی می‌شود. TBT به ۴۸۰ میلی‌ثانیه می‌رسد. در مرحله سوم، اسکریپت نقشه فقط وقتی به بخش تماس کاربر اسکرول کند بارگذاری می‌شود، پشتیبانی زنده پس از ۷ ثانیه شروع می‌شود، کدهای تحلیل و پیکسل به async تبدیل می‌شوند. نتیجه نهایی TBT حدود ۲۱۰ میلی‌ثانیه است.

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

نتیجه‌گیری: استراتژی متعادل و آزموده شده برای کاهش TBT

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

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

سؤالات متداول

آیا می‌توان defer و async را همزمان برای یک اسکریپت استفاده کرد؟

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

آیا بارگذاری تأخیری جاوااسکریپت به طور مستقیم رتبه SEO را بهبود می‌دهد؟

خود به خود تضمین رتبه بهتر نیست اما با بهبود تجربه صفحه، سرعت تعامل و عملکرد Core Web Vitals به موفقیت سئو کمک می‌کند. صفحات سریع‌تر و پاسخگو رضایت کاربر، نرخ تبدیل بالاتر و درک بهتر از کیفیت سایت را به همراه دارد.

آیا افزودن defer به همه فایل‌های جاوااسکریپت بی‌خطر است؟

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

آیا فقط با defer و async می‌توان TBT را کاهش داد؟

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

کدام اسکریپت‌ها در وردپرس نباید async شوند؟

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