Next.js பண்ட்லர் பகுப்பாய்வு: உலகளாவிய செயல்திறனுக்கான பில்ட் அளவை மேம்படுத்துதல்

இன்றைய உலகமயமாக்கப்பட்ட உலகில், வேகமான மற்றும் திறமையான வலை அனுபவங்களை வழங்குவது மிக முக்கியம். பல்வேறு புவியியல் இடங்கள், இணைய வேகம் மற்றும் சாதனத் திறன்களைக் கொண்ட பயனர்கள் தடையற்ற தொடர்புகளை எதிர்பார்க்கிறார்கள். Next.js, ஒரு பிரபலமான ரியாக்ட் ஃபிரேம்வொர்க், செயல்திறன் மிக்க வலைப் பயன்பாடுகளை உருவாக்க சக்திவாய்ந்த அம்சங்களை வழங்குகிறது. இருப்பினும், பில்ட் அளவை மேம்படுத்துவதைப் புறக்கணிப்பது பயனர் அனுபவத்தை கணிசமாகப் பாதிக்கலாம், குறிப்பாக குறைந்த அலைவரிசை அல்லது பழைய சாதனங்களைக் கொண்டவர்களுக்கு. இந்த வழிகாட்டி Next.js பண்ட்லர் பகுப்பாய்வு நுட்பங்கள் மற்றும் பில்ட் அளவைக் குறைப்பதற்கான உத்திகள் பற்றிய விரிவான கண்ணோட்டத்தை வழங்குகிறது, இது உலகளாவிய பார்வையாளர்களுக்கு உகந்த செயல்திறனை உறுதி செய்கிறது.

Next.js பண்ட்லரைப் புரிந்துகொள்வது

Next.js பின்னணியில் வெப்பேக் (அல்லது எதிர்கால பதிப்புகளில் மற்ற பண்ட்லர்கள்) பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட், CSS, மற்றும் பிற சொத்துக்களை உலாவிற்கான உகந்த பண்டில்களாக தொகுக்கிறது. ஒரு பண்ட்லரின் முதன்மைப் பொறுப்பு, உங்கள் அனைத்து மூலக் குறியீட்டையும் சார்புகளையும் எடுத்து, பயனரின் உலாவிக்கு திறமையாக வழங்கக்கூடிய கோப்புகளின் தொகுப்பாக மாற்றுவதாகும். பண்ட்லர் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது மேம்படுத்தலுக்கான சாத்தியமான பகுதிகளைக் கண்டறிந்து சரிசெய்வதற்கு முக்கியமானது.

முக்கிய கருத்துக்கள்

• பண்டில்கள்: பண்ட்லரால் உருவாக்கப்படும் வெளியீட்டுக் கோப்புகள், உங்கள் பயன்பாட்டின் குறியீடு மற்றும் சொத்துக்களைக் கொண்டிருக்கும்.
• சங்குகள் (Chunks): ஒரு பண்டிலுக்குள் இருக்கும் சிறிய குறியீட்டு அலகுகள், பெரும்பாலும் கோட் ஸ்பிளிட்டிங் மூலம் உருவாக்கப்படுகின்றன.
• கோட் ஸ்பிளிட்டிங்: உங்கள் பயன்பாட்டின் குறியீட்டை சிறிய துண்டுகளாகப் பிரிப்பது, அவை தேவைக்கேற்ப ஏற்றப்படலாம், இது ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்துகிறது.
• ட்ரீ ஷேக்கிங்: உங்கள் பண்டில்களிலிருந்து பயன்படுத்தப்படாத குறியீட்டை (டெட் கோட்) நீக்கும் செயல்முறை.
• சார்புகள் (Dependencies): உங்கள் பயன்பாடு சார்ந்திருக்கும் வெளிப்புற நூலகங்கள் மற்றும் தொகுப்புகள்.

உலகளாவிய பார்வையாளர்களுக்கு பில்ட் அளவு ஏன் முக்கியம்

பில்ட் அளவு பல முக்கிய செயல்திறன் அளவீடுகளை நேரடியாகப் பாதிக்கிறது, இது ஒரு நேர்மறையான பயனர் அனுபவத்திற்கு முக்கியமானது, குறிப்பாக மெதுவான இணைய இணைப்புகளைக் கொண்ட பகுதிகளில் உள்ள பயனர்களுக்கு:

