CSS মিনিফায়ার

নতুন

কমেন্ট ও অপ্রয়োজনীয় হোয়াইটস্পেস সরিয়ে CSS ছোট করুন।

Mode

Level

Comments

Drag & drop a .css file, or click to browse

—Original

—Minified

— Saved

—Gzipped

Input

Output

Runs entirely in your browser. Nothing is uploaded.

এক জায়গায় CSS মিনিফাই আর কম্প্রেস করুন

এই CSS মিনিফায়ার ব্রাউজারের অপ্রয়োজনীয় প্রতিটি ক্যারেক্টার সরিয়ে আপনার স্টাইলশিটকে ছোট করে দেয় — কমেন্ট, হোয়াইটস্পেস, লাইন ব্রেক এবং প্রতিটি রুলের শেষে অপ্রয়োজনীয় সেমিকোলন — অথচ রেন্ডার হওয়ার ফলাফল হুবহু একই থাকে। কোড পেস্ট করুন বা একটি .css ফাইল ড্রপ করুন, আর সঙ্গে সঙ্গেই কম্প্রেসড ফলাফল দেখা যাবে, ঠিক কত বাইট এবং শতাংশ বাঁচল সহ।

এটি একইসাথে একটি CSS কম্প্রেসর এবং CSS বিউটিফায়ারও বটে: একটি মাত্র টগল দিয়ে মিনিফাই ও আনমিনিফাইয়ের মধ্যে সুইচ করা যায়, তাই যে টুল একটি স্টাইলশিটকে গুটিয়ে ফেলতে পারে, সেই একই টুল মিনিফাই করা কোডকে আবার পড়ার যোগ্য, ইন্ডেন্ট করা কোডে ফিরিয়েও দিতে পারে।

যা সরানো হয় — আর যা কখনও স্পর্শ করা হয় না

আপনি যখন CSS মিনিফাই করেন, তখন টুলটি কমেন্ট সরায়, সব হোয়াইটস্পেস গুটিয়ে ফেলে, { } : ; , > +-এর মতো চিহ্নের চারপাশের স্পেস মুছে দেয়, এবং প্রতিটি ক্লোজিং ব্রেসের আগের শেষ সেমিকোলনটি বাদ দেয়। Aggressive মোড চালু করলে এটি লিডিং জিরোও সরিয়ে দেয় (0.5em হয়ে যায় .5em) এবং জিরো-লেন্থ ভ্যালুর একক সরিয়ে দেয় (0px হয়ে যায় 0)।

সবচেয়ে গুরুত্বপূর্ণ ব্যাপার হলো এটি লসলেস। কোটেড স্ট্রিং, url() ভ্যালু এবং calc() এক্সপ্রেশনগুলো কিছু সরানোর আগেই সুরক্ষিত রাখা হয়, তাই calc(100% - 2rem)-এর মতো একটি ভ্যালু তার প্রয়োজনীয় স্পেস ধরে রাখে এবং ব্যাকগ্রাউন্ড ইমেজের পাথ কখনও নষ্ট হয় না। অনেক দ্রুত অনলাইন মিনিফায়ার calc() ভুল করে ফেলে — এটি করে না।

মিনিফাই বা বিউটিফাই — সত্যিকারের দ্বিমুখী টুল

এক লাইনে গুটিয়ে ফেলা একটি স্টাইলশিট পড়তে চান? Beautify মোডে সুইচ করে CSS আনমিনিফাই করুন: টুলটি কোড পুনরায় ইন্ডেন্ট করে, প্রতিটি ডিক্লারেশন নিজস্ব লাইনে বসায়, প্রতিটি কোলনের পর একটি স্পেস যোগ করে এবং সিলেক্টর তালিকাগুলো পরিষ্কারভাবে সাজায়। আপনার প্রজেক্টের স্টাইলের সাথে মিলিয়ে ২-স্পেস, ৪-স্পেস বা ট্যাব ইন্ডেন্টেশন বেছে নিন।

মিনিফাই ও বিউটিফাই দুটোই বিপরীতমুখী হওয়ায়, আপনি মিনিফাই করা প্রোডাকশন CSS পেস্ট করে তা পড়তে, পরিবর্তন করতে এবং আবার মিনিফাই করতে পারেন — পেজ ছাড়াই।

cssminifier.com, CleanCSS এবং cssnano-এর সাথে তুলনা

cssminifier.com সবচেয়ে বেশি ব্যবহৃত অনলাইন অপশন, কিন্তু এটি আপনার কোড তাদের সার্ভারে আপলোড করে। প্রোপ্রাইটারি স্টাইলশিটের জন্য — ক্লায়েন্ট প্রজেক্ট, অপ্রকাশিত ডিজাইন, ইন্টার্নাল টুলিং — এটি একটি বাস্তব ঝুঁকি। CleanCSS ও cssnano হলো Node.js লাইব্রেরি: অটোমেটেড পাইপলাইনের জন্য চমৎকার, কিন্তু লোকাল ইনস্টল ছাড়া ব্যবহার করা যায় না। freeformatter.com-এর CSS মিনিফায়ার এবং TopTal-এর CSS মিনিফায়ার — দুটোই সার্ভার-সাইড।

