CSS സ്പ്രിറ്റുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ സൈറ്റ് വേഗത്തിലാക്കുന്നു

സ്പ്രിറ്റ്മാസ്റ്റർ വെബ്

ഈ സൈറ്റിൽ ഞാൻ പേജ് വേഗതയെക്കുറിച്ച് കുറച്ചുകൂടി എഴുതുന്നു, ഇത് ഞങ്ങളുടെ ക്ലയന്റുകളുടെ സൈറ്റുകളിൽ ഞങ്ങൾ വരുത്തുന്ന വിശകലനത്തിന്റെയും മെച്ചപ്പെടുത്തലുകളുടെയും ഒരു പ്രധാന ഭാഗമാണ്. ശക്തമായ സെർവറുകളിലേക്ക് നീങ്ങുന്നതും ഒപ്പം ഉപകരണങ്ങൾ ഉപയോഗിക്കുന്നതും മാറ്റിനിർത്തുക ഉള്ളടക്ക ഡെലിവറി നെറ്റ്‌വർക്കുകൾ, ശരാശരി വെബ് ഡെവലപ്പർക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന മറ്റ് നിരവധി പ്രോഗ്രാമിംഗ് ടെക്നിക്കുകൾ ഉണ്ട്.

യഥാർത്ഥ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റിന്റെ നിലവാരം ഇപ്പോൾ 15 വയസ്സിനു മുകളിലാണ്. വെബ് ഡെവലപ്മെന്റിന്റെ ഒരു പ്രധാന പരിണാമമായിരുന്നു സി‌എസ്‌എസ്, കാരണം ഇത് ഉള്ളടക്കത്തെ രൂപകൽപ്പനയിൽ നിന്ന് വേർതിരിക്കുന്നു. ഈ ബ്ലോഗും മറ്റെന്തെങ്കിലും നോക്കൂ, സ്റ്റൈലിംഗ് വ്യത്യാസത്തിന്റെ ഭൂരിഭാഗവും അറ്റാച്ചുചെയ്ത സ്റ്റൈൽ‌ഷീറ്റിലാണ്. സ്റ്റൈൽ‌ഷീറ്റുകളും പ്രധാനമാണ്, കാരണം അവ നിങ്ങളുടെ ബ്ര .സറിനുള്ളിലെ ഒരു കാഷെയിൽ പ്രാദേശികമായി സംഭരിക്കപ്പെടുന്നു. തൽഫലമായി, ആളുകൾ നിങ്ങളുടെ സൈറ്റ് സന്ദർശിക്കുന്നത് തുടരുമ്പോൾ, അവർ ഓരോ തവണയും ഒരു സ്റ്റൈൽ ഷീറ്റ് ഡ download ൺലോഡ് ചെയ്യുന്നില്ല… പേജ് ഉള്ളടക്കം മാത്രം.

സി‌എസ്‌എസിന്റെ ഒരു ഘടകം പലപ്പോഴും ഉപയോഗശൂന്യമാണ് CSS സ്പ്രിറ്റുകൾ. ഒരു ഉപയോക്താവ് നിങ്ങളുടെ വെബ്‌സൈറ്റ് സന്ദർശിക്കുമ്പോൾ, അവർ പേജിനായി ഒരു അഭ്യർത്ഥന നടത്തുന്നില്ലെന്ന് നിങ്ങൾക്ക് മനസ്സിലാകില്ല. അവർ ഒന്നിലധികം അഭ്യർത്ഥനകൾ നടത്തുക… പേജിനായുള്ള ഒരു അഭ്യർത്ഥന, ഏതെങ്കിലും സ്റ്റൈൽ ഷീറ്റുകൾ, അറ്റാച്ചുചെയ്ത ഏതെങ്കിലും ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ, തുടർന്ന് ഓരോ ഇമേജ്. ബോർഡറുകൾ, നാവിഗേഷൻ ബാറുകൾ, പശ്ചാത്തലങ്ങൾ, ബട്ടണുകൾ മുതലായവയ്‌ക്കായി നിരവധി ചിത്രങ്ങളുള്ള ഒരു തീം നിങ്ങൾക്കുണ്ടെങ്കിൽ… ബ്ര web സർ നിങ്ങളുടെ വെബ് സെർവറിൽ നിന്ന് ഓരോന്നിനും അഭ്യർത്ഥിക്കണം. ആയിരക്കണക്കിന് സന്ദർശകരാൽ ഇത് ഗുണിക്കുക, അത് നിങ്ങളുടെ സെർവറിലേക്ക് പതിനായിരക്കണക്കിന് അഭ്യർത്ഥനകൾ ആകാം!

