HTML মিনিফাই করুন

কমেন্ট ও হোয়াইটস্পেস সরান, পেজের ভেতরের CSS ও JavaScript ছোট করুন — স্ক্রিনে যে স্পেস সত্যিই দেখা যায়, তাতে হাত না দিয়ে। আপনার সোর্স কখনো ব্রাউজারের বাইরে যায় না।

কখনো সংরক্ষণ করা হয় না
কোনো লাইন নেই, অপেক্ষা নেই
সাইনআপ নেই, ওয়াটারমার্ক নেই

কমেন্ট সরান ফাঁকা জায়গা কমান শুধু যেখানে তা দেখা যায় নাইনলাইন CSS মিনিফাই করুন ইনলাইন JavaScript মিনিফাই করুন অ্যাট্রিবিউটের কোটেশন সরান বৈধ, তবে কিছু টেমপ্লেট ইঞ্জিনে সমস্যা করে

আপনার HTML

মিনিফায়েড

মিনিফাই করা HTML এখানে দেখা যাবে।

যেভাবে কাজ করে

আপনার HTML পেস্ট করুন

অথবা ফাইলটি এখানে ছাড়ুন। কিছুই সংরক্ষণ করা হয় না — অন্য অনেক কিছুর চেয়ে সোর্স কোডের বেলায় এটি বেশি জরুরি।

কতটা ছোট করবেন, বেছে নিন

কমেন্ট, হোয়াইটস্পেস, ইনলাইন CSS আর ইনলাইন JavaScript — প্রতিটির জন্য আলাদা সুইচ।

কপি বা ডাউনলোড করুন

আগে ও পরে মিলিয়ে দেখানো হয়, ফাইল কতটা ছোট হলো।

কোন হোয়াইটস্পেস জরুরি, আর কোনটি নয়

HTML-এ দুটি ইনলাইন এলিমেন্টের মাঝের স্পেস সত্যিকারের স্পেস, আর এখানেই একটি যত্নশীল মিনিফায়ার আর পেজ ভেঙে ফেলা মিনিফায়ারের পার্থক্য। দুটি লিংকের মাঝের নতুন লাইন সরিয়ে দিলে স্ক্রিনে শব্দ দুটি জুড়ে যায়; pre ব্লক বা textarea-র ভেতরের ইনডেন্টেশন সরালে কনটেন্টই বদলে যায়, কারণ সেখানে হোয়াইটস্পেসই কনটেন্ট। তাই হোয়াইটস্পেস শুধু সেখানেই সরানো হয়, যেখানে তা নিশ্চিতভাবে দেখা যায় না, আর যেখানে দেখা যায়, সেখানে হুবহু রেখে দেওয়া হয়। যে মিনিফায়ার সব স্পেস একইভাবে মুছে দেয়, সেটি ফাইল ছোট করবে ঠিকই, কিন্তু পেজ দেখাবে স্পষ্টতই ভুল।

মন্তব্য (কমেন্ট) সরিয়ে ফেলা হয়, কারণ সেগুলো পাঠকের জন্য নয়, সোর্স যিনি রক্ষণাবেক্ষণ করেন তাঁর জন্য — ব্যতিক্রম কন্ডিশনাল কমেন্ট, যেগুলো নোট নয়, নির্দেশনা। অপ্রয়োজনীয় অ্যাট্রিবিউট বাদ দেওয়া হয়: script এলিমেন্টে type="text/javascript" এক দশক ধরে ডিফল্ট, আর ফর্মে method="get" লেখা মানে ফর্ম এমনিতেই যা করে, সেটাই আবার বলা।

অ্যাট্রিবিউটের কোটেশন সরানো বৈধ HTML, তবু এটি ইচ্ছে করেই ডিফল্টভাবে বন্ধ। স্পেসিফিকেশন অনুযায়ী অ্যাট্রিবিউটের মানে স্পেস বা ঝামেলার অক্ষর না থাকলে কোটেশন ছাড়াই লেখা যায়, আর ব্রাউজার তা নিখুঁতভাবে সামলায়। কিন্তু টেমপ্লেট ইঞ্জিন প্রায়ই পারে না: কোটেশনহীন অ্যাট্রিবিউটের ভেতরে Blade, Twig, Handlebars বা JSX এক্সপ্রেশন থাকলে সেটি আর ঠিকভাবে পার্স হয় না, আর ত্রুটিটি ধরা পড়ে বিল্ডের সময়, এমন এক ফাইলে যা কেউ পড়তে চায় না। সাশ্রয় সামান্য, ঝুঁকি সামান্য নয় — তাই এটি আপনি চাইলে চালু করবেন।

এতে আসলে কতটা লাভ হয়, তার সৎ হিসাব হলো কমপ্রেশনের পরে, আগে নয়। সার্ভার HTML পাঠায় gzip বা brotli দিয়ে কমপ্রেস করে, আর এই অ্যালগরিদমগুলো বারবার আসা হোয়াইটস্পেস সামলাতে দারুণ দক্ষ — তাই যে ডকুমেন্ট মিনিফাই করে ১০০ KB থেকে ৭০ KB হয়, নেটওয়ার্কে সেটি হয়তো ১২ KB থেকে মাত্র ১১ KB-তে নামে। HTML মিনিফাই করা সার্থক, তবে তিনটির মধ্যে এর লাভই সবচেয়ে কম; আসল ভার থাকে স্টাইলশিটে আর স্ক্রিপ্টে।

অন্য কিছু দরকার হলে

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

