നിങ്ങളുടെ React അല്ലെങ്കിൽ Next.js ആപ്പ് ഓരോ റിലീസിലും വേഗത കുറഞ്ഞു. ബണ്ടിൽ വലുതായി, ചിത്രങ്ങൾ പൂർണ്ണ വലുപ്പത്തിൽ അയച്ചു, ഒരു മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റ് ആദ്യത്തെ പെയിന്റിനെ തടഞ്ഞു, ഓരോ കീസ്ട്രോക്കിലും ഒരു ലിസ്റ്റ് വീണ്ടും റെൻഡർ ചെയ്യുന്നു. ഇവയിൽ ഏതാണ് നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് സമയം നഷ്ടപ്പെടുത്തുന്നതെന്ന് ഞാൻ അളക്കുന്നു, തുടർന്ന് പരിഹരിക്കേണ്ടവ പരിഹരിക്കുന്നു.
ഞാൻ നിങ്ങളുടെ React അല്ലെങ്കിൽ Next.js ആപ്പ് പ്രൊഫൈൽ ചെയ്യുകയും നമ്പറുകൾ ഉപയോഗിച്ച് അത് വേഗത്തിലാക്കുകയും ചെയ്യും
നിങ്ങളുടെ ആപ്പിന്റെ ഒരു പേജിൽ ലൈറ്റ്ഹൗസും പ്രൊഫൈലറും, കണ്ടെത്തലുകൾ ലാഭത്തിന്റെ അടിസ്ഥാനത്തിൽ റാങ്ക് ചെയ്തിരിക്കുന്നു.
- ഒരു പേജ് പ്രൊഫൈൽ ചെയ്തു, റാങ്ക് ചെയ്തു
ഓഡിറ്റ്, തുടർന്ന് നമ്പറുകൾ മാറ്റുന്നതിനുള്ള പരിഹാരങ്ങൾ, മുമ്പും ശേഷവും അളക്കുന്നു.
- ഓഡിറ്റും പ്രധാന പരിഹാരങ്ങളും
- സോഴ്സ് കോഡ്
5 റൂട്ടുകൾ വരെ, റെൻഡറിംഗും കാഷിംഗും, CI-യിലെ ഒരു ബണ്ടിൽ ബഡ്ജറ്റ്, പൂർണ്ണമായ താരതമ്യം.
- ഡീപ് പാസ്, 5 റൂട്ടുകൾ വരെ
- സോഴ്സ് കോഡ്
ഒരു കസ്റ്റം ഓഫർ അഭ്യർത്ഥിക്കുക
ഈ സിന്നറിൽ നിന്ന് വ്യക്തിഗതമാക്കിയ ഓഫർ അഭ്യർത്ഥിക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രീ-സെയിൽ ചോദ്യം ചോദിക്കുക
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകഒരു ചോദ്യം ചോദിക്കാൻ ലോഗിൻ ചെയ്യുക
പ്ലാറ്റ്ഫോം സ്പാം കുറയ്ക്കുന്നതിന്, പ്രീ-സെയിൽ സന്ദേശങ്ങൾ ലോഗിൻ ചെയ്ത ഉപയോക്താക്കൾക്ക് മാത്രമേ അയയ്ക്കാൻ കഴിയൂ.
ഈ സിന്നറിന് നേരിട്ട് സന്ദേശം അയയ്ക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
ലോഗിൻ ആവശ്യമാണ്
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകലോഗിൻ ആവശ്യമാണ്
ഈ Zinner-ന് സന്ദേശം അയയ്ക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകലോഗിൻ ആവശ്യമാണ്
വ്യക്തിഗതമാക്കിയ ഓഫറിനായി അഭ്യർത്ഥിക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകഒറ്റനോട്ടത്തിൽ
നിങ്ങൾക്ക് തീരുമാനമെടുക്കാൻ സഹായിക്കുന്ന ഈ സേവനത്തെക്കുറിച്ചുള്ള പ്രധാന വിവരങ്ങൾ. Zinn Hub ആണ് ഇത് ഉണ്ടാക്കിയത്, വിൽപ്പനക്കാരനല്ല.
മൂല്യ സ്ഥാനം
Measurement Approach
ഉൾപ്പെടുന്ന ഫ്രെയിംവർക്കുകൾ
Metrics Reported
ഡെലിവറി രീതി
നിങ്ങൾക്ക് എന്ത് ലഭിക്കും
പൂർണ്ണ വിവരണം
വേഗത കുറഞ്ഞ പേജുകൾ നിങ്ങൾക്ക് സൈൻഅപ്പുകളോ തിരയൽ ട്രാഫിക്കോ നഷ്ടപ്പെടുത്തുന്നുവെന്ന് നിങ്ങൾ കരുതുന്നുവെങ്കിൽ ഇത് ഓർഡർ ചെയ്യുക, കൂടാതെ നിങ്ങളുടെ പക്കലുള്ള ആപ്പ് നിലനിർത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ. React, Next.js എന്നിവ ഒരു വേഗതയേറിയ ആപ്പിന് ആവശ്യമായ മിക്ക കാര്യങ്ങളും ഇതിനകം നൽകുന്നു, അതിനാൽ സ്റ്റാക്കുകൾ മാറ്റുന്നതിനുപകരം ആ ടൂളുകൾ നന്നായി ഉപയോഗിക്കുന്നതിലൂടെയാണ് നേട്ടങ്ങൾ വരുന്നത്.
നിങ്ങൾക്ക് വിശേഷണങ്ങളല്ല, നമ്പറുകളാണ് ലഭിക്കുന്നത്: LCP, CLS, INP, ഓരോ റൂട്ടിനും ബണ്ടിൽ വലുപ്പം, ഒരേ ത്രോട്ടിൽ ചെയ്ത കണക്ഷനിൽ മുമ്പും ശേഷവും അളക്കുന്നത്, ഒരു പട്ടികയിൽ.
സ്റ്റാർട്ടർ ഒരു പേജിന്റെ ഓഡിറ്റാണ്: റണ്ണുകൾ, ലാഭത്തിന്റെ അടിസ്ഥാനത്തിൽ റാങ്ക് ചെയ്ത കണ്ടെത്തലുകൾ, കോഡിൽ മാറ്റമൊന്നുമില്ല. സ്റ്റാൻഡേർഡ് ആ ഓഡിറ്റിൽ നിന്ന് ആരംഭിച്ച് ആ നമ്പറുകൾ മാറ്റുന്ന പരിഹാരങ്ങൾക്കായി ബാക്കി സമയം ചെലവഴിക്കുന്നു. അഡ്വാൻസ്ഡ് 5 റൂട്ടുകൾ വരെ ഉൾക്കൊള്ളുന്നു, റെൻഡറിംഗും കാഷിംഗും ട്യൂൺ ചെയ്യുന്നു, കൂടാതെ CI-യിൽ ഒരു ബണ്ടിൽ ബഡ്ജറ്റ് നൽകുന്നു, അതിനാൽ അടുത്ത റിലീസിന് ഈ ജോലി നിശബ്ദമായി ഇല്ലാതാക്കാൻ കഴിയില്ല.
നിങ്ങളുടെ റിപ്പോസിറ്ററിയിലെ ഒരു ബ്രാഞ്ചിൽ, കമ്മിറ്റ് അനുസരിച്ച്, ഓരോന്നിനും അതിൻ്റേതായ കാരണം സഹിതം ജോലി നടക്കുന്നു. നിങ്ങൾ ആവശ്യപ്പെട്ടില്ലെങ്കിൽ ഞാൻ ഒന്നും വിന്യസിക്കില്ല.
കോളുകളൊന്നുമില്ല. എന്നോട് വിയോജിക്കുന്ന അളവുകൾ ഉൾപ്പെടെ എല്ലാം രേഖാമൂലം.
നിങ്ങളുടെ പ്രോജക്റ്റ് പൂർത്തിയാക്കുന്നതിനുള്ള ഘട്ടങ്ങൾ
1. നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് യഥാർത്ഥത്തിൽ ലഭിക്കുന്നത് അളക്കുക - നിങ്ങളുടെ ലൈവ് പേജുകളിലെ ലൈറ്റ്ഹൗസും വേഗത കുറഞ്ഞ പേജുകളിലെ റിയാക്റ്റ് പ്രൊഫൈലർ സെഷനും, ത്രോട്ടിൽ ചെയ്ത കണക്ഷനിൽ. LCP, CLS, INP, ഓരോ റൂട്ടിലെയും ബണ്ടിൽ വലുപ്പം എന്നിവ ഒന്നും ചെയ്യുന്നതിന് മുമ്പ് രേഖപ്പെടുത്തുക.
2. ഏറ്റവും കൂടുതൽ ചിലവാക്കുന്നത് കണ്ടെത്തുക - ബണ്ടിലും നെറ്റ്വർക്ക് വാട്ടർഫാളും: ആരും ഉപയോഗിക്കാത്തത് എന്താണ്, ആദ്യത്തെ പെയിന്റിനെ തടയുന്നത് എന്താണ്, ഏതൊക്കെ ഘടകങ്ങളാണ് വീണ്ടും റെൻഡർ ചെയ്യുന്നത്, എന്തുകൊണ്ട്. ഓരോ കണ്ടെത്തലിനും മില്ലിസെക്കൻഡിലോ കിലോബൈറ്റിലോ ഒരു ഏകദേശ ലാഭം ഉണ്ടാകും.
3. അത് ശരിയാക്കുക, ഏറ്റവും വലിയ നേട്ടം ആദ്യം - കോഡ് സ്പ്ലിറ്റിംഗ്, ഇമേജ്, ഫോണ്ട് കൈകാര്യം ചെയ്യൽ, റെൻഡർ-ബ്ലോക്കിംഗ് വർക്ക്, പ്രൊഫൈലർ ആവശ്യപ്പെടുന്നിടത്ത് മെമോയിസേഷൻ, ക്രിട്ടിക്കൽ പാതയിൽ നിന്ന് ഡാറ്റാ ഫെച്ചിംഗ് മാറ്റുക. ഓരോ മാറ്റത്തിനും ഒരു കമ്മിറ്റ്, ഓരോന്നിനും അതിൻ്റേതായ കാരണം.
4. വീണ്ടും അളക്കുക, അടുത്തടുത്ത് - മാറ്റം വരുത്തിയ ബിൽഡിൽ അതേ റണ്ണുകൾ: ഓരോ റൂട്ടിനും ഓരോ മെട്രിക്കിനും ഒരു പട്ടികയിൽ മുമ്പും ശേഷവും. ഒരു മാറ്റം എന്തെങ്കിലും മോശമാക്കിയെങ്കിൽ, പട്ടിക അത് പറയുന്നു, മാറ്റം തിരികെ പോകുന്നു.
5. നിങ്ങളുടെ റിപ്പോസിറ്ററിയിൽ കൈമാറ്റം - നിങ്ങളുടെ റിപ്പോസിറ്ററിയിലെ ഒരു ബ്രാഞ്ചോ പാച്ചോ, റിപ്പോർട്ടും, ഞാൻ ചെയ്യാത്ത കാര്യങ്ങളുടെയും അതിൻ്റെ മൂല്യത്തിൻ്റെയും സത്യസന്ധമായ ഒരു ലിസ്റ്റും. വിന്യാസം നിങ്ങളുടെ കൈകളിൽ തന്നെ തുടരും.
Zinner ഗുണമേന്മ ഉറപ്പ്
ഓരോ Zinner-നെയും പ്ലാറ്റ്ഫോമിൽ ചേരുന്നതിന് മുമ്പ് അവലോകനം ചെയ്യുകയും അംഗീകരിക്കുകയും ചെയ്യുന്നു.
എല്ലാ സേവനങ്ങൾക്കും ഞങ്ങളുടെ ഗുണമേന്മ ഉറപ്പ് പ്രതിബദ്ധതയുടെ പിന്തുണയുണ്ട്.
ഡെലിവർ ചെയ്ത ജോലി നിങ്ങൾ അംഗീകരിക്കുന്നത് വരെ നിങ്ങളുടെ പേയ്മെന്റ് പരിരക്ഷിക്കപ്പെടും.
പാക്കേജുകൾ താരതമ്യം ചെയ്യുക
| ഫംഗ്ഷൻ | തുടക്കക്കാരൻ | സ്റ്റാൻഡേർഡ് | വിപുലമായത് |
|---|---|---|---|
| ഡെലിവറി സമയം | 2 ദിവസങ്ങൾ | 4 ദിവസങ്ങൾ | 8 ദിവസങ്ങൾ |
| പുനരവലോകനങ്ങൾ | 0 | 2 | 3 |
| വ്യാപ്തി | ഒരു പേജ് പ്രൊഫൈൽ ചെയ്തു, റാങ്ക് ചെയ്തു | ഓഡിറ്റും പ്രധാന പരിഹാരങ്ങളും | ആഴത്തിലുള്ള പാസ്, 5 റൂട്ടുകൾ വരെ |
| സോഴ്സ് കോഡ് | ✕ | ✓ | ✓ |
പോർട്ട്ഫോളിയോ
ഈ Zinn-മായി ബന്ധപ്പെട്ട വിൽപ്പനക്കാരന്റെ ജോലിയുടെ ഉദാഹരണങ്ങൾ.
ഫോംലൈൻ: സ്ട്രൈപ്പ് ഉള്ള Next.js സ്റ്റോർ
നിങ്ങൾക്ക് ക്ലിക്ക് ചെയ്യാൻ കഴിയുന്ന ഒരു സ്റ്റോർഫ്രണ്ട്: 16 പോസ്റ്ററുകൾ 4 ശേഖരങ്ങളിൽ, URL-ൽ തുടരുന്ന ഫിൽട്ടറുകളും തിരയലും, ഒരു കാർട്ട്, ലൈറ്റ്, ഡാർക്ക് തീമുകൾ, ഒരു ഡെമോ ഓർഡറിലോ ടെസ്റ്റ് മോഡിൽ ഒരു യഥാർത്ഥ സ്ട്രൈപ്പ് ചെക്ക്ഔട്ട് സെഷനിലോ അവസാനിക്കുന്ന ഒരു ചെക്ക്ഔട്ട്. ഞാൻ ഇത് Next.js സ്റ്റാറ്റിക് എക്സ്പോർട്ടായി ടൈപ്പ്സ്ക്രിപ്റ്റിൽ ടെയിൽവിൻഡ് CSS ഉപയോഗിച്ച് നിർമ്മിച്ചു. കാർഡ് പേയ്മെന്റുകൾ ഒരു ക്ലൗഡ്ഫ്ലെയർ വർക്കറിലൂടെയാണ് നടക്കുന്നത്, അത് സെർവറിൽ കാർട്ടിന്റെ വില പുനർനിർണ്ണയിക്കുകയും സ്ട്രൈപ്പിന്റെ വെബ്ഹുക്ക് സിഗ്നേച്ചർ പരിശോധിക്കുകയും ചെയ്യുന്നു.
Next.js-ലെ ദ്വിഭാഷാ വ്യക്തിഗത സൈറ്റ്
ഇംഗ്ലീഷിലും റഷ്യനിലും ഒരു പേജുള്ള ഒരു വ്യക്തിഗത സൈറ്റ്, ഒരു സേവന വിഭാഗവും എന്റെ ഡെമോ പ്രോജക്റ്റുകളിലേക്കുള്ള ലിങ്കുകളും സഹിതം. ഞാൻ ഇത് Next.js, React, TypeScript എന്നിവ ഉപയോഗിച്ച് ഒരു സ്റ്റാറ്റിക് എക്സ്പോർട്ടായി രൂപകൽപ്പന ചെയ്യുകയും നിർമ്മിക്കുകയും ചെയ്തു, പ്ലെയിൻ CSS മൊഡ്യൂളുകൾ ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്തു, UI ഫ്രെയിംവർക്ക് ഇല്ല. ഇതിന് ലൈറ്റ്, ഡാർക്ക് തീമുകൾ ഉണ്ട്, ഓരോ ഭാഷയ്ക്കും ഒരു സോഷ്യൽ പ്രിവ്യൂ ചിത്രം ബിൽഡ് സമയത്ത് ജനറേറ്റ് ചെയ്യുന്നു. GitHub Actions ഇത് നിർമ്മിച്ച് Bunny CDN-ലേക്ക് വിന്യസിക്കുന്നു, ഇത് സുരക്ഷാ ഹെഡറുകൾ ചേർക്കുകയും www, പ്ലെയിൻ HTTP എന്നിവ പ്രധാന HTTPS വിലാസത്തിലേക്ക് റീഡയറക്ട് ചെയ്യുകയും ചെയ്യുന്നു.
സേവന വിശദാംശങ്ങൾ
പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ
ഇല്ല, നിങ്ങളുടെ കോഡ് കാണുന്നതിന് മുമ്പ് അത് വാഗ്ദാനം ചെയ്യുന്ന ആരുമായും ശ്രദ്ധിക്കുക. ഒരു ചെക്ക്ഔട്ട് വിജറ്റോ ഒരു പരസ്യ സ്ക്രിപ്റ്റോ ഞാൻ എന്ത് ചെയ്താലും സ്കോർ പരിമിതപ്പെടുത്താൻ കഴിയും. ഓഡിറ്റ് നിങ്ങളുടെ പരിധിയും അത് നേടുന്നതിനുള്ള ചിലവും നിങ്ങളോട് പറയുന്നു.
ഇല്ല. Vite, CRA, Remix അല്ലെങ്കിൽ ഒരു പ്ലെയിൻ SPA എല്ലാം ഒരേ രീതിയിൽ പ്രൊഫൈൽ ചെയ്യുന്നു. ഫ്രെയിംവർക്ക്-നിർദ്ദിഷ്ട പരിഹാരങ്ങൾ മാത്രമേ വ്യത്യാസപ്പെടുകയുള്ളൂ: Next.js റെൻഡറിംഗ് മോഡുകൾക്ക് പകരം റൂട്ട്-ലെവൽ സ്പ്ലിറ്റിംഗും കാഷിംഗും.
അതെ. സ്റ്റാൻഡേർഡ് അതേ ഓഡിറ്റിൽ ആരംഭിക്കുകയും കണ്ടെത്തിയവ പരിഹരിക്കുന്നതിന് ശേഷിക്കുന്ന സമയം ചെലവഴിക്കുകയും ചെയ്യുന്നു. സ്വയം ജോലി ചെയ്യാൻ പോകുന്ന ടീമുകൾക്ക് വേണ്ടിയാണ് സ്റ്റാർട്ടർ നിലവിലുള്ളത്, അവർക്ക് എവിടെയാണ് കുഴിക്കേണ്ടതെന്ന് മാത്രം അറിഞ്ഞാൽ മതി.
ഓഡിറ്റ് അത് കാണുന്നു: സെർവർ പ്രതികരണ സമയം റെൻഡർ, സ്ക്രിപ്റ്റ് ചെലവ് എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമായി കാണിക്കുന്നു. API അല്ലെങ്കിൽ ചോദ്യങ്ങൾ പ്രൊഫൈൽ ചെയ്യുന്നത് Node, Express, NestJS അല്ലെങ്കിൽ Rust എന്നിവയിലെ ആഡ്-ഓൺ ആണ്.
റിപ്പോസിറ്ററിയിലേക്ക് വായിക്കാനുള്ള അനുമതി, അല്ലെങ്കിൽ സോഴ്സിൻ്റെ ഒരു ആർക്കൈവ്, കൂടാതെ പേജിൻ്റെ URL. സ്റ്റാൻഡേർഡിലും അഡ്വാൻസ്ഡിലും ഞാൻ പരിഹാരങ്ങൾ ഒരു ബ്രാഞ്ചിലേക്ക് പുഷ് ചെയ്യുന്നു, അതിനാൽ ഒരെണ്ണം സൃഷ്ടിക്കാൻ എനിക്ക് അനുമതി ആവശ്യമാണ്. നിങ്ങൾക്ക് അത് നൽകാൻ താൽപ്പര്യമില്ലെങ്കിൽ, ഞാൻ പകരം ഒരു പാച്ച് അയയ്ക്കും. എനിക്ക് ഒരിക്കലും വിന്യാസ ആക്സസ് ആവശ്യമില്ല.
സ്ഥിരസ്ഥിതിയായി നിങ്ങളുടെ ലൈവ് പ്രൊഡക്ഷൻ പേജുകളിൽ, അതിനാൽ നമ്പറുകൾ നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് ലഭിക്കുന്നതുമായി പൊരുത്തപ്പെടുന്നു. പേജ് ഒരു ലോഗിൻ പിന്നിലാണെങ്കിൽ അല്ലെങ്കിൽ ഇതുവരെ വിന്യസിച്ചിട്ടില്ലെങ്കിൽ, ഒരു സ്റ്റേജിംഗ് ലിങ്ക്, ഒരു ടെസ്റ്റ് അക്കൗണ്ട് അല്ലെങ്കിൽ പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കാനുള്ള ഘട്ടങ്ങൾ എല്ലാം പ്രവർത്തിക്കും, കൂടാതെ നമ്പറുകൾ എവിടെ നിന്ന് വന്നുവെന്ന് റിപ്പോർട്ട് പറയുന്നു.
ഉപഭോക്തൃ അവലോകനങ്ങൾ
ഈ Zinn-നെക്കുറിച്ച് ഞങ്ങളുടെ ഉപഭോക്താക്കൾ എന്താണ് പറയുന്നതെന്ന് കാണുക
വിഭാഗങ്ങൾ
Zinner നയങ്ങൾ
ബന്ധപ്പെട്ട Zinns
റിയാക്റ്റ് ജെഎസും ടെയിൽവിൻഡ് സിഎസ്എസും ഉപയോഗിച്ച് റെസ്പോൺസീവ് ഫ്രണ്ടെൻഡ് വെബ് ആപ്പുകൾ ഞാൻ വികസിപ്പിക്കും
വെബ്സൈറ്റ് ഡെവലപ്മെന്റ്, വേർഡ്പ്രസ്സ്, ഷോപ്പിഫൈ, ജൂംല, റിയാക്റ്റ് എന്നിവ ചെയ്യുക
ഉയർന്ന പ്രകടനമുള്ള NextJS Firebase ChakraUI API ഇൻ്റഗ്രേഷൻ വെബ്സൈറ്റ് നിർമ്മിക്കുക