ഇത് നിങ്ങളുടെ സൈറ്റിനെ മന്ദഗതിയിലാക്കുന്നു. എ സ്ലോ സൈറ്റിന് ഇടപഴകലിലും പരിവർത്തനങ്ങളിലും നാടകീയമായ സ്വാധീനം ചെലുത്താനാകും നിങ്ങളുടെ പ്രേക്ഷകർ ഉണ്ടാക്കുന്ന. മികച്ച വെബ് ഡവലപ്പർമാർ ഉപയോഗിക്കുന്ന ഒരു തന്ത്രമാണ് എല്ലാ ചിത്രങ്ങളും ഒരൊറ്റ ഫയലിലേക്ക് ഇടുന്നത്… a സ്പ്രൈറ്റ്. നിങ്ങളുടെ ഓരോ ഫയൽ ഇമേജുകൾക്കുമായി ഒരു അഭ്യർത്ഥന നടത്തുന്നതിനുപകരം, ഇപ്പോൾ ഒരൊറ്റ സ്പ്രൈറ്റ് ഇമേജിനായി ഒരൊറ്റ അഭ്യർത്ഥന മാത്രമേ ആവശ്യമുള്ളൂ!

നിങ്ങൾക്ക് ഇതിനെക്കുറിച്ച് വായിക്കാം സി‌എസ്‌എസ്-തന്ത്രങ്ങളിൽ‌ സി‌എസ്‌എസ് സ്പ്രിറ്റുകൾ‌ എങ്ങനെ പ്രവർ‌ത്തിക്കുന്നു or സ്മാഷിംഗ് മാസികയുടെ സി‌എസ്‌എസ് സ്പ്രൈറ്റ് പോസ്റ്റ്. അവ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നിങ്ങളെ കാണിക്കലല്ല എന്റെ പോയിന്റ്, നിങ്ങളുടെ ഡവലപ്പ്മെന്റ് ടീം അവരെ സൈറ്റിൽ സംയോജിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളെ ഉപദേശിക്കാൻ മാത്രം. സി‌എസ്‌എസ് തന്ത്രങ്ങൾ നൽകുന്ന ഉദാഹരണം 10 അഭ്യർത്ഥനകളുള്ള 10 ചിത്രങ്ങൾ കാണിക്കുകയും 20.5 കെബി വരെ ചേർക്കുകയും ചെയ്യുന്നു. ഒരൊറ്റ സ്പ്രൈറ്റിൽ ശേഖരിക്കുമ്പോൾ, അത് 1 അഭ്യർത്ഥന 13kb! 9 ചിത്രങ്ങൾക്കായുള്ള റ trip ണ്ട് ട്രിപ്പ് അഭ്യർത്ഥനയും പ്രതികരണ സമയവും ഇപ്പോൾ ഇല്ലാതാകുകയും ഡാറ്റയുടെ അളവ് 30% ൽ കൂടുതൽ കുറയ്ക്കുകയും ചെയ്യുന്നു. നിങ്ങളുടെ സൈറ്റിലെ സന്ദർശകരുടെ എണ്ണം കൊണ്ട് ഗുണിക്കുക, നിങ്ങൾ ചില വിഭവങ്ങൾ ഷേവ് ചെയ്യാൻ പോകുന്നു!

ഗ്ലോബൽ‌നാവ്ദി ആപ്പിൾ നാവിഗേഷൻ ബാർ ഒരു മികച്ച ഉദാഹരണമാണ്. ഓരോ ബട്ടണിനും കുറച്ച് സംസ്ഥാനങ്ങളുണ്ട്… നിങ്ങൾ പേജിലായാലും പേജിൽ നിന്നായാലും ബട്ടണിന് മുകളിലൂടെയുള്ളതായാലും. സി‌എസ്‌എസ് ബട്ടണിന്റെ കോർഡിനേറ്റുകൾ നിർവചിക്കുകയും ശരിയായ സംസ്ഥാനത്തിന്റെ പ്രദേശം ഉപയോക്താക്കളുടെ ബ്ര .സറിന് അവതരിപ്പിക്കുകയും ചെയ്യുന്നു. ഈ സംസ്ഥാനങ്ങളെല്ലാം ഒരൊറ്റ ഗ്രാഫിക്കിൽ ഒന്നിച്ച് തകർന്നിരിക്കുന്നു - പക്ഷേ സ്റ്റൈൽ ഷീറ്റിൽ വ്യക്തമാക്കിയ പ്രദേശം അനുസരിച്ച് പ്രദേശം പ്രദർശിപ്പിക്കുന്നു.