• முதல் பைட் நேரம் (TTFB): சேவையகத்திலிருந்து தரவின் முதல் பைட்டை உலாவி பெறுவதற்கு எடுக்கும் நேரம். பெரிய பில்ட் அளவுகள் TTFB-ஐ அதிகரிக்கின்றன.
• முதல் உள்ளடக்க பெயிண்ட் (FCP): திரையில் முதல் உள்ளடக்கத் துண்டு தோன்றுவதற்கு எடுக்கும் நேரம்.
• பெரிய உள்ளடக்க பெயிண்ட் (LCP): மிகப்பெரிய உள்ளடக்க உறுப்பு தெரிவதற்கு எடுக்கும் நேரம்.
• செயல்படத் தொடங்கும் நேரம் (TTI): பக்கம் முழுமையாக ஊடாடக்கூடியதாக மாறுவதற்கு எடுக்கும் நேரம்.
• பயனர் ஈடுபாடு மற்றும் மாற்று விகிதங்கள்: மெதுவாக ஏற்றப்படும் வலைத்தளங்கள் பெரும்பாலும் அதிக பவுன்ஸ் விகிதங்களுக்கும் குறைந்த மாற்று விகிதங்களுக்கும் வழிவகுக்கும்.

உதாரணமாக, தென்கிழக்கு ஆசியாவில் உள்ள ஒரு பயனர் உங்கள் மின்-வணிக வலைத்தளத்தை 3G இணைப்புடன் ஒரு மொபைல் சாதனத்தில் அணுகுவதைக் கவனியுங்கள். ஒரு பெரிய, மேம்படுத்தப்படாத பண்டில் கணிசமாக தாமதமான FCP மற்றும் TTI-க்கு வழிவகுக்கும், இது ஒரு வெறுப்பூட்டும் பயனர் அனுபவத்திற்கும் சாத்தியமான விற்பனை இழப்பிற்கும் வழிவகுக்கும். பில்ட் அளவை மேம்படுத்துவது அனைத்து பயனர்களுக்கும், அவர்களின் இருப்பிடம் அல்லது இணைய வேகத்தைப் பொருட்படுத்தாமல், ஒரு மென்மையான மற்றும் வேகமான அனுபவத்தை உறுதிப்படுத்த உதவுகிறது.

Next.js பண்ட்லர் பகுப்பாய்விற்கான கருவிகள்

உங்கள் Next.js பண்டில்களைப் பகுப்பாய்வு செய்து மேம்படுத்தலுக்கான பகுதிகளைக் கண்டறிய பல கருவிகள் உள்ளன:

வெப்பேக் பண்டில் அனலைசர் (Webpack Bundle Analyzer)

வெப்பேக் பண்டில் அனலைசர் என்பது உங்கள் பண்டில்களின் கலவையைப் புரிந்துகொள்ள உதவும் ஒரு காட்சி கருவியாகும். இது உங்கள் பயன்பாட்டில் உள்ள ஒவ்வொரு தொகுதி மற்றும் சார்பு அளவைக் காட்டும் ஒரு ஊடாடும் ட்ரீமேப்பை உருவாக்குகிறது.

நிறுவுதல்:

npm install --save-dev webpack-bundle-analyzer

கட்டமைப்பு (next.config.js):

            const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // your Next.js config here
})

            

              
                Copy
              
            
          

அனலைசரை இயக்குதல்:

உங்கள் பயன்பாட்டை உருவாக்கும்போது ANALYZE சூழல் மாறியை true என அமைக்கவும்:

ANALYZE=true npm run build

இது உங்கள் உலாவியில் உங்கள் பண்டில்களின் காட்சிப் பிரதிநிதித்துவத்தை உருவாக்கும், இது பெரிய சார்புகள் மற்றும் மேம்படுத்தலுக்கான சாத்தியமான பகுதிகளைக் கண்டறிய உங்களை அனுமதிக்கிறது.

@next/bundle-analyzer

