Next.js எழுத்துரு உகப்பாக்கம்: வலை எழுத்துரு ஏற்றும் உத்திகளில் தேர்ச்சி பெறுதல்

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

செயல்திறனில் வலை எழுத்துருக்களின் முக்கிய பங்கு

வலை எழுத்துருக்கள் ஒரு வலைத்தளத்தின் காட்சி அடையாளத்தின் உயிர்நாடியாகும். அவை அச்சுக்கலை, பிராண்ட் நிலைத்தன்மை மற்றும் வாசிப்புத் திறனை ನಿರ್ಧரிக்கின்றன. இருப்பினும், அவற்றின் இயல்பு – உலாவியால் பதிவிறக்கம் செய்யப்பட்டு ரெண்டர் செய்யப்பட வேண்டிய வெளிப்புற ஆதாரங்களாக இருப்பதால் – செயல்திறன் தடைகளை அறிமுகப்படுத்தலாம். நெட்வொர்க் நிலைமைகள் வியத்தகு முறையில் மாறுபடக்கூடிய சர்வதேச பார்வையாளர்களுக்கு, எழுத்துரு ஏற்றத்தில் ஏற்படும் சிறிய தாமதங்கள் கூட ஒரு வலைத்தளத்தின் உணரப்பட்ட வேகத்தை கணிசமாகப் பாதிக்கலாம்.

எழுத்துரு ஏற்றத்தால் பாதிக்கப்படும் முக்கிய செயல்திறன் அளவீடுகள்:

• மிகப்பெரிய உள்ளடக்க வண்ணம் (LCP): LCP உறுப்பு ஒரு தனிப்பயன் எழுத்துருவுடன் வடிவமைக்கப்பட்ட உரையாக இருந்தால், எழுத்துரு ஏற்றுவதில் ஏற்படும் தாமதம் LCP அளவீட்டைப் பின்னுக்குத் தள்ளும்.
• திரள் தளவமைப்பு மாற்றம் (CLS): வெவ்வேறு அளவீடுகளைக் கொண்ட எழுத்துருக்கள் (அளவு, அகலம்) மாற்றப்படும்போது, உரை மீண்டும் பாயக்கூடும், இது தளவமைப்பு மாற்றங்களுக்கு வழிவகுக்கும்.
• முதல் உள்ளடக்க வண்ணம் (FCP): LCP போலவே, தனிப்பயன் எழுத்துருக்கள் உடனடியாக ஏற்றப்படாவிட்டால், உரையின் ஆரம்ப ரெண்டர் தாமதமாகலாம்.

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

Next.js எழுத்துரு உகப்பாக்க அம்சங்களைப் புரிந்துகொள்ளுதல்

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

தானியங்கி உகப்பாக்கத்தில் அடங்குபவை:

• தானியங்கி rel="preload": Next.js தானாகவே rel="preload" ஐ முக்கிய எழுத்துரு கோப்புகளில் சேர்க்கிறது, இது பக்க வாழ்க்கைச் சுழற்சியின் ஆரம்பத்தில் அவற்றை மீட்டெடுக்க உலாவிக்கு அறிவுறுத்துகிறது.
• தானியங்கி font-display நடத்தை: Next.js font-display CSS பண்பிற்கான ஒரு விவேகமான இயல்புநிலையைப் பயன்படுத்துகிறது, இது செயல்திறன் மற்றும் காட்சி ரெண்டரிங்கை சமநிலைப்படுத்துவதை நோக்கமாகக் கொண்டுள்ளது.
• துணைக்குழு மற்றும் வடிவமைப்பு உகப்பாக்கம்: Next.js புத்திசாலித்தனமாக எழுத்துரு கோப்புகளை (எ.கா., WOFF2 வடிவம்) துணைக்குழுவாக்குகிறது, இது கோப்பு அளவுகளைக் குறைத்து, தேவையான எழுத்துக்கள் மட்டுமே பதிவிறக்கம் செய்யப்படுவதை உறுதி செய்கிறது.

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

Next.js எழுத்துரு ஏற்றும் உத்திகள்: ஒரு ஆழமான பார்வை

உங்கள் Next.js பயன்பாடுகளில் வலை எழுத்துரு ஏற்றத்தை உகப்பாக்குவதற்கான மிகவும் பயனுள்ள உத்திகளை ஆராய்வோம், இது ஒரு மாறுபட்ட உலகளாவிய பயனர் தளத்திற்கு ஏற்றது.

