CSS எழுத்துரு ஏற்றத்தில் தேர்ச்சி பெறுதல்: உலகளாவிய பார்வையாளர்களுக்கான செயல்திறன் மேம்படுத்தல் மற்றும் FOUT தடுப்பு

இன்றைய காட்சி சார்ந்த டிஜிட்டல் உலகில், ஒரு வலைத்தளத்தின் அழகியல் மற்றும் பயனர் அனுபவத்தை வடிவமைப்பதில் அச்சுக்கலை ஒரு முக்கிய பங்கு வகிக்கிறது. நீங்கள் தேர்ந்தெடுக்கும் எழுத்துருக்கள் மற்றும் அவை ஏற்றப்படும் விதம் உங்கள் தளத்தின் செயல்திறன், அணுகல் மற்றும் உணரப்பட்ட தரத்தை கணிசமாக பாதிக்கலாம். உலகளாவிய பார்வையாளர்களுக்கு, இது இன்னும் முக்கியமானது, ஏனெனில் பயனர்கள் உங்கள் தளத்தை பல்வேறு நெட்வொர்க் நிலைகள், சாதனத் திறன்கள் மற்றும் புவியியல் இடங்களிலிருந்து அணுகலாம். இந்த விரிவான வழிகாட்டி CSS எழுத்துரு ஏற்றுதலின் நுணுக்கங்களை ஆராய்கிறது, இது முக்கியமான செயல்திறன் மேம்படுத்தல் நுட்பங்கள் மற்றும் அஞ்சப்படும் Flash of Unstyled Text (FOUT) மற்றும் Flash of Invisible Text (FOIT) ஆகியவற்றைத் தடுப்பதற்கான உத்திகளில் கவனம் செலுத்துகிறது.

எழுத்துரு ஏற்றுதலின் சவால்களைப் புரிந்துகொள்ளுதல்

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

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

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

CSS எழுத்துரு ஏற்றுதலின் கட்டமைப்பு

வலை எழுத்துரு ஏற்றுதலின் அடித்தளம் @font-face CSS at-rule இல் உள்ளது. இந்த விதி உங்கள் வலைப்பக்கங்களில் பயன்படுத்த தனிப்பயன் எழுத்துருக்களைக் குறிப்பிட உங்களை அனுமதிக்கிறது.

@font-face விதி

ஒரு பொதுவான @font-face அறிவிப்பு இப்படி இருக்கும்:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
            

              
                Copy
              
            
          

முக்கிய பண்புகளைப் பிரிப்போம்:

• font-family: உங்கள் CSS இல் எழுத்துருவைக் குறிப்பிட நீங்கள் பயன்படுத்தும் பெயர் இது (எ.கா., font-family: 'MyCustomFont', sans-serif;).
• src: இது உங்கள் எழுத்துரு கோப்புகளுக்கான பாதையைக் குறிப்பிடுகிறது. பரந்த உலாவி இணக்கத்தன்மைக்கு பல வடிவங்களை வழங்குவது முக்கியம்.
• font-weight மற்றும் font-style: இந்த பண்புகள் எழுத்துரு மாறுபாட்டின் தடிமன் (எ.கா., normal, bold) மற்றும் பாணியை (எ.கா., normal, italic) வரையறுக்கின்றன.
• font-display: ஏற்றுதல் செயல்பாட்டின் போது எழுத்துருக்கள் எவ்வாறு காட்டப்பட வேண்டும் என்பதைக் கட்டுப்படுத்துவதற்கான ஒரு முக்கிய பண்பு இது. அதன் மதிப்புகளை பின்னர் விரிவாக ஆராய்வோம்.

வலை இணக்கத்தன்மைக்கான எழுத்துரு வடிவங்கள்

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

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