মার্কআপ অপটিমাইজ করার আগে দেখে নিন পেজের আসল ওজন কত। প্রায় প্রতিটি বাস্তব সাইটে ছবি, ফন্ট আর JavaScript-এর পাশে HTML নগণ্য — Lighthouse বা ব্রাউজারের নিজস্ব নেটওয়ার্ক প্যানেল কয়েক সেকেন্ডেই তা দেখিয়ে দেবে, আর উত্তর সাধারণত এই যে, অপটিমাইজ না করা একটি হিরো ছবির খরচ পেজের সব মার্কআপের চেয়েও বেশি।

সাধারণ প্রশ্নোত্তর

আমার কোড কি কোথাও সংরক্ষণ করা হয়?

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

মিনিফাই করলে কি পেজের চেহারা বদলে যাবে?

এখানে যেভাবে সেট করা আছে, তাতে না। হোয়াইটস্পেস শুধু সেখানেই ছোট করা হয়, যেখানে তা দেখা যায় না: div বা লিস্ট আইটেমের মতো ব্লক এলিমেন্টের মাঝে। ইনলাইন এলিমেন্টের মাঝের স্পেস রাখা হয়, কারণ সেটি সরালে স্ক্রিনে দুটি শব্দ জুড়ে যায় — "</span> <span>" স্ক্রিনে সত্যিকারের একটি স্পেস, "</span><span>" নয়। <pre> ও <textarea>-র ভেতরের কনটেন্ট প্রতিটি বাইট পর্যন্ত অক্ষত থাকে। আর ঐচ্ছিক ক্লোজিং ট্যাগ সরানোর অপশন ইচ্ছে করেই বন্ধ রাখা হয়েছে: এটি বৈধ HTML, কিন্তু অনেক টেমপ্লেট ইঞ্জিন ও ইমেইল ক্লায়েন্ট ফলাফলটি ঠিকমতো পার্স করতে পারে না।

এটি আসলে কী কী সরায়?

কমেন্ট, যে হোয়াইটস্পেস কখনো দেখা যেত না, আর <style> ও <script> ব্লকের ভেতরের বাড়তি জায়গা। আপনার মার্কআপের কাঠামো, অ্যাট্রিবিউট ও লেখা অক্ষত থাকে — টুলটি আগে ও পরে পেজ পার্স করে মিলিয়ে দেখে যে এলিমেন্টের সংখ্যা, লিস্ট আইটেম আর দৃশ্যমান লেখা হুবহু এক আছে।

অ্যাট্রিবিউটের কোটেশন কি সরানো উচিত?

শুধু তখনই, যখন আউটপুট সরাসরি ব্রাউজারে যাবে। এটি বৈধ HTML এবং সামান্য জায়গা বাঁচায়, কিন্তু কোটেশনহীন অ্যাট্রিবিউটে কিছু টেমপ্লেট ইঞ্জিন, কিছু ইমেইল ক্লায়েন্ট আর বেশিরভাগ সাধারণ পার্সার ভেঙে যায়। এটি ডিফল্টভাবে বন্ধ, আর চালু করলে পেজ আপনাকে সতর্ক করে।

পেজের ভেতরের CSS ও JavaScript কি মিনিফাই হয়?

হ্যাঁ, দুটোই — আমাদের CSS ও JavaScript মিনিফায়ার যেভাবে করে, সেভাবেই। একটি ব্যতিক্রম: আপনার ইনলাইন CSS-এ নেটিভ নেস্টিং বা আধুনিক মিডিয়া কোয়েরি থাকলে সেবারের জন্য CSS অংশটি বন্ধ রাখা হয় — CSS মিনিফায়ারটি ওই ফিচারগুলোর আগের তৈরি, তাই নিঃশব্দে নিয়ম মুছে ফেলত। HTML তবু মিনিফাই হয়, আর স্টাইল হারানো পেজ ফেরত না দিয়ে পেজ আপনাকে জানিয়ে দেয় কী ঘটেছে।

কতটা ছোট হবে?

ইনডেন্টেশন ও কমেন্টসহ হাতে লেখা HTML সাধারণত ১০–৩০% ছোট হয়। বাকি কাজের বেশিরভাগ করে আপনার সার্ভারের gzip — আগে মিনিফাই করলে তবু লাভ হয়, কারণ দুটির প্রভাব যোগ হয়, তবে শুধু মিনিফাই করেই ফাইল অর্ধেক হবে বলে আশা করবেন না।

পুরো সাইট কি একবারে মিনিফাই করা যায়?

এখানে একবারে একটি পেজ। অনেক পেজের সাইটের জন্য বিল্ড বা ডিপ্লয়ের ধাপেই মিনিফাই করুন, যাতে প্রতিটি রিলিজে সব পেজ একইভাবে হয় — আর ভার্সন কন্ট্রোলে রাখুন পড়ার উপযোগী সোর্স, মিনিফাই করা আউটপুট কখনো নয়।

জেনে রাখুন: হোয়াইটস্পেস শুধু সেখানেই ছোট করা হয়, যেখানে তা স্ক্রিনে দেখা যায় না; তাই pre ও textarea-র ভেতরের লেখা হুবহু থাকে, আর ইনলাইন এলিমেন্টের মাঝের স্পেসও রাখা হয়। অ্যাট্রিবিউটের কোটেশন সরানো বৈধ HTML, কিন্তু কিছু টেমপ্লেট ইঞ্জিন এতে ভেঙে যায় — সেজন্যই এটি ডিফল্টভাবে বন্ধ।

এই টুলটি আপনার ওয়েবসাইটে যোগ করুন

যেকোনো ব্লগ, ক্লাসের পেজ বা হেল্প আর্টিকেলের জন্য ফ্রি। একটি স্নিপেট পেস্ট করলেই আপনার ভিজিটররা আপনার পেজেই এটি ব্যবহার করতে পারবেন।