تکنیک های async و defer در بارگذاری JavaScript برای افزایش سرعت سایت
Table of Contents
مقدمه
بارگذاری صحیح فایل های JavaScript یکی از کلیدی ترین عوامل در بهبود سرعت سایت و تجربه کاربر است. اگر سایتت کند لود می‌شود، احتمال زیاد مشکل از نحوه بارگذاری اسکریپت هاست. در این مقاله به صورت تخصصی ولی قابل فهم، تفاوت دو ویژگی مهم async و defer در تگ <script> و نحوه استفاده ی صحیح از آن‌ها برای بارگذاری JavaScript بهینه را بررسی می‌کنیم. از تجربه‌ام به عنوان یک توسعه دهنده فرانت‌اند استفاده کردم تا تمام نکاتی که در پروژه های واقعی کاربرد دارن، اینجا بیارم.
مروری بر مشکل اصلی: چرا JavaScript سرعت سایت را کاهش می‌دهند؟
وقتی مرورگر به یک تگ <script> بدون هیچ ویژگی خاصی (یعنی به شکل پیش فرض) می‌رسد، اجرای HTML متوقف می‌شود تا اول فایل JS دانلود و سپس اجرا شود. این یعنی:
- رندر صفحه متوقف می‌شود.
- کاربر دیرتر محتوای قابل مشاهده را می‌بیند.
- Time to Interactive (TTI) بالا می‌رود.
- تجربه کاربری افت می‌کند.
برای حل این مشکل، HTML5 دو ویژگی عالی معرفی کرد: async و defer.
async چیست؟
ویژگی async به مرورگر می‌گوید:
اسکریپت را هم زمان با دانلود سایر منابع (مثل CSS و HTML) دانلود کن، اما به محض دانلود شدن، بلافاصله آن را اجرا کن.
✅ مزایا:
- سریع ترین اجرا برای اسکریپت های غیر وابسته به بقیه کدها
- مناسب برای اسکریپت‌های جانبی مانند: Google Analytics، تبلیغات، چت آنلاین و…
❌ معایب:
- ترتیب اجرای اسکریپت ها حفظ نمی‌شود.
- ممکن است با دیگر فایل‌ها تداخل پیدا کند اگر کدی وابسته به DOM باشد.
✅ نحوه استفاده:
htmlCopyEdit<script src="script.js" async></script>
defer چیست؟
ویژگی defer به مرورگر می‌گوید:
این اسکریپت را دانلود کن اما بعد از اینکه کل HTML پارس شد، آن را به ترتیب اجرا کن.
✅ مزایا:
- تضمین می‌کند که DOM کاملاً بارگذاری شده باشد.
- ترتیب اجرای اسکریپت ها حفظ می‌شود.
- مناسب برای اسکریپت‌هایی که با DOM تعامل دارند (مثلاً وقتی از
document.getElementById()استفاده شده).
❌ معایب:
- روی اسکریپت های درون خطی (inline) اثر نمی‌گذارد.
- فقط روی اسکریپت‌هایی با
srcخارجی مؤثر است.
✅ نحوه استفاده:
htmlCopyEdit<script src="main.js" defer></script>
مقایسه کلی async و defer
| ویژگی | async | defer |
|---|---|---|
| دانلود هم‌زمان | ✅ | ✅ |
| اجرا هم‌زمان با HTML | ❌ | ❌ |
| اجرای بلافاصله پس از دانلود | ✅ | ❌ |
| اجرای بعد از بارگذاری کامل DOM | ❌ | ✅ |
| حفظ ترتیب اسکریپت‌ها | ❌ | ✅ |
| مناسب برای کدهای وابسته به DOM | ❌ | ✅ |
کِی از کدام استفاده کنیم؟
- از
asyncاستفاده کن وقتی:- اسکریپت مستقل است و با DOM یا دیگر اسکریپت ها کاری ندارد.
- سرعت لود آن اولویت دارد.
- مثل: Google Ads، tracking scripts، pixel codeها
- از
deferاستفاده کن وقتی:- اسکریپت نیاز به دسترسی به DOM دارد.
- چند فایل JS دارید که ترتیب اجرا مهم است.
- فایل‌های اصلی سایت هستند (مثلاً فایل مربوط به منو، اسلایدر یا انیمیشن‌ها)
نکات کاربردی و تجربی
- اگر فقط یک اسکریپت در پایین صفحه داری، استفاده از
deferیا حتی هیچ‌کدام ضروری نیست. - هیچ وقت
asyncوdeferرا با هم استفاده نکن! - اگر از فریم ورک هایی مثل Vue یا React استفاده می‌کنی، حتماً به وابستگی اسکریپت ها دقت کن.
- بهتره همیشه جاوااسکریپت‌ها را در پایان
<body>قرار بدی، مگر اینکه با defer بارگذاری بشن. - استفاده از ابزارهایی مثل Lighthouse، PageSpeed Insights و WebPageTest کمک می‌کنه تاثیر این تکنیک ها رو ببینی.
رفع خطاها و تداخل‌های رایج
- Uncaught ReferenceError: وقتی اسکریپتی که وابسته به DOM یا اسکریپت قبلیه، قبل از اون اجرا بشه.
🔧 راه‌حل: ازdeferاستفاده کن یا ترتیب اسکریپت‌ها رو تنظیم کن. - اسکریپت اجرا نمی‌شود: گاهی به دلیل استفاده نادرست از async در اسکریپت هایی که نیاز به ترتیب اجرا دارند.
🔧 راه‌حل: async را فقط برای اسکریپت های مستقل بذار. - محتوا دیر لود می‌شود: وقتی جاوااسکریپت اصلی، DOM را بلاک می‌کند.
🔧 راه‌حل: فایل‌های اصلی را باdeferلود کن، فایل‌های جانبی باasync.
جمع‌بندی
بارگذاری JavaScript با async و defer نه تنها یک تکنیک حرفه‌ای برای افزایش سرعت سایت است، بلکه نشان دهنده تسلط برنامه نویس به عملکرد مرورگر و ساختار DOM است. اگر به دنبال بهبود SEO فنی، تجربه کاربر و امتیازهای Core Web Vitals هستی، استفاده صحیح از این دو ویژگی ضروریه.
در هر پروژه حرفه ای، باید بدونی چه JavaScript در چه زمان و با چه اولویتی لود بشه.
سریع تر لود شدن = رضایت بیشتر کاربران = رتبه بهتر در گوگل.