এই টুল সবকিছু লোকালি JavaScript দিয়ে প্রসেস করে — কিছুই কখনও আপলোড হয় না। এতে সবচেয়ে সাধারণ মিনিফিকেশন অপ্টিমাইজেশনগুলো রয়েছে (হোয়াইটস্পেস, কমেন্ট, সেমিকোলন, জিরো-ইউনিট, লিডিং জিরো) এবং একই ধাপে একটি gzip অনুমানও যোগ করা হয়। কোনো অ্যাকাউন্ট নেই, আপলোড নেই, ইনস্টল নেই — iPhone, Android, Mac, Windows এবং Linux-এ কাজ করে।

কত বাইট বাঁচলো দেখুন — gzip সহ

একটি স্পষ্ট স্ট্যাটস বার আসল সাইজ, আউটপুট সাইজ, এবং বাঁচানো বাইট ও শতাংশ দেখায়, তাই আপনার CSS ঠিক কতটা ছোট হলো তা সবসময় জানা থাকে। সাইজ মাপা হয় প্রকৃত UTF-8 বাইটে, ক্যারেক্টার গণনায় নয়, তাই এটি আপনার সার্ভার যা প্রকৃতপক্ষে সার্ভ করে তার সাথে মেলে।

এটি লোকালি আপনার ব্রাউজারে হিসাব করা একটি gzip সংখ্যাও দেখায়। মিনিফিকেশন এবং gzip একসাথে কাজ করে — আগে সোর্স মিনিফাই করুন, তারপর হোস্টকে কম্প্রেস করতে দিন — আর দুটো সংখ্যাই দেখলে সম্মিলিত সাশ্রয়টি স্পষ্ট হয়ে ওঠে। এটাই “কম্প্রেসর” দিকটার হিসাব করা রূপ।

১০০% প্রাইভেট — ব্রাউজার ছেড়ে কিছুই যায় না

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

মিনিফিকেশন যে নির্দিষ্ট রূপান্তরগুলো করে

CSS মিনিফিকেশন একটি একক অপারেশন নয় — এটি লক্ষ্যযুক্ত রূপান্তরের একটি পাইপলাইন, প্রতিটি ভিন্নভাবে বাইট কমায়। সবচেয়ে মৌলিক স্তরে, টোকেনগুলোর মাঝের সব হোয়াইটস্পেস (স্পেস, ট্যাব, নিউলাইন) কিছু না রেখে গুটিয়ে ফেলা হয়, এবং প্রতিটি /* comment */ ব্লক বাদ দেওয়া হয়। কম স্পষ্ট কিন্তু সমান গুরুত্বপূর্ণ: প্রতিটি ডিক্লারেশন ব্লকের শেষ সেমিকোলন অপ্রয়োজনীয় (ক্লোজিং ব্রেসের আগে CSS পার্সারের এটি প্রয়োজন হয় না), তাই color: red; হয়ে যায় color: red — প্রতি রুলে এক বাইট। { } : ; , > + ~-এর মতো স্ট্রাকচারাল ক্যারেক্টারের চারপাশের স্পেসও পুরোপুরি সরিয়ে দেওয়া হয়।

আরও উন্নত পাসগুলো ভ্যালুগুলোকেই টার্গেট করে। জিরো-ইউনিট রিমুভাল 0px, 0em, 0% এবং অন্য যেকোনো জিরো-লেন্থ ভ্যালুকে নগ্ন 0-এ রূপান্তর করে, কারণ সংখ্যাটি শূন্য হলে একক অর্থহীন হয়ে যায়। লিডিং-জিরো রিমুভাল 0.75rem-কে ছোট করে .75rem বানায়। কালার শর্টহ্যান্ড পুনরাবৃত্ত জোড়াযুক্ত ছয়-অঙ্কের হেক্স কালারকে রূপান্তর করে — #ffffff হয়ে যায় #fff, #112233 হয়ে যায় #123 — এবং white-এর মতো নামযুক্ত কালার তাদের ছোট হেক্স সমতুল্যে রূপান্তরিত হতে পারে। শর্টহ্যান্ড প্রপার্টি মার্জিং চারটি আলাদা মার্জিন বা প্যাডিং ডিক্লারেশনকে একটি একক শর্টহ্যান্ডে গুটিয়ে দেয়: margin: 10px 0 10px 0 হয়ে যায় margin: 10px 0। একসাথে এই পাসগুলো কোনো নেটওয়ার্ক কম্প্রেশন স্পর্শ করার আগেই একটি বাস্তব স্টাইলশিটকে নিয়মিতভাবে ১৫–৩০% কমিয়ে দেয়।