உத்தி 1: Next.js இன் உள்ளமைக்கப்பட்ட `next/font` ஐப் பயன்படுத்துதல்

Next.js 13 இல் அறிமுகப்படுத்தப்பட்ட, next/font தொகுதி எழுத்துருக்களை நிர்வகிக்க ஒரு நெறிப்படுத்தப்பட்ட மற்றும் சக்திவாய்ந்த வழியை வழங்குகிறது. இது சுய-ஹோஸ்டிங், நிலையான உகப்பாக்கம் மற்றும் தளவமைப்பு மாற்றத்தைக் குறைத்தல் உள்ளிட்ட தானியங்கி எழுத்துரு உகப்பாக்கத்தை வழங்குகிறது.

`next/font` இன் முக்கிய நன்மைகள்:

• தானியங்கி சுய-ஹோஸ்டிங்: எழுத்துருக்கள் உருவாக்கும் நேரத்தில் தானாகப் பதிவிறக்கம் செய்யப்பட்டு உங்கள் சொந்த டொமைனிலிருந்து வழங்கப்படுகின்றன, இது வெளிப்புற கோரிக்கைகளை நீக்கி, நம்பகத்தன்மையை மேம்படுத்துகிறது, குறிப்பாக கடுமையான உள்ளடக்க வடிகட்டுதல் அல்லது நம்பமுடியாத CDNகள் உள்ள பிராந்தியங்களில்.
• பூஜ்ஜிய தளவமைப்பு மாற்றம்: `next/font` எழுத்துரு அளவீடுகளுடன் பொருந்தத் தேவையான CSS-ஐ தானாக உருவாக்குகிறது, இது எழுத்துரு ஏற்றம் மற்றும் மாற்றத்தால் ஏற்படும் தளவமைப்பு மாற்றங்களைத் தடுக்கிறது.
• தானியங்கி துணைக்குழுவாக்கம்: இது புத்திசாலித்தனமாக எழுத்துருக்களை துணைக்குழுவாக்குகிறது, உங்கள் பயன்பாட்டிற்குத் தேவையான எழுத்துக்கள் மட்டுமே சேர்க்கப்படுவதை உறுதிசெய்கிறது, இது கோப்பு அளவுகளைக் கணிசமாகக் குறைக்கிறது.
• உருவாக்கும் நேர உகப்பாக்கம்: எழுத்துருக்கள் உருவாக்கத்தின் போது செயலாக்கப்படுகின்றன, இது உங்கள் பக்கங்களை உற்பத்தியில் வேகமாக ஏற்றுகிறது.

எடுத்துக்காட்டு: `next/font` உடன் கூகிள் எழுத்துருக்களைப் பயன்படுத்துதல்

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

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

// நீங்கள் கூகிள் எழுத்துருக்களைப் பயன்படுத்தினால்
const inter = Inter({
  subsets: ['latin'], // உங்களுக்குத் தேவையான எழுத்து துணைக்குழுக்களைக் குறிப்பிடவும்
  weight: '400',
});

// உங்கள் தளவமைப்பு கூறுகளில்:
function RootLayout({ children }) {
  return (
    
      {children}
    
  );
}

export default RootLayout;

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

எடுத்துக்காட்டு: `next/font` உடன் உள்ளூர் எழுத்துருக்களை சுய-ஹோஸ்ட் செய்தல்

கூகிள் எழுத்துருக்கள் வழியாகக் கிடைக்காத எழுத்துருக்களுக்கு அல்லது குறிப்பிட்ட பிராண்ட் எழுத்துருக்களுக்கு, நீங்கள் அவற்றை சுய-ஹோஸ்ட் செய்யலாம்.

import localFont from 'next/font/local';

// உங்கள் எழுத்துரு கோப்புகள் 'public/fonts' கோப்பகத்தில் இருப்பதாகக் கருதி
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap', // சிறந்த பயனர் அனுபவத்திற்கு 'swap' ஐப் பயன்படுத்தவும்
  weight: 'normal',
  style: 'normal',
});

// உங்கள் தளவமைப்பு கூறுகளில்:
function RootLayout({ children }) {
  return (
    
      {children}
    
  );
}

export default RootLayout;

