تصغير HTML
احذف التعليقات والمسافات، وصغّر CSS وJavaScript داخل الصفحة — دون المساس بالمسافات التي تظهر فعلًا على الشاشة. لا يغادر الكود المصدري متصفحك أبدًا.
- لا يُخزَّن أبدًا
- لا طابور ولا انتظار
- دون تسجيل ودون علامة مائية
يظهر HTML المصغّر هنا.
كيف تعمل الأداة
الصق كود HTML
أو أفلِت الملف هنا. لا يُخزَّن أي شيء — وهذا يهم مع الكود المصدري أكثر من معظم الأشياء.
اختر مدى التصغير
لكل من التعليقات والمسافات وCSS المضمّن وJavaScript المضمّن مفتاح مستقل.
انسخ النتيجة أو نزّلها
ترى مقدار التصغير، قبل وبعد.
المسافات التي تهم، والمسافات التي لا تهم
في HTML، المسافة بين عنصرين سطريين مسافة حقيقية، وهذا ما يميّز أداة التصغير المتأنية من أداة تُفسد الصفحات. اضغط السطر الجديد بين رابطين فتلتصق الكلمات على الشاشة؛ واضغط المسافات البادئة داخل كتلة pre أو حقل textarea فيتغيّر المحتوى نفسه، لأن المسافات هناك جزء من المحتوى. لذلك لا تُحذف المسافات إلا حيث يثبت أنها لا تظهر، وتُترك كما هي تمامًا حيث تظهر. أما أداة التصغير التي تحذف كل المسافات بلا تمييز فستعطيك ملفًا أصغر وصفحة خاطئة بشكل واضح.
تُحذف التعليقات، لأنها موجّهة لمن يصون الكود المصدري لا لمن يقرأ الصفحة — باستثناء التعليقات الشرطية، فهي تعليمات لا ملاحظات. وتُحذف السمات الزائدة: فالسمة type="text/javascript" على عنصر script هي القيمة الافتراضية منذ عقد، والسمة method="get" على النموذج تقول ما يفعله النموذج أصلًا.
حذف علامات الاقتباس من السمات صالح في HTML، وهو معطّل افتراضيًا عن قصد. تسمح المواصفة بقيمة سمة بلا علامات اقتباس ما دامت لا تحتوي على مسافات أو أحرف مُشكِلة، والمتصفحات تتعامل معها بلا أي مشكلة. أما محركات القوالب فكثيرًا ما لا تتعامل معها: فتعبير Blade أو Twig أو Handlebars أو JSX داخل سمة بلا علامات اقتباس يتوقف تحليله بشكل صحيح، ويظهر العطل وقت البناء في ملف لا يرغب أحد في قراءته. التوفير صغير والخطر ليس كذلك، ولذلك لا يُفعَّل إلا باختيارك.
المقياس الصادق لما تكسبه هو الحجم بعد الضغط، لا قبله. ترسل الخوادم HTML مضغوطًا بـ gzip أو brotli، وهاتان الخوارزميتان بارعتان للغاية في ضغط المسافات المتكررة — لذا فالمستند الذي يصغر من 100 KB إلى 70 KB قد لا يصغر عند النقل إلا من 12 KB إلى 11 KB. تصغير HTML يستحق العناء، لكنه الأصغر أثرًا بين الثلاثة؛ فالوزن الحقيقي في ملف الأنماط والسكربت.
عندما تحتاج إلى شيء آخر
لموقع كامل لا لملف واحد، مكان هذه الخطوة هو عملية البناء لا تبويب في المتصفح. كل إطار عمل حديث وكل مولّد مواقع ثابتة يصغّر HTML عند البناء، والقيام بذلك يدويًا يعني أنه سيتوقف لحظة ينساه أحدهم. والمكتبات التي تعتمد عليها هذه الأدوات قابلة للضبط حتى مستوى كل تحويل على حدة، وهذا ما يستحق اللجوء إليه حين تسبب قاعدة بعينها مشكلة.
قبل تحسين الترميز، تحقّق من الوزن الفعلي للصفحة. في كل موقع حقيقي تقريبًا يكون HTML رقمًا هامشيًا مقارنة بالصور والخطوط وJavaScript — وسيخبرك Lighthouse أو لوحة الشبكة في المتصفح نفسه بذلك في ثوانٍ، وغالبًا ما تكون الإجابة أن صورة رئيسية غير محسّنة تكلّف أكثر من كل بايت من الترميز في الصفحة.
الأسئلة الشائعة
هل يُخزَّن الكود الخاص بي في أي مكان؟
لا، وهذا بالضبط المقصود مع الكود المصدري. لا يُخزَّن أي شيء ولا يراه أي خادم. لصق كود مصدري مملوك لشركتك في أداة تصغير أونلاين ترسله إلى مكان ما هو إفشاء له، أيًّا كان ما يقوله الموقع عن مدة الاحتفاظ — وهو بالضبط من الأمور التي تُفعل على عجل ودون تفكير.
هل سيُفسد التصغير مظهر الصفحة؟
ليس بالطريقة المضبوطة هنا. لا تُضغط المسافات إلا حيث لا تظهر: بين العناصر الكتلية مثل div وعناصر القوائم. أما المسافة بين العناصر السطرية فتُحفظ، لأن حذفها يُلصق كلمتين ببعضهما بشكل واضح — فـ «</span> <span>» مسافة حقيقية على الشاشة و«</span><span>» ليست كذلك. ويُترك محتوى <pre> و<textarea> كما هو بايتًا ببايت. كما أن حذف وسوم الإغلاق الاختيارية معطّل عن قصد: فهو صالح في HTML، لكن عددًا كبيرًا من محركات القوالب وبرامج البريد الإلكتروني تحلّل النتيجة بشكل سيئ.
ما الذي يُحذف فعلًا؟
التعليقات، والمسافات التي لم تكن تظهر أصلًا، والفراغات الزائدة داخل كتل <style> و<script>. أما بنية الترميز والسمات والنص فلا تُمس — إذ تُفحص الأداة بتحليل الصفحة قبل التصغير وبعده والتأكد من تطابق عدد العناصر وعناصر القوائم والنص الظاهر.
هل أحذف علامات الاقتباس من السمات؟
فقط إذا كانت النتيجة ستذهب مباشرة إلى المتصفح. هذا صالح في HTML ويوفّر قليلًا، لكن السمات بلا علامات اقتباس تُعطّل بعض محركات القوالب وبعض برامج البريد الإلكتروني ومعظم المحلّلات البسيطة. الخيار معطّل افتراضيًا، وتنبّهك الصفحة حين تفعّله.
هل تصغّر الأداة CSS وJavaScript داخل الصفحة؟
نعم، كليهما، بالطريقة نفسها التي تعمل بها أداتا تصغير CSS وJavaScript لدينا. باستثناء واحد: إذا استخدم CSS المضمّن التداخل الأصلي (nesting) أو استعلامات الوسائط الحديثة، يُعطَّل تصغير CSS في تلك المرة — فأداة تصغير CSS أقدم من هذه الميزات وستحذف القواعد بصمت. يظل HTML مصغّرًا، وتخبرك الصفحة بما حدث بدلًا من أن تعيد إليك صفحة تنقصها أنماط.
بكم سيصغر الملف؟
لكود HTML مكتوب يدويًا بمسافات بادئة وتعليقات، عادةً بنسبة 10–30%. بعد ذلك يتولى gzip على خادمك معظم العمل المتبقي — ويظل التصغير المسبق مفيدًا لأن أثرهما يتراكم، لكن لا تتوقع أن يقلّص التصغير وحده الملف إلى النصف.
هل يمكنني تصغير موقع كامل دفعة واحدة؟
هنا صفحة واحدة في كل مرة. لموقع فيه صفحات كثيرة، صغّر الكود ضمن خطوة البناء أو النشر لتُعالَج كل صفحة بالطريقة نفسها في كل إصدار — واحتفظ بالكود المصدري المقروء في نظام إدارة الإصدارات، لا بالنسخة المصغّرة أبدًا.
معلومة مفيدة: لا تُضغط المسافات البيضاء إلا حيث لا تظهر على الشاشة، لذا يبقى النص داخل pre وtextarea كما هو تمامًا، وتُحفظ المسافات بين العناصر السطرية. حذف علامات الاقتباس من السمات صالح في HTML لكنه يُعطّل بعض محركات القوالب، ولهذا يكون معطّلًا افتراضيًا.
أضِف هذه الأداة إلى موقعك
مجانية لأي مدونة أو صفحة فصل دراسي أو مقالة مساعدة. الصق مقتطفًا واحدًا وسيتمكن زوارك من استخدامها مباشرةً على صفحتك.
أدوات ذات صلة
تصغير كود CSS
صغّر ملف الأنماط، أو اعرف لماذا تعذّر ذلك
تصغير كود JavaScript
اضغط JavaScript بخصوصية
تنسيق XML
أضف مسافات بادئة إلى XML لتتمكن من قراءته
معاينة Markdown
شاهد Markdown كما يعرضه GitHub
حذف الأسطر المكررة
أزِل التكرار، ورتّب القائمة ونظّفها
تحويل حالة الأحرف
UPPER وlower وTitle Case وcamelCase وغيرها