قم بتصغير كود HTML فوراً لتقليل حجم الملف وتحسين سرعة تحميل الموقع.
مقدّمة
ليس بلازم أن يكون HTML الذي تكتبه للتحرير هو نفسه HTML الذي يصل إلى المتصفّح. فأنت وأنت تبني الصفحة تحتاج الإزاحة وفواصل الأسطر لتتابع البنية بسهولة، وتحتاج التعليقات المتروكة في الترميز لتشرح الأقسام أو تدوّن ملاحظة لوقت لاحق. أمّا المتصفّح فلا يحتاج شيئًا من ذلك ليعرض الصفحة عرضًا صحيحًا — كلّ ما يلزمه وسوم صالحة سليمة التكوين. والتصغير يجرّد ما وُضع لقارئ بشريّ لا غير، فتصل الصفحة نفسها إلى المتصفّح ملفًّا أصغر.
كيف تصغّر هذه الأداة ترميزك
- تُحذف كلّ التعليقات بلا استثناء. فكلّ كتلة
<!-- ... -->تُجرَّد، بما فيها التعليقات الشرطية القديمة الخاصّة بـ Internet Explorer وأيّ تعليق ربّما أردت الإبقاء عليه، كإشعار ترخيص أو نسبة. ولا نظير هنا لعُرف «أبقِ هذا» الذي يدعمه مصغّر CSS في هذا الموقع — فإن كان تعليقٌ يهمّك، فأبقِه في نسختك العاملة ولا تعوّل على نجاته من التصغير. - المحتوى داخل وسوم
<pre>و<code>و<script>و<textarea>يحتفظ بمسافاته بالضبط. ففواصل الأسطر والتباعد داخل هذه الوسوم ذات معنى — إذ يظهر مثالُ شيفرة أو كتلةُ نصّ مُهيَّأ مسبقًا على غير وجهها لو طُويت مسافاتها الداخلية — وهذه الأداة تترك تلك المسافات دون مساس. - المسافات في المواضع الأخرى تُطوى ولا تُحذف. فتتابعٌ من الفراغات أو علامات الجدولة أو فواصل الأسطر بين عنصرين سطريّين (رابط داخل جملة مثلًا) يُختزل إلى فراغ واحد بدل إزالته كلّيًّا، حتى لا تلتصق الكلمات المتجاورة ببعضها. ولا يُقتطع التباعد اقتطاعًا تامًّا إلّا بين الوسوم البنيوية في المستوى الأعلى وداخل
<head>، إذ لا يُعرض هناك شيء قطّ نصًّا جاريًا مرئيًّا. - الشرطة المائلة الختامية في الوسوم ذاتية الإغلاق تُوحَّد. فتصير
<img src="photo.jpg" />هكذا:<img src="photo.jpg">— وكلتاهما HTML صالح، والصيغة الأقصر توفّر بضعة محارف عند كلّ وسم ذاتي الإغلاق في الصفحة.
الخطر الحقيقي الوحيد: التعليقات داخل المحتوى المُهيَّأ مسبقًا
لمّا كان حذف التعليقات يجري في تمريرة أولى على مدخلك كلّه، قبل أن تنظر الأداة في أيّ وسم يقع كلّ شيء، فإنّها لا تستطيع التمييز بين تعليق عاديّ يُراد حذفه وبين نصّ <!-- ... --> الحرفيّ الذي تعرضه عمدًا داخل كتلة <pre> أو <code> — كمثال شيفرة في درس يبيّن شكل تعليق HTML. وفي هذه الحالة بعينها يُجرَّد نصّ المثال وإن حُفظت المسافات المحيطة به داخل الكتلة نفسها حفظًا صحيحًا. ولا يطال هذا إلّا نصًّا يحوي حرفيًّا المحرفين <!-- و--> داخل كتلة مُهيَّأة مسبقًا؛ ولا يطال أمثلة الشيفرة العادية التي لا تتضمّن صيغة التعليق جزءًا ممّا تعرضه.
ما ينبغي معرفته قبل التصغير
تغيّر هذه الأداة التنسيق وحده — فهي لا تعيد ترتيب العناصر ولا تدمج الوسوم ولا تحذف شيئًا من بنية الصفحة الفعلية. ولا حدّ لحجم ما تلصقه، إذ تتعامل مع نصّ مباشرةً لا مع ملفّ مرفوع؛ فترميز صفحة كامل، مهما طال، يُلصق ويُعالَج كما يُلصق مقتطف قصير ويُعالَج.
وكما هي الحال مع أيّ مصغّر، يحسن تحميل الناتج المصغَّر في متصفّح قبل نشره — لا لأنّ التحويل غير موثوق، بل لأنّ التأكّد من أنّ الصفحة تبدو وتتصرّف كما تتوقّع قبل نشرها ممارسة سليمة، تمامًا كمراجعة أيّ شيء آخر قبل تسليمه أو نشره.
متى تكون هذه هي الأداة المناسبة
- تهيئة صفحة للنشر بعد فراغك من التحرير. واصل العمل على النسخة المقروءة وأنت تبني الصفحة، وصغّرها مرّةً واحدة قُبيل نشرها مباشرة — لا بوصفها صيغة عمل.
- تخفيف وزن الصفحة على استضافة محدودة أو اتّصال بطيء. فملفّ HTML الأصغر ينزل أسرع، وهو ما يفرق أكثر ممّا يُظنّ على شبكة مدرسية أو على هاتف يعمل ببيانات الجوّال.
- مقارنة الشيفرة المصدرية لمعرفة شكل HTML الإنتاجي فعلًا. فالاطّلاع على مصدر موقع حقيقي يُظهر غالبًا HTML مضغوطًا لا يشبه ما تكتبه بيدك — وتصغير صفحتك أنت ثمّ وضع الاثنين جنبًا إلى جنب طريقةٌ ملموسة لرؤية السبب.
مثال
تُنهي طالبة صفحة أعمال شخصية لحصّة تصميم الويب، وفي ترميزها تعليقات متناثرة بقيت من مسوّدات سابقة، ومعها مثال شيفرة داخل كتلة <pre> يبيّن شكل تعليق HTML، ضمن شرحها لما تعلّمته. وقبل تسليم المشروع تلصق الصفحة كاملةً هنا. فتبدو الصفحة المعروضة وتتصرّف كما كانت تمامًا، وتختفي تعليقات المسوّدة المتبقّية، ويصغر الملفّ — غير أنّ مثال التعليق داخل عيّنة الشيفرة يختفي هو الآخر، لأنّه صادف أن احتوى المحرفين الحرفيّين <!--/-->. وتعديل ذلك المثال وحده ليتجنّب صيغة التعليق بحذافيرها، أو إخراج ذلك القسم ممّا يجري تصغيره، يدفع المشكلة.
أسئلة شائعة
هل يغيّر التصغير شكل صفحتي؟
لا. تُحفظ الوسوم والبنية — ولا يتغيّر سوى التنسيق والمسافات والتعليقات، وليس لشيء من ذلك أثر في كيفية عرض الصفحة.
ماذا يحدث للتعليقات في ترميزي؟
تُحذف كلّها بلا استثناء — ولا سبيل إلى وسم تعليق بأنّه ممّا يُبقى، خلافًا لمصغّر CSS في هذا الموقع.
هل تُحفظ المسافات داخل كتلة <pre> أو <code>؟
نعم؛ فالتباعد وفواصل الأسطر داخل هذين الوسمين، وكذلك داخل <script> و<textarea>، تُترك تمامًا كما كتبتها. والاستثناء الوحيد أن يتضمّن ذلك المحتوى حرفيًّا صيغة تعليق (<!-- -->) نصًّا تعرضه — فهذه تُحذف مع التعليقات الحقيقية، لأنّ حذف التعليقات يجري قبل أن تنظر الأداة في أيّ وسم يقع.
هل ثمّة حدّ للحجم؟
لا — فأنت تلصق نصًّا ولا ترفع ملفًّا، فليس هنا حدّ ثابت كالذي في أدوات رفع الملفّات بهذا الموقع.
هل تُحفظ شيفرتي في مكان ما؟
لا. يُعالَج الترميز الملصوق لإنتاج الناتج المصغَّر ولا يُخزَّن ملفًّا ولا يُبقى عليه بعد ذلك؛ ولا يُسجَّل إلّا أنّ الأداة استُعملت، لا الشيفرة نفسها.
ما الأدوات ذات الصلة التي يمكنني استعمالها؟
لصيغ الشيفرة الأخرى استعمل CSS Minifier وJavaScript Minifier للتصغير، أو CSS Beautifier وJavaScript Beautifier لعكس العملية.
