كيف تضغط CSS وJavaScript وHTML لموقع أسرع

ماذا يفعل ضغط الكود؟

يُكتب الكود للبشر: المسافات البادئة وأسماء المتغيرات الطويلة والتعليقات تجعله مقروءًا. أما المتصفحات فلا تحتاج إلى أي من ذلك، فتزيله أدوات الضغط:

/* Before: 118 bytes */
.button {
  background-color: #ffffff;
  padding: 10px 20px 10px 20px;
  /* rounded corners */
  border-radius: 8px;
}

/* After: 66 bytes */
.button{background-color:#fff;padding:10px 20px;border-radius:8px}

هنا انخفض الحجم من 118 بايت إلى 66 بايت. وفي JavaScript تذهب أدوات الضغط أبعد من ذلك: تختصر أسماء المتغيرات المحلية، وتحذف الكود الذي لا يُنفَّذ أبدًا، وتبسّط التعابير، مع الحفاظ على سلوك البرنامج كما هو.

لماذا تضغط الكود؟ حجة الأداء

• تنزيلات أصغر. يقلّص ضغط الكود عادةً ملفات JavaScript وCSS بنحو 30–60% قبل الضغط على الخادم، بحسب طريقة كتابة الكود.
• تحليل أسرع. كود أقل يقرؤه المتصفح ويعالجه، وهذا مهم خاصة على الهواتف الاقتصادية.
• مؤشرات Core Web Vitals أفضل. كثيرًا ما تعيق ملفات CSS وJavaScript عرض الصفحة. والملفات الأصغر تساعد على ظهور الصفحة أسرع، ما يحسّن مقاييس مثل Largest Contentful Paint.
• استهلاك أقل للبيانات لك ولزوارك.

وتشير أدوات مثل Google PageSpeed Insights وLighthouse تحديدًا إلى ملفات CSS وJavaScript غير المضغوطة كفرصة للتحسين.

ضغط الكود مقابل الضغط على الخادم

هما أمران مختلفان، وينبغي استخدامهما معًا:

• ضغط الكود يعيد كتابة الكود نفسه مرة واحدة وقت البناء.
• الضغط على الخادم (gzip أو Brotli) يطبّقه خادم الويب على كل استجابة، ويفك المتصفح الضغط.

والكود المضغوط يُضغط جيدًا أيضًا، فتتراكم المكاسب. ويتيح معظم مزودي الاستضافة، بما فيهم خوادم Apache وLiteSpeed، تفعيل الضغط عبر ملف إعدادات مثل .htaccess.

كيف تضغط الكود مجانًا

1. افتح أداة ضغط الكود وتجميله المجانية.
2. الصق كود HTML أو CSS أو JavaScript، أو افتح ملفًا. تُكتشف اللغة تلقائيًا.
3. انقر ضغط. تستخدم الأداة Terser لـ JavaScript وCSSO لـ CSS، وهما المحركان نفساهما في كثير من أدوات البناء الاحترافية.
4. اطّلع على حجم التوفير، ثم انسخ النتيجة أو حمّلها.

يُعالَج كودك في متصفحك، فلا يُرفع أبدًا.

ما الذي تفعله كل أداة ضغط

JavaScript ‏(Terser)

• تزيل المسافات والتعليقات.
• تعيد تسمية المتغيرات المحلية بأسماء قصيرة (totalPrice ← t).
• تحذف الكود الميت، مثل الفروع التي لا يمكن تنفيذها أبدًا.
• تحتفظ بالأسماء العامة، حتى تظل السكربتات الأخرى التي تشير إليها تعمل.

CSS ‏(CSSO)

• تختصر الألوان والقيم (#ffffff ← #fff، و0px ← 0).
• تدمج المحددات والتصريحات المكررة.
• تحذف التصريحات التي تُستبدل لاحقًا.

HTML

• تزيل التعليقات وتختصر المسافات.
• تضغط كتل <script> و<style> المضمّنة.
• تحافظ على المحتوى الذي تهم فيه المسافات، مثل <pre> و<textarea>.

ضغط الكود ضمن عملية البناء

إذا كان مشروعك يستخدم أداة تجميع (bundler)، فالضغط مدمج غالبًا:

• Vite: يضغط تلقائيًا في بناء الإنتاج (vite build).
• webpack: يضغط JavaScript بأداة Terser في وضع الإنتاج.
• esbuild: أضف الخيار --minify.
• WordPress: تستطيع إضافات التخزين المؤقت والأداء ضغط CSS وJS.

أنشئ خرائط المصدر (source maps) إلى جانب الملفات المضغوطة، فهي تتيح لأدوات المطورين في المتصفح عرض كودك الأصلي أثناء تصحيح الأخطاء.

التجميل: الاتجاه المعاكس

التجميل (Beautify) يعيد فواصل الأسطر والمسافات البادئة إلى الكود المضغوط. وهو مفيد لفهم سكربت من طرف ثالث، أو تصحيح مشكلة في بيئة الإنتاج، أو قراءة كود نُشر دون خرائط مصدر. لاحظ أن أسماء المتغيرات المختصرة لا يمكن استعادتها، بل التنسيق فقط.

قائمة تحقق للأمان

• احتفظ بالمصدر الأصلي. لا تعدّل الملفات المضغوطة مباشرة أبدًا.
• اختبر بعد الضغط، خاصة كود JavaScript الذي يعتمد على أسماء الدوال أو الأصناف (مثل بعض أطر العمل أو حقن التبعيات).
• انتبه إلى الفواصل المنقوطة الناقصة في JavaScript المكتوب يدويًا، فقد تسبب مشكلات عند دمج الأسطر.
• تجاوز ذاكرة التخزين المؤقت عند النشر، بتغيير اسم الملف أو إضافة معامل إصدار، ليحصل الزوار على الملف الجديد.

الأسئلة الشائعة

هل يؤثر ضغط الكود في تحسين محركات البحث؟

بشكل غير مباشر. تكافئ محركات البحث تجربة الصفحة الجيدة، والملفات الأصغر تساعد الصفحات على التحميل بسرعة أكبر.

هل يمكن عكس ضغط الكود؟

يمكن استعادة التنسيق بأداة تجميل، لكن التعليقات المحذوفة وأسماء المتغيرات الأصلية تضيع. ومع ذلك، فضغط الكود ليس وسيلة حماية.

هل ينبغي ضغط JSON؟

للملفات المرسلة عبر الشبكة، نعم. استخدم منسّق JSON الذي يتضمن خيار الضغط.

الخلاصة

اضغط كل ما تنشره، وفعّل gzip أو Brotli على خادمك، واحتفظ بالأصول المقروءة. للمهام السريعة، تنجز أداة الضغط في المتصفح العمل في ثوانٍ، أما المشاريع المستمرة فاترك أداة البناء تتولى ذلك تلقائيًا.