ضاغط HTML
اضغط ملفات HTML لتقليل حجمها.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
ما هو ضغط HTML؟
HTML هي بنية صفحة الويب: العناصر والسمات والنصوص بينها. وHTML المصدر تحمل الكثير مما لا يحتاجه المتصفح: الإزاحات، وفواصل الأسطر بين الوسوم، وتعليقات المطورين، وأحيانًا اقتباس زائد للسمات.
والضغط يزيل ذلك. ويدمج أيضًا سلاسل المسافات بين العناصر، ويمكنه ضغط كتل التنسيق والبرمجة المضمّنة. والخطر الحقيقي الوحيد هو المسافات داخل المحتوى: ففي HTML، المسافة بين عنصرين سطريين ذات معنى وتُعرض، فقد يُلصق الضاغط المفرط كلمتين أو رابطين ببعضهما بشكل ظاهر. والضاغط الجيد يدمج المسافات دون حذفها كليًا، ولهذا ينبغي أن تلقي نظرة على النتيجة دائمًا.
لماذا أنشأنا هذه الأداة
ضغط الترميز يؤتي ثماره أكثر حيث تكون الصفحات كبيرة ومتكررة، كالجداول المولّدة وقوائم المنتجات وقوالب البريد والمواقع الثابتة ذات المئات من الصفحات، وفي رسائل HTML البريدية حيث ما زالت بعض البرامج تفرض حدودًا صارمة للحجم وتقتطع ما يتجاوزها.
والقوالب والصفحات غير المنشورة عمل للعملاء، ولا سبب لتسليمها إلى خادم طرف ثالث لحذف المسافات. أداتنا تحلل الترميز وتعيد كتابته داخل متصفحك، فيبقى مصدر الصفحة على جهازك، دون حد للحجم ودون حساب. وهي سريعة بما يكفي لتكون خطوة أخيرة في سير عملك قبل لصق الناتج في قالب الإنتاج.
نصائح وأخطاء شائعة
- افحص المسافات بين العناصر السطرية بعد الضغط؛ فهذا هو الموضع الوحيد الذي يظهر فيه الحذف المفرط للمسافات.
- حافظ على المحتوى داخل
<pre>و<textarea>، حيث للمسافات معنى. - التعليقات الشرطية ما زالت مهمة لعرض Outlook القديم في رسائل HTML البريدية؛ لا تحذفها هناك.
- اجعل رسالة HTML البريدية أقل من نحو 102 كيلوبايت حتى لا يقتطع Gmail نهايتها.
بداية سريعة: استخدام ضاغط HTML
- الصق HTML أو حمّل الملف أعلاه.
- شغّل الضاغط ولاحظ مقدار التوفير بالبايتات.
- اعرض الناتج وقارنه بالصفحة الأصلية بعناية.
- انظر تحديدًا إلى المسافات بين الروابط والأزرار والكلمات السطرية.
- انسخ الترميز المضغوط إلى الإنتاج، مع الإبقاء على نسخة المصدر سليمة.
اضغط الملفات المرافقة أيضًا: ضاغط CSS وضاغط JavaScript.
ما الذي يزيله الضغط
يقلّص ضاغط HTML الحجم بحذف:
- التعليقات: ملاحظات المطورين والأقسام المعلّقة.
- المسافات بين الوسوم: الإزاحات التي تُظهر البنية.
- السمات وعلامات الاقتباس الزائدة حيث تسمح المواصفة بحذفها.
الصفحة المعروضة مطابقة؛ فقط البايتات المنقولة تتقلص.
ضغط HTML أدق من ضغط CSS أو JS
هنا المشكلة: في HTML، المسافات مهمة أحيانًا. فعلى عكس CSS وJavaScript، حيث تستطيع حذف المسافات بحرية، في HTML حالات يغيّر فيها حذف مسافة ما يراه المستخدم:
- بين العناصر السطرية، المسافة فجوة مرئية. ودمجها قد يلصق الكلمات ببعضها.
- داخل
<pre>و<textarea>، المسافات محفوظة وذات معنى، ويجب ألا تُمس أبدًا. - حول عناصر inline-block في تخطيطات CSS، قد تؤثر المسافات في التباعد.
والضاغط الجيد متحفظ في هذه الحالات. وبعد الضغط، ألقِ نظرة على الصفحة لتتأكد أن شيئًا لم يتزحزح، خصوصًا تباعد النصوص.
كم يوفّر
توفير ضغط HTML أصغر عادةً منه في CSS أو JavaScript، لأن نسبة المسافات القابلة للحذف في HTML أقل. والمكسب الأكبر لـ HTML يأتي من ضغط الخادم (gzip/Brotli)، الذي يسحق الترميز المتكرر بشكل هائل. اضغط كمكسب إضافي صغير فوق ضغط الخادم، لا كاستراتيجية رئيسية.
موقعه من سير العمل
ضغط HTML جزء من روتين ما قبل النشر إلى جانب ضاغط CSS وضاغط JavaScript. وللمواقع الثابتة المولّدة مسبقًا، اضغط الناتج. وللصفحات الديناميكية، تأكد أولًا أن ضغط الخادم مفعّل؛ فهو الرافعة الأكبر.
استخدامات شائعة
- تصغير الصفحات الثابتة قبل النشر.
- تقليص مستندات HTML الكبيرة وقوالب البريد.
- توفير بايتات إضافية في الصفحات كثيفة الزيارات.