src பாதை `localFont` அழைக்கப்படும் கோப்புடன் தொடர்புடையது. `next/font` இந்த உள்ளூர் எழுத்துரு கோப்புகளின் உகப்பாக்கம் மற்றும் சேவையைத் தானாகவே கையாளும்.

உத்தி 2: `font-display` CSS பண்பின் சக்தி

font-display CSS பண்பு என்பது எழுத்துருக்கள் ஏற்றப்படும்போது அவை எவ்வாறு ரெண்டர் செய்யப்படுகின்றன என்பதைக் கட்டுப்படுத்துவதற்கான ஒரு முக்கியமான கருவியாகும். ஒரு வலை எழுத்துரு பதிவிறக்கம் செய்யப்படும் காலகட்டத்தில் மற்றும் அது பயன்பாட்டிற்குக் கிடைப்பதற்கு முன்பு என்ன நடக்கிறது என்பதை இது வரையறுக்கிறது.

`font-display` மதிப்புகளைப் புரிந்துகொள்ளுதல்:

• auto: உலாவி நடத்தையை ನಿರ್ಧரிக்கிறது, இது பெரும்பாலும் block ஐப் போன்றது.
• block: இது மிகவும் ஆக்கிரோஷமான ரெண்டரிங் முறை. எழுத்துரு ஏற்றப்படும்போது உலாவி ஒரு குறுகிய காலத்திற்கு (பொதுவாக 3 வினாடிகள் வரை) உரையை மறைக்கிறது. இந்த காலகட்டத்தில் எழுத்துரு ஏற்றப்படவில்லை என்றால், உலாவி ஒரு பயனர்-முகவர் ஸ்டைல்ஷீட் எழுத்துருவிற்குத் திரும்பும். இது ஆரம்பத்தில் ஒரு வெற்று உரைத் தொகுதிக்கு வழிவகுக்கும்.
• swap: இது செயல்திறனுக்காகப் பரிந்துரைக்கப்படும் மதிப்பு. உலாவி உடனடியாக ஒரு பின்னடைவு எழுத்துருவைப் பயன்படுத்துகிறது, பின்னர் அது ஏற்றப்பட்டவுடன் தனிப்பயன் எழுத்துருவிற்கு மாறுகிறது. இது உரை எப்போதும் தெரியும் என்பதை உறுதி செய்கிறது, ஆனால் எழுத்துருக்கள் வெவ்வேறு அளவீடுகளைக் கொண்டிருந்தால் ஒரு சுருக்கமான தளவமைப்பு மாற்றத்தை ஏற்படுத்தலாம்.
• fallback: ஒரு சமநிலையான அணுகுமுறை. இது ஒரு குறுகிய தொகுதி காலத்தையும் (எ.கா., 1 வினாடி) பின்னர் ஒரு குறுகிய மாற்று காலத்தையும் (எ.கா., 3 வினாடிகள்) வழங்குகிறது. மாற்று காலத்தின் முடிவில் எழுத்துரு கிடைக்கவில்லை என்றால், அது பக்கத்தின் மீதமுள்ள ஆயுளுக்குத் தடுக்கப்படும்.
• optional: மிகவும் பழமைவாத விருப்பம். உலாவி எழுத்துருவிற்கு மிகக் குறுகிய தொகுதி காலத்தையும் (எ.கா., < 1 வினாடி) மற்றும் மிகக் குறுகிய மாற்று காலத்தையும் வழங்குகிறது. எழுத்துரு உடனடியாகக் கிடைக்கவில்லை என்றால், அந்தப் பக்க ஏற்றத்திற்கு அது பயன்படுத்தப்படாது. ஆரம்ப பயனர் அனுபவத்திற்கு முக்கியமானதாக இல்லாத எழுத்துருக்களுக்கு இது பொருத்தமானது, ஆனால் சில பயனர்கள் உங்கள் தனிப்பயன் எழுத்துருக்களை ஒருபோதும் பார்க்க மாட்டார்கள் என்று அர்த்தம்.

Next.js இல் `font-display` ஐப் பயன்படுத்துதல்:

