வேகமான இணையதள ஏற்றம் மற்றும் மேம்பட்ட பயனர் அனுபவத்திற்காக முக்கிய ரெண்டரிங் பாதையைப் புரிந்துகொண்டு மேம்படுத்துவதற்கான ஒரு முழுமையான வழிகாட்டி. உலகளவில் முன்-இறுதி செயல்திறனை மேம்படுத்துவதற்கான நடைமுறை நுட்பங்களைக் கற்றுக்கொள்ளுங்கள்.
ஜாவாஸ்கிரிப்ட் செயல்திறன் மேம்படுத்தல்: முக்கிய ரெண்டரிங் பாதையில் தேர்ச்சி பெறுதல்
இன்றைய இணையத்தில், செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் ஒரு இணையதளம் பயனர்களை விரக்தியடையச் செய்யலாம், அதிக பவுன்ஸ் விகிதங்களுக்கு வழிவகுக்கும், மற்றும் இறுதியில், வருவாய் இழப்பை ஏற்படுத்தும். உங்கள் ஜாவாஸ்கிரிப்டை மேம்படுத்துவதும், உலாவிகள் வலைப்பக்கங்களை எவ்வாறு ரெண்டர் செய்கின்றன என்பதைப் புரிந்துகொள்வதும் வேகமான மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்தை வழங்குவதற்கு அவசியமானது. இந்தத் துறையில் மிக முக்கியமான கருத்துக்களில் ஒன்று முக்கிய ரெண்டரிங் பாதை (Critical Rendering Path - CRP) ஆகும்.
முக்கிய ரெண்டரிங் பாதை என்றால் என்ன?
முக்கிய ரெண்டரிங் பாதை என்பது HTML, CSS, மற்றும் ஜாவாஸ்கிரிப்டை திரையில் ஒரு ரெண்டர் செய்யப்பட்ட வலைப்பக்கமாக மாற்றுவதற்கு உலாவி எடுக்கும் படிகளின் வரிசையாகும். இது சார்புகளின் ஒரு சங்கிலி; ஒவ்வொரு படியும் முந்தைய படியின் வெளியீட்டைச் சார்ந்துள்ளது. இந்தப் பாதையைப் புரிந்துகொண்டு மேம்படுத்துவது, ஒரு பயனர் உங்கள் வலைத்தளத்தைப் பார்த்து அதனுடன் தொடர்புகொள்வதற்கு எடுக்கும் நேரத்தைக் குறைப்பதற்கு முக்கியமானது. இதை ஒரு கவனமாக ஒருங்கிணைக்கப்பட்ட பாலே நடனமாக நினைத்துப் பாருங்கள், அங்கு ஒவ்வொரு அசைவும் (ஒவ்வொரு ரெண்டரிங் படியும்) இறுதி நிகழ்ச்சி குறைபாடற்றதாக இருக்க சரியான நேரத்தில் மற்றும் சரியாக செயல்படுத்தப்பட வேண்டும். ஒரு படியில் ஏற்படும் தாமதம் அடுத்தடுத்த அனைத்து படிகளையும் பாதிக்கிறது.
CRP பின்வரும் முக்கிய படிகளைக் கொண்டுள்ளது:
- DOM கட்டுமானம்: HTML-ஐப் பிரித்து ஆவண பொருள் மாதிரியை (Document Object Model - DOM) உருவாக்குதல்.
- CSSOM கட்டுமானம்: CSS-ஐப் பிரித்து CSS பொருள் மாதிரியை (CSS Object Model - CSSOM) உருவாக்குதல்.
- ரெண்டர் ட்ரீ கட்டுமானம்: ரெண்டர் ட்ரீயை உருவாக்க DOM மற்றும் CSSOM-ஐ இணைத்தல்.
- லேஅவுட்: ரெண்டர் ட்ரீயில் உள்ள ஒவ்வொரு உறுப்பின் நிலை மற்றும் அளவைக் கணக்கிடுதல்.
- பெயிண்ட்: ரெண்டர் ட்ரீயை திரையில் உண்மையான பிக்சல்களாக மாற்றுதல்.
இந்த ஒவ்வொரு படியையும் இன்னும் விரிவாகப் பார்ப்போம்.
1. DOM கட்டுமானம்
ஒரு உலாவி ஒரு HTML ஆவணத்தைப் பெறும்போது, அது குறியீட்டை வரி வரியாகப் பிரிக்கத் தொடங்குகிறது. அது பிரிக்கும்போது, அது ஆவண பொருள் மாதிரி (DOM) எனப்படும் ஒரு மரம் போன்ற கட்டமைப்பை உருவாக்குகிறது. DOM ஆனது HTML ஆவணத்தின் கட்டமைப்பைக் குறிக்கிறது, ஒவ்வொரு HTML உறுப்பும் மரத்தில் ஒரு முனையாக மாறுகிறது. பின்வரும் எளிய HTML-ஐக் கவனியுங்கள்:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first website.</p>
</body>
</html>
உலாவி இதை ஒரு DOM மரமாகப் பிரிக்கும், அங்கு ஒவ்வொரு குறிச்சொல்லும் (<html>, <head>, <body>, போன்றவை) ஒரு முனையாக மாறும்.
முக்கிய தடுப்பு வளம்: பார்சர் ஒரு <script> குறிச்சொல்லை சந்திக்கும் போது, ஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டு, பிரிக்கப்பட்டு, செயல்படுத்தப்படும் வரை அது பொதுவாக DOM கட்டுமானத்தை தடுக்கிறது. இதற்குக் காரணம் ஜாவாஸ்கிரிப்ட் DOM-ஐ மாற்றியமைக்க முடியும், எனவே DOM-ஐ உருவாக்குவதைத் தொடர்வதற்கு முன்பு ஸ்கிரிப்ட் செயல்பட்டு முடிந்துவிட்டதா என்பதை உலாவி உறுதிப்படுத்த வேண்டும். இதேபோல், CSS-ஐ ஏற்றும் <link> குறிச்சொற்கள் கீழே விவரிக்கப்பட்டுள்ளபடி ரெண்டர்-தடுப்பாகக் கருதப்படுகின்றன.
2. CSSOM கட்டுமானம்
உலாவி DOM-ஐ உருவாக்க HTML-ஐப் பிரிப்பது போலவே, அது CSS பொருள் மாதிரியை (CSSOM) உருவாக்க CSS-ஐப் பிரிக்கிறது. CSSOM ஆனது HTML உறுப்புகளுக்குப் பயன்படுத்தப்படும் ஸ்டைல்களைக் குறிக்கிறது. DOM போலவே, CSSOM-ம் ஒரு மரம் போன்ற கட்டமைப்பாகும். DOM உறுப்புகள் எவ்வாறு ஸ்டைல் செய்யப்பட்டு காட்டப்படுகின்றன என்பதை CSSOM தீர்மானிப்பதால் இது மிகவும் முக்கியமானது. பின்வரும் CSS-ஐக் கவனியுங்கள்:
h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
}
உலாவி இந்த CSS-ஐப் பிரித்து, CSS விதிகளை அதனுடன் தொடர்புடைய HTML உறுப்புகளுடன் பொருத்தும் ஒரு CSSOM-ஐ உருவாக்குகிறது. CSSOM கட்டுமானம் பக்கத்தின் ரெண்டரிங்கை நேரடியாகப் பாதிக்கிறது; தவறான அல்லது திறனற்ற CSS, ரெண்டரிங் தாமதங்கள் மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். உதாரணமாக, உலாவியின் வேலையைக் குறைக்க CSS செலக்டர்கள் முடிந்தவரை குறிப்பிட்டதாகவும் திறமையாகவும் இருக்க வேண்டும்.
முக்கிய தடுப்பு வளம்: CSSOM ஒரு ரெண்டர்-தடுப்பு வளமாகும். CSSOM கட்டப்பட்ட பின்னரே உலாவி பக்கத்தை ரெண்டர் செய்யத் தொடங்க முடியும். இதற்குக் காரணம் CSS-ல் வரையறுக்கப்பட்ட ஸ்டைல்கள் HTML உறுப்புகள் எவ்வாறு காட்டப்படுகின்றன என்பதைப் பாதிக்கின்றன. எனவே, ரெண்டரிங்கைத் தொடர்வதற்கு முன்பு CSSOM முழுமையடைய உலாவி காத்திருக்க வேண்டும். ஆவணத்தின் <head>-ல் உள்ள ஸ்டைல்ஷீட்கள் (<link rel="stylesheet"> பயன்படுத்தி) பொதுவாக ரெண்டரிங்கைத் தடுக்கின்றன.
3. ரெண்டர் ட்ரீ கட்டுமானம்
DOM மற்றும் CSSOM கட்டப்பட்டவுடன், உலாவி அவற்றை இணைத்து ரெண்டர் ட்ரீயை உருவாக்குகிறது. ரெண்டர் ட்ரீ என்பது DOM-ன் ஒரு காட்சிப் பிரதிநிதித்துவம் ஆகும், இது திரையில் உண்மையில் காட்டப்படும் உறுப்புகளை மட்டுமே உள்ளடக்கியது. மறைக்கப்பட்ட உறுப்புகள் (எ.கா., display: none; பயன்படுத்தி) ரெண்டர் ட்ரீயில் சேர்க்கப்படவில்லை. ரெண்டர் ட்ரீ பயனர் உண்மையில் திரையில் என்ன பார்ப்பார் என்பதைக் குறிக்கிறது; இது DOM-ன் ஒரு கத்தரிக்கப்பட்ட பதிப்பாகும், இது தெரியும் மற்றும் ஸ்டைல் செய்யப்பட்ட உறுப்புகளை மட்டுமே உள்ளடக்கியது.
ரெண்டர் ட்ரீ பக்கத்தின் இறுதி காட்சி கட்டமைப்பைக் குறிக்கிறது, உள்ளடக்கம் (DOM) மற்றும் ஸ்டைலிங் (CSSOM) ஆகியவற்றை இணைக்கிறது. இந்த படி உண்மையான ரெண்டரிங் செயல்முறைக்கு களம் அமைப்பதால் இது மிகவும் முக்கியமானது.
4. லேஅவுட்
லேஅவுட் கட்டம் ரெண்டர் ட்ரீயில் உள்ள ஒவ்வொரு உறுப்பின் சரியான நிலை மற்றும் அளவைக் கணக்கிடுவதை உள்ளடக்கியது. இந்த செயல்முறை "ரிஃப்ளோ" என்றும் அழைக்கப்படுகிறது. உலாவி ஒவ்வொரு உறுப்பும் திரையில் எங்கு வைக்கப்பட வேண்டும் மற்றும் அது எவ்வளவு இடத்தை ஆக்கிரமிக்க வேண்டும் என்பதை தீர்மானிக்கிறது. லேஅவுட் கட்டம் உறுப்புகளுக்குப் பயன்படுத்தப்படும் CSS ஸ்டைல்களால் பெரிதும் பாதிக்கப்படுகிறது. மார்ஜின், பேடிங், அகலம், உயரம், மற்றும் பொசிஷனிங் போன்ற காரணிகள் அனைத்தும் லேஅவுட் கணக்கீடுகளில் ஒரு பங்கு வகிக்கின்றன. இந்த கட்டம், குறிப்பாக சிக்கலான லேஅவுட்களுக்கு, கணக்கீட்டு ரீதியாக தீவிரமானது.
லேஅவுட் CRP-யின் ஒரு முக்கியமான படியாகும், ஏனெனில் இது பக்கத்தில் உள்ள உறுப்புகளின் இடஞ்சார்ந்த அமைப்பை தீர்மானிக்கிறது. ஒரு திறமையான லேஅவுட் செயல்முறை ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்திற்கு அவசியமானது. DOM அல்லது CSSOM-ல் ஏற்படும் மாற்றங்கள் ஒரு ரிலேஅவுட்டைத் தூண்டலாம், இது செயல்திறன் அடிப்படையில் செலவு மிக்கதாக இருக்கும்.
5. பெயிண்ட்
இறுதிப் படி பெயிண்ட் கட்டமாகும், இங்கு உலாவி ரெண்டர் ட்ரீயை திரையில் உண்மையான பிக்சல்களாக மாற்றுகிறது. இது உறுப்புகளை ராஸ்டரைஸ் செய்வதையும், குறிப்பிட்ட ஸ்டைல்கள், வண்ணங்கள், மற்றும் டெக்ஸ்சர்களைப் பயன்படுத்துவதையும் உள்ளடக்கியது. பெயிண்ட் செயல்முறைதான் வலைப்பக்கத்தை பயனருக்குத் தெரியும்படி செய்கிறது. பெயிண்டிங் மற்றொரு கணக்கீட்டு ரீதியாக தீவிரமான செயல்முறையாகும், குறிப்பாக சிக்கலான கிராபிக்ஸ் மற்றும் அனிமேஷன்களுக்கு.
பெயிண்ட் கட்டத்திற்குப் பிறகு, பயனர் ரெண்டர் செய்யப்பட்ட வலைப்பக்கத்தைப் பார்க்கிறார். DOM அல்லது CSSOM-ல் ஏற்படும் அடுத்தடுத்த மாற்றங்கள் ஒரு ரிபெயிண்ட்டைத் தூண்டலாம், இது திரையில் உள்ள காட்சிப் பிரதிநிதித்துவத்தைப் புதுப்பிக்கிறது. தேவையற்ற ரிபெயிண்ட்களைக் குறைப்பது ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகத்தை பராமரிக்க முக்கியமானது.
முக்கிய ரெண்டரிங் பாதையை மேம்படுத்துதல்
இப்போது நாம் முக்கிய ரெண்டரிங் பாதையைப் புரிந்துகொண்டோம், அதை மேம்படுத்துவதற்கான சில நுட்பங்களை ஆராய்வோம்.
1. முக்கிய வளங்களின் எண்ணிக்கையைக் குறைத்தல்
உலாவி பதிவிறக்கம் செய்து பிரிக்க வேண்டிய முக்கிய வளங்கள் (CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகள்) குறைவாக இருந்தால், பக்கம் வேகமாக ரெண்டர் ஆகும். முக்கிய வளங்களைக் குறைப்பது எப்படி என்பது இங்கே:
- முக்கியமற்ற ஜாவாஸ்கிரிப்டை ஒத்திவைத்தல்: DOM கட்டுமானத்தைத் தடுப்பதைத் தவிர்க்க
<script>குறிச்சொற்களில்deferஅல்லதுasyncபண்புகளைப் பயன்படுத்தவும். - முக்கியமான CSS-ஐ இன்லைன் செய்தல்: மடிப்புக்கு மேலே உள்ள உள்ளடக்கத்தை ரெண்டர் செய்வதற்கு அவசியமான CSS விதிகளை அடையாளம் கண்டு, அவற்றை நேரடியாக HTML ஆவணத்தின்
<head>-ல் இன்லைன் செய்யவும். இது ஆரம்ப ரெண்டருக்கு உலாவி ஒரு வெளிப்புற CSS கோப்பைப் பதிவிறக்க வேண்டிய தேவையை நீக்குகிறது. - CSS மற்றும் ஜாவாஸ்கிரிப்டை சுருக்குதல்: தேவையற்ற எழுத்துக்களை (வெள்ளை இடம், கருத்துரைகள், முதலியன) அகற்றுவதன் மூலம் உங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளின் அளவைக் குறைக்கவும்.
- CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை இணைத்தல்: பல CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை ஒரே கோப்பாக இணைப்பதன் மூலம் HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கவும். இருப்பினும், HTTP/2 உடன், மேம்பட்ட மல்டிபிளெக்சிங் திறன்கள் காரணமாக பண்ட்லிங்கின் நன்மைகள் குறைவாகவே உள்ளன.
- பயன்படுத்தப்படாத CSS-ஐ அகற்றுதல்: உங்கள் CSS-ஐப் பகுப்பாய்வு செய்து, ஒருபோதும் பயன்படுத்தப்படாத விதிகளை அடையாளம் காண கருவிகள் உள்ளன. இந்த விதிகளை அகற்றுவது CSSOM-ன் அளவைக் குறைக்கிறது.
எடுத்துக்காட்டு (ஜாவாஸ்கிரிப்டை ஒத்திவைத்தல்):
<script src="script.js" defer></script>
defer பண்பு உலாவியிடம் DOM கட்டுமானத்தைத் தடுக்காமல் ஸ்கிரிப்டைப் பதிவிறக்கம் செய்யச் சொல்கிறது. DOM முழுமையாகப் பிரிக்கப்பட்ட பிறகு ஸ்கிரிப்ட் செயல்படுத்தப்படும்.
எடுத்துக்காட்டு (முக்கியமான CSS-ஐ இன்லைன் செய்தல்):
<head>
<style>
/* மடிப்புக்கு மேலே உள்ள உள்ளடக்கத்திற்கான முக்கியமான CSS */
body { font-family: sans-serif; }
h1 { color: black; }
</style>
<link rel="stylesheet" href="style.css">
</head>
இந்த எடுத்துக்காட்டில், body மற்றும் h1 உறுப்புகளுக்கான CSS விதிகள் <head>-ல் இன்லைன் செய்யப்பட்டுள்ளன. வெளிப்புற ஸ்டைல்ஷீட் (style.css) பதிவிறக்கம் செய்யப்படுவதற்கு முன்பே, உலாவி மடிப்புக்கு மேலே உள்ள உள்ளடக்கத்தை விரைவாக ரெண்டர் செய்ய முடியும் என்பதை இது உறுதி செய்கிறது.
2. CSS விநியோகத்தை மேம்படுத்துதல்
உங்கள் CSS-ஐ நீங்கள் வழங்கும் விதம் CRP-ஐ கணிசமாக பாதிக்கலாம். இந்த மேம்படுத்தல் நுட்பங்களைக் கவனியுங்கள்:
- மீடியா வினவல்கள்: குறிப்பிட்ட சாதனங்கள் அல்லது திரை அளவுகளுக்கு மட்டுமே CSS-ஐப் பயன்படுத்த மீடியா வினவல்களைப் பயன்படுத்தவும். இது உலாவி தேவையற்ற CSS-ஐப் பதிவிறக்குவதைத் தடுக்கிறது.
- அச்சு ஸ்டைல்ஷீட்கள்: உங்கள் அச்சு ஸ்டைல்களை ஒரு தனி ஸ்டைல்ஷீட்டாகப் பிரித்து, அச்சிடும்போது மட்டுமே அதைப் பயன்படுத்த ஒரு மீடியா வினவலைப் பயன்படுத்தவும். இது அச்சு ஸ்டைல்கள் திரையில் ரெண்டரிங்கைத் தடுப்பதைத் தடுக்கிறது.
- நிபந்தனைக்குட்பட்ட ஏற்றுதல்: உலாவி அம்சங்கள் அல்லது பயனர் விருப்பங்களின் அடிப்படையில் CSS கோப்புகளை நிபந்தனையுடன் ஏற்றவும். இதை ஜாவாஸ்கிரிப்ட் அல்லது சர்வர்-சைட் லாஜிக்கைப் பயன்படுத்தி அடையலாம்.
எடுத்துக்காட்டு (மீடியா வினவல்கள்):
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
இந்த எடுத்துக்காட்டில், style.css திரைகளுக்கு மட்டுமே பயன்படுத்தப்படுகிறது, அதே நேரத்தில் print.css அச்சிடும்போது மட்டுமே பயன்படுத்தப்படுகிறது.
3. ஜாவாஸ்கிரிப்ட் செயல்பாட்டை மேம்படுத்துதல்
ஜாவாஸ்கிரிப்ட் CRP-ல் ஒரு குறிப்பிடத்தக்க தாக்கத்தை ஏற்படுத்தக்கூடும், குறிப்பாக அது DOM அல்லது CSSOM-ஐ மாற்றினால். ஜாவாஸ்கிரிப்ட் செயல்பாட்டை மேம்படுத்துவது எப்படி என்பது இங்கே:
- ஜாவாஸ்கிரிப்டை ஒத்திவைத்தல் அல்லது அசிங்க் செய்தல்: முன்னர் குறிப்பிட்டபடி, ஜாவாஸ்கிரிப்ட் DOM கட்டுமானத்தைத் தடுப்பதைத் தவிர்க்க
deferஅல்லதுasyncபண்புகளைப் பயன்படுத்தவும். - ஜாவாஸ்கிரிப்ட் குறியீட்டை மேம்படுத்துதல்: DOM கையாளுதல்கள் மற்றும் கணக்கீடுகளைக் குறைக்கும் திறமையான ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதவும்.
- ஜாவாஸ்கிரிப்டை சோம்பேறித்தனமாக ஏற்றுதல்: ஜாவாஸ்கிரிப்ட் தேவைப்படும்போது மட்டுமே ஏற்றவும். உதாரணமாக, மடிப்புக்கு கீழே உள்ள உறுப்புகளுக்கு நீங்கள் ஜாவாஸ்கிரிப்டை சோம்பேறித்தனமாக ஏற்றலாம்.
- வெப் வொர்க்கர்கள்: கணக்கீட்டு ரீதியாக தீவிரமான ஜாவாஸ்கிரிப்ட் பணிகளை பிரதான த்ரெட்டைத் தடுப்பதைத் தவிர்க்க வெப் வொர்க்கர்களுக்கு நகர்த்தவும்.
எடுத்துக்காட்டு (அசிங்க் ஜாவாஸ்கிரிப்ட்):
<script src="analytics.js" async></script>
async பண்பு உலாவியிடம் ஸ்கிரிப்டை ஒத்திசைவற்ற முறையில் பதிவிறக்கம் செய்து, அது கிடைத்தவுடன், DOM கட்டுமானத்தைத் தடுக்காமல் செயல்படுத்தச் சொல்கிறது. defer போலல்லாமல், async உடன் ஏற்றப்பட்ட ஸ்கிரிப்டுகள் HTML-ல் தோன்றும் வரிசையை விட வேறு வரிசையில் செயல்படுத்தப்படலாம்.
4. DOM-ஐ மேம்படுத்துதல்
ஒரு பெரிய மற்றும் சிக்கலான DOM ரெண்டரிங் செயல்முறையை மெதுவாக்கக்கூடும். DOM-ஐ மேம்படுத்துவது எப்படி என்பது இங்கே:
- DOM அளவைக் குறைத்தல்: தேவையற்ற உறுப்புகள் மற்றும் பண்புகளை அகற்றுவதன் மூலம் DOM-ஐ முடிந்தவரை சிறியதாக வைத்திருங்கள்.
- ஆழமான DOM மரங்களைத் தவிர்த்தல்: ஆழமாகப் பதிக்கப்பட்ட DOM கட்டமைப்புகளை உருவாக்குவதைத் தவிர்க்கவும், ஏனெனில் அவை உலாவிக்கு DOM-ஐக் கடப்பதை மிகவும் கடினமாக்கும்.
- சொற்பொருள் HTML-ஐப் பயன்படுத்துதல்: உங்கள் HTML ஆவணத்திற்கு கட்டமைப்பு மற்றும் பொருளை வழங்க சொற்பொருள் HTML உறுப்புகளைப் (எ.கா.,
<article>,<nav>,<aside>) பயன்படுத்தவும். இது உலாவிக்கு பக்கத்தை மிகவும் திறமையாக ரெண்டர் செய்ய உதவும்.
5. லேஅவுட் த்ராஷிங்கைக் குறைத்தல்
ஜாவாஸ்கிரிப்ட் மீண்டும் மீண்டும் DOM-ஐப் படித்து எழுதுவதால் லேஅவுட் த்ராஷிங் ஏற்படுகிறது, இதனால் உலாவி பல லேஅவுட்கள் மற்றும் பெயிண்ட்களைச் செய்ய வேண்டியுள்ளது. இது செயல்திறனை கணிசமாகக் குறைக்கலாம். லேஅவுட் த்ராஷிங்கைத் தவிர்க்க:
- DOM மாற்றங்களைக் குழுவாக்குதல்: DOM மாற்றங்களை ஒன்றாகக் குழுவாக்கி அவற்றை ஒரே தொகுப்பாகப் பயன்படுத்தவும். இது லேஅவுட்கள் மற்றும் பெயிண்ட்களின் எண்ணிக்கையைக் குறைக்கிறது.
- எழுதுவதற்கு முன்பு லேஅவுட் பண்புகளைப் படிப்பதைத் தவிர்த்தல்: DOM-ல் எழுதுவதற்கு முன்பு லேஅவுட் பண்புகளைப் (எ.கா.,
offsetWidth,offsetHeight) படிப்பதைத் தவிர்க்கவும், ஏனெனில் இது உலாவியை ஒரு லேஅவுட் செய்யும்படி கட்டாயப்படுத்தலாம். - CSS டிரான்ஸ்ஃபார்ம்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்துதல்: ஜாவாஸ்கிரிப்ட் அடிப்படையிலான அனிமேஷன்களுக்குப் பதிலாக CSS டிரான்ஸ்ஃபார்ம்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்தவும், ஏனெனில் அவை பொதுவாக அதிக செயல்திறன் கொண்டவை. டிரான்ஸ்ஃபார்ம்கள் மற்றும் அனிமேஷன்கள் பெரும்பாலும் GPU-ஐப் பயன்படுத்துகின்றன, இது இந்த வகையான செயல்பாடுகளுக்கு உகந்ததாக உள்ளது.
6. உலாவி கேச்சிங்கை மேம்படுத்துதல்
உலாவி கேச்சிங், உலாவியை வளங்களை (எ.கா., CSS, ஜாவாஸ்கிரிப்ட், படங்கள்) உள்ளூரில் சேமிக்க அனுமதிக்கிறது, எனவே அடுத்தடுத்த வருகைகளில் அவற்றை மீண்டும் பதிவிறக்கம் செய்ய வேண்டியதில்லை. உங்கள் வளங்களுக்கு பொருத்தமான கேச் ஹெடர்களை அமைக்க உங்கள் சேவையகத்தை உள்ளமைக்கவும்.
எடுத்துக்காட்டு (கேச் ஹெடர்கள்):
Cache-Control: public, max-age=31536000
இந்த கேச் ஹெடர் உலாவியிடம் வளத்தை ஒரு வருடத்திற்கு (31536000 வினாடிகள்) கேச் செய்யச் சொல்கிறது. ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துவதும் கேச்சிங் செயல்திறனை பெரிதும் மேம்படுத்தலாம், ஏனெனில் இது உங்கள் உள்ளடக்கத்தை உலகம் முழுவதும் உள்ள பல சேவையகங்களில் விநியோகிக்கிறது, பயனர்கள் தங்களுக்கு புவியியல் ரீதியாக நெருக்கமாக இருக்கும் ஒரு சேவையகத்திலிருந்து வளங்களைப் பதிவிறக்க அனுமதிக்கிறது.
முக்கிய ரெண்டரிங் பாதையைப் பகுப்பாய்வு செய்வதற்கான கருவிகள்
பல கருவிகள் முக்கிய ரெண்டரிங் பாதையைப் பகுப்பாய்வு செய்யவும் செயல்திறன் தடைகளை அடையாளம் காணவும் உங்களுக்கு உதவும்:
- Chrome DevTools: Chrome DevTools ரெண்டரிங் செயல்முறை பற்றிய ஏராளமான தகவல்களை வழங்குகிறது, CRP-யின் ஒவ்வொரு படியின் நேரத்தையும் உள்ளடக்கியது. பக்க ஏற்றத்தின் காலவரிசையைப் பதிவுசெய்யவும் மேம்படுத்தலுக்கான பகுதிகளை அடையாளம் காணவும் செயல்திறன் பேனலைப் பயன்படுத்தவும். கவரேஜ் தாவல் பயன்படுத்தப்படாத CSS மற்றும் ஜாவாஸ்கிரிப்டை அடையாளம் காண உதவுகிறது.
- WebPageTest: WebPageTest ஒரு பிரபலமான ஆன்லைன் கருவியாகும், இது விரிவான செயல்திறன் அறிக்கைகளை வழங்குகிறது, இதில் வளங்களின் ஏற்றத்தை காட்சிப்படுத்தும் ஒரு நீர்வீழ்ச்சி வரைபடம் அடங்கும்.
- Lighthouse: Lighthouse என்பது வலைப்பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவியாகும். இது செயல்திறன், அணுகல்தன்மை, முற்போக்கு வலை பயன்பாடுகள், SEO மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது. நீங்கள் அதை Chrome DevTools-ல், கட்டளை வரியிலிருந்து, அல்லது ஒரு நோட் மாட்யூலாக இயக்கலாம்.
எடுத்துக்காட்டு (Chrome DevTools-ஐப் பயன்படுத்துதல்):
- Chrome DevTools-ஐத் திறக்கவும் (பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும்).
- "Performance" பேனலுக்குச் செல்லவும்.
- பதிவு பொத்தானை (வட்ட ஐகான்) கிளிக் செய்து பக்கத்தை மீண்டும் ஏற்றவும்.
- பக்கம் ஏற்றப்பட்ட பிறகு பதிவை நிறுத்தவும்.
- செயல்திறன் தடைகளை அடையாளம் காண காலவரிசையைப் பகுப்பாய்வு செய்யவும். "Loading", "Scripting", "Rendering", மற்றும் "Painting" பிரிவுகளில் அதிக கவனம் செலுத்துங்கள்.
நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்
முக்கிய ரெண்டரிங் பாதையை மேம்படுத்துவது எவ்வாறு இணையதள செயல்திறனை மேம்படுத்தலாம் என்பதற்கான சில நிஜ உலக எடுத்துக்காட்டுகளைப் பார்ப்போம்:
- எடுத்துக்காட்டு 1: இ-காமர்ஸ் இணையதளம்: ஒரு இ-காமர்ஸ் இணையதளம் அதன் CRP-ஐ முக்கியமான CSS-ஐ இன்லைன் செய்தல், முக்கியமற்ற ஜாவாஸ்கிரிப்டை ஒத்திவைத்தல், மற்றும் அதன் படங்களை மேம்படுத்துதல் ஆகியவற்றின் மூலம் மேம்படுத்தியது. இது பக்க ஏற்ற நேரத்தில் 40% குறைப்பு மற்றும் மாற்று விகிதங்களில் 20% அதிகரிப்புக்கு வழிவகுத்தது.
- எடுத்துக்காட்டு 2: செய்தி இணையதளம்: ஒரு செய்தி இணையதளம் அதன் DOM-ன் அளவைக் குறைத்தல், அதன் CSS செலக்டர்களை மேம்படுத்துதல், மற்றும் உலாவி கேச்சிங்கை மேம்படுத்துதல் ஆகியவற்றின் மூலம் அதன் CRP-ஐ மேம்படுத்தியது. இது பவுன்ஸ் விகிதத்தில் 30% குறைப்பு மற்றும் விளம்பர வருவாயில் 15% அதிகரிப்புக்கு வழிவகுத்தது.
- எடுத்துக்காட்டு 3: உலகளாவிய பயண தளம்: உலகெங்கிலும் உள்ள பயனர்களுக்கு சேவை செய்யும் ஒரு உலகளாவிய பயண தளம் ஒரு CDN-ஐச் செயல்படுத்துவதன் மூலமும், வெவ்வேறு சாதன வகைகள் மற்றும் நெட்வொர்க் நிலைமைகளுக்கு படங்களை மேம்படுத்துவதன் மூலமும் குறிப்பிடத்தக்க முன்னேற்றங்களைக் கண்டது. அவர்கள் அடிக்கடி அணுகப்படும் தரவை கேச் செய்ய சேவைப் பணியாளர்களைப் பயன்படுத்தினர், இது ஆஃப்லைன் அணுகல் மற்றும் வேகமான அடுத்தடுத்த ஏற்றங்களை அனுமதித்தது. இது வெவ்வேறு பிராந்தியங்கள் மற்றும் இணைய வேகங்களில் ஒரு சீரான பயனர் அனுபவத்திற்கு வழிவகுத்தது.
உலகளாவிய பரிசீலனைகள்
CRP-ஐ மேம்படுத்தும்போது, உலகளாவிய சூழலைக் கருத்தில் கொள்வது முக்கியம். உலகின் பல்வேறு பகுதிகளில் உள்ள பயனர்கள் வெவ்வேறு இணைய வேகங்கள், சாதனத் திறன்கள் மற்றும் நெட்வொர்க் நிலைமைகளைக் கொண்டிருக்கலாம். இங்கே சில உலகளாவிய பரிசீலனைகள்:
- நெட்வொர்க் தாமதம்: நெட்வொர்க் தாமதம் பக்க ஏற்ற நேரத்தை கணிசமாக பாதிக்கலாம், குறிப்பாக தொலைதூரப் பகுதிகளில் அல்லது மெதுவான இணைய இணைப்புகளைக் கொண்ட பயனர்களுக்கு. உங்கள் உள்ளடக்கத்தை உங்கள் பயனர்களுக்கு நெருக்கமாக விநியோகிக்கவும் தாமதத்தைக் குறைக்கவும் ஒரு CDN-ஐப் பயன்படுத்தவும்.
- சாதனத் திறன்கள்: மொபைல் சாதனங்கள், டேப்லெட்டுகள், மற்றும் டெஸ்க்டாப்கள் போன்ற வெவ்வேறு சாதனத் திறன்களுக்கு உங்கள் வலைத்தளத்தை மேம்படுத்துங்கள். வெவ்வேறு திரை அளவுகள் மற்றும் தெளிவுத்திறன்களுக்கு உங்கள் வலைத்தளத்தை மாற்றியமைக்க பதிலளிக்கக்கூடிய வடிவமைப்பு நுட்பங்களைப் பயன்படுத்தவும்.
- நெட்வொர்க் நிலைமைகள்: பயனர்கள் அனுபவிக்கக்கூடிய வெவ்வேறு நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுங்கள், அதாவது 2G, 3G, மற்றும் 4G. மெதுவான நெட்வொர்க் இணைப்புகளுக்கு உங்கள் வலைத்தளத்தை மேம்படுத்த அடாப்டிவ் பட ஏற்றுதல் மற்றும் தரவு சுருக்கம் போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
- சர்வதேசமயமாக்கல் (i18n): பன்மொழி வலைத்தளங்களைக் கையாளும்போது, உங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட் வெவ்வேறு எழுத்துத் தொகுப்புகள் மற்றும் உரை திசைகளைக் கையாள சரியாக சர்வதேசமயமாக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
- அணுகல்தன்மை (a11y): உங்கள் வலைத்தளத்தை அணுகல்தன்மைக்கு மேம்படுத்துவதன் மூலம் அது ஊனமுற்றவர்களால் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும். இது படங்களுக்கு மாற்று உரையை வழங்குதல், சொற்பொருள் HTML-ஐப் பயன்படுத்துதல், மற்றும் உங்கள் வலைத்தளம் விசைப்பலகை அணுகக்கூடியதாக இருப்பதை உறுதி செய்வதை உள்ளடக்கியது.
முடிவுரை
வேகமான மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்தை வழங்குவதற்கு முக்கிய ரெண்டரிங் பாதையை மேம்படுத்துவது அவசியமானது. முக்கிய வளங்களைக் குறைத்தல், CSS விநியோகத்தை மேம்படுத்துதல், ஜாவாஸ்கிரிப்ட் செயல்பாட்டை மேம்படுத்துதல், DOM-ஐ மேம்படுத்துதல், லேஅவுட் த்ராஷிங்கைக் குறைத்தல், மற்றும் உலாவி கேச்சிங்கை மேம்படுத்துதல் ஆகியவற்றின் மூலம், உங்கள் வலைத்தளத்தின் செயல்திறனை கணிசமாக மேம்படுத்தலாம். உங்கள் CRP-ஐப் பகுப்பாய்வு செய்யவும் மேம்படுத்தலுக்கான பகுதிகளை அடையாளம் காணவும் கிடைக்கும் கருவிகளைப் பயன்படுத்த நினைவில் கொள்ளுங்கள். இந்த நடவடிக்கைகளை எடுப்பதன் மூலம், உங்கள் வலைத்தளம் விரைவாக ஏற்றப்படுவதையும், உலகெங்கிலும் உள்ள பயனர்களுக்கு ஒரு நேர்மறையான அனுபவத்தை வழங்குவதையும் உறுதிப்படுத்தலாம். இணையம் பெருகிய முறையில் உலகளாவியதாகி வருகிறது; வேகமான மற்றும் அணுகக்கூடிய ஒரு வலைத்தளம் இனி ஒரு சிறந்த நடைமுறை மட்டுமல்ல, ஒரு பன்முக பார்வையாளர்களைச் சென்றடைவதற்கான அவசியமாகும்.