CSS मिनिफायर

CSS मिनिफ़िकेशन के बारे में

यह मान लेना आकर्षक है कि चूँकि Brotli पाठ धाराओं को इतनी आक्रामकता से संपीड़ित करता है, एक अलग minification पास का सीमांत मूल्य ढह गया है। Sentry के engineering blog ने ठीक यही तर्क अप्रैल 2024 में चलाया और विपरीत निष्कर्ष निकाला: minification आज भी सार्थक है। वैश्विक मध्य मोबाइल इंटरनेट गति लगभग 53 Mbps और CDN edge पर सर्वव्यापी रूप से तैनात Brotli के साथ, «यदि आप प्रत्येक page load पर 100 resources के कुल में से केवल 1 KB भी कम कर सकें, तो आप उन उपयोगकर्ताओं के लिए अपनी page speed में 15 ms का सुधार कर सकते हैं।» किसी भी गैर-तुच्छ site के visitor base से गुणा होने पर, यह एक वास्तविक bandwidth bill, मोबाइल devices पर एक वास्तविक battery cost, और एक Lighthouse report पर एक वास्तविक स्थिति परिवर्तन बन जाता है।

तंत्र मायने रखता है। Gzip और Brotli सामान्य-उद्देश्य lossless compressor हैं जो दोहराई गई byte sequences की तलाश करते हैं और प्रत्येक पुनरावृत्ति को एक sliding-window dictionary में back-reference के रूप में encode करते हैं। दो CSS files जो एक ही browser व्यवहार उत्पन्न करती हैं लेकिन भिन्न bytes रखती हैं, दो भिन्न आकारों में compress होंगी। margin: 10px 10px 10px 10px; और margin:10px अर्थात्मक रूप से समान हैं, लेकिन पहले में encode किए जाने के लिए अधिक characters हैं भले ही कई दोहराव हों, Brotli दोहराव खोजने में अच्छा है लेकिन यह नहीं समझता कि दो वाक्यविन्यास रूप से भिन्न CSS strings एक ही नियम व्यक्त करते हैं। केवल एक CSS-aware minifier ही ऐसा कर सकता है। Cloudflare का learning hub विशिष्ट कच्चे-पाठ कमी को 30-50 % पर रखता है; ऊपर Brotli एक मामूली 5-15 % और जोड़ता है, लेकिन यह शून्य नहीं है, और पैमाने पर यह जुड़ जाता है।

CSS rendering रोकता है, और इसीलिए bytes मायने रखते हैं

Largest Contentful Paint तीन Core Web Vitals में से एक है; «अच्छे» के लिए सीमा page loads के 75वें percentile पर 2.5 सेकंड है। Lighthouse का समग्र Performance score LCP को कुल का 25 % भार देता है। CSS default रूप से rendering रोकता है, जब browser एक <link rel="stylesheet"> देखता है तो वह rendering रोक देता है जब तक कि वह file download न हो जाए और CSSOM न बन जाए, क्योंकि stylesheet में बाद के नियम पहले के नियमों को override कर सकते हैं और browser बिना style वाली या गलत style वाली स्थिति में paint करने का जोखिम नहीं उठा सकता। CSS Object Model, DOM के विपरीत, क्रमिक रूप से नहीं बनाया जाता है, parser को यह जानने के लिए पूरी stylesheet की आवश्यकता है कि कौन से नियम जीतते हैं। JavaScript भी इस पर रुकता है: scripts तब तक सुरक्षित रूप से नहीं चल सकते जब तक CSSOM अधूरा है। व्यावहारिक निहितार्थ यह है कि render-blocking CSS का प्रत्येक byte हर Core Web Vital के critical path पर बैठता है। एक 100 KB का minified bundle आपको एक तेज़ 4G link पर 150 KB unminified की तुलना में शायद 30 ms बचाता है, प्रति पृष्ठ छोटा, लेकिन Vodafone के case study ने 31 % LCP सुधार से 8 % बिक्री वृद्धि दिखाई। दूसरे क्रम का प्रभाव और भी बड़ा है: तेज़ LCP Lighthouse scores बढ़ाता है, जो उन sites के लिए Google search दृश्यता बढ़ाता है जहाँ Web Vitals एक ज्ञात ranking signal है।

CSS minifier वास्तव में क्या करता है