• `next/font` உடன்: மேலே உள்ள எடுத்துக்காட்டுகளில் காட்டப்பட்டுள்ளபடி, `next/font/google` அல்லது `next/font/local` ஐப் பயன்படுத்தி எழுத்துருக்களை இறக்குமதி செய்யும்போது display பண்பை நேரடியாகக் குறிப்பிடலாம். இது விரும்பத்தக்க முறையாகும்.
• கைமுறையாக (`next/font` ஐப் பயன்படுத்தாவிட்டால்): நீங்கள் எழுத்துருக்களை கைமுறையாக நிர்வகிக்கிறீர்கள் என்றால் (எ.கா., தனிப்பயன் CSS ஐப் பயன்படுத்தி), உங்கள் @font-face அறிவிப்பில் அல்லது எழுத்துருவைப் பயன்படுத்தும் CSS விதியில் font-display பண்பைச் சேர்ப்பதை உறுதிசெய்யவும்.

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/my-custom-font.woff2') format('woff2');
  font-display: swap; /* செயல்திறனுக்காக பரிந்துரைக்கப்படுகிறது */
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

`font-display` க்கான உலகளாவிய பரிசீலனைகள்:

மெதுவான இணைப்புகளைக் கொண்ட பயனர்களுக்கு அல்லது அதிக தாமதம் உள்ள பிராந்தியங்களில், block அல்லது optional ஐ விட swap அல்லது fallback பொதுவாக சிறந்த தேர்வுகள். இது தனிப்பயன் எழுத்துரு ஏற்றப்படுவதற்கு சிறிது நேரம் எடுத்தாலும் அல்லது ஏற்றப்படாவிட்டாலும், உரை விரைவாகப் படிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.

உத்தி 3: முக்கியமான எழுத்துருக்களை முன்ஏற்றுதல்

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

Next.js ஆல் தானியங்கி முன்ஏற்றுதல்:

நீங்கள் `next/font` ஐப் பயன்படுத்தும்போது, Next.js உங்கள் கூறு மரத்தை பகுப்பாய்வு செய்து, ஆரம்ப ரெண்டருக்குத் தேவையான எழுத்துருக்களைத் தானாகவே முன்ஏற்றுகிறது. இது நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது, ஏனெனில் இது முக்கியமான ரெண்டரிங் பாதைக்குத் தேவையான எழுத்துருக்களுக்கு முன்னுரிமை அளிக்கிறது.

`next/head` அல்லது `next/script` உடன் கைமுறையாக முன்ஏற்றுதல்:

`next/font` உங்கள் எல்லா தேவைகளையும் பூர்த்தி செய்யாத சூழ்நிலைகளில், அல்லது மேலும் நுணுக்கமான கட்டுப்பாட்டிற்கு, நீங்கள் எழுத்துருக்களை கைமுறையாக முன்ஏற்றலாம். தனிப்பயன் CSS அல்லது வெளிப்புற சேவைகள் வழியாக ஏற்றப்பட்ட எழுத்துருக்களுக்கு (குறைவாகப் பரிந்துரைக்கப்பட்டாலும்), நீங்கள் குறிச்சொல்லைப் பயன்படுத்தலாம்.

// உங்கள் _document.js அல்லது ஒரு தளவமைப்பு கூறுகளில்
import Head from 'next/head';

function MyLayout({ children }) {
  return (
    <>
      
        
      
      {children}
    
  );
}

export default MyLayout;

முன்ஏற்றுதல் பற்றிய முக்கிய குறிப்புகள்:

• as="font": இந்த பண்பு மீட்டெடுக்கப்படும் வளத்தின் வகையை உலாவிக்குத் தெரிவிக்கிறது, இது அதைச் சரியாக முன்னுரிமைப்படுத்த அனுமதிக்கிறது.
• crossOrigin="anonymous": வேறு மூலத்திலிருந்து அல்லது நீங்கள் தலைப்புகளுடன் கண்டிப்பாக இருந்தால் உங்கள் சொந்த நிலையான சொத்துக்களிலிருந்து கூட வழங்கப்படும் எழுத்துருக்களை முன்ஏற்றும்போது CORS இணக்கத்திற்கு இது முக்கியமானது.
• அதிகமாக முன்ஏற்றுவதைத் தவிர்க்கவும்: பல வளங்களை முன்ஏற்றுவது எதிர் விளைவை ஏற்படுத்தும், தேவையில்லாமல் அலைவரிசையை உட்கொள்ளும். ஆரம்ப பார்வை மற்றும் முக்கியமான உள்ளடக்கத்திற்கு அத்தியாவசியமான எழுத்துருக்களில் கவனம் செலுத்துங்கள்.