சிறந்த நடைமுறை: எப்போதும் WOFF2 மற்றும் WOFF க்கு முன்னுரிமை கொடுங்கள். ஒரு பொதுவான உத்தி என்னவென்றால், src அறிவிப்பில் முதலில் WOFF2 ஐ பட்டியலிட்டு, அதைத் தொடர்ந்து WOFF ஐ பட்டியலிடுவது, இது உலாவிக்குக் கிடைக்கும் சிறந்த வடிவமைப்பைத் தேர்ந்தெடுக்க அனுமதிக்கிறது.

செயல்திறன் மேம்படுத்தல் உத்திகள்

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

1. எழுத்துரு துணைக்குழுவாக்கம் (Font Subsetting)

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

• நன்மைகள்: எழுத்துரு கோப்பின் அளவைக் கணிசமாகக் குறைக்கிறது, இது வேகமான பதிவிறக்க நேரங்களுக்கு வழிவகுக்கிறது.
• கருவிகள்: Font Squirrel's Webfont Generator, Glyphhanger போன்ற ஆன்லைன் கருவிகள், அல்லது glyphhanger போன்ற கட்டளை வரி கருவிகள் எழுத்துருக்களை துணைக்குழுவாக்க உங்களுக்கு உதவும். நீங்கள் சேர்க்க வேண்டிய எழுத்துக்குழுக்கள் அல்லது யூனிகோட் வரம்புகளைக் குறிப்பிடலாம்.

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

2. மாறி எழுத்துருக்கள் (Variable Fonts)

மாறி எழுத்துருக்கள் ஒரு புதுமையான எழுத்துரு வடிவமாகும், இது ஒரு எழுத்துரு கோப்பில் ஒரு தட்டச்சுமுகத்தின் பல மாறுபாடுகளை (எ.கா., வெவ்வேறு தடிமன்கள், அகலங்கள் மற்றும் பாணிகள்) கொண்டிருக்க அனுமதிக்கிறது. ஒவ்வொரு எழுத்துரு தடிமனுக்கும் தனித்தனி கோப்புகளை (எ.கா., `regular.woff2`, `bold.woff2`, `italic.woff2`) பதிவிறக்குவதற்குப் பதிலாக, நீங்கள் ஒரே ஒரு மாறி எழுத்துரு கோப்பைப் பதிவிறக்குகிறீர்கள்.

• நன்மைகள்: HTTP கோரிக்கைகளின் எண்ணிக்கையையும் ஒட்டுமொத்த பதிவிறக்க அளவையும் வியத்தகு முறையில் குறைக்கிறது. அச்சுக்கலை விவரங்கள் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது.
• செயல்படுத்துதல்: உங்கள் எழுத்துரு கோப்புகள் OpenType-SVG அல்லது TrueType-அடிப்படையிலான மாறி எழுத்துரு வடிவங்களில் கிடைப்பதை உறுதிசெய்யுங்கள். font-weight, font-stretch, மற்றும் தனிப்பயன் பண்புகள் (எ.கா., --wght) போன்ற CSS பண்புகள் குறிப்பிட்ட மாறுபாடுகளைத் தேர்ந்தெடுக்கப் பயன்படுத்தப்படுகின்றன.
• உலாவி ஆதரவு: நவீன உலாவிகளில் மாறி எழுத்துரு ஆதரவு பரவலாக உள்ளது.

எடுத்துக்காட்டு:

            /* Define a variable font */
@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myvariablefont.woff2') format('woff2');
  font-weight: 100 900; /* Range of weights */
  font-stretch: 50% 150%; /* Range of widths */
}

body {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 700; /* Setting the weight */
}

h1 {
  font-weight: 900; /* A bolder weight */
}

.condensed-text {
  font-stretch: 75%; /* A narrower width */
}

            

              
                Copy
              
            
          

3. font-display ஐப் பயன்படுத்துதல்

font-display CSS பண்பு FOUT மற்றும் FOIT ஐத் தடுப்பதில் ஒரு திருப்புமுனையாகும். உலாவி ஒரு எழுத்துருவைப் பதிவிறக்கும்போது அது எவ்வாறு காட்டப்பட வேண்டும் என்பதை இது ஆணையிடுகிறது.