রিডান্ডেন্ট সিলেক্টর কনসোলিডেশন কিছু মিনিফায়ার প্রয়োগ করা আরেকটি অপ্টিমাইজেশন: একই সিলেক্টর টার্গেট করা ডুপ্লিকেট রুল মার্জ করা হয়, এবং ফাইলে একাধিকবার আসা সিলেক্টর তালিকা ডি-ডুপ্লিকেট করা হতে পারে। সব মিনিফায়ার এটি করে না — এর জন্য একক ফরওয়ার্ড পাসের বদলে স্টাইলশিটের একটি ইন-মেমরি মডেল তৈরি করতে হয় — কিন্তু cssnano-এর মতো টুল এটিকে একটি ঐচ্ছিক অ্যাডভান্সড ট্রান্সফর্ম হিসেবে অন্তর্ভুক্ত করে। আপনার মিনিফায়ার কোন ট্রান্সফর্মগুলো প্রয়োগ করে তা বোঝা গুরুত্বপূর্ণ: প্রপার্টি ভ্যালুর জন্য আক্রমণাত্মক অপ্টিমাইজেশন প্রায় সবসময় নিরাপদ, কিন্তু সিলেক্টর বা at-rule মার্জিং তাত্ত্বিকভাবে কাস্কেড আচরণ পরিবর্তন করতে পারে যদি স্পেসিফিসিটির ক্রম কোনো এজ কেসে গুরুত্বপূর্ণ হয়।

CSS রেন্ডার-ব্লকিং — কেন ফাইলের আকার সরাসরি পেইন্ট টাইমকে প্রভাবিত করে

ডিফল্টভাবে, প্রতিটি এক্সটার্নাল স্টাইলশিট রেন্ডার-ব্লকিং: ব্রাউজার <head>-এর প্রতিটি CSS ফাইল ডাউনলোড, পার্স এবং প্রয়োগ না করা পর্যন্ত পেজের একটি পিক্সেলও রঙ করবে না। এটি CSS-কে ফাইল সাইজের প্রতি অনন্যভাবে সংবেদনশীল করে তোলে, যেখানে বেশিরভাগ অন্যান্য রিসোর্স তা নয়। একটি ২০০ KB JavaScript বান্ডল দেরি করা যেতে পারে; কিন্তু সতর্ক ইঞ্জিনিয়ারিং ছাড়া একটি বড় স্টাইলশিট দেরি করা যায় না। মিনিফিকেশনের মাধ্যমে সরানো CSS-এর প্রতিটি কিলোবাইট ব্রাউজারের প্রথম নেটওয়ার্ক রিকোয়েস্ট এবং কনটেন্ট রেন্ডার করতে পারার মুহূর্তের মধ্যকার ব্যবধান সরাসরি কমিয়ে দেয় — একটি মেট্রিক যা Google-এর Core Web Vitals সরাসরি Largest Contentful Paint (LCP) হিসেবে মাপে।

বাস্তব সংখ্যা দিয়ে বলতে গেলে: Bootstrap 4-এর স্টাইলশিট আনমিনিফাইড অবস্থায় প্রায় ১৮৭ KB সাইজে আসে। অফিশিয়াল মিনিফাইড ডিস্ট্রিবিউশন প্রায় ১৪৭ KB — শুধু হোয়াইটস্পেস আর কমেন্ট রিমুভাল থেকেই ৪০ KB কমেছে। একটি CDN Brotli কম্প্রেশন প্রয়োগ করার পর তা আরও কমে প্রায় ২২ KB-এ নেমে আসে। মূল সোর্স সাইজ থেকে এটি ৮৮% হ্রাস। যে ফ্রেমওয়ার্ক স্টাইলশিট ট্রি-শেক করা যায় না, তার জন্য মিনিফিকেশন এবং সার্ভার কম্প্রেশনই সবচেয়ে প্রভাবশালী অপ্টিমাইজেশন। একটি 3G কানেকশনে হাতে লেখা স্টাইলশিটের জন্য একই স্ট্যাক LCP-কে কয়েকশো মিলিসেকেন্ড এগিয়ে দিতে পারে — এমন একটি পার্থক্য যা Google-এর PageSpeed স্কোরিং সরাসরি নথিভুক্ত করে।

HTTP/2 ও HTTP/3 মাল্টিপ্লেক্সিং অনেকগুলো ছোট রিকোয়েস্ট করার শাস্তি কমিয়ে দিয়েছে, যা রিকোয়েস্ট সংখ্যা অপ্টিমাইজেশনের হিসাবকে পাল্টে দিয়েছে। কিন্তু মাল্টিপ্লেক্সিং পার্স টাইমে কোনো প্রভাব ফেলে না: একবার বাইট পৌঁছালে, ব্রাউজারের CSS পার্সারকে ফাইলের প্রতিটি ক্যারেক্টার এখনও হাঁটতে হয়। কম শক্তিশালী JavaScript ইঞ্জিনযুক্ত নিম্ন-মানের Android ফোনসহ প্রতিটি ডিভাইসে একটি ছোট ফাইল দ্রুত পার্স হয়। Time to First Byte (TTFB) সার্ভার লেটেন্সি মাপে; রেন্ডার-ব্লকিং টাইম হলো বাইট পৌঁছানোর পরে কী ঘটে তার বিষয়ে। মিনিফিকেশন সেই দ্বিতীয় জানালাটিকে টার্গেট করে, যা TTFB অপ্টিমাইজেশন (CDN প্লেসমেন্ট, এজ ক্যাশিং) স্পর্শ করতে পারে না।