இது அதிகாரப்பூர்வ Next.js பண்டில் அனலைசர் ரேப்பர் ஆகும், இது உங்கள் Next.js திட்டங்களுடன் ஒருங்கிணைப்பதை எளிதாக்குகிறது.

நிறுவுதல்:

npm install --save-dev @next/bundle-analyzer

பயன்பாடு (next.config.js):

            const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // your Next.js config here
})

            

              
                Copy
              
            
          

வெப்பேக் பண்டில் அனலைசரைப் போலவே, பகுப்பாய்வு அறிக்கையை உருவாக்க உருவாக்க செயல்முறையின் போது ANALYZE சூழல் மாறியை true என அமைக்கவும்.

சோர்ஸ் மேப் எக்ஸ்ப்ளோரர் (Source Map Explorer)

சோர்ஸ் மேப் எக்ஸ்ப்ளோரர் என்பது சோர்ஸ் மேப்களைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் பண்டில்களைப் பகுப்பாய்வு செய்யும் மற்றொரு கருவியாகும். இது பண்டில் அளவிற்கு அதிகமாக பங்களிக்கும் அசல் மூலக் குறியீட்டைக் கண்டறிய உதவுகிறது.

நிறுவுதல்:

npm install -g source-map-explorer

பயன்பாடு:

முதலில், உங்கள் உற்பத்தி உருவாக்கத்திற்கான சோர்ஸ் மேப்களை உருவாக்கவும். next.config.js இல்:

            module.exports = {
  productionBrowserSourceMaps: true,
}
            

              
                Copy
              
            
          

பின்னர், சோர்ஸ் மேப் எக்ஸ்ப்ளோரரை இயக்கவும்:

source-map-explorer .next/static/chunks/main-*.js

பண்டில்ஃபோபியா (BundlePhobia)

பண்டில்ஃபோபியா உங்களை தனிப்பட்ட npm தொகுப்புகளை நிறுவும் முன் அவற்றின் அளவைப் பகுப்பாய்வு செய்ய அனுமதிக்கிறது. இது எந்த சார்புகளைப் பயன்படுத்துவது என்பது பற்றிய தகவலறிந்த முடிவுகளை எடுப்பதற்கும், சிறிய தடம் கொண்ட சாத்தியமான மாற்றுகளைக் கண்டறிவதற்கும் உதவியாக இருக்கும்.

பயன்பாடு:

பண்டில்ஃபோபியா வலைத்தளத்திற்கு (bundlephobia.com) சென்று, நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் npm தொகுப்பைத் தேடவும். வலைத்தளம் தொகுப்பின் அளவு, சார்புகள் மற்றும் பதிவிறக்க நேரம் பற்றிய தகவல்களை வழங்கும்.

Next.js இல் பில்ட் அளவை மேம்படுத்துவதற்கான உத்திகள்

உங்கள் பண்டில்களைப் பகுப்பாய்வு செய்து, மேம்படுத்தலுக்கான சாத்தியமான பகுதிகளைக் கண்டறிந்ததும், பின்வரும் உத்திகளைச் செயல்படுத்தலாம்:

1. கோட் ஸ்பிளிட்டிங் (Code Splitting)

ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைப்பதற்கான மிகவும் பயனுள்ள நுட்பங்களில் ஒன்று கோட் ஸ்பிளிட்டிங் ஆகும். இது உங்கள் பயன்பாட்டின் குறியீட்டை சிறிய துண்டுகளாக உடைப்பதை உள்ளடக்கியது, அவை தேவைக்கேற்ப ஏற்றப்படலாம். Next.js தானாகவே வழித்தட மட்டத்தில் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்துகிறது, அதாவது உங்கள் பயன்பாட்டில் உள்ள ஒவ்வொரு பக்கமும் ஒரு தனித் துண்டாக ஏற்றப்படுகிறது.

டைனமிக் இறக்குமதிகள்:

டைனமிக் இறக்குமதிகளை (import()) பயன்படுத்தி கூறுகள் மற்றும் தொகுதிகளை தேவைப்படும்போது மட்டுமே ஏற்றுவதன் மூலம் கோட் ஸ்பிளிட்டிங்கை மேலும் மேம்படுத்தலாம். இது பக்கத்தில் உடனடியாகத் தெரியாத பெரிய கூறுகள் அல்லது தொகுதிகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

            import dynamic from 'next/dynamic'