• auto: உலாவி அதன் இயல்புநிலை நடத்தையைப் பயன்படுத்துகிறது, இது பெரும்பாலும் block க்கு சமம்.
• block: உலாவி ஒரு குறுகிய தடுப்புக் காலத்தை (பொதுவாக 3 வினாடிகள் வரை) உருவாக்குகிறது. இந்த நேரத்தில், உரை கண்ணுக்குத் தெரியாதது. இந்த காலத்தின் முடிவில் எழுத்துரு ஏற்றப்படவில்லை என்றால், அது மாற்று எழுத்துருவைப் பயன்படுத்தும்.
• swap: உலாவி உடனடியாக மாற்று எழுத்துருவைப் பயன்படுத்துகிறது. வலை எழுத்துரு பதிவிறக்கம் செய்யப்பட்டவுடன், அது அதை மாற்றுகிறது. இது FOIT ஐத் தடுப்பதற்கும், உரையை விரைவாகக் காண்பதை உறுதி செய்வதற்கும் சிறந்தது, இருப்பினும் இது FOUT ஐ ஏற்படுத்தக்கூடும்.
• fallback: உலாவி ஒரு குறுகிய தடுப்புக் காலத்தை (எ.கா., 1 வினாடி) தொடர்ந்து ஒரு குறுகிய மாற்றுக் காலத்தை (எ.கா., 3 வினாடிகள்) உருவாக்குகிறது. தடுப்புக் காலத்திற்குள் எழுத்துரு ஏற்றப்படவில்லை என்றால், அது மாற்று எழுத்துருவைப் பயன்படுத்தும். மாற்றுக் காலத்தில் எழுத்துரு பதிவிறக்கம் செய்யப்பட்டால், அது பயன்படுத்தப்படும்; இல்லையெனில், மாற்று எழுத்துருவே இருக்கும்.
• optional: fallback ஐப் போன்றது, ஆனால் மிகக் குறுகிய தடுப்புக் காலத்துடன் மற்றும் மாற்றுக் காலம் இல்லாமல். ஆரம்ப தடுப்புக் காலத்தில் எழுத்துரு பதிவிறக்கம் செய்யப்படாவிட்டால், உலாவி மாற்று எழுத்துருவைப் பயன்படுத்தும் மற்றும் பின்னர் அதை மாற்ற முயற்சிக்காது. இது ஆரம்ப உள்ளடக்க ரெண்டருக்கு முக்கியமில்லாத எழுத்துருக்களுக்கு அல்லது மெதுவான இணைப்புகளில் உள்ள பயனர்களுக்கு ஏற்றது, ஏனெனில் இது உடனடி உள்ளடக்கக் கிடைப்பிற்கு முன்னுரிமை அளிக்கிறது.

பரிந்துரைக்கப்பட்ட உத்தி:

