جاوااسکریپت اضافه یعنی مشتری فراری: باندل سایت فروشگاهی‌ات را سبک کن
نویسنده: آرش لطیفی — موسس The DevArt
هر کیلوبایت جاوااسکریپت روی اینترنت موبایل یعنی ثانیه انتظار. با اعداد واقعی بنچمارک Turbopack ببین باندل سنگین چطور لود اول را خراب می‌کند و با یک چک‌لیست ساده سبکش کن.
TL;DR — باندل جاوااسکریپت یعنی همه کدهایی که مرورگر مشتری باید دانلود کند تا سایتت کار کند؛ روی موبایل و اینترنت ایران هر کیلوبایتش ثانیه است. تیم Next.js با اعداد واقعی نشان داد همین که کد درست تقسیم شود، تعداد درخواست‌ها از ۷۶ به ۲۴ و حجم لود اول چند ده کیلوبایت کم می‌شود — بدون یک خط تغییر در ظاهر سایت.
اگر فروشگاه یا سایت خدماتی داری، احتمالاً هیچ‌وقت ازت نپرسیده‌اند «سایتم چند کیلوبایت جاوااسکریپت لود می‌کند؟» — ولی همین عدد مخفی است که تعیین می‌کند مشتری با موبایل صبر کند یا برود سراغ رقیب. در راهنمای Core Web Vitals گفتیم سرعت یعنی فروش؛ این‌جا می‌رویم سراغ یکی از دلایل اصلی کندی: باندل.
باندل اصلاً یعنی چه؟
وقت با یک مثال واقعی از پست رسمی تیم Turbopack (باندلر Next.js): سایت nextjs.org از ۳۵۵ ماژول جاوااسکریپت ساخته شده. سه راه برای تحویل دادن این ۳۵۵ ماژول به مرورگر هست:
- همه در یک فایل: یک فایل حدود ۱.۰۹ مگابایتی که در هر صفحه لود می‌شود. ناوبری‌های بعدی سریع‌اند (کش می‌شود)، ولی حتی صفحه‌ای که تقریباً جاوااسکریپت ندارد هم کل این حجم را می‌گیرد.
- یک فایل برای هر صفحه: فایل‌ها سبک‌تر می‌شوند ولی کد مشترک (مثل فوتر) در هر صفحه تکرار می‌شود؛ بازدیدکننده‌ای که چهار صفحه را باز کند، کد فوتر را چهار بار دانلود کرده.
- یک فایل برای هر ماژول: هیچ کد اضافه‌ای فرستاده نمی‌شود، ولی ۳۵۵ درخواست شبکه کوچک دارید — و طبق همان پست رسمی، gzip روی فایل‌های ریز و زیاد ضعیف‌تر عمل می‌کند چون الگوهای تکراری فقط داخل یک فایل را می‌بیند.
یعنی «کمترین حجم» و «کمترین درخواست» دو هدف متضادند و باندلر باید بین‌شان تعادل برقرار کند.
اعداد واقعی: فرق یک تقسیم‌بندی خوب چقدر است؟
تیم Next.js سایت خودش را با سه تنظیم مختلف تست کرد و همان سری ناوبری را اندازه گرفت:
| تنظیم | حجم کل دانلود | تعداد درخواست‌ها | |---|---|---| | بدون ادغام (هر ماژول جدا) | ۵۶۱.۶ کیلوبایت | ۹۶ | | تنظیمات پیش‌فرض Turbopack | ۵۵۴.۸ کیلوبایت | ۳۸ | | ادغام کامل در هر گروه | ۶۱۰ کیلوبایت | ۱۵ |
نکته آموزنده: ادغامِ همه‌چیز درخواست‌ها را کمترین کرد ولی ۱۰٪ حجم بیشتری فرستاد. یعنی بهینه‌سازی «کورکورانه» می‌تواند نتیجه معکوس بدهد. لود اول صفحه هم از ۳۶۳.۶ کیلوبایت (۷۶ درخواست) در حالت بدون ادغام به ۳۴۴.۲ کیلوبایت (۲۴ درخواست) با پیش‌فرض‌ها رسید.
چرا باندل فروشگاه‌ها سنگین می‌شود؟
معمولاً نه به‌خاطر کد خودت، بلکه این‌ها:
- ویجت‌های جانبی: چت آنلاین، پیکسل تبلیغات، ابزار نظرسنجی — هر کدام چند ده کیلوبایت اسکریپت جدا
- کتابخانه‌های سنگین برای کار ساده: مثلاً کل یک کتابخانه UI برای استفاده از دو سه کامپوننتش
- importهایی که tree-shake نمی‌شوند: کد بلااستفاده‌ای که باقی می‌ماند — نسخه‌های جدید Turbopack حتی ماژول‌های CommonJS را هم tree-shake می‌کنند (فلگ
turbopackCjsTreeShaking) که قبلاً فقط برای ESM بود - کد runtime اضافه: باندلرها معمولاً کد کمکی همیشه‌همراه می‌فرستند؛ Turbopack در نسخه‌های ۱۶.۳ و ۱۶.۴ این runtime را سبک‌تر کرد (کد WebAssembly و Web Worker فقط وقتی فرستاده می‌شود که واقعاً استفاده شده باشد) و در ۱۶.۴ یک runtime مشترک بین همه روتهای شما جای نسخه‌های جداگانه را گرفت — طبق اعلام رسمی حدود ۱۰ کیلوبایت جاوااسکریپت کمتر در هر ناوبری بعد از اولی.
چک‌لیست: همین امروز باندل سایتت را سبک کن
- [ ] DevTools مرورگر را باز کن (تب Network)، صفحه اصلی را با «Disable cache» رفرش کن و دو عدد را یادداشت کن: حجم JS و تعداد درخواست‌ها
- [ ] اسکریپت‌های جانبی را با همان مقایسه کن — هر ویجتی که فروش نمی‌آورد را حذف یا با تعویق لود (delay) اجرا کن
- [ ] اگر Next.js داری، به آخرین نسخه ۱۶.x آپدیت کن؛ بهبودهای runtime و کش دیسک (۲۰ تا ۲۵٪ فضای کمتر در ۱۶.۴) بدون تغییر کد فعال می‌شوند
- [ ] نتیجه را در PageSpeed Insights چک کن — LCP موبایل شاخص اصلی توست
- [ ] بعد از هر تغییر بزرگ (افزودن ویجت، کتابخانه جدید) دوباره همان دو عدد تب Network را چک کن تا رشد باندل زودتر دیده شود
نکته: اگر سایتت وردپرسی است، این چک‌لیست هم به دردت می‌خورد (ویجت و افزونه = همان اسکریپت جانبی) ولی جای جزئیات فنی Next.js خالی را با افزونه کش پر نکن؛ اول حجم را کم کن. برای دیدن اثر این کارها روی رتبه، چک‌لیست سئو تکنیکال را ببین.
سوالات پرتکرار
Q: چقدر جاوااسکریپت «زیاد» محسوب می‌شود؟
عدد سحرآمیزی که همه جا معتبر باشد وجود ندارد — به نوع صفحه بستگی دارد. ترفند عملی: دو صفحه مشابه سایت رقیبی که سریع‌تر است را با تب Network مقایسه کن؛ اگر اختلاف چند صد کیلوبایت بود، جایی برای کم کردن داری. معیار نهایی همان LCP موبایل در PageSpeed Insights است.
Q: سایت من وردپرس است، این مال من نیست؟
اصولش یکی است: هر اسکریپتی که لود می‌شود حجم و درخواست می‌سازد. تفاوت این است که در وردپرس کنترل‌ات از طریق افزونه‌ها و قالب است، نه تنظیمات باندلر. حذف افزونه‌های بلااستفاده همان اثر حذف کتابخانه سنگین را دارد.
Q: به هر حال این کارهای فنی را کی انجام بدهد؟
اگر Next.js داری، بخش بزرگی از بهبودها با آپدیت نسخه خودکار می‌شود و بخش باقی‌مانده کار یک جلسه است. اگر وردپرسی و شلوغ است، اول خودت ویجت‌ها را کم کن؛ اگر بعد از آن هنوز LCP موبایل بالای ۲.۵ ثانیه بود، وقت صحبت با یک توسعه‌دهنده است.