const MyComponent = dynamic(() => import('../components/MyComponent'))

function MyPage() {
  return (
    

      {/* Other content */}
      
    
  )
}

export default MyPage

            

              
                Copy
              
            
          

next/dynamic செயல்பாடு உங்களை டைனமிக்காக கூறுகளை ஏற்ற அனுமதிக்கிறது. கூறு ஏற்றப்படும்போது ஒரு ஏற்றுதல் குறிகாட்டியைக் காட்டவும் அதை நீங்கள் கட்டமைக்கலாம்.

            const MyComponent = dynamic(() => import('../components/MyComponent'), {
  loading: () => 
Loading...
})

            

              
                Copy
              
            
          

2. ட்ரீ ஷேக்கிங் (Tree Shaking)

ட்ரீ ஷேக்கிங் என்பது உங்கள் பண்டில்களிலிருந்து டெட் கோட் (பயன்படுத்தப்படாத குறியீடு) அகற்றும் செயல்முறையாகும். வெப்பேக் போன்ற நவீன ஜாவாஸ்கிரிப்ட் பண்ட்லர்கள் தானாகவே ட்ரீ ஷேக்கிங்கைச் செய்கின்றன. இருப்பினும், உங்கள் குறியீடு ட்ரீ ஷேக்கிங்கிற்கு உகந்த வகையில் எழுதப்பட்டிருப்பதை உறுதி செய்வதன் மூலம் அதன் செயல்திறனை மேம்படுத்தலாம்.

ES தொகுதிகள்:

CommonJS (require) க்குப் பதிலாக ES தொகுதிகளை (import மற்றும் export தொடரியல்) பயன்படுத்தவும், ஏனெனில் ES தொகுதிகள் நிலையாக பகுப்பாய்வு செய்யக்கூடியவை, இது பண்ட்லருக்கு பயன்படுத்தப்படாத ஏற்றுமதிகளைக் கண்டறிந்து அகற்ற அனுமதிக்கிறது.

பக்க விளைவுகளைத் தவிர்க்கவும்:

உங்கள் தொகுதிகளில் பக்க விளைவுகளைக் கொண்ட குறியீட்டை (உலகளாவிய நிலையை மாற்றும் குறியீடு) தவிர்க்கவும். பக்க விளைவுகள் பண்ட்லர் பயன்படுத்தப்படாத குறியீட்டைப் பாதுகாப்பாக அகற்றுவதைத் தடுக்கலாம்.

3. சார்புகளை மேம்படுத்துதல்

உங்கள் சார்புகள் உங்கள் பில்ட் அளவை கணிசமாக பாதிக்கலாம். உங்கள் சார்புகளை கவனமாக மதிப்பீடு செய்து பின்வருவனவற்றைக் கவனியுங்கள்:

• சிறிய மாற்றுகளைப் பயன்படுத்துங்கள்: பெரிய நூலகங்களுக்கு சிறிய மாற்றுகளைத் தேடுங்கள். உதாரணமாக, நீங்கள் ஒரு பெரிய தேதி வடிவமைப்பு நூலகத்தை ஒரு சிறிய, அதிக சிறப்பு வாய்ந்த நூலகத்துடன் மாற்றலாம்.
• உங்களுக்குத் தேவையானதை மட்டும் இறக்குமதி செய்யுங்கள்: முழு நூலகத்தையும் இறக்குமதி செய்வதற்குப் பதிலாக, ஒரு நூலகத்திலிருந்து உங்களுக்குத் தேவையான குறிப்பிட்ட செயல்பாடுகள் அல்லது தொகுதிகளை மட்டும் இறக்குமதி செய்யுங்கள்.
• சார்புகளை லேசி லோட் செய்யுங்கள்: உடனடியாகத் தேவைப்படாத சார்புகளை லேசி லோட் செய்ய டைனமிக் இறக்குமதிகளைப் பயன்படுத்தவும்.
• பயன்படுத்தப்படாத சார்புகளை அகற்றவும்: உங்கள் package.json கோப்பைத் தவறாமல் மதிப்பாய்வு செய்து, இனி பயன்படுத்தப்படாத சார்புகளை அகற்றவும்.