முன்ஏற்றுதலின் உலகளாவிய தாக்கம்:

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

உத்தி 4: எழுத்துரு கோப்பு வடிவங்கள் மற்றும் துணைக்குழுவாக்கம்

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

பரிந்துரைக்கப்பட்ட எழுத்துரு வடிவங்கள்:

• WOFF2 (Web Open Font Format 2): இது மிகவும் நவீன மற்றும் திறமையான வடிவமாகும், இது WOFF மற்றும் TTF உடன் ஒப்பிடும்போது சிறந்த சுருக்கத்தை வழங்குகிறது. WOFF2 ஐ ஆதரிக்கும் உலாவிகளுக்கு எப்போதும் இந்த வடிவம் முதலில் வழங்கப்பட வேண்டும்.
• WOFF (Web Open Font Format): நல்ல சுருக்கத்தை வழங்கும் பரவலாக ஆதரிக்கப்படும் வடிவம். பழைய உலாவிகளுக்கு இதை ஒரு பின்னடைவாக வழங்கவும்.
• TTF/OTF (TrueType/OpenType): பெரிய கோப்பு அளவுகள் காரணமாக வலை பயன்பாட்டிற்கு குறைந்த செயல்திறன் கொண்டது. பொதுவாக, WOFF/WOFF2 ஆதரிக்கப்படாவிட்டால் மட்டுமே இவற்றைப் பயன்படுத்தவும், இது இன்று அரிதானது.
• SVG எழுத்துருக்கள்: முதன்மையாக பழைய iOS பதிப்புகளுக்கு. முடிந்தால் தவிர்க்கவும்.
• EOT (Embedded OpenType): மிகவும் பழைய Internet Explorer பதிப்புகளுக்கு. கிட்டத்தட்ட முற்றிலும் வழக்கொழிந்துவிட்டது.

`next/font` மற்றும் வடிவமைப்பு உகப்பாக்கம்:

`next/font` தொகுதி பயனரின் உலாவிக்கு மிகவும் பொருத்தமான எழுத்துரு வடிவத்தை வழங்குவதை தானாகவே கையாளுகிறது (WOFF2 க்கு முன்னுரிமை அளிக்கிறது), எனவே நீங்கள் இதைப் பற்றி கைமுறையாக கவலைப்படத் தேவையில்லை.

பன்னாட்டுமயமாக்கலுக்கான துணைக்குழுவாக்கம்:

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

துணைக்குழுவாக்கத்தின் நன்மைகள்:

• கணிசமாகக் குறைக்கப்பட்ட கோப்பு அளவுகள்: ஒற்றை எழுத்துருவிற்கு (லத்தீன் போன்றவை) ஒரு எழுத்துரு கோப்பு பல எழுத்துருக்களைக் கொண்ட (லத்தீன், சிரிலிக், கிரேக்கம் போன்றவை) கோப்பை விட கணிசமாகக் சிறியதாக இருக்கும்.
• வேகமான பதிவிறக்கங்கள்: சிறிய கோப்புகள் என்றால் விரைவான பதிவிறக்கங்கள், குறிப்பாக மொபைல் அல்லது மெதுவான இணைப்புகளில்.
• மேம்படுத்தப்பட்ட LCP/FCP: வேகமான எழுத்துரு ஏற்றம் இந்த முக்கிய செயல்திறன் அளவீடுகளை நேரடியாகப் பாதிக்கிறது.

Next.js இல் துணைக்குழுவாக்கத்தைச் செயல்படுத்துதல்:

• `next/font/google` உடன்: `next/font/google` வழியாக கூகிள் எழுத்துருக்களைப் பயன்படுத்தும்போது, நீங்கள் `subsets` அளவுருவைக் குறிப்பிடலாம். உதாரணமாக, `subsets: ['latin', 'latin-ext']` லத்தீன் மற்றும் நீட்டிக்கப்பட்ட லத்தீன் எழுத்துக்களுக்குத் தேவையான எழுத்துக்களை மட்டுமே பதிவிறக்கும். உங்களுக்கு அடிப்படை லத்தீன் எழுத்துக்கள் மட்டுமே தேவைப்பட்டால், `subsets: ['latin']` இன்னும் திறமையானது.
• `next/font/local` அல்லது கைமுறை துணைக்குழுவாக்கம் உடன்: நீங்கள் எழுத்துருக்களை சுய-ஹோஸ்ட் செய்கிறீர்கள் என்றால், உங்கள் திட்டத்தில் சேர்ப்பதற்கு முன்பு துணைக்குழுக்களை உருவாக்க ஒரு எழுத்துரு மேலாண்மை கருவியைப் (Font Squirrel's Webfont Generator, Glyphhanger, அல்லது Transfonter போன்றவை) பயன்படுத்த வேண்டும். பின்னர் ஒவ்வொரு துணைக்குழுவிற்கும் சரியான `src` பாதைகளைக் குறிப்பிடலாம்.

// உள்ளூர் எழுத்துருக்களுக்கான குறிப்பிட்ட துணைக்குழுக்களுடன் எடுத்துக்காட்டு
import localFont from 'next/font/local';

const englishFont = localFont({
  src: './fonts/my-font-latin.woff2',
  display: 'swap',
});

const chineseFont = localFont({
  src: './fonts/my-font-chinese.woff2',
  display: 'swap',
});

// பயனரின் மொழி அல்லது இருப்பிடத்தின் அடிப்படையில் இந்த எழுத்துருக்களை நிபந்தனையுடன் பயன்படுத்துவீர்கள்.

உலகளாவிய எழுத்துரு உத்தி:

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

உத்தி 5: மூன்றாம் தரப்பு எழுத்துரு வழங்குநர்களைக் கையாளுதல் (Google Fonts, Adobe Fonts)

`next/font` சுய-ஹோஸ்டிங்கை ஊக்குவிக்கும் அதே வேளையில், வசதிக்காக அல்லது குறிப்பிட்ட எழுத்துரு நூலகங்களுக்காக நீங்கள் இன்னும் மூன்றாம் தரப்பு வழங்குநர்களைத் தேர்ந்தெடுக்கலாம். அப்படியானால், அவற்றின் ஒருங்கிணைப்பை உகப்பாக்குங்கள்.

கூகிள் எழுத்துருக்களுக்கான சிறந்த நடைமுறைகள்:

• `next/font/google` ஐப் பயன்படுத்தவும் (பரிந்துரைக்கப்படுகிறது): முன்பு விவரிக்கப்பட்டபடி, கூகிள் எழுத்துருக்களை ஒருங்கிணைக்க இது மிகவும் செயல்திறன் மிக்க வழியாகும், ஏனெனில் இது சுய-ஹோஸ்டிங் மற்றும் உகப்பாக்கத்தைத் தானியக்கமாக்குகிறது.
• பல <link> குறிச்சொற்களைத் தவிர்க்கவும்: நீங்கள் `next/font` ஐப் பயன்படுத்தவில்லை என்றால், உங்கள் கூகிள் எழுத்துருக்களை உங்கள் pages/_document.js அல்லது layout.js இல் உள்ள ஒற்றை <link> குறிச்சொல்லில் ஒருங்கிணைக்கவும்.
• எடைகள் மற்றும் பாணிகளைக் குறிப்பிடவும்: நீங்கள் உண்மையில் பயன்படுத்தும் எழுத்துரு எடைகள் மற்றும் பாணிகளை மட்டுமே கோரவும். பல மாறுபாடுகளைக் கோருவது பதிவிறக்கம் செய்யப்பட்ட எழுத்துரு கோப்புகளின் எண்ணிக்கையை அதிகரிக்கிறது.

ஒருங்கிணைக்கப்பட்ட கூகிள் எழுத்துருக்கள் இணைப்பின் எடுத்துக்காட்டு (`next/font` ஐப் பயன்படுத்தாவிட்டால்):

// pages/_document.js இல்
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      
        
          {/* அனைத்து எழுத்துருக்களையும் ஒரே இணைப்பு குறிச்சொல்லில் ஒருங்கிணைக்கவும் */}
          
          
          
        
        
          

          
        
      
    );
  }
}

export default MyDocument;

அடோப் எழுத்துருக்களுக்கான சிறந்த நடைமுறைகள் (Typekit):

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

உலகளாவிய நெட்வொர்க் செயல்திறன்:

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

மேம்பட்ட உகப்பாக்க நுட்பங்கள்

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

உத்தி 6: எழுத்துரு ஏற்றும் வரிசை மற்றும் முக்கியமான CSS