মিনিফিকেশন বনাম বান্ডলিং বনাম ট্রি-শেকিং: তিনটি ভিন্ন সমস্যার তিনটি ভিন্ন টুল

মিনিফিকেশন আপনি ইতিমধ্যে শিপ করছেন এমন CSS থেকে রিডান্ডেন্ট ক্যারেক্টার সরায়। এটি কোন সিলেক্টর আছে তা না পাল্টেই ফাইলকে ছোট করে। এটি বিল্ড পাইপলাইনের শেষ ধাপ: আপনি এটি চূড়ান্ত আউটপুটে চালান, ইন্টারমিডিয়েট ফাইলে নয়। মিনিফিকেশন আপনার প্রয়োজন নেই এমন একটি সিলেক্টর সরাতে পারে না — আপনার HTML প্রকৃতপক্ষে কোন সিলেক্টর ব্যবহার করে তা এর জানা নেই।

বান্ডলিং ভিন্ন একটি সমস্যা সমাধান করে: এটি একাধিক CSS ফাইলকে একটিতে যুক্ত করে, HTTP রিকোয়েস্টের সংখ্যা কমায়। HTTP/2-এর আগে, প্রতিটি অতিরিক্ত স্টাইলশিট মানে একটি অতিরিক্ত TCP রাউন্ড-ট্রিপ; বান্ডলিং সেই ওভারহেড বাদ দিত। HTTP/2 মাল্টিপ্লেক্সিং-এর অধীনে, রিকোয়েস্ট লেটেন্সির জন্য বান্ডলিং কম গুরুত্বপূর্ণ, কিন্তু তা এখনও হেডার ওভারহেড কমায় এবং আপনার পুরো CSS একটি ভার্সনড ফাইলে থাকলে ক্যাশ এফিশিয়েন্সি উন্নত করতে পারে। বান্ডলিং পৃথক রুলকে ছোট করে না — এটি শুধু ফাইল মার্জ করে।

ট্রি-শেকিং (বা PurgeCSS, CSS-এর সমতুল্য) সেখানেই সবচেয়ে বড় সাশ্রয় হয় যখন আপনি একটি CSS ফ্রেমওয়ার্ক ব্যবহার করেন। Bootstrap, Tailwind CSS এবং Bulma প্রতিটি কম্পোনেন্ট ও ইউটিলিটি কম্বিনেশন কভার করা হাজারো সিলেক্টর নিয়ে আসে। আপনার আসল প্রজেক্ট হয়তো তার মাত্র ৫–১৫% ব্যবহার করে। ট্রি-শেকিং আপনার HTML, JavaScript এবং টেমপ্লেট ফাইল স্ক্যান করে প্রকৃতপক্ষে রেফারেন্স করা ক্লাস নাম ও সিলেক্টর খুঁজে বের করে, তারপর CSS আউটপুট থেকে বাকি সব সরিয়ে দেয়। সব ইউটিলিটি সক্রিয় থাকা একটি Tailwind প্রজেক্ট ৩ MB-রও বেশি CSS দিয়ে শুরু হয়; ট্রি-শেকিং-এর পর এটি সাধারণত ৫–৩০ KB-এ নেমে আসে — মিনিফিকেশনের আগেই। এই তিনটি কৌশল বিল্ড পাইপলাইনের পরিপূরক ধাপ, বিকল্প নয়: প্রথমে অব্যবহৃত রুল সরাতে ট্রি-শেক করুন, ফাইল মার্জ করতে বান্ডল করুন, তারপর ফলাফল মিনিফাই করুন। তিনটি একসাথে সম্ভাব্য সবচেয়ে ছোট স্টাইলশিট তৈরি করে।

প্রফেশনাল CSS মিনিফিকেশন টুল — এবং কখন কোনটি ব্যবহার করবেন

cssnano অটোমেটেড পাইপলাইনের জন্য ইন্ডাস্ট্রি স্ট্যান্ডার্ড। এটি একটি PostCSS প্লাগইন, তাই এটি সরাসরি যেকোনো PostCSS ওয়ার্কফ্লোতে এবং তার সূত্রে Vite, webpack ও Parcel-এ যুক্ত হয়, যাদের সবগুলোতে বিল্ট-ইন PostCSS সাপোর্ট রয়েছে। cssnano একটি কনফিগারযোগ্য সেট ট্রান্সফর্ম চালায় — হোয়াইটস্পেস রিমুভালের মতো নিরাপদ ডিফল্ট থেকে শর্টহ্যান্ড মার্জিং-এর মতো অ্যাডভান্সড পাস পর্যন্ত — এবং সোর্স ম্যাপ তৈরি করে যাতে DevTools এখনও আসল সোর্স লাইন দেখাতে পারে। CleanCSS একটি পুরনো কিন্তু এখনও ব্যাপকভাবে ব্যবহৃত Node.js বিকল্প; এটি দ্রুত এবং তাৎক্ষণিক ব্যবহারের জন্য cleancss.com-এ একটি ওয়েব ইন্টারফেস সহ আসে। যেসব টিম ইতিমধ্যে তাদের পাইপলাইনে PostCSS ব্যবহার করছে, তাদের জন্য cssnano ডিফল্ট পছন্দ; PostCSS ছাড়া প্রজেক্টের জন্য, CleanCSS একটি স্ট্যান্ডঅ্যালোন টুল হিসেবে ভালো কাজ করে।