உதாரணமாக, Lodash ஒரு பிரபலமான பயன்பாட்டு நூலகம், ஆனால் இது உங்கள் பண்டில் அளவிற்கு குறிப்பிடத்தக்க சுமையைச் சேர்க்கலாம். `lodash-es` (இது ட்ரீ-ஷேக்கபிள்) போன்ற சிறிய மாற்றுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள் அல்லது எளிய பணிகளுக்கு உங்கள் சொந்த பயன்பாட்டு செயல்பாடுகளை எழுதுங்கள்.

4. பட மேம்படுத்தல்

படங்கள் பெரும்பாலும் வலைத்தள வீக்கத்திற்கு ஒரு முக்கிய பங்களிப்பாகும். தரத்தை தியாகம் செய்யாமல் அவற்றின் கோப்பு அளவைக் குறைக்க உங்கள் படங்களை மேம்படுத்துங்கள்.

• மேம்படுத்தப்பட்ட வடிவங்களைப் பயன்படுத்துங்கள்: WebP அல்லது AVIF போன்ற மேம்படுத்தப்பட்ட பட வடிவங்களைப் பயன்படுத்தவும், இது JPEG அல்லது PNG ஐ விட சிறந்த சுருக்கத்தை வழங்குகிறது.
• படங்களைச் சுருக்குங்கள்: உங்கள் படங்களின் கோப்பு அளவைக் குறைக்க பட சுருக்க கருவிகளைப் பயன்படுத்தவும்.
• ரெஸ்பான்சிவ் படங்களைப் பயன்படுத்துங்கள்: பயனரின் சாதனத் திரை அளவிற்கு ஏற்ப வெவ்வேறு பட அளவுகளை வழங்கவும். Next.js இல் உள்ள <Image> கூறு ரெஸ்பான்சிவ் படங்களுக்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது.
• படங்களை லேசி லோட் செய்யுங்கள்: மடிப்புக்குக் கீழே உள்ள படங்களை (திரையில் உடனடியாகத் தெரியாதவை) லேசி லோட் செய்யுங்கள். Next.js இல் உள்ள <Image> கூறு லேசி லோடிங்கையும் ஆதரிக்கிறது.

Next.js ஒரு உள்ளமைக்கப்பட்ட <Image> கூறை வழங்குகிறது, இது தானாகவே படங்களை மேம்படுத்துகிறது. இது ஆதரிக்கிறது:

• லேசி லோடிங்: படங்கள் பார்வைப்பகுதியில் தெரிய வரும்போது மட்டுமே ஏற்றப்படுகின்றன.
• ரெஸ்பான்சிவ் படங்கள்: சாதனத் திரை அளவிற்கு ஏற்ப வெவ்வேறு பட அளவுகள் வழங்கப்படுகின்றன.
• மேம்படுத்தப்பட்ட வடிவங்கள்: உலாவி ஆதரித்தால் படங்கள் தானாகவே WebP போன்ற நவீன வடிவங்களுக்கு மாற்றப்படுகின்றன.

            import Image from 'next/image'

function MyComponent() {
  return (
    
  )
}

            

              
                Copy
              
            
          

5. எழுத்துரு மேம்படுத்தல்

தனிப்பயன் எழுத்துருக்களும் பில்ட் அளவிற்கு பங்களிக்கலாம் மற்றும் பக்க ஏற்றுதல் நேரத்தை பாதிக்கலாம். உங்கள் எழுத்துருக்களை மேம்படுத்த:

• வலை எழுத்துரு வடிவங்களைப் பயன்படுத்துதல்: WOFF2 போன்ற நவீன வலை எழுத்துரு வடிவங்களைப் பயன்படுத்தவும், இது TTF அல்லது OTF போன்ற பழைய வடிவங்களை விட சிறந்த சுருக்கத்தை வழங்குகிறது.
• எழுத்துருக்களை துணைக்குழுப்படுத்துதல்: உங்கள் பயன்பாட்டில் நீங்கள் உண்மையில் பயன்படுத்தும் எழுத்துக்களை மட்டுமே சேர்க்கவும்.
• எழுத்துருக்களை முன்கூட்டியே ஏற்றுதல்: உங்கள் எழுத்துருக்கள் கூடிய விரைவில் ஏற்றப்படுவதை உறுதிசெய்ய அவற்றை முன்கூட்டியே ஏற்றவும். எழுத்துருக்களை முன்கூட்டியே ஏற்ற <link rel="preload"> குறிச்சொல்லைப் பயன்படுத்தலாம்.
• எழுத்துரு காட்சி: எழுத்துருக்கள் ஏற்றப்படும்போது அவை எவ்வாறு காட்டப்படுகின்றன என்பதைக் கட்டுப்படுத்த font-display CSS பண்பைப் பயன்படுத்தவும். swap மதிப்பு பெரும்பாலும் ஒரு நல்ல தேர்வாகும், ஏனெனில் இது உலாவிக்கு உடனடியாக ஃபால்பேக் எழுத்துருவைக் காட்டவும், பின்னர் தனிப்பயன் எழுத்துரு ஏற்றப்பட்டதும் அதற்கு மாறவும் சொல்கிறது.

Next.js கூகிள் எழுத்துருக்கள் அல்லது உள்ளூர் எழுத்துருக்களை எளிதாக ஏற்றி மேம்படுத்த next/font தொகுப்பைப் பயன்படுத்த அனுமதிப்பதன் மூலம் எழுத்துரு மேம்படுத்தலை ஆதரிக்கிறது.

            import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    
      {children}
    
  )
}

            

              
                Copy
              
            
          

6. ஜாவாஸ்கிரிப்ட்டைக் குறைத்தல்

உங்கள் பயன்பாட்டில் உள்ள ஜாவாஸ்கிரிப்ட் குறியீட்டின் அளவைக் குறைக்கவும்:

• சர்வர்-சைட் ரெண்டரிங் (SSR) அல்லது ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) பயன்படுத்துதல்: SSR மற்றும் SSG உங்களை உங்கள் பயன்பாட்டை சர்வரில் அல்லது பில்ட் நேரத்தில் ரெண்டர் செய்ய அனுமதிக்கிறது, இது உலாவியில் செயல்படுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைக்கிறது.
• தேவையற்ற ஜாவாஸ்கிரிப்ட்டைத் தவிர்த்தல்: எளிய அனிமேஷன்கள் மற்றும் தொடர்புகளுக்கு ஜாவாஸ்கிரிப்ட்டுக்குப் பதிலாக CSS ஐப் பயன்படுத்தவும்.
• டீபவுன்சிங் மற்றும் த்ராட்லிங்: நிகழ்வு கேட்பவர்கள் போன்ற விலையுயர்ந்த ஜாவாஸ்கிரிப்ட் செயல்பாடுகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டீபவுன்சிங் மற்றும் த்ராட்லிங்கைப் பயன்படுத்தவும்.

Next.js SSR மற்றும் SSG இரண்டிற்கும் சிறந்த ஆதரவை வழங்குகிறது. உங்கள் பயன்பாட்டின் தேவைகளுக்கு மிகவும் பொருத்தமான ரெண்டரிங் உத்தியைத் தேர்வு செய்யவும்.

7. வழித்தடம் சார்ந்த மேம்படுத்தல்

தனிப்பட்ட வழித்தடங்களை அவற்றின் குறிப்பிட்ட தேவைகளின் அடிப்படையில் மேம்படுத்தவும்:

• கூறுகளை லேசி லோட் செய்யவும்: ஒரு குறிப்பிட்ட வழித்தடத்தில் தேவைப்படும்போது மட்டுமே கூறுகளை டைனமிக்காக இறக்குமதி செய்யவும்.
• படங்களை மேம்படுத்துதல்: வெவ்வேறு வழித்தடங்களுக்கு அவற்றின் உள்ளடக்கம் மற்றும் பயனர் எதிர்பார்ப்புகளின் அடிப்படையில் வெவ்வேறு பட மேம்படுத்தல் உத்திகளைப் பயன்படுத்தவும்.
• நிபந்தனை ஏற்றுதல்: வழித்தடத்தின் அடிப்படையில் வெவ்வேறு சார்புகள் அல்லது தொகுதிகளை ஏற்றவும்.