• உங்கள் பிராண்டின் முதன்மை தோற்றத்தை வரையறுக்கும் முக்கியமான எழுத்துருக்களுக்கு (எ.கா., தலைப்புகள், வழிசெலுத்தல்): உரையை விரைவாகப் படிக்கக்கூடியதாக இருப்பதை உறுதிசெய்ய font-display: swap; அல்லது font-display: fallback; ஐப் பயன்படுத்தவும்.
• குறைந்த முக்கியத்துவம் வாய்ந்த எழுத்துருக்களுக்கு (எ.கா., இரண்டாம் நிலை உள்ளடக்கம், சிறிய அலங்கார கூறுகள்): முக்கியமான ரெண்டரிங் பாதைகளைப் பாதிக்காமல் இருக்க font-display: optional; ஐக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு:

            @font-face {
  font-family: 'CriticalHeadingFont';
  src: url('/fonts/criticalheadingfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'OptionalBodyFont';
  src: url('/fonts/optionalbodyfont.woff2') format('woff2');
  font-display: optional;
}

            

              
                Copy
              
            
          

4. எழுத்துருக்களை முன் ஏற்றுதல் (Preloading)

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

• இது எப்படி வேலை செய்கிறது: உங்கள் HTML இன் <head> இல் <link rel="preload" ...> குறிச்சொல்லைச் சேர்ப்பதன் மூலம், இந்த வளம் முக்கியமானது என்றும் உயர் முன்னுரிமையுடன் பெறப்பட வேண்டும் என்றும் உலாவிக்குக் கூறுகிறீர்கள்.
• நன்மைகள்: அத்தியாவசிய எழுத்துருக்கள் விரைவில் கிடைப்பதை உறுதிசெய்கிறது, இது FOUT அல்லது FOIT இன் நிகழ்தகவைக் குறைக்கிறது.
• சிறந்த நடைமுறை: உங்கள் பக்கத்தின் ஆரம்ப ரெண்டருக்கு முக்கியமான எழுத்துருக்களை மட்டுமே முன் ஏற்றவும். அதிகமான வளங்களை முன் ஏற்றுவது எதிர் விளைவை ஏற்படுத்தும்.

எடுத்துக்காட்டு:

            <!-- In the <head> of your HTML -->
<link rel="preload" href="/fonts/mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/myotherfont.woff2" as="font" type="font/woff2" crossorigin>

            

              
                Copy
              
            
          

முன் ஏற்றுதலுக்கான முக்கியப் பரிசீலனைகள்:

• as="font": இது மிக முக்கியம். இது வளத்தின் வகையை உலாவிக்குக் கூறுகிறது.
• type="font/woff2": எழுத்துரு கோப்பின் MIME வகையைக் குறிப்பிடவும்.
• crossorigin: வேறு மூலத்திலிருந்து (எ.கா., ஒரு CDN) அல்லது CORS கொள்கைகளுக்கு உட்பட்டதாக இருந்தால் அதே மூலத்திலிருந்து எழுத்துருக்களை முன் ஏற்றும்போது எப்போதும் இந்த பண்புக்கூறைச் சேர்க்கவும். எழுத்துருக்களுக்கு, மதிப்பு anonymous அல்லது வெறுமனே crossorigin ஆக இருக்க வேண்டும்.

5. ஒத்திசைவற்ற எழுத்துரு ஏற்றம் (Asynchronous Font Loading)

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

• Web Font Loader (Typekit/Google Fonts): Web Font Loader போன்ற நூலகங்கள் எழுத்துரு ஏற்றுதல் மற்றும் நிகழ்வுகள் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்க முடியும். எழுத்துருக்கள் எப்போது ஏற்றப்பட வேண்டும், ஏற்றுதல் தோல்வியுற்றால் என்ன செய்வது, மற்றும் எழுத்துரு மாற்றத்தை நிர்வகிப்பது ஆகியவற்றைக் குறிப்பிடலாம்.
• ஜாவாஸ்கிரிப்ட் உடன் சுய-ஹோஸ்ட் எழுத்துருக்கள்: எழுத்துரு கோப்புகளை டைனமிக்காக ஏற்றுவதற்கு நீங்கள் தனிப்பயன் ஜாவாஸ்கிரிப்ட் லாஜிக்கை செயல்படுத்தலாம்.

ஒரு கற்பனையான ஸ்கிரிப்டைப் பயன்படுத்தி எடுத்துக்காட்டு:

            // Hypothetical JavaScript for asynchronous loading
WebFont.load({
  google: {
    families: ['Open Sans:400,700']
  },
  custom: {
    families: ['MyCustomFont'],
    urls: ['/fonts/mycustomfont.woff2']
  },
  active: function() {
    // Fonts are loaded, apply styles or trigger events
    document.documentElement.classList.add('fonts-loaded');
  }
});
            

              
                Copy
              
            
          

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

6. எழுத்துரு கோப்பு மேம்படுத்தல்

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

• சுருக்கம்: WOFF2 இயல்பாகவே சிறந்த சுருக்கத்தை வழங்குகிறது.
• கேச்சிங்: உங்கள் சேவையகத்தை நீண்ட கேச் ஹெடர்களுடன் எழுத்துரு கோப்புகளைப் பொருத்தமாகக் கேச் செய்ய உள்ளமைக்கவும். இது திரும்பி வரும் பார்வையாளர்கள் எழுத்துருக்களை மீண்டும் பதிவிறக்கத் தேவையில்லை என்பதை உறுதி செய்கிறது.
• Gzip/Brotli சுருக்கம்: உங்கள் சேவையகம் எழுத்துரு கோப்புகளை (அத்துடன் பிற சொத்துக்களையும்) கிளையண்டிற்கு அனுப்பும் முன் Gzip அல்லது Brotli ஐப் பயன்படுத்தி சுருக்க உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிசெய்யுங்கள். Brotli பொதுவாக Gzip ஐ விட சிறந்த சுருக்கத்தை வழங்குகிறது.

7. சிஸ்டம் எழுத்துரு அடுக்குகள் (System Font Stacks)

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

எடுத்துக்காட்டு:

            body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

            

              
                Copy
              
            
          

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

FOUT மற்றும் FOIT தடுப்பு: ஒரு உத்திசார் அணுகுமுறை

இலக்கு என்னவென்றால், உணரப்பட்ட செயல்திறனையும் (பக்கம் எவ்வளவு வேகமாக *உணரப்படுகிறது*) உண்மையான செயல்திறனையும் (பக்கம் எவ்வளவு விரைவாகப் பயன்படுத்தக்கூடியதாகிறது) சமநிலைப்படுத்துவதாகும். இங்கே ஒரு உத்திசார் முறிவு:

1. முக்கியமான எழுத்துருக்களுக்கு முன்னுரிமை

ஆரம்ப பயனர் அனுபவத்திற்கு அத்தியாவசியமான எழுத்துருக்களை அடையாளம் காணவும்:

• தலைப்புகள்
• வழிசெலுத்தல் கூறுகள்
• முக்கிய பயனர் இடைமுகக் கூறுகள்

இவற்றிற்கு, பயன்படுத்தவும்:

• font-display: swap; அல்லது font-display: fallback;
• WOFF2 பதிப்புகளுக்கு <link rel="preload">.

மாற்று எழுத்துருவின் ஒரு குறுகிய தோற்றம் இருந்தாலும், உரை விரைவாகத் தெரிவதை இது உறுதி செய்கிறது.

2. முக்கியமற்ற எழுத்துருக்களை நிர்வகித்தல்

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

• font-display: optional; ஐப் பயன்படுத்தவும்
• முற்றிலும் அவசியமில்லை என்றால் இந்த எழுத்துருக்களை முன் ஏற்றுவதைத் தவிர்க்கவும்.

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

3. பயனரின் சூழலைக் கருத்தில் கொள்ளுங்கள்

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

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

4. சோதனை மற்றும் கண்காணிப்பு

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

• உலாவி டெவலப்பர் கருவிகள்: உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் உள்ள நெட்வொர்க் மற்றும் செயல்திறன் தாவல்களைப் பயன்படுத்தி எழுத்துரு பதிவிறக்க நேரங்கள், ரெண்டரிங் நடத்தை மற்றும் தடைகளை அடையாளம் காணவும். வெவ்வேறு நெட்வொர்க் நிலைகளை (எ.கா., Fast 3G, Slow 3G) உருவகப்படுத்தவும்.
• செயல்திறன் தணிக்கை கருவிகள்: Google PageSpeed Insights, GTmetrix, மற்றும் WebPageTest போன்ற கருவிகளைப் பயன்படுத்தவும். இந்த கருவிகள் உங்கள் தளத்தின் செயல்திறன் குறித்த விரிவான அறிக்கைகளை வழங்குகின்றன, இதில் எழுத்துரு ஏற்றுதலுக்கான பரிந்துரைகளும் அடங்கும்.
• உண்மையான பயனர் கண்காணிப்பு (RUM): வெவ்வேறு சாதனங்கள், உலாவிகள் மற்றும் இருப்பிடங்களில் உள்ள உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரிக்க RUM கருவிகளைச் செயல்படுத்தவும். இது உங்கள் தளத்தின் செயல்திறனின் மிகவும் துல்லியமான படத்தை வழங்குகிறது.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

1. HTTP/2 மற்றும் HTTP/3

நவீன HTTP நெறிமுறைகள் (HTTP/2 மற்றும் HTTP/3) மல்டிபிளெக்சிங்கை வழங்குகின்றன, இது ஒரே இணைப்பு வழியாகப் பல கோரிக்கைகளையும் பதில்களையும் அனுப்ப அனுமதிக்கிறது. இது பல சிறிய எழுத்துரு கோப்புகளை (எ.கா., வெவ்வேறு தடிமன்கள் மற்றும் பாணிகள்) பதிவிறக்குவதற்கான மேல்நிலையைக் குறைக்கலாம்.

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

2. முக்கியமான CSS (Critical CSS)

முக்கியமான CSS என்ற கருத்து, உங்கள் பக்கத்தின் மடிப்புக்கு மேல் உள்ளடக்கத்தை ரெண்டர் செய்யத் தேவையான CSS ஐ அடையாளம் கண்டு இன்லைன் செய்வதை உள்ளடக்கியது. இந்த முக்கியமான பகுதியில் உங்கள் தனிப்பயன் எழுத்துருக்கள் பயன்படுத்தப்பட்டால், அவற்றின் @font-face அறிவிப்புகளை முக்கியமான CSS க்குள் சேர்க்கலாம்.

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

3. எழுத்துரு ஏற்றுதல் API (சோதனை)

CSS Font Loading API, எழுத்துருக்களின் நிலையை வினவவும் அவற்றின் ஏற்றுதலை நிர்வகிக்கவும் ஜாவாஸ்கிரிப்ட் இடைமுகங்களை வழங்குகிறது. இது இன்னும் வளர்ந்து வருகிறது மற்றும் உலகளவில் ஆதரிக்கப்படவில்லை என்றாலும், இது சக்திவாய்ந்த நிரலாக்கக் கட்டுப்பாட்டை வழங்குகிறது.

• எடுத்துக்காட்டு: எல்லா எழுத்துருக்களும் எப்போது ஏற்றப்பட்டன என்பதை அறிய document.fonts.ready ஐப் பயன்படுத்துதல்.

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

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

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

முக்கிய குறிப்புகள்:

• WOFF2 க்கு முன்னுரிமை: இது மிகவும் திறமையான வடிவம்.
• font-display ஐப் பயன்படுத்தவும்: எழுத்துரு ஏற்றுதலின் போது ரெண்டரிங்கைக் கட்டுப்படுத்தவும் (swap அல்லது optional பெரும்பாலும் சிறந்தவை).
• முக்கியமான எழுத்துருக்களை preload செய்யவும்: அத்தியாவசிய எழுத்துருக்களை முன்கூட்டியே பெறவும்.
• எழுத்துருக்களை துணைக்குழுவாக்கவும்: தேவையான கிளிஃப்களை மட்டும் சேர்த்து கோப்பு அளவுகளைக் குறைக்கவும்.
• மாறி எழுத்துருக்களை ஆராயுங்கள்: குறைக்கப்பட்ட கோப்பு அளவுகள் மற்றும் அதிக அச்சுக்கலைக் கட்டுப்பாட்டிற்கு.
• முழுமையாகச் சோதிக்கவும்: பல்வேறு நெட்வொர்க் நிலைகள் மற்றும் சாதனங்களை உருவகப்படுத்தவும்.

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