CSS منی فائر — مفت براؤزر بیسڈ کمپریسر

Pakistan میں front-end ٹیمیں CSS منی فائنگ کو پروڈکشن build کا لازمی قدم مانتی ہیں کیونکہ Google کا Lighthouse Performance آڈٹ بغیر کمپریس stylesheets کو flag کرتا ہے۔ Daraz Pakistan اور Zameen.com جیسے پلیٹ فارمز کے ڈویلپرز تبصروں، indentation اور verbose hex forms کو ہٹانے کے بعد ہاتھ سے لکھے CSS میں 20 سے 40 فیصد کمی پاتے ہیں، جو Largest Contentful Paint اسکور کو amber سے green میں لے آنے کے لیے کافی ہے۔ Commit سے پہلے براؤزر ٹیب میں یہ عمل چلانے سے PostCSS plugin انسٹال کیے بغیر وہی بائٹ کاؤنٹ ملتا ہے۔

CSS منی فائنگ کیسے کام کرتی ہے؟

منی فائر آپ کے stylesheet کو ایک state-aware tokeniser سے چلاتا ہے جو محفوظ علاقوں (string literals اور url() ویلیوز) اور قابل ترمیم سفید جگہ میں فرق کرتا ہے جہاں چھوٹا کرنا اور ہٹانا محفوظ ہے۔