8. குறுக்கமும் சுருக்கமும்

உற்பத்திக்கு பயன்படுத்தப்படுவதற்கு முன்பு உங்கள் குறியீடு குறுக்கப்பட்டும் சுருக்கப்பட்டும் இருப்பதை உறுதிசெய்யவும்.

• குறுக்கம் (Minification): அதன் அளவைக் குறைக்க உங்கள் குறியீட்டிலிருந்து தேவையற்ற எழுத்துக்களை (வெற்றிடம், கருத்துரைகள்) அகற்றவும். Next.js தானாகவே உங்கள் குறியீட்டை உற்பத்தி பயன்முறையில் குறுக்குகிறது.
• சுருக்கம் (Compression): அதன் அளவை மேலும் குறைக்க உங்கள் குறியீட்டை ஜிசிப் அல்லது பிரோட்லி பயன்படுத்தி சுருக்கவும். உங்கள் வலை சேவையகம் சுருக்கப்பட்ட சொத்துக்களை வழங்க கட்டமைக்கப்பட வேண்டும்.

Next.js தானாகவே குறுக்கத்தைக் கையாளுகிறது, ஆனால் சுருக்கத்தை இயக்க உங்கள் சேவையகத்தை நீங்கள் கட்டமைக்க வேண்டும் (எ.கா., Gzip அல்லது Brotli ஐப் பயன்படுத்தி). Cloudflare மற்றும் பிற CDNகள் பெரும்பாலும் சுருக்கத்தை தானாகவே கையாளுகின்றன.

9. உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துங்கள்

ஒரு உள்ளடக்க விநியோக நெட்வொர்க் (CDN) உலகெங்கிலும் உள்ள பயனர்களுக்கு வலைத்தள செயல்திறனை கணிசமாக மேம்படுத்த முடியும். ஒரு CDN உங்கள் வலைத்தளத்தின் சொத்துக்களின் நகல்களை பல புவியியல் இடங்களில் அமைந்துள்ள சேவையகங்களில் சேமிக்கிறது. ஒரு பயனர் உங்கள் வலைத்தளத்தைக் கோரும்போது, CDN அவர்களுக்கு மிக அருகில் உள்ள சேவையகத்திலிருந்து சொத்துக்களை வழங்குகிறது, இது தாமதத்தைக் குறைத்து பதிவிறக்க வேகத்தை மேம்படுத்துகிறது.

உலகளாவிய இருப்பு மற்றும் போன்ற அம்சங்களை ஆதரிக்கும் ஒரு CDN ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்:

• எட்ஜ் கேச்சிங்: பயனர்களுக்கு அருகில் அமைந்துள்ள சேவையகங்களில் சொத்துக்களை கேச் செய்தல்.
• சுருக்கம்: பயனர்களுக்கு வழங்குவதற்கு முன்பு சொத்துக்களை தானாகவே சுருக்குதல்.
• பட மேம்படுத்தல்: வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளுக்கு படங்களை தானாகவே மேம்படுத்துதல்.
• நெறிமுறை மேம்படுத்தல்: செயல்திறனை மேம்படுத்த HTTP/3 போன்ற நவீன நெறிமுறைகளைப் பயன்படுத்துதல்.

பிரபலமான CDN வழங்குநர்கள் பின்வருமாறு:

• Cloudflare
• Akamai
• Amazon CloudFront
• Google Cloud CDN
• Fastly

10. கண்காணித்து அளவிடவும்

உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, உங்கள் மேம்படுத்தல் முயற்சிகளின் தாக்கத்தை அளவிடவும். மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறிய Google PageSpeed Insights, WebPageTest மற்றும் Lighthouse போன்ற கருவிகளைப் பயன்படுத்தவும்.

Google PageSpeed Insights: டெஸ்க்டாப் மற்றும் மொபைல் சாதனங்களில் உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த நுண்ணறிவுகளை வழங்குகிறது.

WebPageTest: வெவ்வேறு இடங்கள் மற்றும் வெவ்வேறு உலாவி உள்ளமைவுகளுடன் உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கிறது.

