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

বাইটগুলো আসলে কোথায় যায়

সাশ্রয়ের বেশিরভাগই আসে হোয়াইটস্পেস ও কমেন্ট থেকে, আর হাতে লেখা স্টাইলশিটে তা অনেকখানি — ইনডেন্টেশন, রুলের মাঝের ফাঁকা লাইন, আর বড় ফাইলে পথ খুঁজে পাওয়ার জন্য সেকশন হেডার, সার্ভ করার পর সবই নিছক বাড়তি ভার। এর বাইরে মানগুলো এমনভাবে ছোট করা হয়, যাতে অর্থ বদলাতে না পারে: #ffffff লেখা রং হয় #fff, 0px হয় 0, কারণ শূন্যের কোনো একক লাগে না, 0.5em-এর শুরুর শূন্যটি বাদ যায়, আর margin: 10px 10px 10px 10px ছোট হয়ে হয় margin: 10px।

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

নেস্টেড রুল ও আধুনিক মিডিয়া রেঞ্জ সিনট্যাক্স মিনিফাই না করে প্রত্যাখ্যান করা হয়, আর এর কারণটি বলা দরকার, কারণ বেশিরভাগ টুল ঠিক উল্টোটা করে। এর পেছনের পার্সারটি এই দুটি ফিচারের আগের, আর অচেনা কিছু পেলে এটি ত্রুটি দেখায় না — নিঃশব্দে মুছে ফেলে, ফলে নেস্টেড ব্লক আউটপুট থেকে স্রেফ উধাও হয়ে যায় আর পেজ এমন স্টাইল হারায়, যার খবর কেউ দেয়নি। ফাইলটি প্রত্যাখ্যান করাই সৎ উত্তর। আপনার স্টাইলশিটে নেটিভ নেস্টিং বা @media (400px <= width <= 700px) থাকলে নিচের কোনো টুল ব্যবহার করুন।

মার্কআপের মতোই ফলাফল বিচার করুন কমপ্রেশনের পরে। স্টাইলশিট সার্ভ হয় gzip বা brotli দিয়ে কমপ্রেস করে, আর এই অ্যালগরিদমগুলো বারবার আসা হোয়াইটস্পেস এমনিতেই দারুণভাবে সামলায় — তাই যে ফাইল মিনিফাই করে ৩০ শতাংশ ছোট হয়, নেটওয়ার্কে সেটি হয়তো মাত্র ৫ শতাংশ ছোট হয়। সাশ্রয়টি সত্যি, তবে শিরোনামের সংখ্যার চেয়ে কম।

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

আধুনিক স্টাইলশিটের জন্য সঠিক টুল Lightning CSS: এটি নেস্টিং, মিডিয়া রেঞ্জ, কালার ফাংশনসহ গত কয়েক বছরে যোগ হওয়া সবকিছু বোঝে, পুরোনো যেকোনো টুলের চেয়ে বেশি ছোট করে, আর সেই সঙ্গে নতুন সিনট্যাক্সকে পুরোনো ব্রাউজারের জন্য ট্রান্সপাইলও করে দেয়। esbuild --minify style.css প্রায় ততটাই ভালো এবং খুবই দ্রুত। দুটোই ব্রাউজারের ট্যাবে নয়, বিল্ডের ধাপে ব্যবহারের জন্য।

এর চেয়ে অনেক বড় লাভ সাধারণত যে রুল ব্যবহার হচ্ছে না, তা সরিয়ে ফেলা। ইউটিলিটি ফ্রেমওয়ার্ক বা কম্পোনেন্ট লাইব্রেরি দিয়ে তৈরি সাইট প্রায়ই এমন স্টাইলশিট পাঠায়, যার বেশিরভাগ অংশ পেজের কোনো কিছুর সঙ্গেই মেলে না — আর PurgeCSS বা ফ্রেমওয়ার্কের নিজস্ব বিল্ড সেটি দশ গুণ পর্যন্ত কমিয়ে দেবে। অব্যবহৃত CSS মিনিফাই করলে অব্যবহৃত CSS-ই ছোট হয়; আসল সমাধান হলো তা মুছে ফেলা।