Loading…

حول مصغر HTML عبر الإنترنت

اجعل صفحاتك أكثر خفة في ثوانٍ ⚡. يزيل مصغر HTML الخاص بنا التعليقات، ويجمع المسافات البيضاء، ويحذف علامات الاقتباس الاختيارية حيثما كان ذلك آمنًا، ويمكنه اختياريًا تصغير CSS/JS المضمن. مثالي لبناءات الإنتاج، CI/CD، وتحسينات مؤشرات الويب الأساسية. 100% من جانب العميل — كودك لا يغادر متصفحك أبدًا.

الميزات الرئيسية

  • ضغط HTML فوري في المتصفح (بدون رفع ملفات)
  • إزالة التعليقات، طي المسافات البيضاء وفواصل الأسطر
  • تحسينات آمنة للسمات (علامات الاقتباس/القيم المنطقية/علامات النهاية الاختيارية)
  • قواعد حفظ ذكية لـ <pre>، <code>، <textarea>، SVG المضمن
  • تصغير اختياري لـ CSS/JS المضمن (إعدادات افتراضية محافظة)
  • نسخ وتنزيل HTML المصغر بنقرة واحدة
  • يعمل على سطح المكتب والجوال؛ ممتاز في CI/CD

🛠️ كيفية تصغير HTML for html-minifier

1

الصق أو ارفع HTML الخاص بك

أسقط ملف .html أو الصق الكود في المحرر.

2

اختر الخيارات

اختر الإعدادات الافتراضية المحافظة أو فعّل تصغير CSS/JS المضمن.

3

تصغير وتصدير

انسخ النتيجة أو حمّل ملف .min.html للنشر.

المواصفات الفنية

التحولات الأساسية (آمنة بشكل افتراضي)

عمليات تُطبق بإعدادات محافظة للحفاظ على صحة HTML5.

العمليةمطبقةملاحظات
إزالة تعليقات HTML <!-- ... -->✅يمكن الحفاظ على تعليقات الترخيص مع <!--! ... -->
طي المسافات البيضاء والاسطر الجديدة✅يحافظ على الدلالات في <pre>، <code>، <textarea>
قص السمات الزائدة/الفاصلة المنقوطة في النمط المضمن✅لا إعادة ترتيب للسمات
إزالة وسوم النهاية الاختيارية (مثل </li>, </p>)✅ اختياريمفعل فقط عندما يكون آمناً
السمات المنطقية (مثل disabled)✅يحول disabled="disabled" → disabled
إزالة علامات الاقتباس غير الضرورية✅عندما تكون قيم السمات رموزاً آمنة
تصغير CSS/JS المضمن✅ اختياريمحافظ؛ يحافظ على محددات القوالب

قواعد الحفظ

العناصر/المناطق التي يجب الحفاظ على المسافات البيضاء أو المحتوى فيها.

السياقمحفوظملاحظات
<pre>, <code>, <textarea>نعملا يوجد طي للمسافات البيضاء
<script>/<style> مضمنقابل للتكوينتصغير فقط إذا كان مفعلاً
علامات الخادم/القوالبنعميحافظ على {{ }}, <% %>, {% %}, ${{ }} إلخ.
SVG/MathML مضمننعميحافظ على المسافات البيضاء الهيكلية

تخفيض الحجم النموذجي

يختلف حسب التنسيق وكثافة التعليقات.

نمط الإدخالالتوفير النموذجي
مُنسق بشدة مع تعليقات40%–60%
مُنسق بشكل معتدل20%–40%
مضغوط بالفعل5%–15%

بدائل سطر الأوامر

استخدم هذه في CI/CD أو للمعالجة المجمعة.

Node.js

html-minifier-terser (نمط الملفات)

npx html-minifier-terser --collapse-whitespace --remove-comments --remove-optional-tags --minify-css true --minify-js true -o dist/index.min.html src/index.html

أداة شائعة لضغط HTML تعتمد على Node مع خيارات CSS/JS

Linux/macOS

minify-html (Rust، سريع جداً)

minify-html --keep-whitespace=false --minify-css --minify-js src/index.html > dist/index.min.html

التثبيت عبر cargo أو مدير الحزم؛ أداء ممتاز

Windows

PowerShell + html-minifier-terser

npx html-minifier-terser --collapse-whitespace --remove-comments -o .\dist\index.min.html .\src\index.html

يعمل في PowerShell أو CMD

حالات الاستخدام الشائعة

أداء الويب

  • تقليل حجم نقل HTML
  • مساعدة LCP/FCP من خلال إرسال بايتات أقل
  • إزالة التعليقات قبل النشر
<!-- Remove this in production -->

أتمتة CI/CD

  • ضغط أثناء البناء (تصدير Vite/Webpack/Next.js)
  • ضغط مسبق باستخدام gzip/brotli بعد الضغط
  • تجميع المواقع الثابتة لشبكات CDN

الاختبار A/B والقوالب

  • إرسال قوالب مضغوطة
  • الحفاظ على العناصر النائبة لـ SSR/ISR
  • تجنب كسر المناطق الحساسة للمسافات البيضاء

❓ Frequently Asked Questions

ماذا يفعل ضغط HTML؟

يزيل الأحرف غير الضرورية (التعليقات، المسافات البيضاء الزائدة، بعض العلامات/الاقتباسات الاختيارية) دون تغيير كيفية عرض الصفحة. النتيجة: ملفات أصغر وتحميل أسرع.

هل سيكسر <pre>، <code>، أو القوالب؟

لا. يتم الحفاظ على تلك السياقات افتراضياً. لا يتم لمس علامات القوالب مثل {{ }}، <% %>، و {% %}.

هل يمكنه ضغط CSS و JS المضمن؟

نعم، اختيارياً. للسلامة، يتم إيقاف التشغيل في الوضع المحافظ. قم بتشغيله عندما يكون الكود المضمن الخاص بك صالحاً ومستقلاً.

ما هو الحد الأقصى لحجم ملفي؟

لتحقيق تجربة مستخدم سلسة في المتصفح، نوصي بحجم يصل إلى ~1 ميغابايت. يجب استخدام أدوات سطر الأوامر المذكورة أعلاه للأنابيب الأكبر حجمًا.

هل يتم تحميل HTML الخاص بي إلى خادم؟

لا. تتم المعالجة بنسبة 100% على جانب العميل في متصفحك من أجل السرعة والخصوصية.

Pro Tips

Best Practice

احتفظ بمصدر غير مصغّر لتصحيح الأخطاء؛ وقم بأتمتة التصغير فقط في بناءات الإنتاج.

Best Practice

قم بتمكين تصغير CSS/JS المضمن فقط عندما تكون مقاطع الكود الخاصة بك صالحة وخالية من القوالب.

Best Practice

قم بالضغط المسبق باستخدام gzip/brotli على الخادم/CDN بعد التصغير لتحقيق أقصى توفير.

Best Practice

احتفظ بتعليقات الترخيص باستخدام <!--! ... --> إذا كانت مطلوبة بواسطة تراخيص كود الطرف الثالث.

Additional Resources

MDN: التصغير
Documentation
معيار HTML من WHATWG
Documentation
وثائق html-minifier-terser
Documentation
وثائق minify-html (Rust)
Documentation

Other Tools