Lighthouse: செயல்திறன், அணுகல், முற்போக்கான வலை பயன்பாட்டு சிறந்த நடைமுறைகள், எஸ்சிஓ மற்றும் பலவற்றிற்காக வலைப்பக்கங்களை தணிக்கை செய்யும் ஒரு திறந்த மூல கருவி.

உலகளாவிய செயல்திறனுக்கான சிறந்த நடைமுறைகள்

மேலே கோடிட்டுக் காட்டப்பட்டுள்ள குறிப்பிட்ட மேம்படுத்தல் உத்திகளுக்கு கூடுதலாக, உலகளாவிய பார்வையாளர்களுக்கு உகந்த செயல்திறனை உறுதிப்படுத்த பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• உலகளாவிய உள்கட்டமைப்புடன் ஒரு ஹோஸ்டிங் வழங்குநரைத் தேர்வு செய்யவும்: பல புவியியல் இடங்களில் தரவு மையங்களைக் கொண்ட ஒரு ஹோஸ்டிங் வழங்குநரைத் தேர்ந்தெடுக்கவும்.
• மொபைல் சாதனங்களுக்கு மேம்படுத்துங்கள்: உங்கள் வலைத்தளம் ரெஸ்பான்சிவாகவும் மொபைல் சாதனங்களுக்கு உகந்ததாகவும் இருப்பதை உறுதிசெய்யவும். மொபைல் பயனர்கள் பெரும்பாலும் மெதுவான இணைய இணைப்புகள் மற்றும் சிறிய திரைகளைக் கொண்டுள்ளனர்.
• உள்ளடக்கத்தை உள்ளூர்மயமாக்குங்கள்: பயனரின் விருப்பமான மொழி மற்றும் நாணயத்தில் உள்ளடக்கத்தை வழங்கவும்.
• நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுங்கள்: வெவ்வேறு பிராந்தியங்களில் உள்ள நெட்வொர்க் நிலைமைகளைப் பற்றி எச்சரிக்கையாக இருங்கள் மற்றும் அதற்கேற்ப உங்கள் வலைத்தளத்தை மேம்படுத்துங்கள்.
• வெவ்வேறு இடங்களிலிருந்து சோதிக்கவும்: வெவ்வேறு புவியியல் இடங்களிலிருந்து உங்கள் வலைத்தளத்தின் செயல்திறனைத் தவறாமல் சோதிக்கவும்.

முடிவுரை

உலகளாவிய பார்வையாளர்களுக்கு வேகமான மற்றும் திறமையான வலை அனுபவங்களை வழங்குவதற்கு பில்ட் அளவை மேம்படுத்துவது முக்கியமானது. Next.js பண்ட்லரைப் புரிந்துகொண்டு, சரியான பகுப்பாய்வுக் கருவிகளைப் பயன்படுத்தி, இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள உத்திகளைச் செயல்படுத்துவதன் மூலம், உங்கள் பில்ட் அளவை கணிசமாகக் குறைக்கலாம், வலைத்தள செயல்திறனை மேம்படுத்தலாம், மற்றும் அனைவருக்கும், அவர்களின் இருப்பிடம் அல்லது இணைய வேகத்தைப் பொருட்படுத்தாமல், ஒரு சிறந்த பயனர் அனுபவத்தை வழங்கலாம். உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, நீங்கள் எப்போதும் சிறந்த அனுபவத்தை வழங்குகிறீர்கள் என்பதை உறுதிப்படுத்த உங்கள் மேம்படுத்தல் முயற்சிகளை மீண்டும் செய்யவும்.

விவாதிக்கப்பட்ட நுட்பங்கள் ஒரு முறை சரிசெய்வது அல்ல, ஆனால் ஒரு தொடர்ச்சியான செயல்முறையாகும். உங்கள் பயன்பாடு உருவாகும்போது, புதிய சார்புகள் மற்றும் அம்சங்கள் சேர்க்கப்படும், இது பண்டில் அளவைப் பாதிக்கக்கூடும். உங்கள் உலகளாவிய பார்வையாளர்களுக்கு உகந்த செயல்திறனைப் பராமரிக்க வழக்கமான கண்காணிப்பு மற்றும் மேம்படுத்தல் முக்கியம்.