تصغير HTML _

كيف يعمل تصغير HTML؟

يُعالج المُصغّر مدخلك بآلة حالة صغيرة تُميّز بين المناطق المحفوظة كما هي (<pre>، <textarea>، <script>، <style>) والمناطق القابلة للتحرير التي يأمن فيها طيّ المسافات والتعليقات.

1. توكينة كتل الحفظ. يقرأ الماسح المدخل حرفًا بحرف وينتقل إلى حالة الحفظ حين يصادف وسمًا افتتاحيًا لـ <pre> أو <textarea> أو <script> أو <style>. كل ما بداخل تلك الوسوم يُنسخ بايتًا ببايت حتى الوسم المُغلق المطابق.
2. طيّ المسافات القابلة للتحرير. في المناطق القابلة للتحرير، يطوي الماسح كل تتابع من المسافات والجدولات وكسرات الأسطر إلى مسافة واحدة، ثم يُجرّد المسافات الرائدة والتابعة حول حدود الوسوم. النص المرئي يعيد تدفقه كما يُصيّره المتصفح.
3. تجريد التعليقات. تُزال كتل <!-- ... --> حين يكون المفتاح مُفعَّلًا. تبقى التعليقات الشرطية لـ IE (<!--[if IE]> ... <![endif]-->) حين يكون مفتاح الحفاظ عليها مُفعَّلًا، لأن عملاء البريد القديمة لا تزال تعتمد عليها.
4. طيّ السمات المنطقية. تتقلص الصيغ المطوّلة كـ checked="checked" وdisabled="disabled" وrequired="required" إلى اسم السمة المجرد. تُعامل مواصفة HTML5 الصيغة المجردة معاملةً دلالية مطابقة، فتبقى شجرة DOM المُصيَّرة دون تغيير.
5. الإبلاغ عن فروقات البايتات. يُقاس كلٌّ من النص الأصلي والمُصغّر بـ new TextEncoder().encode(...).byteLength، وهو نفس عدد بايتات UTF-8 الذي يراه CDN أو خادم HTTP على الشبكة. يعرض شريط المقاييس الحجم الأصلي والحجم المُصغّر والبايتات الموفَّرة والنسبة المئوية للتوفير.

لماذا نُصغّر HTML؟

• تحميل صفحات أسرع. يصل HTML الأصغر إلى المتصفح أسرع وينتهي المحلل مبكرًا. على شبكات الجوال تتحول وفورات البايتات مباشرةً إلى أول رسم للمحتوى FCP أسرع ودرجة Lighthouse أفضل.
• فواتير خروج CDN أقل. تُفوتر CloudFront وCloudflare وFastly بالغيغابايت الخارج. تخفيض HTML بنسبة 20 بالمئة عبر ملايين الزيارات الشهرية يتراكم ليُنتج وفورات حقيقية في الفاتورة، قبل أي تحسين للصور أو السكريبتات.
• فروقات طلبات سحب أنظف. HTML الثابت المبني المُلتزَم في مستودع يصبح مزعجًا حين يُعيد كل تعديل على القالب تدفق المسافات. HTML المُصغّر في مجلد dist يُنتج فروقات PR أضيق تُركّز على تغييرات المحتوى الفعلية بدلًا من ضوضاء المسافات.
• تضمينات ومقتطفات أصغر. قوالب البريد الإلكتروني ومقتطفات الودجات التابعة وHTML المخزَّن داخل إعدادات JSON أو YAML تستفيد جميعها من خفض البايتات ذاته. التضمينات المُصغّرة تُبقي رسائل المعاملات تحت حدود حجم ESP وتُقلّص حزم الودجات.

التطبيقات الشائعة

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

• خطوات بناء المواقع الثابتة: تُمرّر Eleventy وHugo وAstro وبناءات Next.js الإنتاجية HTML عبر مُصغّر قبل الكتابة إلى مجلد dist لتكون الحزمة المنشورة أصغر من المصدر.
• رسائل البريد المعاملاتية: تُقيّد موفرو خدمة البريد (SendGrid وPostmark وMailgun) حجم جسم HTML، ويُضخّم التوسع عند CSS المُدمج هذا العدد بسرعة. تصغير الجسم قبل الإرسال يُبقي الرسالة تحت الحد.
• الودجات المُضمَّنة: الودجات التابعة ومقتطفات الدردشة المشحونة بوصفها HTML مُضمَّنًا تستفيد من كل خفض في البايتات لأن الصفحة المضيفة تحمّلها في كل زيارة.

مثال عملي

الصق مقتطف نموذج مطوَّل بحجم 500 بايت بمسافتين بادئتين، وثلاث كسرات أسطر بين الصفوف، وكتلة تعليق HTML في الأعلى، و<input type="checkbox" checked="checked" />. مع تفعيل كل الخيارات، يتقلص الناتج إلى نحو 300 بايت — وفر يبلغ نحو 40 بالمئة — بينما تبقى شجرة DOM المُصيَّرة مطابقة بايتًا للمصدر.

هل سيُعطّل التصغير HTML الخاص بي؟

لا، عند استخدام المفاتيح الافتراضية. يحفظ المُصغّر محتويات وسوم <pre> و<textarea> و<script> و<style> كما هي، ويُبقي التعليقات الشرطية لـ IE حين يكون مفتاحها مُفعَّلًا، ويطوي فقط المسافات التي يُصنّفها محلل HTML5 كغير ذات معنى. شجرة DOM المُصيَّرة مطابقة بايتًا للمصدر. المفاتيح المتقدمة (حذف السمات الفارغة) قد تُغيّر سلوك المقتطفات التي تستخدم value="" أو alt="" عمدًا، فراجع الناتج إن فعّلتها.

هل يُصغّر هذا CSS وJS المُضمَّنَين؟

لا في هذه الأداة. يُحفظ محتوى وسوم <style> و<script> المُضمَّنة كما هو حتى لا يُعطّل المُصغّر قاعدة CSS أو جملة JS بطيّ مسافة داخل سلسلة نصية أو تعبير نمطي. لتصغير CSS استخدم مُصغّر CSS؛ ولتصغير JS استخدم مُصغّر JS. يُركّز مُصغّر HTML على الترميز ذاته.

ما مقدار ما يمكنني توفيره؟

التوفير النموذجي على HTML المكتوب يدويًا يتراوح بين 10 و30 بالمئة، بحسب مقدار اعتماد المصدر على المسافات البادئة والأسطر الفارغة وصيغ السمات المطوّلة. HTML الثابت المبني من أطر كـ Next.js يوفّر في الغالب من 15 إلى 25 بالمئة لأن الإطار يُجري بعض التحسين لكن يُبقي المسافات قابلة للقراءة. القوالب الغنية بالتعليقات وHTML بالأسلوب البريدي ذو التداخل العميق قد تصل إلى 40 بالمئة أو أكثر.

هل يُحفظ محتوى pre؟

نعم. يُوكَّن المُصغّر كتل <pre> و<textarea> و<script> و<style> صراحةً بوصفها مناطق محفوظة كما هي، وينسخ محتواها بايتًا ببايت إلى الناتج. تبقى المسافات وكسرات الأسطر والمسافات البادئة داخل تلك الوسوم سليمةً تمامًا، فتُصيَّر عينات الأكواد والفن ASCII بالشكل ذاته بعد التصغير.

تصغير HTML على المتصفح يُبقي خط أنابيب البناء بسيطًا وترميزك صغيرًا. الصق أي HTML أعلاه، وعدّل مفاتيح الخيارات، وانسخ أو نزّل الناتج المُصغّر — دون رفع أو حساب أو مكتبة تابعة.