একই লেখার উপর দুটি বিপরীত কাজ। ফরম্যাটিং লাইন ব্রেক আর ইনডেন্ট যোগ করে যাতে মানুষ নেস্টিং অনুসরণ করতে পারে; মিনিফাই ব্রাউজারের অপ্রয়োজনীয় সবকিছু সরায়। এখানে দুটোই আপনার দেওয়া অক্ষরগুলোর উপর কাজ করে, নতুন করে গড়া নথির উপর নয় — তাই যা বেরোয় তা এখনও আপনারই মার্কআপ।

কীভাবে ব্যবহার করবেন

1. 1 HTML পেস্ট করুন — পুরো পাতা বা কেবল একটি খণ্ড।
2. 2 ইনডেন্ট বাছুন, তারপর সাজান বা মিনিফাই চাপুন।
3. 3 ফলাফল কপি করুন, বা তুলনার জন্য অন্য বোতামে চালিয়ে দেখুন।

ফাঁকা জায়গা সবসময় বাড়তি নয়

দুটি ইনলাইন উপাদানের মাঝে একটিমাত্র স্পেস দৃশ্যমান লেখা: সরিয়ে দিলে "one two" হয়ে যায় "onetwo"। ব্লক উপাদানের মাঝে ওই একই স্পেসের কোনো অর্থ নেই। এখানকার মিনিফায়ার ইনডেন্ট ফেলে দেয়, কিন্তু যেখানে স্পেস সত্যিই কাজ করছে সেই বিভাজক স্পেসটি রাখে।

pre ও textarea কেন অক্ষত থাকে

এদের ভেতরে প্রতিটি স্পেস আর নতুন লাইন সেই বিষয়বস্তু যা পাঠক দেখবে। কোড ব্লক আবার ইনডেন্ট করলে সেটি যা দেখায় তা নীরবে বদলে যেত, আর textarea ছাঁটলে ফর্ম যে মান পাঠায় তা বদলে যেত। script আর style-এর বেলাতেও তাই: ভেতরটা অন্য ভাষা, তাই অক্ষত অবস্থায় পার হয়ে যায়।

এটি সাজায়, মেরামত করে না

ব্রাউজার পার্সারের উপর গড়া টুলগুলো ভাঙা মার্কআপ চুপচাপ সারিয়ে দেয়: আপনার ট্যাগ বন্ধ করে, বেওয়ারিশগুলো ফেলে দেয়, আর স্পেসিফিকেশন যেখানে চায় সেখানে উপাদান সরিয়ে নেয়। ডিবাগ করার সময় এটি প্রায়ই কাম্য নয় — আপনি যে বাগের পিছু নিয়েছেন, সেটিই হয়তো "সারিয়ে" ফেলা হয়েছে। এই টুল কেবল লেখাটি পুনর্বিন্যাস করে আর ভুলগুলো এমন জায়গায় রেখে দেয় যেখানে আপনি দেখতে পান।

HTML মিনিফাই করা ছোট লাভ

কোনো পাতা থেকে ফাঁকা জায়গা সরালে সাধারণত কয়েক শতাংশই বাঁচে, আর সার্ভারের gzip এমনিতেও তার বেশিরভাগ চেপে দিত। আসল ভার ছবিতে, ফন্টে আর স্ক্রিপ্টে। HTML মিনিফাই করুন কারণ কোনো টেমপ্লেট জেনারেটর আউটপুটটিকে অপাঠ্য রেখে গেছে, এই আশায় নয় যে পাতা অনেক দ্রুত হবে।