فشرده‌سازی CSS، جاوااسکریپت و HTML برای سایت سریع‌تر
۳ دقیقه مطالعهبروزرسانی:
فایل‌های CSS و جاوااسکریپت که برنامه‌نویس می‌نویسد پر از فاصله، خط جدید و توضیح است؛ برای خواننده‌ی انسانی خوب است، ولی مرورگر به هیچ‌کدام نیاز ندارد. Minify آن‌ها را حذف می‌کند تا فایل کوچک‌تر و صفحه سریع‌تر شود.
minify دقیقاً چه می‌کند؟
- فاصله‌ها، خطوط خالی و تورفتگی را حذف می‌کند
- توضیحات (comment) را برمی‌دارد
- در جاوااسکریپت، نام متغیرهای محلی را کوتاه می‌کند و عبارت‌ها را ساده می‌کند
- در CSS مقدارها را کوتاه‌تر می‌نویسد (مثلاً رنگ‌ها) و قاعده‌های تکراری را ادغام می‌کند
- در HTML فاصله‌ی اضافی بین تگ‌ها را کم می‌کند و می‌تواند اسکریپت و استایل درون‌خطی را هم فشرده کند
معنی کد تغییر نمی‌کند؛ همان کار قبلی را انجام می‌دهد ولی کوچک‌تر.
minify یا gzip؟ هر دو
این دو یک کار نیستند و با هم جمع می‌شوند:
| minify | gzip و Brotli | |
|---|---|---|
| چه موقع | هنگام ساخت یا آماده‌سازی فایل | هنگام ارسال از سرور به مرورگر |
| چه می‌کند | خود کد را کوچک می‌کند | بایت‌ها را فشرده می‌کند و مرورگر باز می‌کند |
| تنظیم | یک بار روی فایل | یک بار روی وب‌سرور یا CDN |
پس اول minify، بعد فشرده‌سازی سرور. ابزار ما حجم gzip را هم کنار حجم minify نشان می‌دهد تا اثر واقعی را ببینید.
چقدر کم می‌شود؟
بسته به کد بسیار فرق می‌کند؛ فایلی با توضیح زیاد و تورفتگی بیشتر کاهش بیش‌تری دارد. عدد ثابتی وعده نمی‌دهیم؛ کد خودتان را در ابزار فشرده‌سازی بدهید و درصد را ببینید.
گام‌به‌گام
- نوع کد (CSS، JS یا HTML) را انتخاب و کد را بچسبانید.
- روی «فشرده‌سازی» بزنید. اگر کد خطای نحوی دارد، شماره‌ی خط خطا نشان داده می‌شود.
- حجم قبل، بعد و gzip را ببینید.
- خروجی را کپی یا با پسوند
.minدانلود کنید. - فایل فشرده را روی سایت آزمایش کنید و در صورت نیاز فایل اصلی را برای ویرایش آینده نگه دارید.
نکته‌های مهم
- ابزار ما حداکثر ۵۰۰ کیلوبایت در هر درخواست می‌پذیرد؛ برای پروژه‌های بزرگ از ابزار build (مثل esbuild یا Vite) استفاده کنید.
- در HTML، بلوک‌های JSON-LD و اسکریپت‌های خارجی (با
src) دست‌نخورده می‌مانند. - اگر کد درون‌خطی خطای نحوی داشته باشد، همان‌طور که هست می‌ماند.
- کد شما فقط تجزیه و چاپ می‌شود، هرگز اجرا یا ذخیره نمی‌شود.
فراتر از minify
- فایل‌های CSS و JS که رندر را مسدود می‌کنند را کم کنید یا
deferبدهید. - کد استفاده‌نشده را حذف کنید؛ گاهی از minify هم بیشتر کم می‌کند.
- Brotli یا gzip را روی سرور فعال کنید.
- با واکاوی سایت ببینید کدام فایل‌ها هنوز سنگین‌اند.
با ابزار امتحان کنید
سؤالات متداول
minify کد را ناامن می‌کند یا مخفی؟
نه. فقط خواندن را سخت‌تر می‌کند و این امنیت نیست. هر کسی می‌تواند کد را دوباره قالب‌بندی کند.
افزونه‌ی کش وردپرس این کار را نمی‌کند؟
بسیاری از افزونه‌های کش minify دارند؛ اگر دارید و کار می‌کند، دوباره فشرده نکنید. ابزار ما برای فایل‌های تکی و بررسی سریع مفید است.