تصغير أكواد HTML بضغطة واحدة
اطوِ المسافات واحذف التعليقات من كود HTML لتقليل حجمه فوراً.
وسومك تبقى على جهازك
لا شيء لحذفه لاحقاً
آمنة لنصوص لم تُعلَن
تعمل في كل متصفح حديث
كيف تعمل
- 1
ألصق HTML
مستنداً كاملاً، أو قالب بريد، أو شذرة يولّدها خادم داخل صفحة.
- 2
اقرأ التقرير
قارن الحجم المصغَّر بالحجم المضغوط، وراجع التحذيرات قبل استبدال الأصل.
- 3
انسخ الناتج
خُذه إلى ناتج بناء، أو ملف قالب، أو مستند مضمَّن.
لماذا تستخدم هذه الأداة
المسافة ذات الدلالة محفوظة
المسافة بين العناصر السطرية فاصلُ كلمات يُعرَض فعلاً، فتُحفَظ بدل أن تُدمج وتزول.
pre وtextarea لا تُمسّان
كلاهما يحفظ المسافات بحكم المواصفة، وإعادة تنسيق محتواهما تغيّر ما يقرأه الزائر.
وسوم الإغلاق تبقى مكانها
حذف الوسوم الاختيارية يستند إلى تسامح المحلِّل مع الخطأ، وهذه مقامرة لا تخوضها الأداة.
script وstyle يُعالجان بصحّة
الكتلتان لغتان مختلفتان، ونصٌّ يحتوي وسم إغلاق script لا يُقرأ خطأً كوسم.
صدق في حجم المكسب
المستند عادةً أصغر ملفاتك الثلاثة، والأرقام المعروضة تقول ذلك.
لا شيء يفارق المتصفح
تُعالَج الوسوم في هذه الصفحة، فلا تُسلَّم نصوص المسوّدات وعناوين بيئة الاختبار إلى خادم.
المسافة في HTML ذات دلالة أحياناً، وهذه هي الصعوبة كلها
في CSS وJavaScript لا تحمل المسافة خارج النصوص أيّ معنى، فيمكن حذفها جملةً. أما HTML فلا تعمل هكذا. متتالية فراغات بين عنصرين سطريين تُدمج في مسافة واحدة لا في لا شيء، وتلك المسافة الباقية فاصلُ كلمات معروض: احذف سطر الفصل بين `<span>الإجمالي</span>` و`<span>السعر</span>` فتلتصق الكلمتان على الشاشة. والأمر نفسه بين رابط والنصّ بعده، وبين عناصر `<a>` المتجاورة في شريط تنقّل، وحول `<img>` و`<button>`. لهذا قد تقرأ صفحة مصغَّرة فجأةً «خروجالإعدادات»، ولهذا فالقاعدة الآمنة أن تُدمج المسافات بين العناصر الكتلية وحدها، حيث لم يكن المتصفح يعرض فاصلاً من الأصل. وتحديد الحالة يقتضي معرفة قيمة display لكل عنصر، وهي تتبع CSS الخاصّة بك — فأداةٌ لا ترى إلا الوسوم يلزمها التحفّظ، وهذه الأداة متحفّظة.
pre وtextarea يحفظان المسافات بحكم المواصفة
عنصران يجعلان المسافة حاملةً للمعنى بأقوى صورة. داخل `<pre>` تُعرَض كل مسافة وكل سطر كما كُتبت، ولذلك تنجو أمثلة الكود وتنسيق ASCII هناك ولا تنجو في غيره؛ فإعادة إزاحة كتلة `<pre>` تغيّر الكود الذي يراه قارئك، ودمجها يمحو المثال كلياً. و`<textarea>` يسلك السلوك ذاته مع قيمته الابتدائية، فالمسافات في النصّ الافتراضي لحقلٍ محتوى لا تنسيق — ثم إن المحلِّل يحذف سطراً فاصلاً واحداً يلي وسم الفتح مباشرةً، ومعنى ذلك أن أداةً تضيف سطراً أو تحذفه تغيّر بصمت ما يجده المستخدم في الحقل. ومحتوى `<script>` و`<style>` خارج نطاق قواعد المسافات على مستوى الوسوم كذلك، لسبب آخر يأتي أدناه. وأيّ مصغِّرٍ يعامل المستند كتيّار موحَّد من وسوم ونصوص سيُفسد أحد هذه العناصر عاجلاً أو آجلاً.
محارف التوجيه غير المرئية محتوى لا فراغ، وهذا يخصّ العربية تحديداً
ثمّة صنف من المحارف يظهر في صفحاتنا العربية أكثر مما يظهر في غيرها، وتخطئ فيه أدوات التصغير على وجه خاصّ: علامات التوجيه ثنائي الاتجاه. المحرف U+200F أو الكيان `‏` لا يُعرَض شيئاً بذاته، لكنه يُثبّت اتجاه ما يليه، ووجوده هو ما يمنع رقم هاتف أو سعراً بعملة لاتينية من الانقلاب إلى الطرف الخطأ من جملة عربية. ومصغِّرٌ يعدّ كلّ محرف لا يرسم حبراً فراغاً قابلاً للتقليص سيحذفه، فيبقى النصّ صحيحاً حرفاً بحرف ويُعرَض معكوساً. ويشمل الصنف نفسه محرف الوصل الصفري U+200D الذي يمسك تشكيل بعض الحروف، والمساحة الصفرية U+200B التي تخبر المتصفح بموضع الكسر المسموح في كلمة طويلة. لا يُلمَس أيٌّ من هذه هنا: تُعالَج بوصفها محتوى نصّياً، لأن هذا ما هي عليه.
HTML متسامحة، وذلك يجعل التصغير الجسور أخطر لا أأمن
ليست في HTML أخطاء تحليل بالمعنى الذي في CSS وJavaScript. أغفِل `</p>`، أغفِل `</li>`، أغفِل `</tbody>`، أسقِط علامات التنصيص حول سمة، وسيتعافى المتصفح ويبني شجرةً على أي حال — والمواصفة تحدّد كيف بالضبط. والمصغِّرات تستثمر ذلك: حذف وسوم الإغلاق الاختيارية توفيرٌ حقيقي في البايتات، والمواصفة تجيزه. والمشكلة أن التعافي مضمون التماثل للوسوم الصحيحة أصلاً فقط. في مستندٍ فيه وسمٌ غير متوازن سلفاً، أو `<div>` داخل `<p>`، يُزيح حذف الوسوم الاختيارية الموضع الذي يقرّر فيه المحلِّل نهاية عنصر، والشجرة الناتجة شجرة أخرى — تظهر عادةً كمحتوى يقفز خارج الصندوق الذي كان له. وهي وسوم يقرأها غيرك أيضاً: شذرةٌ بإغلاقات مضمرة قد تعطّل محرّك قوالب لاحقاً، أو عميل بريد، أو زاحفاً يستخدم محلِّل XML أكثر تشدّداً. وهذه الأداة تترك وسوم الإغلاق كما هي، لأن التوفير ضئيل والفشل بنيويّ.
script وstyle المضمَّنان لغتان مختلفتان داخل الملف نفسه
كتلة `<script>` أو `<style>` ليست وسوماً، والمحلِّل يبدّل وضعه عند دخولها. ولذلك أثرٌ محدّد يوقع الأدوات الساذجة: داخل نصٍّ برمجيّ تقليدي يبحث المحلِّل عن المحارف الحرفية `</script` ويُنهي العنصر عندها، حتى لو كانت داخل نصٍّ في JavaScript. فكودٌ يكتب `document.write("</script>")` يُنهي كتلته بنفسه، والحلّ المعتاد كسر المتتالية بالشكل `"<\/script>"`. ومصغِّرٌ يعيد كتابة علامات التنصيص أو يعيد الحماية دون فهم ذلك قد يُنشئ المتتالية حيث لم تكن، فتُقطع الصفحة من تلك النقطة. والحالة المعاكسة مصغِّرٌ يعدّ محتوى النصّ البرمجي نصاً عادياً فيدمج مسافاته، وهو غير ضارّ حتى يلقى نصاً قالبياً أو سطراً غير منتهٍ كان سطر الفصل فيه يؤدّي عمل الفاصلة المنقوطة. والمعالجة الصحيحة لهاتين الكتلتين تعني تمريرة JavaScript وCSS حقيقية عليهما، لا تمريرة وسوم.
HTML هي الملف الذي يشتري التصغير فيه أقلّ ما يمكن
يستحقّ هذا قولاً صريحاً، لأنه يغيّر أين تصرف جهدك. من الملفات النصّية الثلاثة التي تحمّلها صفحة، المستند عادةً أصغرها، وهو الذي لا تستطيع تخزينه مؤقتاً في العادة — فورقة الأنماط والحزمة تُبصَمان وتُخزَّنان سنةً، بينما تُطلَب HTML طازجةً في كل زيارة تقريباً. يبدو ذلك حجّةً لتصغيرها، وهو كذلك جزئياً، لكن الأرقام متواضعة: الوسوم تُضغَط ضغطاً بالغاً لأنها تكرّر أسماء الوسوم وأنماط السمات ذاتها مئات المرات، فgzip أو Brotli على الخادم يحذف أصلاً معظم ما يحذفه مصغِّر. والمكاسب الحقيقية في مستندٍ بنيوية — كتل بيانات مضمَّنة أقلّ، ولا صور base64 عملاقة ملصوقة في المصدر، ولا حالةٌ مولَّدة على الخادم مسكوبة في وسم script. فإن كانت HTML كبيرة فعلاً، فالتصغير ليس العلاج؛ ومعرفة ما فيها هي العلاج عادةً.
أخطاء شائعة يجب تجنّبها
- دمج المسافات بين العناصر السطرية. تلك المسافة فاصلُ كلمات معروض، فحذفها يُلصق كلمتين على الشاشة وإن بقيت الوسوم سليمة الشكل.
- إعادة تنسيق محتوى `pre` أو `textarea`. كلاهما يحفظ المسافات بحكم المواصفة، فإعادة الإزاحة تغيّر مثال الكود أو النصّ الافتراضي للحقل.
- حذف محارف التوجيه غير المرئية بوصفها فراغاً. الكيان `‏` يُثبّت اتجاه ما يليه، وحذفه يقلب رقماً أو سعراً إلى الطرف الخطأ من الجملة.
- حذف وسوم الإغلاق الاختيارية لتوفير بايتات. التعافي مضمون التماثل للوسوم الصحيحة أصلاً فقط، وفي أي شيء غير متوازن يُنهي المحلِّل العناصر في موضع آخر.
- ترك تمريرة على مستوى الوسوم تمسّ محتوى `script`. المحارف `</script` تُنهي العنصر حتى داخل نصٍّ في JavaScript، فإعادة الحماية قد تقطع الصفحة.
كيف تُقارن
| الجانب | هذه الأداة | مصغِّرات عبر الويب | خطّ بناء |
|---|---|---|---|
| إرسال الوسوم إلى خادم | أبداً | غالباً نعم | لا |
| تحفظ فواصل الكلمات السطرية | دائماً | متغيّر | قابل للضبط |
| تترك pre وtextarea | نعم | متغيّر | غالباً |
| تحفظ محارف التوجيه | نعم | نادراً | قابل للضبط |
| تحذف وسوم الإغلاق الاختيارية | لا | كثيراً | قابل للضبط |
| السعر | مجاناً | مجاني / خطط مدفوعة | مجاناً |
المزايا
حذف التعليقات
تذهب ملاحظات التطوير وعلامات الأقسام، وتبقى التعليقات الشرطية التي لا يزال لها عمل.
دمج آمن للمسافات
تُقلَّص متتاليات الفراغ بين العناصر الكتلية وحدها، حيث لم يكن هناك فاصل معروض أصلاً.
ترتيب السمات
تُحذف سمات type الزائدة والقيم الفارغة حيث تجعلها مواصفة HTML هي الافتراض.
معالجة علامات التنصيص بشفافية
لا تُحذف علامات التنصيص إلا حين تستحيل حاجة القيمة إليها، ولا تُحذف أبداً من السمة الأخيرة.
الحجمان معروضان
الخام وgzip، لأن ضغط الخادم يقلّص أصلاً معظم ما يحذفه التصغير من الوسوم.
يستوعب المستندات الكبيرة
تُصغَّر صفحة مولَّدة بأي حجم دون رفع ودون سقف.
لا شيء لتثبيته
لا أداة بناء ولا بيئة تشغيل ولا تبعيات — تعمل في صفحة الويب.
جاهزة للعربية وRTL
الواجهة كاملة بثماني لغات، ومنها العربية من اليمين إلى اليسار.
آمنة بالأصل
تُقدَّم عبر HTTPS، بلا تتبّع للمحتوى وبلا رفع إلى طرف ثالث.
من يستخدمها
مطوّرو الواجهات
تصغير قالب لا يمرّ بخطوة بناء.
مطوّرو البريد
إدخال قالب تحت حدّ حجم عميل بريد دون كسر تخطيط جدوله.
مطوّرو الخوادم
ترتيب شذرة مولَّدة على الخادم قبل إعادتها إلى الصفحة.
من يضمّن مستنداً
تكثيف وسوم يلزم تضمينها في موضع بسقف حجم صارم.
الأسئلة الشائعة
لا. كل شيء يعمل محلياً في متصفحك — نصّك لا يُرفع أو يُخزَّن أو يُشارَك أبداً.
نعم — مجاني تماماً، بلا حساب وبلا حدود.