LightningCSS (আগে Parcel CSS নামে পরিচিত) হলো একটি Rust-ভিত্তিক CSS পার্সার, ট্রান্সফরমার এবং মিনিফায়ার যা বড় স্টাইলশিটে জাভাস্ক্রিপ্ট-ভিত্তিক টুলের চেয়ে প্রায় ১০০× দ্রুত বেঞ্চমার্ক করে। এটি একটি একক পাসেই মিনিফিকেশন, ভেন্ডর প্রিফিক্স লোয়ারিং, এবং ভবিষ্যৎ CSS সিনট্যাক্স ট্রান্সফর্ম হ্যান্ডেল করে। Vite 4.4+ তার ডিফল্ট esbuild CSS প্রসেসিং-এর পাশাপাশি LightningCSS-কে একটি অপ্ট-ইন মিনিফায়ার হিসেবে শিপ করে। esbuild-এর বিল্ট-ইন CSS বান্ডলার এবং মিনিফায়ারও Go-তে লেখা এবং Node.js টুলের চেয়ে অনেক দ্রুত, যদিও এটি cssnano-এর চেয়ে কম অ্যাডভান্সড ট্রান্সফর্ম হ্যান্ডেল করে। যেসব বড় ডিজাইন সিস্টেম বা মনোরেপোতে CSS বিল্ড টাইম পরিমাপযোগ্য, সেখানে LightningCSS বা esbuild মূল্যায়ন করার মতো।

এই টুলের মতো একটি ম্যানুয়াল অনলাইন মিনিফায়ার সেই ফাঁক পূরণ করে যা বিল্ড টুল পূরণ করতে পারে না: বিল্ড পাইপলাইনের বাইরে থাকা স্টাইলশিট। কাস্টমাইজারে এডিট করা WordPress থিম CSS, একটি HTML ইমেইলের ভেতরে <style> ব্লক, একটি স্ট্যাটিক পেজের জন্য এককালীন স্টাইলশিট, একটি টিউটোরিয়াল থেকে পেস্ট করা স্নিপেট — এগুলোর কোনোটিই Vite বা webpack-এর মধ্য দিয়ে যায় না। এসব ক্ষেত্রে, ব্রাউজার-ভিত্তিক মিনিফায়ারে পেস্ট করা একটি বিল্ড টুল সেটআপ করার চেয়ে দ্রুত। ব্যবহারিক নিয়ম: ভার্সন কন্ট্রোলে থাকা এবং বিল্ড স্টেপযুক্ত যেকোনো কিছুর জন্য একটি বিল্ড টুল (cssnano, LightningCSS, esbuild) ব্যবহার করুন; বাকি সবকিছুর জন্য একটি ম্যানুয়াল মিনিফায়ার ব্যবহার করুন।

সার্ভার সবকিছু gzip করলেও মিনিফিকেশন কেন এখনও গুরুত্বপূর্ণ

একটি সাধারণ ভুল ধারণা হলো, সার্ভার-সাইড কম্প্রেশন (Gzip বা Brotli) CSS মিনিফিকেশনকে অপ্রয়োজনীয় করে দেয়। তা নয় — দুটো কৌশল ভিন্ন সমস্যা আক্রমণ করে এবং প্রতিযোগিতার বদলে একে অপরকে শক্তিশালী করে। Gzip ও Brotli পুরো ফাইল জুড়ে পুনরাবৃত্ত বাইট সিকোয়েন্স খুঁজে সেগুলোকে ব্যাক-রেফারেন্স দিয়ে প্রতিস্থাপন করে কাজ করে। কনটেন্ট যত সমরূপ ও পুনরাবৃত্তিমূলক হবে, কম্প্রেশন রেশিও তত ভালো হবে। মিনিফাইড CSS-এ ছোট প্রপার্টি নাম, মার্জ করা শর্টহ্যান্ড এবং বাদ দেওয়া হোয়াইটস্পেসের বৈচিত্র্য থাকায়, এটি কম ইউনিক টোকেন সিকোয়েন্স তৈরি করে। মিনিফাইড CSS Brotli দিয়ে পাঠালে ফরম্যাটেড আসল কোড Brotli দিয়ে পাঠানোর চেয়ে সাধারণত ৩–৮% ভালো কম্প্রেশন রেশিও দেয় — দুটো ধাপই করার একটি বিনামূল্যের লাভ।