strings اور URLs محفوظ رکھنا. کسی دوسرے transform سے پہلے، tokeniser ہر quoted string ("…" یا '…') اور ہر url(…) argument کو پہچان کر بالکل محفوظ رکھتا ہے۔ بعد کے مراحل ان bytes کو کبھی نہیں چھوتے، اس لیے اسپیس والا background-image URL یا punctuation والی content property بالکل محفوظ رہتی ہے۔
تبصرے ہٹانا. جب ٹوگل آن ہو تو /* … */ blocks ہٹا دیے جاتے ہیں۔ اگر license-comment ٹوگل بھی آن ہو تو /*! … */ blocks باقی رہتے ہیں تاکہ MIT، Apache اور BSD licence headers آؤٹ پٹ میں موجود رہیں جیسا کہ ان licences کا تقاضا ہے۔
سفید جگہ چھوٹی کرنا. اسپیس، tabs اور نئی سطروں کی ہر قطار ایک اسپیس تک سمٹ جاتی ہے، پھر CSS structural characters {، }، ;، :، اور , کے گرد سفید جگہ مکمل طور پر ہٹ جاتی ہے۔ selector اور value lists اسی طرح دوبارہ بہتی ہیں جیسے براؤزر کا پارسر انہیں پڑھتا ہے۔
ویلیوز بہتر کرنا. اختیاری مراحل hex color codes کو چھوٹے حروف میں بدلتے ہیں، paired 6-digit hex channels کو 3-digit shorthand میں چھوٹا کرتے ہیں (#aabbcc → #abc)، اور صفر ویلیوز سے dimension units ہٹاتے ہیں (0px → 0)۔ zero-unit مرحلہ transform() calls کے اندر ویلیوز چھوڑ دیتا ہے جہاں units اہم ہیں۔
بائٹ بچت کی رپورٹ. اصل اور منی فائڈ دونوں متن new TextEncoder().encode(…).byteLength سے ناپے جاتے ہیں — وہی UTF-8 بائٹ کاؤنٹ جو CDN یا HTTP سرور وائر پر دیکھے گا۔ میٹرک پٹی اصل سائز، منی فائڈ سائز، بچے بائٹس اور بچت فیصد دکھاتی ہے۔

CSS کو منی فائی کیوں کریں؟

render-blocking لوڈ تیز ہوتا ہے. براؤزر CSS parsing مکمل ہونے تک ایک pixel بھی نہیں بناتا۔ 30 فیصد stylesheet کمی یہ بلاکنگ کم کرتی ہے، First Contentful Paint بہتر ہوتا ہے، اور یہ براہ راست آپ کے Lighthouse Performance اسکور میں نظر آتا ہے۔
CDN egress کم خرچ. CloudFront، Cloudflare اور Fastly سبھی گیگابائٹ egress کے حساب سے فیس لیتے ہیں۔ ہر صفحہ ویو پر ship ہونے والے stylesheet سے 20 فیصد کٹوتی ماہانہ چند ملین ویوز کے بعد invoice پر حقیقی رقم بن جاتی ہے۔
چھوٹے embeds اور email CSS. Transactional email templates Outlook اور Gmail کی rendering quirks سے بچنے کے لیے CSS inline کرتے ہیں، اور ہر اضافی بائٹ آپ کو Gmail کی 102 KB clip threshold کے قریب لاتا ہے۔ Inline کرنے سے پہلے منی فائی کرنا message کو cap سے نیچے رکھتا ہے۔
build-tool dependency کی ضرورت نہیں. فوری one-off کام، build pipeline کے بغیر legacy repos، اور air-gapped ماحول میں ہمیشہ Node toolchain کی گنجائش نہیں ہوتی۔ آپ یہاں PostCSS، cssnano یا کچھ بھی install کیے بغیر یہ مرحلہ چلا سکتے ہیں۔

عام استعمالات

CSS منی فائنگ تقریباً ہر front-end build pipeline کے آخر میں اور کچھ runtime سیاق و سباق میں ظاہر ہوتی ہے جہاں بائٹ کاؤنٹ اہمیت رکھتا ہے۔

پروڈکشن build pipelines: Webpack، Vite، Rollup اور Parcel سبھی اپنے production mode defaults میں CSS منی فائنگ مرحلہ شامل کرتے ہیں۔ Commit سے پہلے یہاں مرحلہ چلانا آپ کو مکمل build trigger کیے بغیر آؤٹ پٹ validate کرنے دیتا ہے۔
<style> tags میں CSS embed کرنا: وہ server-rendered frameworks جو critical CSS کو HTML document میں inline کرتے ہیں standalone stylesheets جیسی ہی بائٹ بچت سے فائدہ اٹھاتے ہیں، اور چھوٹا inline CSS Time to First Byte کم کرتا ہے۔
Transactional اور marketing email: email HTML تمام CSS inline کرتی ہے، اس لیے stylesheet میں ہر kilobyte کل message سائز میں اضافہ کرتا ہے۔ Inline کرنے سے پہلے منی فائی کرنا messages کو ESP size caps سے کافی نیچے رکھتا ہے۔

ایک عملی مثال

دو-اسپیس indentation کے ساتھ 1 KB ruleset، selectors کے درمیان blank lines، اوپر licence comment block، اور #FFFFFF جیسے verbose hex رنگ اور margin: 0px جیسے zero-padded margins پیسٹ کریں۔ ہر آپشن آن ہونے پر آؤٹ پٹ تقریباً 600 bytes پر سمٹتا ہے — 40 فیصد بچت — جبکہ render شدہ صفحہ ماخذ کے بالکل یکساں لگتا ہے۔

کیا منی فائنگ میرا CSS رویہ بدلتی ہے؟

نہیں، ڈیفالٹ ٹوگلز کے ساتھ۔ منی فائر صرف وہ bytes ہٹاتا ہے جنہیں CSS پارسر پہلے ہی رد کر دیتا ہے — سفید جگہ، تبصرے، اختیاری آخری semicolon — اور transform() کے اندر نہیں جاتا جہاں units اہم ہیں۔ ہر selector، property اور value محفوظ رہتا ہے۔

کیا یہ SCSS یا LESS کے ساتھ کام کرتا ہے؟

صرف سادہ CSS میں compile کرنے کے بعد۔ SCSS اور LESS syntax (variables، nesting، mixins، & parent selectors) درست CSS نہیں ہے اور منی فائر اسے خراب کر دے گا۔ پہلے preprocessor source compile کریں، پھر compile شدہ آؤٹ پٹ یہاں پیسٹ کریں۔

میرے licence تبصرے کیوں ہٹ رہے ہیں؟

"تبصرے ہٹائیں" ڈیفالٹ طور پر آن ہے اور ہر /* … */ block ہٹاتا ہے۔ /*! سے شروع ہونے والے blocks رکھنے کے لیے "/*! licence تبصرے محفوظ رکھیں" فعال کریں۔ MIT، Apache اور BSD سبھی تقسیم شدہ CSS کے ساتھ copyright header شامل کرنا لازمی قرار دیتے ہیں۔

میں کتنا بچا سکتا ہوں؟

ہاتھ سے لکھے CSS میں عام طور پر 15 سے 35 فیصد کمی ہوتی ہے۔ بہت زیادہ تبصروں یا گہرے indentation والی files بہت سے color literals کے ساتھ 40 فیصد تک پہنچ سکتی ہیں۔ Sass یا CSS-in-JS سے compiled آؤٹ پٹ اکثر پہلے سے جزوی طور پر minified ہوتا ہے اور کم بچاتا ہے — عام طور پر 5 سے 15 فیصد۔

CSS منی فائنگ براؤزر ٹیب میں چلائیں اور Node toolchain کو مکمل طور پر چھوڑ دیں۔ اوپر stylesheet پیسٹ کریں، pass کتنا aggressive ہو یہ طے کرنے کے لیے options ٹوگل کریں، پھر آؤٹ پٹ کاپی کریں یا .min.css کے طور پر ڈاؤن لوڈ کریں۔ کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، کوئی vendor لائبریری نہیں۔

CSS منی فائی کریں _

// متعلقہ ٹولز