HTML Minify _

HTML મિનિફિકેશન કેવી રીતે કામ કરે છે

મિનિફાયર એક નાના સ્ટેટ મશીન વડે તમારા ઇનપુટ ને ફેરવે છે, જે જેમ-છે-તેમ-સાચવવાના ભાગો (<pre>, <textarea>, <script>, <style>) ને એવા સંપાદનક્ષમ ભાગોથી અલગ પાડે છે જ્યાં ખાલી જગ્યા અને ટિપ્પણીઓ ને સુરક્ષિત રીતે સંકોચી શકાય.

1. Preserve blocks tokenize. સ્કેનર ઇનપુટ ને અક્ષર-દર-અક્ષર વાંચે છે અને જ્યારે કોઈ ખૂલતો <pre>, <textarea>, <script>, અથવા <style> ટૅગ મળે ત્યારે સાચવણી અવસ્થા માં ફેરવાઈ જાય છે. એ ટૅગ્સ ની અંદર બધું જ બાઇટ-દર-બાઇટ સચવાય છે જ્યાં સુધી મેળ ખાતો બંધ થતો ટૅગ ન આવે.
2. સંપાદનયોગ્ય ખાલી જગ્યા સંકોચો. સંપાદનક્ષમ ભાગોમાં સ્કેનર સ્પેસ, ટૅબ અને નવી લાઇન ના દરેક ક્રમ ને એક જ સ્પેસ સુધી સંકોચે છે, પછી ટૅગ ની સીમાઓ ની આસપાસ આગળ અને પાછળ ની ખાલી જગ્યા ને કાપી નાખે છે. દેખાતું લખાણ એ જ રીતે ફરી ગોઠવાય છે જે રીતે બ્રાઉઝર તેને રેન્ડર કરે છે.
3. Comments strip. ટૉગલ ચાલુ હોય ત્યારે <!-- ... --> બ્લોક દૂર કરી દેવાય છે. IE કન્ડિશનલ ટિપ્પણીઓ (<!--[if IE]> ... <![endif]-->) preserve-conditional ટૉગલ ચાલુ હોય ત્યારે ટકી રહે છે, કારણ કે જૂના ઈમેઇલ ક્લાયન્ટ હજુ પણ તેમના પર આધાર રાખે છે.
4. બૂલિયન એટ્રિબ્યૂટ સંકોચો. checked="checked", disabled="disabled", અને required="required" જેવા વિગતવાર સ્વરૂપો કેવળ એટ્રિબ્યુટ ના નામ સુધી સંકોચાઈ જાય છે. HTML5 spec આ સાદા સ્વરૂપ ને અર્થ ની દૃષ્ટિએ સમાન ગણે છે, એટલે રેન્ડર થયેલ DOM અપરિવર્તિત રહે છે.
5. Byte deltas report. મૂળ અને મિનિફાઇડ બંને લખાણ ને new TextEncoder().encode(...).byteLength વડે માપવામાં આવે છે — એ જ UTF-8 બાઇટ ગણતરી જે CDN અથવા HTTP સર્વર wire પર જુએ છે. મેટ્રિક પટ્ટી મૂળ કદ, મિનિફાઇડ કદ, બચેલા બાઇટ્સ અને બચતની ટકાવારી દર્શાવે છે.

HTML minify કેમ?

• Page loads ઝડપ. નાનું HTML બ્રાઉઝર સુધી વહેલું પહોંચે છે અને પાર્સર વહેલો પૂરો થાય છે. મોબાઇલ નેટવર્ક પર બાઇટ ની બચત સીધી જ ઝડપી First Contentful Paint અને બહેતર Lighthouse પ્રદર્શન સ્કોર માં પરિણમે છે.
• CDN egress bills ઓછા. CloudFront, Cloudflare અને Fastly દર gigabyte egress પ્રમાણે બિલ વસૂલે છે. દર મહિને લાખો views પર 20 ટકા HTML ઘટાડો, કોઈ પણ છબી કે સ્ક્રિપ્ટ ઑપ્ટિમાઇઝેશન લાગુ થાય તે પહેલાં જ, બિલ પર સાચી બચત માં ઉમેરાઈ જાય છે.
• વધુ સ્વચ્છ pull-request diff. રિપો માં commit કરેલ પૂર્વ-બાંધેલ સ્ટેટિક HTML ત્યારે ગજબ ભરેલું બને છે જ્યારે દરેક ટેમ્પલેટ ફેરફાર indentation ને ફરી ગોઠવે છે. dist ફોલ્ડર માં મિનિફાઇડ HTML વધુ ચુસ્ત PR diff બનાવે છે જે ખાલી જગ્યા ની ઊથલપાથલ ને બદલે સાચા કન્ટેન્ટ ફેરફારો પર ધ્યાન કેન્દ્રિત કરે છે.
• નાના embeds અને snippets. ઈમેઇલ ટેમ્પલેટ, ત્રીજા-પક્ષ ના widget snippets, અને JSON કે YAML config ની અંદર સંગ્રહેલ HTML — આ બધાને એ જ બાઇટ કાપ નો ફાયદો થાય છે. મિનિફાઇડ embeds transactional ઈમેઇલ ને ESP કદ ની મર્યાદા ની નીચે રાખે છે અને widget બંડલ ઘટાડે છે.

સામાન્ય ઉપયોગ

HTML મિનિફિકેશન લગભગ દરેક સ્ટેટિક-સાઇટ કે JAMstack બિલ્ડ પાઇપલાઇન ના અંતે દેખાય છે, ઉપરાંત થોડાક runtime સંદર્ભો માં જ્યાં બાઇટ્સ સોર્સ ની વાંચનીયતા કરતાં વધારે મહત્ત્વ ધરાવે છે.