• Whitespace हटाना. Spaces, tabs और newlines जो केवल मानवीय पठनीयता के लिए मौजूद हैं, हटा दिए जाते हैं। strings के अंदर का whitespace (font-family नाम, content मान, URLs) और tokens को अलग करने वाला whitespace बना रहता है, 1px solid red 1pxsolidred नहीं बन सकता क्योंकि parser तीन मानों को पहचान नहीं पाएगा।
• Comment हटाना. /* ... */ blocks हटा दिए जाते हैं। व्यापक रूप से सम्मानित परंपरा यह है कि /*! से शुरू होने वाली comments को महत्वपूर्ण माना जाता है (आमतौर पर copyright या license सूचनाएँ) और cssnano, clean-css, lightningcss और esbuild जैसे production minifiers द्वारा संरक्षित की जाती हैं।
• Zero-unit collapsing. 0px, 0em, 0%, 0pt, 0vw सभी 0 में कम हो जाते हैं, क्योंकि शून्य लंबाई unit की परवाह किए बिना समान लंबाई है। सावधानी पूर्ण edge case (Miriam Suzanne का «Not All Zeros are Equal,» 2022): calc(), min(), max() और clamp() के अंदर शून्य, और CSS custom properties के अंदर, सुरक्षित रूप से strip नहीं किए जा सकते क्योंकि CSS Values and Units Module Level 4 के typed-arithmetic नियमों को लंबाई को संख्या से अलग करने के लिए unit की आवश्यकता है। transition में 0s 0 नहीं बन सकता क्योंकि property को समय मान की आवश्यकता है।
• Hex रंग छोटा करना. छह-अंकीय hex रंग जहाँ अंकों का प्रत्येक जोड़ा समान है, तीन अंकों में लिखा जा सकता है: #FFFFFF → #FFF, #336699 → #369। CSS Color spec तीन-अंकीय रूप को बिल्कुल समतुल्य के रूप में परिभाषित करता है और CSS1 के बाद से ऐसा करता आ रहा है।
• Trailing semicolon हटाना. rule block में अंतिम declaration और closing brace के बीच का semicolon वैकल्पिक है, इसलिए color:red;} color:red} बन जाता है। प्रति नियम एक byte, जो जुड़ता है।
• Keyword lowercasing. CSS keywords case-insensitive हैं, इसलिए BLOCK और block का अर्थ एक ही है, लेकिन lowercase बेहतर compress होता है और एकसमान tokenize होता है।
• Shorthand collapsing. margin: 10px 10px 10px 10px margin: 10px बन जाता है; margin: 10px 20px 10px 20px margin: 10px 20px बन जाता है। Production minifiers margin, padding, border, border-radius, background, font, transition, animation और grid family के लिए shorthand नियम जानते हैं।

Minifier vs optimizer, सुरक्षित-vs-आक्रामक रेखा

cssnano का दस्तावेज़ीकरण इसके «default» preset (केवल सुरक्षित परिवर्तन) और इसके «advanced» preset (आक्रामक परिवर्तन जो आपके CSS के बारे में मान्यताओं पर निर्भर हैं) के बीच अंतर करता है। Default preset वह है जिसे आप बिना सोचे चालू करते हैं; advanced preset वह है जिसे आप audit के बाद चालू करते हैं, क्योंकि कुछ optimizations सूक्ष्म cascade व्यवहार, vendor prefixes, या browser quirks पर निर्भर code को तोड़ सकती हैं। Advanced परिवर्तन compressibility बेहतर करने के लिए stylesheet के भीतर नियमों को पुन-क्रमित कर सकते हैं, जोखिम भरा यदि आपके पास display: flex; display: grid; जैसे जानबूझकर duplicate-property fallbacks हैं। वे समान नियम-निकायों को comma-separated selector lists में मर्ज कर सकते हैं। वे override की गई declarations को मृत code के रूप में हटा सकते हैं, उसी fallback चेतावनी के साथ। वे display मान, transform functions और custom identifiers को normalize कर सकते हैं, translate3d(0,0,0) translate(0) में सरल हो सकता है यदि आप GPU-promotion side-effect पर निर्भर नहीं हैं। वे एक Browserslist target के आधार पर अप्रयुक्त vendor prefixes को छोड़ सकते हैं। csso (Yandex, 2011) खुद को एक शुद्ध minifier के बजाय एक «structural optimizer» के रूप में वर्णित करता है, तीन transformation श्रेणियों के साथ: सफ़ाई, संपीड़न, और पुनर्संरचना। Lightning CSS उसी विभाजन का वर्णन करता है: एक «minify» पास जो हमेशा सुरक्षित है, साथ ही targets-aware परिवर्तनों का एक सेट जो आधुनिक CSS को नीचे लाते हैं जिसे पुराने browsers समझते हैं। ईमानदार रेखा: minifier वह है जिसे आप बिना सोचे किसी भी CSS file पर लागू कर सकते हैं; optimizer वह है जिसे आप अपने codebase के ज्ञान के साथ लागू करते हैं।

CSS minification tooling का संक्षिप्त इतिहास

YUI Compressor (2007). Yahoo के Julien Lecomte ने 11 अगस्त 2007 को YUI Compressor की घोषणा की। मूल रिलीज़ केवल JavaScript संभालता था; तीन दिन बाद, संस्करण 2.0 ने Isaac Schlueter द्वारा व्यक्तिगत उपयोग के लिए मूल रूप से लिखे गए एक regex-आधारित CSS minifier को एकीकृत करके CSS समर्थन जोड़ा। YUI Compressor कई वर्षों तक de facto मानक था, विशेष रूप से Java/Maven और Rails-asset-pipeline दुनिया में; इसे आज भी उपयोग किया जाता है, हालाँकि YUI library को स्वयं Yahoo ने 2014 में सेवानिवृत्त कर दिया। YUI Compressor का CSS पक्ष हमेशा regex-आधारित था, AST-आधारित नहीं, एक डिज़ाइन निर्णय जिसके परिणाम बाद में आए छोटे browser-side tools में गूँजते हैं।

clean-css (2011). Jakub Pawlowicz ने 2011 में GitHub पर GoalSmashers संगठन के अंतर्गत clean-css प्रकाशित किया, इसे «Node.js और Web के लिए तेज़ और कुशल CSS optimizer» के रूप में पेश किया। यह विशेष रूप से Node.js ecosystem के लिए डिज़ाइन किया गया पहला प्रमुख CSS minifier था और Grunt और Gulp pipelines में default बन गया। वर्तमान 5.x लाइन npm से लगभग 21 million साप्ताहिक downloads खींचती है, @import inlining, URL rebasing और source maps का समर्थन करती है, और एक स्तरीय «optimization level» मॉडल है जो सुरक्षित-vs-आक्रामक विभाजन को स्पष्ट करता है। csso (2011) Yandex की एक आंतरिक परियोजना के रूप में उत्पन्न हुआ, Vitaly Harisov के एक विचार पर आधारित Sergey Kryzhanovsky द्वारा 2011 के copyright के साथ प्रकाशित। cssnano (अप्रैल 2015) Ben Briggs द्वारा एक भिन्न दृष्टिकोण लिया: एक monolithic minifier के बजाय, cssnano छोटे PostCSS plugins (default preset में ~30) का एक संग्रहीत bundle है। यह बड़े पैमाने पर इस composability के कारण और क्योंकि PostCSS स्वयं (Andrey Sitnik का framework, पहली बार नवंबर 2013 में जारी) इतने अधिक के लिए substrate बन गया (Autoprefixer, Stylelint, Tailwind का processing pipeline) JavaScript ecosystem में प्रमुख CSS minifier बन गया। cssnano अब संस्करण 7.x पर बैठा है और webpack के css-minimizer-webpack-plugin में, Next.js में, और कई अन्य framework defaults में default CSS minifier है।

esbuild का CSS minifier (2020-2021). Figma के सह-संस्थापक Evan Wallace ने esbuild को «एक hobby project जिसे मैंने 2019-2020 winter break पर लिखा» के रूप में जारी किया। Go में लिखा गया, esbuild उस समय के JavaScript-आधारित bundlers से 10-100× तेज़ था। CSS समर्थन 2021 तक परिपक्व हुआ; यह अब Vite में, tsup में, अनगिनत framework templates में अंतर्निहित minifier के रूप में सर्वव्यापी है। Lightning CSS (2021/2022). Parcel के निर्माता Devon Govett ने 2021 में Parcel CSS की घोषणा की, Rust में scratch से लिखा गया एक CSS parser, transformer, bundler और minifier। प्रस्ताव गति (मौजूदा JS-आधारित विकल्पों से 10-100× तेज़) प्लस सहीता (एक वास्तविक CSS-spec-अनुसरण parser, regex pattern-matching नहीं) प्लस targets-aware compilation (आधुनिक CSS को नीचे लाएँ जिसे पुराने browsers समझते हैं, JavaScript के लिए Babel की तरह) था। 2022 में project का नाम बदलकर Lightning CSS कर दिया गया ताकि इसे Parcel से एक स्वतंत्र उपकरण के रूप में अलग किया जा सके। यह अब Vite की अनुशंसित आधुनिक CSS pipeline है, स्वयं Parcel में default है, और css-minimizer-webpack-plugin में एक विकल्प है। Tailwind का अगली-पीढ़ी Oxide engine इसे एकीकृत करता है।

आधुनिक CSS pipeline

आधुनिक web projects शायद ही कभी कच्चा CSS सीधे एक stylesheet में लिखते हैं। Sass (Hampton Catlin और Natalie Weizenbaum, पहली रिलीज़ 2006), Less (Alexis Sellier, 2009) और Stylus (TJ Holowaychuk, 2010) pipeline के सामने बैठते हैं, variables, nesting, mixins, functions और partials जोड़ते हैं। Compiler vanilla CSS उत्सर्जित करता है, जो फिर Autoprefixer (Browserslist के आधार पर vendor-prefix अनुप्रयोग), nested-CSS unwrapping और आधुनिक CSS down-leveling जैसे परिवर्तनों के लिए PostCSS के माध्यम से बहता है। इस सब के बाद ही minifier चलता है, अंतिम flat CSS पर। आधुनिक bundlers default रूप से CSS minification भेजते हैं, webpack 5 में css-minimizer-webpack-plugin शामिल है (default रूप से hood के नीचे cssnano, cssoMinify, cleanCssMinify, esbuildMinify और lightningCssMinify सभी चयन योग्य); Vite default रूप से CSS के लिए esbuild का उपयोग करता है और opt-in के रूप में Lightning CSS का समर्थन करता है; Parcel Lightning CSS का उपयोग करता है; Next.js, Remix, Astro, SvelteKit और Nuxt सभी developer हस्तक्षेप के बिना production builds में minification को bundle करते हैं। परिणाम यह है कि एक आधुनिक build pipeline का उपयोग करने वाले किसी भी व्यक्ति के लिए, CSS minification स्वचालित रूप से होता है।

लेकिन हर कोई एक build pipeline का उपयोग नहीं करता है। बहुत सारे WordPress sites, हाथ से लिखे HTML pages, JS toolchain के बिना Jekyll/Hugo/Eleventy static sites, और एक-बार के projects CSS भेजते हैं जो कभी webpack के पास नहीं रहा। उनके लिए, एक in-browser minifier कम से कम प्रतिरोध का मार्ग है, CSS में paste करें, परिणाम बाहर copy करें, deployment सहेजें।

Critical CSS

जानने योग्य एक पूरक तकनीक: critical CSS above-the-fold viewport को render करने के लिए आवश्यक styles के subset की पहचान करने, document head में एक <style> block में सीधे उस subset को inline करने, और stylesheet के बाकी हिस्से को एक non-blocking load में स्थगित करने का अभ्यास है। अच्छी तरह से किया गया, page पहली ही network round trip पर अपना initial viewport paint करता है, बिल्कुल एक external stylesheet के लिए कोई अलग request नहीं। Filament Group ने canonical tooling बनाया, Scott Jehl ने 14 जुलाई 2014 को loadCSS प्रकाशित किया, एक छोटी JavaScript उपयोगिता जो एक stylesheet को असंकालिक रूप से load करती है इसके media attribute को एक गैर-मिलान वाले मान पर सेट करके, फिर file download होने के बाद इसे all पर वापस बदलकर। पैटर्न अंततः इतना मानक बन गया कि browsers ने <link rel="preload" as="style" onload="this.rel='stylesheet'"> को इसे व्यक्त करने के एक अधिक सीधे तरीके के रूप में जोड़ा। Jason Miller (Preact के निर्माता) ने 2018 में GoogleChromeLabs के तहत Critters को एक तेज़ विकल्प के रूप में जारी किया, render की गई page का निरीक्षण करने के लिए headless browser चलाने के बजाय, Critters स्थैतिक विश्लेषण करता है। Critters repository को 2024 में archived किया गया था जिसमें सक्रिय रूप से बनाए रखा गया fork अब Nuxt team के तहत Beasties के रूप में रह रहा है। ये सभी tools अंतर्निहित CSS के अच्छी तरह से minified होने पर निर्भर करते हैं, स्रोत stylesheet में बचाया गया प्रत्येक byte एक छोटे critical inline में बहता है।

Legacy hacks जा चुके हैं

आधुनिक browsers सभी CSS को एक ही spec के अनुसार parse करते हैं। ऐतिहासिक hacks जिन्होंने एक बार CSS minification को जोखिम भरा बनाया था अनिवार्य रूप से चले गए हैं: * html hack ने एक parser bug का दोहन करके IE6 को लक्षित किया; underscore hack _property: value ने IE6 और नीचे को लक्षित किया; *property: value (property नाम से पहले * के साथ) ने IE7 और नीचे को लक्षित किया; conditional comments <!--[if IE 6]> आपको विशिष्ट IE संस्करणों को विभिन्न stylesheets परोसने देते थे, लेकिन Microsoft ने IE10 में इस feature को हटा दिया। IE11 ने अधिकांश consumer Windows 10 संस्करणों के लिए 15 जून 2022 को end-of-life पर पहुँच गया। 2026 तक ये hacks ऐतिहासिक जिज्ञासाएँ हैं और एक CSS minifier को अब उनके बारे में सोचने की आवश्यकता नहीं है। एक आधुनिक minifier जो browsers में समान रूप से whitespace strip करता है और ऊपर वर्णित spec-परिभाषित परिवर्तनों को लागू करता है, सुरक्षित है।

यह उपकरण क्या करता है (और नहीं करता)

यह उपकरण एक एकल-file in-browser minifier है, लगभग 30 लाइनों का JavaScript। यह string literals को placeholders में tokenize करता है ताकि बाद के passes उनकी सामग्री को दूषित न कर सकें, /* ... */ comments हटाता है, {, }, :, ;, ,, >, ~, + के आसपास whitespace को collapse करता है, } से पहले trailing semicolon को हटाता है, whitespace runs को एक single space में collapse करता है, छह-अंकीय hex रंगों को तीन-अंकीय रूप में छोटा करता है जब अंकों का प्रत्येक जोड़ा समान होता है, और px, em, rem, %, pt, ex, ch, vw, vh, vmin, vmax के लिए शून्य मानों से unit strip करता है। यह CSS को एक AST में parse नहीं करता, यह एक regex pass है। यह longhand को shorthand में collapse नहीं करता। यह selectors को merge या deduplicate नहीं करता। यह declarations को पुन-क्रमित नहीं करता। यह rgb() को hex में या नामित रंगों को hex में परिवर्तित नहीं करता। यह keywords को lowercase नहीं करता। यह /*! important comments संरक्षित नहीं करता, सभी comments समान रूप से strip किए जाते हैं; यदि आपके पास रखने के लिए license headers हैं, तो minification के बाद उन्हें वापस paste करें। यह source map उत्सर्जित नहीं करता। ईमानदार framing: अपने editor या अपने हाथ से निकले CSS को paste करें, एक stripped संस्करण वापस प्राप्त करें जो आमतौर पर कच्चे bytes में 20-40 % छोटा होता है, और इसे हाथ से बने sites के लिए एक त्वरित-deploy artifact के रूप में उपयोग करें। एक build pipeline वाली projects के लिए, उस pipeline में cssnano या Lightning CSS का उपयोग करें; जिनके पास नहीं है उनके लिए, यह उपकरण घर्षण को हटाता है।

केवल-browser क्यों यहाँ मायने रखता है

हर web-based CSS minifier के पास समान architectural विकल्प है: काम एक server पर करना, या उपयोगकर्ता के browser में करना। Server-side processing के लिए network पर stylesheet अपलोड करने की आवश्यकता होती है, जिसका मतलब है कि उस CSS की एक प्रति server के logs में बैठती है, संभवतः एक CDN cache में, संभवतः एक analytics pipeline में, संभवतः एक backup में। अधिकांश CSS के लिए यह हानिरहित है। आंतरिक उपकरणों, अप्रकाशित product styles, या आंतरिक class taxonomies (.admin-panel-internal-debug-info) को प्रकट करने वाले selectors वाले stylesheets के लिए, यह नहीं है। यहाँ तक कि साधारण marketing-site CSS के लिए भी, एक developer जो वास्तव में network पर भेजे जाने वाले को ऑडिट कर रहा है, उचित रूप से पसंद कर सकता है कि work-in-progress उनकी मशीन पर रहे। एक विशुद्ध रूप से browser-आधारित minifier (JavaScript जो आपके tab में चलता है और प्रारंभिक page load के बाद कभी network request नहीं करता) मुद्दे को बायपास करता है। आप इसे सत्यापित कर सकते हैं: DevTools के Network tab को खोलें, CSS paste करें, Minify पर क्लिक करें, और किसी भी outgoing request की तलाश करें। कोई नहीं होगा। बेहतर अभी तक, page load होने के बाद internet से disconnect करें (या airplane mode सक्षम करें) और उपकरण फिर भी काम करेगा, जो सबसे मजबूत प्रायोगिक प्रमाण है कि कुछ भी अपलोड नहीं हो रहा है।

अक्सर पूछे जाने वाले प्रश्न