محول مجاني

HTML مُصغِّر

صغِّر واضغط كود HTML فوراً في متصفحك. احذف التعليقات، اضغط المسافات، وقلل حجم الملف. مجاني وخاص.

اسحب وأفلت ملف HTML هنا

يدعم ملفات .html و .htm. أو الصق HTML أعلاه.

أو

حول هذه الأداة

يؤدي تصغير HTML إلى إزالة الأحرف غير الضرورية من مصدر صفحة الويب — المسافات البيضاء بين العلامات، والتعليقات، وعلامات الاقتباس المتكررة، وعلامات الإغلاق الاختيارية — لتقليل حجم الملف دون تغيير كيفية عرض الصفحة. تكون معدلات التوفير متواضعة لكل صفحة (عادةً 10-30%) ولكنها تتراكم عبر العديد من الطلبات، خاصة بالنسبة للمواقع الثابتة أو الصفحات التي يتم تقديمها بدون ضغط ديناميكي.

يزيل هذا المصغر المسافات البيضاء بين العناصر على مستوى الكتلة، ويطوي المسافات البيضاء داخل النص غير المهم، ويزيل تعليقات HTML (باستثناء التعليقات الشرطية في IE)، ويزيل علامات الاقتباس الزائدة حيثما تسمح بها مواصفات HTML5، ويحذف علامات الإغلاق الاختيارية (</p>، </li>) حيثما تسمح المواصفات بذلك. يتم عرض النتيجة بشكل مماثل للمصدر في كل متصفح.

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

لماذا تصغير HTML

يتم تحميل HTML الأصغر بشكل أسرع، خاصة على الاتصالات وشبكات الهاتف المحمول الأبطأ. يؤثر وزن الصفحة بشكل مباشر على مؤشرات أداء الويب الأساسية - يتحسن كل من أكبر رسم محتوى ووقت البايت الأول عندما يقوم الخادم بإرجاع كمية أقل من HTML للتحليل. بالنسبة للمواقع التي يعتمد فيها تصنيف تحسين محركات البحث (SEO) على نتائج Core Web Vitals، يعد التصغير بمثابة تحسن قابل للقياس.

يعمل HTML المصغر أيضًا على تقليل تكاليف النطاق الترددي على نطاق واسع. الموقع الذي يخدم مليون صفحة يوميًا مع توفير قدره 10 كيلوبايت لكل صفحة يوفر 10 غيغابايت من الخروج يوميًا. مركبات التأثير للمواقع الثابتة التي يتم تقديمها من شبكات CDN التي يتم إصدار فاتورة بها عن طريق نقل البيانات.

كيفية الاستخدام

الصق HTML، واحصل على النسخة المصغرة.

  1. إضافة مدخلات HTML: الصق مصدر HTML في منطقة الإدخال أو قم بإسقاط ملف .html. يقبل المصغر أي ترميز HTML5 صالح.
  2. اختر الخيارات: تقوم الإعدادات الافتراضية بإزالة التعليقات وطي المسافات البيضاء؛ يمكنك تعطيل التحويلات الفردية إذا كنت بحاجة إلى الحفاظ على عناصر محددة (على سبيل المثال، الاحتفاظ بالتعليقات للتوثيق).
  3. تصغير: يسير المصغر في دفق رمز HTML المميز، ويطبق كل تحويل ممكن. الإخراج مطابق وظيفيًا لـ HTML بحجم أقل.
  4. نسخ أو تنزيل: استخدم النتيجة باعتبارها HTML المقدم. تأكد من عرض الصفحة بشكل صحيح في المتصفحات المستهدفة قبل النشر.

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

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

يقوم المصغر بمعالجة رمز HTML المميز بواسطة الرمز المميز. تتم إزالة المسافة البيضاء بين عناصر مستوى الكتلة (<div>، <p>، <ul>) لأنها لا تؤثر على العرض. يتم الاحتفاظ بالمسافة البيضاء داخل السياقات المضمنة (<span>، <a>، محتوى النص) لأنها يمكن أن تؤثر على العرض.

يتم تجريد التعليقات بشكل افتراضي ولكن يتم الاحتفاظ بالتعليقات الشرطية (<!--[if IE]>). تتم إزالة علامات الاقتباس حيثما يسمح محلل HTML5 - يمكن لقيم السمات المكونة من كلمة واحدة بدون مسافات أو أحرف خاصة حذف علامات الاقتباس.

يتم حذف علامات الإغلاق الاختيارية وفقًا لمواصفات HTML5: </p>، </li>، </td>، ويمكن حذف عدد قليل من العلامات الأخرى عندما يتبعها شقيق يشير إلى قربهم. يعد هذا أمرًا غير معتاد للقراءة ولكنه صالح لـ HTML5 الذي تقوم المتصفحات بتحليله بشكل مماثل.

أفضل الممارسات

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

ما الذي يزيله تصغير HTML؟
مسافة بيضاء غير ضرورية بين العلامات، وتعليقات HTML (<!-- -->)، وعلامات الإغلاق الاختيارية (</li>، </p>، </td>)، وقيم السمات الافتراضية (type = "text" على المدخلات)، وقيم السمات المنطقية (disabled = "disabled" → Disabled).
هل يمكن للتصغير أن يكسر صفحتي؟
نادرًا، ولكنه ممكن إذا كان CSS الخاص بك يعتمد على مسافة بيضاء بين العناصر المضمنة أو إذا كان JavaScript يستخدم مقارنات HTML الداخلية. اختبر دائمًا الإخراج المصغر. تستخدم الأداة الإعدادات المحافظة بشكل افتراضي.
هل يجب عليّ تصغير HTML إذا كنت أستخدم إطار عمل مثل Next.js؟
تعمل معظم الأطر الحديثة (Next.js وNuxt وAngular) على تصغير HTML تلقائيًا في إصدارات الإنتاج. هذه الأداة مفيدة لملفات HTML الثابتة وقوالب البريد الإلكتروني والمشاريع التي لا تحتوي على نظام بناء.
هل يؤدي هذا إلى تقليل CSS وJavaScript المضمّنين أيضًا؟
تركز هذه الأداة على بنية HTML. يتم الاحتفاظ بمحتويات <style> و<script> المضمنة كما هي. بالنسبة لهؤلاء، استخدم أدوات تصغير CSS وJavaScript مخصصة للحصول على أفضل النتائج.
هل علامات الإغلاق الاختيارية آمنة للإزالة؟
نعم وفقًا لمواصفات HTML5، على الرغم من صعوبة قراءة النتيجة. تقوم بعض الفرق بتعطيل هذا التحول من أجل الوضوح، وتقبل عقوبة الحجم الطفيفة.
هل تم تحميل HTML الخاص بي إلى الخادم؟
لا، يعمل المصغر في متصفحك.
كيف يمكن مقارنة هذا بـ html-minifier-terser؟
html-minifier-terser هو أداة تصغير Node.js HTML الأساسية وينتج نتائج أكثر قوة قليلًا. تغطي هذه الأداة نفس التحويلات للاستخدام من جانب المتصفح بدون إعداد البناء.
هل يجب أن أقوم بالتصغير دائمًا أم بشكل انتقائي؟
دائما للإنتاج. لا تستخدم أبدًا التعليمات البرمجية المصدرية في التحكم في الإصدار؛ يعد HTML القابل للقراءة في المصدر ضروريًا للصيانة.