• સ્ટેટિક-સાઇટ બિલ્ડ પગલાં: Eleventy, Hugo, Astro અને Next.js ના પ્રોડક્શન બિલ્ડ dist ફોલ્ડર માં લખતા પહેલાં HTML ને મિનિફાયર માંથી પસાર કરે છે જેથી ડિપ્લોય થયેલ બંડલ સોર્સ કરતાં નાનું હોય.
• Transactional ઈમેઇલ: ESP (SendGrid, Postmark, Mailgun) HTML body ના કદ ને મર્યાદિત કરે છે અને inline-CSS વિસ્તરણ એ ગણતરી ને ઝડપથી ફુલાવી દે છે. મોકલતા પહેલાં body ને મિનિફાઈ કરવાથી સંદેશ મર્યાદા ની નીચે રહે છે.
• Embedded widgets: inline HTML તરીકે મોકલાતા ત્રીજા-પક્ષ ના widgets અને chat snippets ને દરેક બાઇટ કાપ નો ફાયદો થાય છે કારણ કે યજમાન પેજ ને દરેક મુલાકાતે તેમને ડાઉનલોડ કરવા પડે છે.

ઉદાહરણ

બે-સ્પેસ indentation, પંક્તિઓ વચ્ચે ત્રણ line break, ઉપર એક HTML comment block, અને એક <input type="checkbox" checked="checked" /> ધરાવતો વિગતવાર 500-બાઇટ form snippet પેસ્ટ કરો. દરેક વિકલ્પ ચાલુ કરતાં, આઉટપુટ આશરે 300 બાઇટ્સ સુધી સંકોચાઈ જાય છે — લગભગ 40 ટકા બચત — જ્યારે રેન્ડર થયેલ DOM tree સોર્સ ની બાઇટ-સમાન રહે છે.

શું મિનિફિકેશન મારું HTML તોડી નાખશે?

ના, જ્યારે મૂળભૂત ટૉગલ સાથે વાપરો ત્યારે. મિનિફાયર <pre>, <textarea>, <script>, અને <style> ટૅગ્સ ની સામગ્રી ને જેમ-છે-તેમ સાચવે છે, એ ટૉગલ ચાલુ હોય ત્યારે IE કન્ડિશનલ ટિપ્પણીઓ ને અકબંધ રાખે છે, અને માત્ર એ જ ખાલી જગ્યા ને સંકોચે છે જેને HTML5 પાર્સર પહેલેથી જ બિનમહત્ત્વની ગણે છે. રેન્ડર થયેલ DOM tree સોર્સ ની બાઇટ-સમાન રહે છે. આક્રમક ટૉગલ (remove-empty-attributes) એવા snippets નું વર્તન બદલી શકે છે જે જાણીજોઈને value="" અથવા alt="" વાપરે છે, એટલે જો તમે તેમને ચાલુ કરો તો આઉટપુટ ની સમીક્ષા કરો.

શું આ ઇનલાઇન CSS અને JS મિનિફાઇ કરે છે?

આ સાધન માં નહીં. Inline <style> અને <script> ની સામગ્રી જેમ-છે-તેમ સાચવાય છે જેથી મિનિફાયર કોઈ string literal કે regex ની અંદર ખાલી જગ્યા સંકોચીને ક્યારેય CSS નિયમ કે JS વિધાન ન તોડે. CSS-વિશિષ્ટ મિનિફિકેશન માટે CSS Minifier વાપરો; JS માટે JS Minifier વાપરો. HTML Minifier markup પર જ ધ્યાન કેન્દ્રિત કરે છે.

કેટલું save?

હાથે લખેલા HTML પર સામાન્ય બચત 10 થી 30 ટકા ની વચ્ચે હોય છે, જે એ વાત પર આધાર રાખે છે કે સોર્સ કેટલું indentation, ખાલી પંક્તિઓ, અને વિગતવાર એટ્રિબ્યુટ સ્વરૂપો વાપરે છે. Next.js જેવા frameworks નું પૂર્વ-બાંધેલ સ્ટેટિક HTML ઘણીવાર 15 થી 25 ટકા બચાવે છે કારણ કે framework પહેલેથી જ થોડું ઑપ્ટિમાઇઝેશન કરી ચૂક્યું હોય છે પણ માણસ-વાંચી-શકે એવી ખાલી જગ્યા છોડી દે છે. ભારે ટિપ્પણીવાળા ટેમ્પલેટ અને ઊંડા માળખાવાળું ઈમેઇલ-શૈલી નું HTML 40 ટકા કે વધારે સુધી પહોંચી શકે છે.

શું pre સામગ્રી સાચવી રાખવામાં આવે છે?

હા. મિનિફાયર સ્પષ્ટપણે <pre>, <textarea>, <script>, અને <style> બ્લોક ને જેમ-છે-તેમ-સાચવવાના ભાગો તરીકે tokenize કરે છે અને તેમની સામગ્રી ને બાઇટ-દર-બાઇટ આઉટપુટ માં કૉપિ કરે છે. એ ટૅગ્સ ની અંદર ની ખાલી જગ્યા, line break અને indentation મિનિફિકેશન પછી અકબંધ રહે છે, એટલે code samples અને ASCII art મિનિફિકેશન પછી પણ બરાબર એ જ રીતે રેન્ડર થાય છે.

Browser-side HTML minification build pipeline simple, markup small. HTML paste, options toggle, minified copy/download — upload, account, vendor library — nothing.