உங்கள் எழுத்துரு ஏற்றத்தை கவனமாக வரிசைப்படுத்துவதன் மூலமும், முக்கியமான எழுத்துருக்கள் உங்கள் முக்கியமான CSS இல் சேர்க்கப்படுவதை உறுதி செய்வதன் மூலமும், நீங்கள் ரெண்டரிங்கை மேலும் உகப்பாக்கலாம்.

முக்கியமான CSS:

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

முக்கியமான CSS உடன் எழுத்துருக்களை எவ்வாறு ஒருங்கிணைப்பது:

• முக்கியமான எழுத்துருக்களை முன்ஏற்றவும்: விவாதிக்கப்பட்டபடி, ஆரம்ப பார்வைக்குத் தேவையான எழுத்துரு கோப்புகளுக்கு rel="preload" ஐப் பயன்படுத்தவும்.
• இன்லைன் `@font-face`: மிகவும் முக்கியமான எழுத்துருக்களுக்கு, நீங்கள் `@font-face` அறிவிப்பை நேரடியாக உங்கள் முக்கியமான CSS க்குள் இன்லைன் செய்யலாம். இது எழுத்துரு வரையறைக்கு ஒரு கூடுதல் HTTP கோரிக்கையைத் தவிர்க்கிறது.

Next.js செருகுநிரல்கள் மற்றும் கருவிகள்:

`critters` அல்லது பல்வேறு Next.js செருகுநிரல்கள் போன்ற கருவிகள் முக்கியமான CSS உருவாக்கத்தைத் தானியக்கமாக்க உதவும். இந்த கருவிகள் உங்கள் எழுத்துரு முன்ஏற்றுதல் மற்றும் `@font-face` விதிகளை அங்கீகரித்து கையாள சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.

உத்தி 7: எழுத்துரு பின்னடைவுகள் மற்றும் பயனர் அனுபவம்

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

பின்னடைவு எழுத்துருக்களைத் தேர்ந்தெடுப்பது:

உங்கள் தனிப்பயன் எழுத்துருக்களின் அளவீடுகளுடன் (x-உயரம், பக்கவாதம் அகலம், ஏறுவரிசை/இறங்குவரிசை உயரம்) நெருக்கமாகப் பொருந்தக்கூடிய பின்னடைவு எழுத்துருக்களைத் தேர்ந்தெடுக்கவும். தனிப்பயன் எழுத்துரு இன்னும் ஏற்றப்படாதபோது அல்லது ஏற்றத் தவறும்போது இது காட்சி வேறுபாட்டைக் குறைக்கிறது.

• பொதுவான எழுத்துரு குடும்பங்கள்: உங்கள் எழுத்துரு அடுக்கில் கடைசி முயற்சியாக sans-serif, serif, அல்லது monospace போன்ற பொதுவான எழுத்துரு குடும்பங்களைப் பயன்படுத்தவும்.
• கணினி எழுத்துருக்கள்: பிரபலமான கணினி எழுத்துருக்களை முதன்மை பின்னடைவுகளாகப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள் (எ.கா., ஆண்ட்ராய்டுக்கு ரோபோடோ, iOS க்கு சான் பிரான்சிஸ்கோ, விண்டோஸுக்கு ஏரியல்). இவை ஏற்கனவே பயனரின் சாதனத்தில் கிடைக்கின்றன, உடனடியாக ஏற்றப்படும்.

எடுத்துக்காட்டு எழுத்துரு அடுக்கு:

body {
  font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
  font-display: swap;
}

உலகளாவிய எழுத்துரு கிடைக்கும் தன்மை:

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

உத்தி 8: செயல்திறன் தணிக்கை மற்றும் கண்காணிப்பு

உகந்த எழுத்துரு ஏற்ற செயல்திறனைப் பராமரிக்க தொடர்ச்சியான கண்காணிப்பு மற்றும் தணிக்கை முக்கியம்.

தணிக்கைக்கான கருவிகள்:

• கூகிள் PageSpeed நுண்ணறிவுகள்: LCP, CLS மற்றும் பிற செயல்திறன் அளவீடுகள் பற்றிய நுண்ணறிவுகளை வழங்குகிறது, இது பெரும்பாலும் எழுத்துரு ஏற்ற சிக்கல்களை முன்னிலைப்படுத்துகிறது.
• WebPageTest: வெவ்வேறு நெட்வொர்க் நிலைமைகளுடன் உலகெங்கிலும் உள்ள பல்வேறு இடங்களிலிருந்து உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கிறது, இது உங்களுக்கு உண்மையான உலகளாவிய கண்ணோட்டத்தை அளிக்கிறது.
• உலாவி டெவலப்பர் கருவிகள் (Lighthouse, Network Tab): எழுத்துரு கோப்பு அளவுகள், சுமை நேரங்கள் மற்றும் ரெண்டரிங் நடத்தையை ஆய்வு செய்ய நெட்வொர்க் தாவலைப் பயன்படுத்தவும். Chrome DevTools இல் உள்ள Lighthouse தணிக்கைகள் விரிவான செயல்திறன் அறிக்கைகளை வழங்குகின்றன.
• Web Vitals நீட்டிப்பு: LCP மற்றும் CLS உள்ளிட்ட முக்கிய வலை உயிர்வாழ்வுகளை நிகழ்நேரத்தில் கண்காணிக்கவும்.

முக்கிய அளவீடுகளைக் கண்காணித்தல்:

• எழுத்துரு கோப்பு அளவுகள்: தனிப்பட்ட எழுத்துரு கோப்புகளை (குறிப்பாக WOFF2) முக்கியமான எழுத்துருக்களுக்கு முடிந்தால் 50KB க்குக் குறைவாக வைத்திருக்க வேண்டும்.
• சுமை நேரங்கள்: எழுத்துருக்கள் பதிவிறக்கம் செய்யப்பட்டு பயன்படுத்தப்படுவதற்கு எவ்வளவு நேரம் ஆகும் என்பதைக் கண்காணிக்கவும்.
• தளவமைப்பு மாற்றங்கள்: எழுத்துரு ஏற்றத்தால் ஏற்படும் CLS ஐ அடையாளம் காணவும் அளவிடவும் கருவிகளைப் பயன்படுத்தவும்.

உலகளாவிய அணுகலுக்கான வழக்கமான தணிக்கைகள்:

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

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

சிறந்த நோக்கங்களுடன் கூட, சில தவறுகள் உங்கள் எழுத்துரு உகப்பாக்க முயற்சிகளைப் பலவீனப்படுத்தலாம்.

• அதிகமாக எழுத்துருக்களைப் பெறுதல்: பக்கத்தில் பயன்படுத்தப்படாத பல எழுத்துரு குடும்பங்கள், எடைகள் அல்லது பாணிகளை ஏற்றுதல்.
• எழுத்துருக்களை துணைக்குழுவாக்காமல் இருத்தல்: ஆயிரக்கணக்கான கிளிஃப்களைக் கொண்ட விரிவான எழுத்துரு கோப்புகளைப் பதிவிறக்குவது, ஒரு பகுதி மட்டுமே தேவைப்படும்போது.
• `font-display` ஐப் புறக்கணித்தல்: இயல்புநிலை உலாவி நடத்தையை நம்பியிருப்பது, இது மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.
• எழுத்துருக்களுக்காக ஜாவாஸ்கிரிப்டைத் தடுப்பது: எழுத்துருக்கள் ஜாவாஸ்கிரிப்ட் வழியாக ஏற்றப்பட்டு, அந்த ஸ்கிரிப்ட் ரெண்டர்-தடுப்பாக இருந்தால், அது எழுத்துரு கிடைப்பதை தாமதப்படுத்தும்.
• காலாவதியான எழுத்துரு வடிவங்களைப் பயன்படுத்துதல்: WOFF2 கிடைக்கும்போது TTF அல்லது EOT ஐ வழங்குதல்.
• முக்கியமான எழுத்துருக்களை முன்ஏற்றாமல் இருத்தல்: உலாவிக்கு உயர் முன்னுரிமையை சமிக்ஞை செய்யும் வாய்ப்பைத் தவறவிடுதல்.
• மோசமான CDN உள்கட்டமைப்புடன் எழுத்துரு வழங்குநர்கள்: வலுவான உலகளாவிய நெட்வொர்க் இல்லாத ஒரு எழுத்துரு சேவையைத் தேர்ந்தெடுப்பது சர்வதேச பயனர்களுக்கான செயல்திறனைப் பாதிக்கும்.

முடிவு: ஒரு சிறந்த உலகளாவிய பயனர் அனுபவத்தை உருவாக்குதல்

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

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