നിങ്ങളുടെ ഡവലപ്പർ‌മാർ‌ ഉപകരണങ്ങൾ‌ ഇഷ്ടപ്പെടുന്നുവെങ്കിൽ‌, അവയുൾ‌പ്പെടെ അവരെ സഹായിക്കാൻ‌ കഴിയുന്ന ഒരു ടൺ‌ അവിടെയുണ്ട് കോമ്പസ് സി‌എസ്‌എസ് ചട്ടക്കൂട്, RequestReduce ASP.NET നായി, CSS-Spriter റൂബിക്ക്, CSSSprite സ്ക്രിപ്റ്റ് ഫോട്ടോഷോപ്പിനായി, സ്പ്രൈറ്റ്പാഡ്, സ്‌പ്രൈറ്റ് റൈറ്റ്, സ്പ്രൈറ്റ്കോ, സീറോസ്‌പ്രൈറ്റുകൾ, പ്രോജക്റ്റ് ഫോണ്ടുവിന്റെ CSS സ്പ്രൈറ്റ് ജനറേറ്റർ, സ്പ്രൈറ്റ് മാസ്റ്റർ വെബ്എന്നാൽ സ്പ്രൈറ്റ്മീ ബുക്ക്മാർക്ക്ലെറ്റ്.

ന്റെ സ്ക്രീൻഷോട്ട് സ്പ്രൈറ്റ് മാസ്റ്റർ വെബ്:
സ്പ്രിറ്റ്മാസ്റ്റർ വെബ്

Martech Zone പശ്ചാത്തല ഇമേജറി അതിന്റെ തീമിലുടനീളം ഉപയോഗിക്കുന്നില്ല, അതിനാൽ ഞങ്ങൾ ഇപ്പോൾ ഈ സാങ്കേതികവിദ്യ വിന്യസിക്കേണ്ടതില്ല.

2 അഭിപ്രായങ്ങള്

  1. 1

    കാത്തിരിക്കൂ… മുഴുവൻ ശേഖരവും ഒരു “ഇമേജ്” (അല്ലെങ്കിൽ “തലം”), ഓരോ ഉപ ഇമേജും (അല്ലെങ്കിൽ ആനിമേറ്റുചെയ്‌തതോ അല്ലെങ്കിൽ സംവേദനാത്മകമായി മാറുന്നവയുടെ ചിത്രങ്ങളുടെ ഉപഗ്രൂപ്പ്) ഒരു “സ്പ്രൈറ്റ്” അല്ലേ?

    കഴിഞ്ഞ തവണ ഞാൻ ഇത്തരത്തിലുള്ള കാര്യങ്ങൾ കൈകാര്യം ചെയ്തതുമുതൽ സ്റ്റഫിന്റെ പേരുമാറ്റിയിട്ടുണ്ടാകാം, പക്ഷേ പ്രദർശിപ്പിച്ചത് അവസാനിച്ച ഘടകമാണ് സ്പ്രൈറ്റ് എന്ന് ഞാൻ സത്യം ചെയ്തു, അതിൽ നിന്ന് വലിച്ചെടുത്ത വലിയ ഡാറ്റ പട്ടികയല്ല.

    (“സ്പ്രൈറ്റ് ടേബിൾ”… അതല്ലേ?)

    • 2

      ഞങ്ങൾ രണ്ട് വ്യത്യസ്ത കാര്യങ്ങൾ സംസാരിക്കുന്നുണ്ടാകാം, മർക്കോ. സി‌എസ്‌എസ് ഉപയോഗിച്ച്, കോർഡിനേറ്റുകൾ ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കുന്നതിനായി ഒരു ഇമേജ് ഫയലിന്റെ ഏത് 'ഭാഗം' നിങ്ങൾക്ക് അടിസ്ഥാനപരമായി വ്യക്തമാക്കാൻ കഴിയും. നിങ്ങളുടെ എല്ലാ ചിത്രങ്ങളും ഒരൊറ്റ 'സ്പ്രൈറ്റ്' ആക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, തുടർന്ന് നിങ്ങൾ CSS ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ഏരിയയിലേക്ക് പോയിന്റ് ചെയ്യുക.

നീ എന്ത് ചിന്തിക്കുന്നു?

സ്പാം കുറയ്ക്കുന്നതിന് ഈ സൈറ്റ് Akismet ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ അഭിപ്രായ ഡാറ്റ പ്രോസസ്സുചെയ്യുന്നത് എങ്ങനെയെന്നറിയുക.