ഈ ടൂളിനെ കുറിച്ച്
ഒരു വെബ്പേജിൻ്റെ ഉറവിടത്തിൽ നിന്ന് HTML മിനിഫിക്കേഷൻ സ്ട്രിപ്പുകൾ അനാവശ്യ പ്രതീകങ്ങൾ - ടാഗുകൾ, അഭിപ്രായങ്ങൾ, അനാവശ്യ ഉദ്ധരണികൾ, ഓപ്ഷണൽ ക്ലോസിംഗ് ടാഗുകൾ എന്നിവയ്ക്കിടയിലുള്ള വൈറ്റ്സ്പെയ്സ് - പേജ് റെൻഡർ ചെയ്യുന്ന രീതി മാറ്റാതെ ഫയൽ വലുപ്പം കുറയ്ക്കുന്നതിന്. സേവിംഗ്സ് ഓരോ പേജിനും മിതമാണ് (സാധാരണയായി 10-30%) എന്നാൽ പല അഭ്യർത്ഥനകളിലുടനീളം സംയുക്തമാണ്, പ്രത്യേകിച്ച് ഡൈനാമിക് കംപ്രഷൻ ഇല്ലാതെ നൽകുന്ന സ്റ്റാറ്റിക് സൈറ്റുകൾക്കോ പേജുകൾക്കോ.
ഈ മിനിഫയർ ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങൾക്കിടയിലുള്ള വൈറ്റ്സ്പെയ്സ് നീക്കം ചെയ്യുന്നു, പ്രാധാന്യമില്ലാത്ത ടെക്സ്റ്റിനുള്ളിലെ വൈറ്റ്സ്പെയ്സിൻ്റെ റണ്ണുകൾ ചുരുക്കുന്നു, HTML അഭിപ്രായങ്ങൾ (IE സോപാധിക അഭിപ്രായങ്ങൾ ഒഴികെ), HTML5 സ്പെക്ക് അനുവദിച്ചിരിക്കുന്ന അനാവശ്യ ആട്രിബ്യൂട്ട് ഉദ്ധരണികൾ നീക്കംചെയ്യുന്നു, കൂടാതെ ഓപ്ഷണൽ ക്ലോസിംഗ് ടാഗുകൾ ഒഴിവാക്കുന്നു (</p>, </lipec>). ഫലം എല്ലാ ബ്രൗസറുകളിലെയും ഉറവിടത്തിന് സമാനമാണ്.
സെർവർ തലത്തിൽ gzip അല്ലെങ്കിൽ Brotli കംപ്രഷൻ ഉപയോഗിച്ച് ജോടിയാക്കുമ്പോൾ മിനിഫിക്കേഷൻ ഏറ്റവും ഉപയോഗപ്രദമാണ്. കംപ്രഷൻ ഇതിനകം തന്നെ സേവിംഗ്സ് മിനിഫിക്കേഷൻ ഉൽപ്പാദിപ്പിക്കുന്ന ഭൂരിഭാഗവും നീക്കംചെയ്യുന്നു, പക്ഷേ രണ്ടും കൂടിച്ചേർന്ന് കംപ്രഷനെ ഒറ്റയ്ക്ക് തോൽപ്പിക്കുന്നു - പ്രത്യേകിച്ചും ബാൻഡ്വിഡ്ത്ത് ചെലവ് പ്രാധാന്യമുള്ള ഉയർന്ന ട്രാഫിക് സൈറ്റുകൾക്ക്.
എന്തുകൊണ്ട് HTML ചെറുതാക്കുന്നു
ചെറിയ HTML വേഗത്തിൽ ലോഡ് ചെയ്യുന്നു, പ്രത്യേകിച്ച് വേഗത കുറഞ്ഞ കണക്ഷനുകളിലും മൊബൈൽ നെറ്റ്വർക്കുകളിലും. പേജ് വെയ്റ്റ് നേരിട്ട് കോർ വെബ് വൈറ്റലുകളെ ബാധിക്കുന്നു - ഏറ്റവും വലിയ ഉള്ളടക്കമുള്ള പെയിൻ്റും ആദ്യ ബൈറ്റിലേക്കുള്ള സമയവും സെർവർ പാഴ്സിലേക്ക് കുറച്ച് HTML തിരികെ നൽകുമ്പോൾ മെച്ചപ്പെടുന്നു. SEO റാങ്കിംഗ് കോർ വെബ് വൈറ്റൽ സ്കോറുകളെ ആശ്രയിച്ചിരിക്കുന്ന സൈറ്റുകൾക്ക്, ചെറുതാക്കുന്നത് അളക്കാവുന്ന മെച്ചപ്പെടുത്തലാണ്.
ചെറുതാക്കിയ HTML ബാൻഡ്വിഡ്ത്ത് ചെലവ് സ്കെയിലിൽ കുറയ്ക്കുകയും ചെയ്യുന്നു. ഒരു പേജിന് 10 KB സമ്പാദ്യത്തോടെ ഒരു ദിവസം ഒരു ദശലക്ഷം പേജുകൾ നൽകുന്ന ഒരു സൈറ്റ് പ്രതിദിനം 10 GB എഗ്രസ് ലാഭിക്കുന്നു. ഡാറ്റാ ട്രാൻസ്ഫർ വഴി ബിൽ ചെയ്യുന്ന CDN-കളിൽ നിന്നുള്ള സ്റ്റാറ്റിക് സൈറ്റുകൾക്കുള്ള ഇംപാക്റ്റ് സംയുക്തങ്ങൾ.
സാങ്കേതിക വിശദാംശങ്ങൾ
ടോക്കൺ ഉപയോഗിച്ച് മിനിഫയർ HTML ടോക്കൺ പ്രോസസ്സ് ചെയ്യുന്നു. റെൻഡറിംഗിനെ ബാധിക്കാത്തതിനാൽ ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങൾ (<div>, <p>, <ul>) തമ്മിലുള്ള വൈറ്റ്സ്പെയ്സ് നീക്കം ചെയ്തു. ഇൻലൈൻ സന്ദർഭങ്ങൾക്കുള്ളിലെ വൈറ്റ്സ്പേസ് (<span>, <a>, ടെക്സ്റ്റ് ഉള്ളടക്കം) സംരക്ഷിച്ചിരിക്കുന്നു, കാരണം ഇത് റെൻഡറിംഗിനെ ബാധിക്കും.
അഭിപ്രായങ്ങൾ ഡിഫോൾട്ടായി നീക്കം ചെയ്യപ്പെടുന്നു, എന്നാൽ സോപാധികമായ അഭിപ്രായങ്ങൾ (<!--[IE]>) സംരക്ഷിക്കപ്പെട്ടിരിക്കുന്നു. HTML5 പാഴ്സർ അനുവദിക്കുന്നിടത്ത് ആട്രിബ്യൂട്ട് ഉദ്ധരണികൾ നീക്കംചെയ്യപ്പെടും - സ്പെയ്സുകളോ പ്രത്യേക പ്രതീകങ്ങളോ ഇല്ലാത്ത ഒറ്റ-പദ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾക്ക് ഉദ്ധരണികൾ ഒഴിവാക്കാനാകും.
ഓപ്ഷണൽ ക്ലോസിംഗ് ടാഗുകൾ HTML5 സ്പെസിഫിക്കേഷനിൽ ഒഴിവാക്കിയിരിക്കുന്നു: </p>, </li>, </td>, കൂടാതെ മറ്റു ചിലതും അവരുടെ അടുത്തതായി സൂചിപ്പിക്കുന്ന ഒരു സഹോദരനെ പിന്തുടരുമ്പോൾ ഒഴിവാക്കാവുന്നതാണ്. ഇത് വായിക്കാൻ അസാധാരണമാണെങ്കിലും ബ്രൗസറുകൾ ഒരേപോലെ പാഴ്സ് ചെയ്യുന്ന സാധുവായ HTML5 ആണ്.
പതിവ് ചോദ്യങ്ങള്
- HTML മിനിഫിക്കേഷൻ എന്താണ് നീക്കം ചെയ്യുന്നത്?
- ടാഗുകൾ, HTML കമൻ്റുകൾ (<!-- -->), ഓപ്ഷണൽ ക്ലോസിംഗ് ടാഗുകൾ (</li>, </p>, </td>), ഡിഫോൾട്ട് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ (ഇൻപുട്ടുകളിലെ ടൈപ്പ്="ടെക്സ്റ്റ്"), ബൂളിയൻ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ (ഡിസബിൾഡ്="ഡിസേബിൾഡ്" →) എന്നിവയ്ക്കിടയിലുള്ള അനാവശ്യ വൈറ്റ്സ്പെയ്സ്.
- മിനിഫിക്കേഷന് എൻ്റെ പേജ് തകർക്കാൻ കഴിയുമോ?
- നിങ്ങളുടെ CSS ഇൻലൈൻ ഘടകങ്ങൾ തമ്മിലുള്ള വൈറ്റ്സ്പെയ്സിനെ ആശ്രയിക്കുകയോ JavaScript innerHTML താരതമ്യങ്ങൾ ഉപയോഗിക്കുകയോ ചെയ്താൽ അപൂർവ്വമായി, പക്ഷേ സാധ്യമാണ്. എല്ലായ്പ്പോഴും മിനിഫൈഡ് ഔട്ട്പുട്ട് പരീക്ഷിക്കുക. ഉപകരണം സ്ഥിരസ്ഥിതിയായി യാഥാസ്ഥിതിക ക്രമീകരണങ്ങൾ ഉപയോഗിക്കുന്നു.
- Next.js പോലുള്ള ഒരു ചട്ടക്കൂട് ഉപയോഗിക്കുകയാണെങ്കിൽ ഞാൻ HTML ചെറുതാക്കണോ?
- മിക്ക ആധുനിക ചട്ടക്കൂടുകളും (Next.js, Nuxt, Angular) പ്രൊഡക്ഷൻ ബിൽഡുകളിൽ സ്വയമേവ HTML ചെറുതാക്കുന്നു. ഒരു ബിൽഡ് സിസ്റ്റം ഇല്ലാത്ത സ്റ്റാറ്റിക് HTML ഫയലുകൾക്കും ഇമെയിൽ ടെംപ്ലേറ്റുകൾക്കും പ്രോജക്റ്റുകൾക്കും ഈ ടൂൾ ഉപയോഗപ്രദമാണ്.
- ഇത് ഇൻലൈൻ CSS, JavaScript എന്നിവയും ചെറുതാക്കുമോ?
- ഈ ഉപകരണം HTML ഘടനയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഇൻലൈൻ <style>, <script> ഉള്ളടക്കങ്ങൾ അതേപടി സംരക്ഷിച്ചിരിക്കുന്നു. അവർക്കായി, ഒപ്റ്റിമൽ ഫലങ്ങൾക്കായി സമർപ്പിത CSS, JavaScript മിനിഫയറുകൾ ഉപയോഗിക്കുക.
- ഓപ്ഷണൽ ക്ലോസിംഗ് ടാഗുകൾ നീക്കം ചെയ്യാൻ സുരക്ഷിതമാണോ?
- അതെ, ഓരോ HTML5 സ്പെസിഫിക്കേഷനും, ഫലം വായിക്കാൻ ബുദ്ധിമുട്ടാണെങ്കിലും. ചില ടീമുകൾ വ്യക്തതയ്ക്കായി ഈ പരിവർത്തനം പ്രവർത്തനരഹിതമാക്കുന്നു, ചെറിയ വലിപ്പത്തിലുള്ള പെനാൽറ്റി സ്വീകരിച്ചു.
- എൻ്റെ HTML ഒരു സെർവറിലേക്ക് അപ്ലോഡ് ചെയ്തിട്ടുണ്ടോ?
- ഇല്ല. മിനിഫയർ നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു.
- html-minifier-terser-മായി ഇത് എങ്ങനെ താരതമ്യം ചെയ്യും?
- html-minifier-terser കാനോനിക്കൽ Node.js HTML മിനിഫയറാണ്, ഇത് കുറച്ച് കൂടുതൽ ആക്രമണാത്മക ഫലങ്ങൾ നൽകുന്നു. ഒരു ബിൽഡ് സജ്ജീകരണമില്ലാതെ ബ്രൗസർ-സൈഡ് ഉപയോഗത്തിനുള്ള അതേ പരിവർത്തനങ്ങൾ ഈ ടൂൾ ഉൾക്കൊള്ളുന്നു.
- ഞാൻ എപ്പോഴും ചെറുതാക്കണോ അതോ തിരഞ്ഞെടുത്തതാണോ?
- എല്ലായ്പ്പോഴും ഉൽപാദനത്തിനായി. പതിപ്പ് നിയന്ത്രണത്തിൽ സോഴ്സ് കോഡിനായി ഒരിക്കലും; അറ്റകുറ്റപ്പണികൾക്ക് ഉറവിടത്തിൽ വായിക്കാവുന്ന HTML അത്യാവശ്യമാണ്.