মিনিফিকেশন কম্প্রেশন থেকে স্বাধীনভাবে গুরুত্বপূর্ণ হওয়ার দ্বিতীয় কারণ হলো সব বাইট কম্প্রেস হয় না। একটি ক্লায়েন্ট যা Content-Encoding হেডার উপেক্ষা করে, একটি প্রক্সি যা এনকোডিং সরিয়ে দেয়, একটি CDN মিসকনফিগারেশন, বা একটি সার্ভিস ওয়ার্কার ক্যাশ যাতে একটি আনকম্প্রেসড কপি সংরক্ষিত আছে — এসব ক্ষেত্রে কাঁচা বাইট সার্ভ করা হবে। মিনিফাইড কাঁচা বাইট সবসময় ফরম্যাটেড কাঁচা বাইটের চেয়ে ছোট। পার্স টাইমও আছে: CSS পার্সার বাইট দেখার আগেই নেটওয়ার্ক স্তরে ডিকম্প্রেশন ঘটে, তাই পার্সার সবসময় ডিকম্প্রেসড ফাইল নিয়ে কাজ করে। একটি ছোট ডিকম্প্রেসড ফাইল — অর্থাৎ একটি মিনিফাইড ফাইল — মানে যা তারে ঘটেছে তা নির্বিশেষে দ্রুত পার্স হওয়া। প্রতিটি প্রোডাকশন ওয়ার্কফ্লোতে মিনিফিকেশন এবং কম্প্রেশন একসাথে থাকা উচিত, কোনো একটি বেছে নেওয়ার বিষয় নয়।

Frequently asked questions

CSS মিনিফিকেশন কী?

CSS মিনিফিকেশন ব্রাউজারের প্রয়োজন নেই এমন প্রতিটি ক্যারেক্টার সরায় — স্পেস, ট্যাব, লাইন ব্রেক, প্রতিটি ব্লকের শেষ সেমিকোলন — স্টাইলগুলো কী করে তা না পাল্টেই। উদাহরণস্বরূপ, '.btn {\n color: #ffffff;\n margin: 0px;\n}' (প্রায় ৪৮ বাইট) মিনিফাই হয়ে হয় '.btn{color:#ffffff;margin:0}' (২৮ বাইট)। রেন্ডার হওয়া ফলাফল হুবহু একই। মিনিফাই করা যেকোনো ওয়েব পারফরম্যান্স ওয়ার্কফ্লোর একটি স্ট্যান্ডার্ড ধাপ, কারণ ছোট ফাইল দ্রুত ডাউনলোড ও পার্স হয়, যা Core Web Vitals এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

CSS মিনিফাই করা উচিত কেন?

ছোট স্টাইলশিট মানে তারে কম বাইট, যার মানে দ্রুত ডাউনলোড, দ্রুততর First Contentful Paint এবং ভালো Core Web Vitals — বিশেষত মোবাইল কানেকশনে। একটি ৬০ KB হাতে লেখা স্টাইলশিট প্রায়ই মিনিফাইড হয়ে প্রায় ৪৫ KB-তে নেমে আসে, এবং সার্ভার gzip করলে আরও অনেক ছোট হয়ে যায়। আপনি যে প্রতিটি কিলোবাইট কমান, তা ব্রাউজারকে ফেচ বা পার্স করতে হয় না এমন একটি কিলোবাইট। আপনার প্রোডাকশন বিল্ড স্বয়ংক্রিয়ভাবে মিনিফিকেশন হ্যান্ডেল করলেও, এই টুল এককালীন স্টাইলশিট, WordPress থিম CSS, HTML ইমেইল স্টাইল, বা আপনার সাধারণ বিল্ড পাইপলাইনের বাইরের যেকোনো কিছুর জন্য কাজে আসে।

মিনিফিকেশনের সময় কী সরানো হয়?

হোয়াইটস্পেস (স্পেস, ট্যাব ও নিউলাইন), কমেন্ট, প্রতিটি ক্লোজিং ব্রেসের আগের শেষ সেমিকোলন, এবং <code>{ } : ; , > +</code>-এর মতো চিহ্নের চারপাশের স্পেস সরানো হয়। Aggressive মোডে এটি লিডিং জিরোও সরায় ('0.5em' হয়ে যায় '.5em') এবং জিরো ভ্যালুর একক সরায় ('0px' হয়ে যায় '0')। স্ট্রিং, url() ভ্যালু এবং calc() গণিত কখনও স্পর্শ করা হয় না, তাই আপনার কনটেন্ট ও ডাইনামিক ভ্যালু সঠিক থাকে। আউটপুট লসলেস — প্রতিটি ব্রাউজারে এটি আসল কোডের মতোই হুবহু রেন্ডার হয়।

মিনিফাইড CSS কতটা ছোট হয়?

কাঁচা টেক্সট হিসেবে, মিনিফিকেশন সাধারণত ১০–৩০% বাঁচায়। সার্ভারে gzip বা Brotli-এর সাথে মিলিয়ে, মোট হ্রাস সাধারণত ৭০–৮০%। একটি বাস্তব উদাহরণ: একটি ১০০ KB হাতে লেখা স্টাইলশিট মিনিফাই হয়ে প্রায় ৭৫ KB হয়, তারপর প্রায় ১৮ KB gzip হয় — তাই দর্শকরা আসলটির একটি ভগ্নাংশ ডাউনলোড করেন। এই টুল মিনিফাইড সাইজ, gzip অনুমান এবং সঠিক বাঁচানো বাইট পাশাপাশি দেখায়, তাই একটি আলাদা পরিমাপ ধাপ চালানো ছাড়াই আপনি দুটো সাশ্রয়ই একসাথে দেখতে পারেন।

CSS মিনিফাই করলে কি এটি কীভাবে কাজ করে তা পাল্টে যায়?

না। মিনিফিকেশন শুধু ব্রাউজার ইতিমধ্যে উপেক্ষা করে এমন ক্যারেক্টার সরায়, তাই প্রতিটি সিলেক্টর, প্রপার্টি ও ভ্যালু অর্থগতভাবে বাইট-বাই-বাইট সমতুল্য থাকে। '.a { color: red; }' এবং '.a{color:red}' হুবহু একই রেন্ডার করে। একটি মিনিফায়ার যদি স্ট্রিং, url() এবং calc() সুরক্ষিত রাখে — এটি রাখে — তাহলে আউটপুট লসলেস। অর্থপূর্ণ কিছু পাল্টায়নি তা যাচাই করতে আপনি সবসময় মিনিফাইড আউটপুট বিউটিফাই করতে পারেন, এই একই টুলে বিল্ট-ইন Beautify টগল ব্যবহার করে।

মিনিফিকেশন এবং gzip/কম্প্রেশনের মধ্যে পার্থক্য কী?

মিনিফিকেশন সোর্স টেক্সটকেই ছোট করে দেয় — আপনি একটি শারীরিকভাবে ছোট ফাইল পাঠান। Gzip ও Brotli ট্রান্সফারের সময় বাইট কম্প্রেস করে এবং ব্রাউজার পৌঁছালে স্বচ্ছভাবে তা ডিকম্প্রেস করে। দুটো একসাথে কাজ করে: প্রথমে সোর্স মিনিফাই করুন, তারপর সার্ভারকে gzip করতে দিন। এ কারণেই এই টুল মিনিফাইড বাইট গণনা এবং একটি gzip করা অনুমান দুটোই দেখায়, যাতে আপনি সম্মিলিত লাভটি দেখতে পারেন। বেশিরভাগ হোস্ট (Nginx, Apache, Cloudflare, Netlify, Vercel) স্বয়ংক্রিয়ভাবে gzip বা Brotli সক্রিয় করে।

CSS আনমিনিফাই বা বিউটিফাই কীভাবে করব?

উপরের টগল দিয়ে Beautify মোডে সুইচ করুন, তারপর আপনার মিনিফাইড CSS পেস্ট করুন। টুলটি কোড পুনরায় ইন্ডেন্ট করে, প্রতিটি ডিক্লারেশন নিজের লাইনে বসায় এবং প্রতিটি কোলনের পর একটি স্পেস যোগ করে — '.a{color:red;margin:0}' কে ফিরিয়ে দেয় পড়ার যোগ্য, ফরম্যাটেড CSS-এ। ২-স্পেস, ৪-স্পেস বা ট্যাব ইন্ডেন্টেশন বেছে নিতে পারেন। এটি মিনিফাই করার বিপরীত, প্রোডাকশনে পাওয়া একটি মিনিফাইড স্টাইলশিট পরীক্ষা করার জন্য আদর্শ। মিনিফাই ও বিউটিফাই বিপরীতমুখী হওয়ায়, আপনি প্রোডাকশন CSS পেস্ট করে, পড়ে, পরিবর্তন করে আবার মিনিফাই করতে পারেন — পেজ ছাড়াই।

CSS মিনিফায়ার এবং কম্প্রেসরের মধ্যে পার্থক্য কী?

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

অনলাইনে CSS মিনিফাই করা কি নিরাপদ?

এই টুল দিয়ে, হ্যাঁ — কারণ এটি সম্পূর্ণভাবে আপনার ব্রাউজারে JavaScript ব্যবহার করে চলে। আপনার CSS কখনও সার্ভারে পাঠানো, লগ করা বা সংরক্ষণ করা হয় না, তাই প্রোপ্রাইটারি, অপ্রকাশিত বা ক্লায়েন্ট স্টাইলশিটও সম্পূর্ণভাবে আপনার ডিভাইসে থাকে। নেটওয়ার্ক বিচ্ছিন্ন করে মিনিফাই করে এটি নিশ্চিত করতে পারেন: এটি তখনও কাজ করে। এর বিপরীতে, cssminifier.com এবং freeformatter.com-এর CSS মিনিফায়ার দুটোই আপনার কোড তাদের সার্ভারে আপলোড করে, যা API পাথ, ইন্টার্নাল কালার স্কিম বা কনফিডেনশিয়াল নেমিং কনভেনশনযুক্ত CSS-এর জন্য একটি প্রকৃত প্রাইভেসি উদ্বেগ।

মিনিফাই করার সময় কি লাইসেন্স (/*! */) কমেন্ট রাখা যায়?

হ্যাঁ। 'Preserve /*! */ license' অপশনটি চালু রাখুন, আর /*! দিয়ে শুরু হওয়া যেকোনো কমেন্ট — বান্ডলার ও লাইব্রেরিগুলো লাইসেন্স ব্যানারের জন্য যে কনভেনশন ব্যবহার করে — মিনিফিকেশনের পরও টিকে থাকবে, যেখানে সাধারণ /* */ কমেন্ট বাদ যাবে। প্রতিটি কমেন্ট রাখতে চাইলে 'Keep all comments' চালু করুন। এটি ওপেন-সোর্স লাইব্রেরি বিতরণের জন্য গুরুত্বপূর্ণ, যেখানে মিনিফাইড ফাইলে একটি লাইসেন্স থাকা আবশ্যক।

আমার বান্ডলার মিনিফাই করলেও কি আলাদাভাবে CSS মিনিফাই করার দরকার আছে?

আপনার বিল্ড টুল — Vite, webpack, বা PostCSS সহ cssnano — যদি ইতিমধ্যে আপনার বান্ডল মিনিফাই করে, তাহলে সেই ফাইলগুলো পুনরায় মিনিফাই করার দরকার নেই। কিন্তু বান্ডলারের মধ্য দিয়ে কখনও যায় না এমন CSS-এর জন্য এই টুল কাজে আসে: হাতে এডিট করা স্টাইলশিট, WordPress বা CMS থিম CSS, HTML ইমেইল স্টাইল, ইনলাইন <style> ব্লক, বা একটি দ্রুত এককালীন স্নিপেট যা আপনি শুধু পেস্ট করে ছোট করতে চান। এটি আপনার বান্ডলারের মিনিফিকেশন আউটপুটকে একটি বেসলাইনের বিপরীতে যাচাই করার জন্যও কাজে আসে।

cssnano, CleanCSS বা cssminifier.com-এর সাথে এটি কেমন তুলনীয়?

cssnano এবং CleanCSS অটোমেটেড বিল্ড পাইপলাইনের জন্য শক্তিশালী, কিন্তু লোকালি Node.js ইনস্টল থাকা প্রয়োজন — দ্রুত পেস্ট-অ্যান্ড-গো অপশন নেই। cssminifier.com সার্ভার-সাইড, অর্থাৎ আপনার স্টাইলশিট আপনার মেশিন ছেড়ে যায়। TopTal CSS মিনিফায়ারও সার্ভার-ভিত্তিক। এই টুল সম্পূর্ণভাবে আপনার ব্রাউজারে চলে: কিছুই কোথাও পাঠানো হয় না, কোনো ইনস্টলের দরকার নেই, এবং সঙ্গে সঙ্গে মিনিফাইড সাইজ ও gzip অনুমান পান। এতে একই পেজে একটি বিউটিফায়ারও রয়েছে, তাই ট্যাব পাল্টানো ছাড়াই সামনে-পিছনে যেতে পারেন।

আমি কি একটি .css ফাইল, নাকি শুধু পেস্ট করা কোড মিনিফাই করতে পারি?

দুটোই। ইনপুট বক্সে CSS পেস্ট করুন, অথবা ড্রপ জোনে একটি .css ফাইল ড্র্যাগ ও ড্রপ করুন (বা ব্রাউজ করতে ক্লিক করুন)। মিনিফাইড ফলাফল এক ক্লিকে কপি করা যায় বা style.min.css হিসেবে ডাউনলোড করা যায়; বিউটিফাইড আউটপুট ডাউনলোড হয় style.css হিসেবে। ড্র্যাগ-অ্যান্ড-ড্রপ ডেস্কটপ ব্রাউজারে কাজ করে; মোবাইলে (iPhone, Android) আপনার Files অ্যাপ থেকে আপলোড করতে ফাইল পিকার ব্যবহার করুন।

gzip করা সাইজ কী এবং আমার সার্ভার কি ইতিমধ্যে gzip করছে?

gzip করা সাইজ হলো সার্ভার ফাইল কম্প্রেস করার পর প্রকৃতপক্ষে ব্রাউজারে কত বাইট যায় — সাধারণত দর্শকরা যা অনুভব করেন সেই সংখ্যা। বেশিরভাগ হোস্ট (Nginx, Apache, Cloudflare, Netlify, Vercel) ডিফল্টভাবে gzip বা Brotli সক্রিয় রাখে, তাই আগে মিনিফাই করে কম্প্রেশনকে কাজ শেষ করতে দেওয়া লাভজনক। এখানকার gzip সংখ্যাটি আপনার ব্রাউজারের নিজস্ব কম্প্রেশন API ব্যবহার করে লোকালি হিসাব করা হয়, তাই কিছুই আপলোড হয় না। এটি একটি অনুমান — প্রকৃত সার্ভার কম্প্রেশন gzip লেভেল অনুযায়ী সামান্য ভিন্ন হতে পারে।

দশমিক, hex, অক্টাল ও বাইনারিতে অনুসন্ধানযোগ্য অক্ষর কোড।

ডেভেলপার