CSS அளவீட்டு விதி: செயல்திறன் அளவீட்டு செயலாக்கத்தில் ஆழமான டைவ்

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

CSS அளவீட்டு விதியைப் புரிந்துகொள்வது

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

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

ஏன் CSS செயல்திறனை அளவிட வேண்டும்?

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

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

CSSக்கான முக்கிய செயல்திறன் அளவீடுகள்

CSS அளவீட்டு விதியை செயல்படுத்துவதற்கு முன், எந்த அளவீடுகளைக் கண்காணிக்க வேண்டும் என்பதைப் புரிந்துகொள்வது அவசியம். CSS செயல்திறனுக்கு ஏற்ற சில முக்கிய செயல்திறன் குறிகாட்டிகள் (KPIகள்) இங்கே:

• முதல் உள்ளடக்க பெயிண்ட் (FCP): முதல் உள்ளடக்கத்தின் (உரை, படம் போன்றவை) திரை தோன்றுவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது. வேகமாக FCP ஆனது, பக்கம் ஏற்றப்படுவதற்கான ஆரம்ப காட்சி அறிகுறியை பயனர்களுக்கு வழங்குகிறது.
• மிகப்பெரிய உள்ளடக்க பெயிண்ட் (LCP): மிகப்பெரிய உள்ளடக்க உறுப்பு (படம், வீடியோ, உரை தொகுதி) தெரியும் வரை எடுக்கும் நேரத்தை அளவிடுகிறது. LCP ஆனது, பக்கத்தின் முக்கிய உள்ளடக்கத்தை பயனர் எப்போது பார்க்க முடியும் என்பதை பிரதிபலிப்பதால், உணரப்பட்ட ஏற்றுதல் வேகத்திற்கான ஒரு முக்கியமான அளவீடு ஆகும்.
• ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS): ஏற்றுதல் செயல்பாட்டின் போது ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது. குறைந்த CLS நிலையான மற்றும் கணிக்கக்கூடிய பயனர் அனுபவத்தைக் குறிக்கிறது. ஆரம்ப ரெண்டருக்குப் பிறகு கூறுகள் மறுசீரமைத்தால் அல்லது மீண்டும் நிலைநிறுத்தினால் CSS ஆனது CLS க்கு குறிப்பிடத்தக்க பங்களிப்பை அளிக்க முடியும்.
• ஊடாடும் நேரம் (TTI): பயனர் தாமதங்களை அனுபவிக்காமல் அனைத்து கூறுகளுடனும் தொடர்பு கொள்ளக்கூடிய முழுமையாக ஊடாடும் பக்கமாக மாறுவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது. ஜாவாஸ்கிரிப்ட் TTI இல் பெரிதும் செல்வாக்கு செலுத்தும் அதே வேளையில், CSS ரெண்டரிங்கைத் தடுப்பதன் மூலம் அல்லது நீண்ட பெயிண்ட் நேரத்தை ஏற்படுத்துவதன் மூலம் அதை பாதிக்கலாம்.
• மொத்த தடுப்பு நேரம் (TBT): நீண்ட காலமாக இயங்கும் பணிகளால் பிரதான திரெட் தடுக்கப்பட்ட மொத்த நேரத்தை அளவிடுகிறது. இந்த அளவீடு TTI உடன் நெருக்கமாக தொடர்புடையது மற்றும் பக்கத்தின் பயனர் உள்ளீட்டிற்கு எவ்வாறு பதிலளிக்கிறது என்பதைக் குறிக்கிறது. CSS ரெண்டரிங் செய்யும் போது உலாவி சிக்கலான கணக்கீடுகளைச் செய்ய வைத்தால் TBT க்கு பங்களிக்க முடியும்.
• CSS பார்ஸ் மற்றும் செயலாக்க நேரம்: CSS கோப்புகளைப் பார்ஸ் செய்து செயலாக்குவதற்கு உலாவி எடுக்கும் நேரத்தை அளவிடுகிறது. இந்த அளவீட்டை உலாவி டெவலப்பர் கருவிகளிலிருந்து பெறலாம். பெரிய அல்லது சிக்கலான CSS கோப்புகளை பார்ஸ் செய்து செயலாக்க அதிக நேரம் எடுக்கும்.
• ரெண்டரிங் நேரம்: CSS ஐப் பார்ஸ் செய்து செயலாக்கிய பிறகு பக்கத்தை ரெண்டர் செய்ய உலாவி எடுக்கும் நேரத்தை அளவிடுகிறது. CSS விவரக்குறிப்பு, செலக்டர் சிக்கலானது மற்றும் பக்கத்தில் உள்ள கூறுகளின் எண்ணிக்கை போன்ற காரணிகளால் இந்த அளவீடு பாதிக்கப்படலாம்.
• CSS விதிகளின் எண்ணிக்கை: உங்கள் ஸ்டைல்ஷீட்களில் உள்ள மொத்த CSS விதிகள். நேரடி செயல்திறன் அளவீடாக இல்லாவிட்டாலும், அதிக எண்ணிக்கையிலான விதிகள் பார்ஸ் மற்றும் செயலாக்க நேரத்தை அதிகரிக்கும். பயன்படுத்தப்படாத CSS விதிகளை தவறாமல் மதிப்பாய்வு செய்து ஒழுங்குபடுத்துவது அவசியம்.
• CSS கோப்பு அளவு: கிலோபைட்டுகளில் (KB) உங்கள் CSS கோப்புகளின் அளவு. சிறிய கோப்புகள் வேகமாக பதிவிறக்கம் செய்யப்படும், இதன் மூலம் ஆரம்ப ஏற்றுதல் நேரம் மேம்படும். கோப்பு அளவைக் குறைக்க CSS கோப்புகளை மினிஃபைங் மற்றும் கம்ப்ரெஸ் செய்வது முக்கியம்.

CSS செயல்திறனை அளவிடுவதற்கான கருவிகள்

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

• உலாவி டெவலப்பர் கருவிகள் (Chrome DevTools, Firefox Developer Tools, Safari Web Inspector): இந்த உள்ளமைக்கப்பட்ட கருவிகள் நேரக் கோடுகள், செயல்திறன் சுயவிவரங்கள் மற்றும் நெட்வொர்க் செயல்பாடு உட்பட ஏராளமான செயல்திறன் தகவல்களை வழங்குகின்றன. தடைகளை அடையாளம் காண, ரெண்டரிங் செயல்திறனைப் பகுப்பாய்வு செய்ய மற்றும் CSS மாற்றங்களின் தாக்கத்தை அளவிட அவை உங்களை அனுமதிக்கின்றன. "செயல்திறன்" தாவல் அல்லது "டைம்லைன்" கருவியைத் தேடுங்கள். இந்த கருவிகள் ஆழமான செயல்திறன் பகுப்பாய்விற்கு விலைமதிப்பற்றவை.
• WebPageTest: பல்வேறு இடங்கள் மற்றும் உலாவிகளிலிருந்து உங்கள் வலைத்தளத்தின் செயல்திறனை சோதிக்க உங்களை அனுமதிக்கும் இலவச ஆன்லைன் கருவி. FCP, LCP, CLS மற்றும் பிற முக்கிய அளவீடுகள் உட்பட விரிவான செயல்திறன் அறிக்கைகளை இது வழங்குகிறது. பல்வேறு நெட்வொர்க் நிலைமைகளின் கீழ் உங்கள் வலைத்தளத்தின் முழுமையான காட்சியைப் பெறுவதற்கு WebPageTest சிறந்தது. மேம்பாட்டிற்கான பகுதிகளை அடையாளம் காணவும், உங்கள் வலைத்தளத்தின் வெவ்வேறு பதிப்புகளுக்கு இடையே செயல்திறனை ஒப்பிடவும் இது ஒரு மதிப்புமிக்க கருவியாகும்.
• லைட்ஹவுஸ் (Chrome Extension அல்லது Node.js CLI): உங்கள் வலைத்தளத்தின் செயல்திறன், அணுகல்தன்மை, SEO மற்றும் சிறந்த நடைமுறைகளை பகுப்பாய்வு செய்யும் ஒரு தானியங்கி தணிக்கை கருவி. CSS தொடர்பான மேம்படுத்தல்கள் உட்பட, உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்துவதற்கான பரிந்துரைகளை இது வழங்குகிறது. பொதுவான செயல்திறன் சிக்கல்களை அடையாளம் காணவும், நடவடிக்கை எடுக்கக்கூடிய ஆலோசனைகளைப் பெறவும் லைட்ஹவுஸ் ஒரு விரைவான மற்றும் எளிதான வழியாகும்.
• PageSpeed Insights: கூகிள் கருவி உங்கள் வலைத்தளத்தின் செயல்திறனை பகுப்பாய்வு செய்து, மேம்படுத்துவதற்கான பரிந்துரைகளை வழங்குகிறது. இது அதன் பகுப்பாய்வு இயந்திரமாக லைட்ஹவுஸைப் பயன்படுத்துகிறது. கூகிளின் கண்ணோட்டத்தில் உங்கள் வலைத்தளத்தின் செயல்திறனைப் புரிந்துகொள்வதற்கு PageSpeed Insights ஒரு நல்ல தொடக்க புள்ளியாகும்.
• CSS புள்ளிவிவரங்கள்: உங்கள் CSS குறியீட்டை பகுப்பாய்வு செய்து, அதன் அமைப்பு, சிக்கலானது மற்றும் சாத்தியமான செயல்திறன் சிக்கல்கள் பற்றிய நுண்ணறிவுகளை வழங்கும் கருவி. இது நகல் விதிகள், பயன்படுத்தப்படாத செலக்டர்கள் மற்றும் மேம்பாட்டிற்கான பிற பகுதிகளை அடையாளம் காண முடியும். பெரிய மற்றும் சிக்கலான CSS திட்டங்களுக்கு CSS புள்ளிவிவரங்கள் குறிப்பாக பயனுள்ளதாக இருக்கும்.
• Perfume.js: உலாவியில் பல்வேறு வலை செயல்திறன் அளவீடுகளை அளவிடுவதற்கான ஜாவாஸ்கிரிப்ட் நூலகம். இது FCP, LCP மற்றும் FID (முதல் உள்ளீட்டு தாமதம்) போன்ற அளவீடுகளைக் கண்காணிக்கவும், அவற்றை உங்கள் பகுப்பாய்வு தளத்திற்குப் புகாரளிக்கவும் உங்களை அனுமதிக்கிறது. Perfume.js ஆனது, உண்மையான பயனர் செயல்திறன் தரவைச் சேகரிப்பதற்கும் காலப்போக்கில் செயல்திறன் போக்குகளைக் கண்காணிப்பதற்கும் பயனுள்ளதாக இருக்கும்.
• தனிப்பயன் செயல்திறன் கண்காணிப்பு: ஜாவாஸ்கிரிப்டில் உள்ள செயல்திறன் API ஐப் பயன்படுத்தி தனிப்பயன் செயல்திறன் கண்காணிப்பை செயல்படுத்துவது, உங்கள் வலைத்தளத்தின் தனித்துவமான அம்சங்கள் மற்றும் செயல்பாடுகளுக்கு ஏற்ற குறிப்பிட்ட அளவீடுகளைக் கண்காணிக்க உங்களை அனுமதிக்கிறது. இந்த அணுகுமுறை நீங்கள் சேகரிக்கும் தரவின் மீது அதிக நெகிழ்வுத்தன்மை மற்றும் கட்டுப்பாட்டை வழங்குகிறது.

CSS அளவீட்டு விதியை செயல்படுத்துதல்: ஒரு படி-படி வழிகாட்டி

உங்கள் மேம்பாட்டு பணிப்பாய்வில் CSS அளவீட்டு விதியை செயல்படுத்துவதற்கான நடைமுறை வழிகாட்டி இங்கே:

1. செயல்திறன் தடையை அடையாளம் காணவும்: ஒரு குறிப்பிட்ட CSS தொடர்பான செயல்திறன் சிக்கலை அடையாளம் காண மேலே குறிப்பிட்டுள்ள கருவிகளைப் பயன்படுத்தவும். உதாரணமாக, ஒரு குறிப்பிட்ட பக்கம் பெரிய பின்னணி படம் அல்லது சிக்கலான CSS அனிமேஷன்கள் காரணமாக மெதுவான LCP ஐக் கொண்டுள்ளது என்பதை நீங்கள் கவனிக்கலாம்.
2. ஒரு கருதுகோளை உருவாக்குங்கள்: உங்கள் பகுப்பாய்வின் அடிப்படையில், செயல்திறனை எவ்வாறு மேம்படுத்தலாம் என்பது பற்றி ஒரு கருதுகோளை உருவாக்குங்கள். உதாரணமாக, "பின்னணி படத்தை மேம்படுத்துவது (எ.கா., மிகவும் திறமையான வடிவமைப்பைப் பயன்படுத்துதல், அதை மேலும் சுருக்குதல்) LCP ஐக் குறைக்கும்." அல்லது, "CSS அனிமேஷன்களின் சிக்கலை குறைப்பது ரெண்டரிங் செயல்திறனை மேம்படுத்தும்."
3. அடிப்படைகளை நிறுவுதல்: எந்த மாற்றத்தையும் செய்வதற்கு முன், தொடர்புடைய செயல்திறன் அளவீடுகளை (எ.கா., LCP, ரெண்டரிங் நேரம்) மேலே குறிப்பிட்டுள்ள கருவிகளைப் பயன்படுத்தி அளவிடவும். இந்த அடிப்படை மதிப்புகளை கவனமாக பதிவு செய்யவும். பல சோதனைகளை (எ.கா., 3-5) இயக்கவும் மற்றும் முடிவுகளை சராசரியாக்கவும், மேலும் துல்லியமான அடிப்படையைப் பெற. நிலையான சோதனை நிலைமைகளைப் பயன்படுத்தவும் (எ.கா., அதே உலாவி, அதே நெட்வொர்க் இணைப்பு).
4. மாற்றத்தை செயல்படுத்துங்கள்: செயல்திறனை மேம்படுத்தும் என்று நீங்கள் நம்பும் CSS மாற்றத்தை செயல்படுத்துங்கள். உதாரணமாக, பின்னணி படத்தை மேம்படுத்துங்கள் அல்லது CSS அனிமேஷன்களை எளிதாக்குங்கள்.
5. மீண்டும் அளவிடுங்கள்: மாற்றத்தை செயல்படுத்திய பிறகு, அதே கருவிகள் மற்றும் சோதனை நிலைமைகளைப் பயன்படுத்தி அதே செயல்திறன் அளவீடுகளை அளவிடவும். மீண்டும், பல சோதனைகளை இயக்கி முடிவுகளை சராசரியாகக் கணக்கிடுங்கள்.
6. முடிவுகளை பகுப்பாய்வு செய்யுங்கள்: மாற்றத்திற்கு முன்னும் பின்னும் செயல்திறன் அளவீடுகளை ஒப்பிடுக. மாற்றம் எதிர்பார்த்தபடி செயல்திறனை மேம்படுத்தியதா? மேம்பாடு முக்கியமாக இருந்ததா? மாற்றத்தால் ஏதேனும் தேவையற்ற பக்க விளைவுகள் ஏற்பட்டதா (எ.கா., காட்சி பின்னடைவு)?
7. மீண்டும் அல்லது மாற்றவும்: மாற்றம் செயல்திறனை மேம்படுத்தினால், வாழ்த்துக்கள்! உங்கள் CSSஐ வெற்றிகரமாக மேம்படுத்தியுள்ளீர்கள். மாற்றம் செயல்திறனை மேம்படுத்தவில்லை என்றால் அல்லது அது தேவையற்ற பக்க விளைவுகளைக் கொண்டிருந்தால், மாற்றத்தை மாற்றி, வேறு அணுகுமுறையை முயற்சிக்கவும். மாற்றம் தோல்வியடைந்தாலும் உங்கள் கண்டுபிடிப்புகளை ஆவணப்படுத்தவும். இது எதிர்காலத்தில் அதே தவறைச் செய்வதைத் தவிர்க்க உதவும்.
8. உங்கள் கண்டுபிடிப்புகளை ஆவணப்படுத்துங்கள்: முடிவு எதுவாக இருந்தாலும், உங்கள் கண்டுபிடிப்புகளை ஆவணப்படுத்துங்கள். CSS செயல்திறன் மேம்படுத்தல் விஷயத்தில் என்ன வேலை செய்கிறது, எது வேலை செய்யாது என்பது பற்றிய அறிவு தளத்தை உருவாக்க இது உங்களுக்கு உதவும்.

CSS செயல்திறன் மேம்படுத்தல்கள் மற்றும் அளவீடுகளின் எடுத்துக்காட்டுகள்

சில பொதுவான CSS மேம்படுத்தல் நுட்பங்களையும், CSS அளவீட்டு விதியைப் பயன்படுத்தி அவற்றின் தாக்கத்தை எவ்வாறு அளவிடுவது என்பதையும் ஆராய்வோம்:

எடுத்துக்காட்டு 1: CSS செலக்டர்களை மேம்படுத்துதல்

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

கருதுகோள்: சிக்கலான CSS செலக்டரின் சிறப்பைக் குறைப்பது ரெண்டரிங் செயல்திறனை மேம்படுத்தும்.

காட்சி: உங்களிடம் பின்வரும் CSS செலக்டர் உள்ளது:

            #main-content div.article ul li:nth-child(odd) a {
  color: blue;
}

            

              
                Copy
              
            
          

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

மாற்றம்: `a` உறுப்புக்கு நேரடியாக ஒரு வகுப்பைச் சேர்ப்பதன் மூலம் செலக்டரை எளிதாக்கலாம்:

            .article-link {
  color: blue;
}

            

              
                Copy
              
            
          

மேலும் வகுப்பைச் சேர்க்க HTMLஐப் புதுப்பித்தல்:

            <a href="#" class="article-link">Link</a>

            

              
                Copy
              
            
          

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

எடுத்துக்காட்டு 2: CSS கோப்பு அளவைக் குறைத்தல்

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

கருதுகோள்: CSS கோப்புகளை மினிஃபைங் மற்றும் கம்ப்ரெஸ் செய்வது கோப்பு அளவைக் குறைத்து ஏற்றுதல் நேரத்தை மேம்படுத்தும்.

காட்சி: உங்களிடம் பெரிய CSS கோப்பு உள்ளது (எ.கா., `style.css`) இது மினிஃபை செய்யப்படவில்லை அல்லது கம்ப்ரெஸ் செய்யப்படவில்லை.

மாற்றம்: CSS மினிஃபையரைப் பயன்படுத்தவும் (எ.கா., CSSNano, UglifyCSS) தேவையற்ற வெள்ளை இடம், கருத்துகள் மற்றும் பிற எழுத்துகளை CSS கோப்பிலிருந்து அகற்றவும். பின்னர், ஒரு கம்ப்ரெஷன் அல்காரிதத்தைப் பயன்படுத்தவும் (எ.கா., Gzip, Brotli) உலாவியில் வழங்குவதற்கு முன் கோப்பை சுருக்கவும். பெரும்பாலான வலை சேவையகங்கள் மற்றும் CDNகள் தானாகவே கோப்புகளை சுருக்க முடியும்.

அளவீடு: மாற்றத்திற்கு முன்னும் பின்னும் CSS கோப்பு அளவு மற்றும் பதிவிறக்க நேரத்தை அளவிட WebPageTest அல்லது உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். நீங்கள் கோப்பு அளவிலும் பதிவிறக்க நேரத்திலும் குறிப்பிடத்தக்க குறைப்பைக் காண வேண்டும். CSS கோப்பு அளவைக் குறைப்பது பயனரின் ஆரம்ப அனுபவத்தில் சாதகமான தாக்கத்தை ஏற்படுத்துகிறதா என்பதைப் பார்க்க, முதல் உள்ளடக்க பெயிண்ட் (FCP) அளவீட்டையும் அளவிடவும்.

எடுத்துக்காட்டு 3: CSS படங்களை மேம்படுத்துதல் (பின்னணி படங்கள்)

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

கருதுகோள்: பின்னணி படங்களை மேம்படுத்துவது (எ.கா., மிகவும் திறமையான வடிவமைப்பைப் பயன்படுத்துதல், அவற்றை மேலும் சுருக்குதல், பதிலளிக்கக்கூடிய படங்களுக்கு `srcset` பயன்படுத்துதல்) மிகப்பெரிய உள்ளடக்க பெயிண்ட் (LCP) ஐக் குறைக்கும்.

காட்சி: நீங்கள் ஒரு பெரிய JPEG படத்தை பின்னணி படமாகப் பயன்படுத்துகிறீர்கள்.

மாற்றம்: படத்தை WebP போன்ற மிகவும் திறமையான வடிவமைப்பிற்கு மாற்றவும் (உலாவி ஆதரவு போதுமானதாக இருந்தால்), ஒரு பட மேம்படுத்தல் கருவியைப் பயன்படுத்தி படத்தை சுருக்கவும் (எ.கா., ImageOptim, TinyPNG), மற்றும் வெவ்வேறு திரைத் தீர்மானங்களுக்கு வெவ்வேறு பட அளவுகளை வழங்க `srcset` பண்புக்கூறைப் பயன்படுத்தவும். சிறிய, மீண்டும் மீண்டும் வரும் படங்களுக்கு CSS ஸ்ப்ரைட்ஸ் அல்லது ஐகான் எழுத்துருக்களைப் பயன்படுத்துவதையும் கவனியுங்கள்.

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

எடுத்துக்காட்டு 4: தளவமைப்பு மாற்றங்களைக் குறைத்தல்

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

கருதுகோள்: படங்களுக்கும் வீடியோக்களுக்கும் பரிமாணங்களை (அகலம் மற்றும் உயரம்) குறிப்பிடுவது ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS) ஐக் குறைக்கும்.

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

மாற்றம்: உங்கள் `img` குறிச்சொற்களுக்கு `width` மற்றும் `height` பண்புகளைச் சேர்க்கவும். மாற்றாக, `aspect-ratio` பண்புக்கூறு மூலம் பட கொள்கலனின் விகிதத்தை குறிப்பிட CSS ஐப் பயன்படுத்தவும். இது படம் ஏற்றப்படுவதற்கு முன், படத்திற்கு இடமளிக்கும், தளவமைப்பு மாற்றங்களைத் தடுக்கும்.

            <img src="image.jpg" width="640" height="480" alt="Example Image">
            

              
                Copy
              
            
          

            .image-container {
  aspect-ratio: 640 / 480;
}

            

              
                Copy
              
            
          

அளவீடு: மாற்றத்திற்கு முன்னும் பின்னும் CLS ஐ அளவிட WebPageTest அல்லது லைட்ஹவுஸைப் பயன்படுத்தவும். CLS இல் குறைவதைக் காண வேண்டும், இது மிகவும் நிலையான மற்றும் கணிக்கக்கூடிய தளவமைப்பைக் குறிக்கிறது.

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

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

• அதிக சிக்கலான செலக்டர்கள்: முன்னர் குறிப்பிட்டபடி, சிக்கலான செலக்டர்கள் ரெண்டரிங்கை மெதுவாக்கலாம். செலக்டர்களை முடிந்தவரை எளிதாகவும் திறமையாகவும் வைத்திருங்கள்.
• `!important` இன் அதிகப்படியான பயன்பாடு: `!important` ஐ அதிகமாகப் பயன்படுத்துவது உங்கள் CSS ஐ பராமரிப்பதை கடினமாக்கும் மற்றும் செயல்திறனை பாதிக்கலாம். இது பாணிகளை மீண்டும் கணக்கிட உலாவியை கட்டாயப்படுத்துகிறது, இது ரெண்டரிங்கை மெதுவாக்கும்.
• செலவுமிக்க CSS பண்புகளைப் பயன்படுத்துதல்: சில CSS பண்புகள் மற்றவர்களை விட கணக்கீட்டு ரீதியாக விலை உயர்ந்தவை. எடுத்துக்காட்டாக, `box-shadow`, `border-radius` மற்றும் `filter` ஆகியவை ஆதாரங்களை உள்ளிழுக்கும், குறிப்பாக அதிக எண்ணிக்கையிலான கூறுகளுக்குப் பயன்படுத்தப்படும்போது அல்லது அனிமேஷன் செய்யும்போது. இந்த பண்புகளைப் புத்திசாலித்தனமாகப் பயன்படுத்துங்கள் மற்றும் முடிந்தால் மாற்று அணுகுமுறைகளைப் பரிசீலிக்கவும்.
• ரெண்டர்-தடுக்கும் CSS ஐத் தடுப்பது: CSS கோப்புகள் திறமையாக வழங்கப்படுவதை உறுதி செய்யவும். CSS கோப்புகளை மினிஃபைங் செய்யவும், கம்ப்ரெஸ் செய்யவும் மற்றும் கேச் செய்யவும். ஆரம்ப ரெண்டர் நேரத்தை மேம்படுத்த முக்கியமான CSS ஐ உள்வைப்பது பற்றி சிந்தியுங்கள். CSS கோப்புகளை ஒத்திசைவற்ற முறையில் ஏற்ற `link` குறிச்சொற்களில் `media` பண்புக்கூறைப் பயன்படுத்தவும்.
• பயன்படுத்தப்படாத CSS ஐ புறக்கணித்தல்: காலப்போக்கில், CSS கோப்புகள் பயன்படுத்தப்படாத விதிகள் மற்றும் செலக்டர்களைக் குவிக்க முடியும். உங்கள் CSS ஐ தவறாமல் தணிக்கை செய்து, பயன்படுத்தப்படாத குறியீட்டை அகற்றவும். PurgeCSS மற்றும் UnCSS போன்ற கருவிகள் இந்த செயல்முறையை தானியக்கப்படுத்த உதவும்.
• CSS வெளிப்பாடுகளைப் பயன்படுத்துதல் (IE): CSS வெளிப்பாடுகள் காலாவதியாகிவிட்டன மற்றும் ஒருபோதும் பயன்படுத்தக்கூடாது. அவை அடிக்கடி மதிப்பிடப்படுகின்றன மற்றும் செயல்திறனை கணிசமாக பாதிக்கலாம்.
• படங்களை மேம்படுத்த மறந்துவிடுதல்: முன்னர் குறிப்பிட்டபடி, படங்களை மேம்படுத்துவது ஒட்டுமொத்த வலை செயல்திறனுக்கு முக்கியமானது. எப்போதும் படங்களை சுருக்கவும், பொருத்தமான வடிவமைப்புகளைப் பயன்படுத்தவும் மற்றும் பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்தவும்.
• ரெண்டரிங் பைப்லைனைப் பற்றி சிந்திக்காதது: உலாவி ரெண்டரிங் பைப்லைனைப் புரிந்துகொள்வது (HTMLஐப் பிரித்தல் -> DOMஐ உருவாக்குதல் -> CSSஐப் பிரித்தல் -> ரெண்டர் மரத்தை உருவாக்குதல் -> தளவமைப்பு -> பெயிண்ட்) CSS செயல்திறன் மேம்படுத்தல் பற்றி தகவலறிந்த முடிவுகளை எடுக்க உங்களுக்கு உதவும். உதாரணமாக, லேஅவுட் த்ராஷிங் (உலாவியை மீண்டும் மீண்டும் தளவமைப்பை மீண்டும் கணக்கிட கட்டாயப்படுத்துதல்) செயல்திறனை கணிசமாக பாதிக்கலாம் என்பது தெரிந்தால், தளவமைப்பு த்ராஷிங்கை ஏற்படுத்தும் முறைகளைத் தவிர்க்க உதவும்.

CSS செயல்திறன் சிறந்த நடைமுறைகள்: ஒரு சுருக்கம்

CSS செயல்திறன் சிறந்த நடைமுறைகளின் சுருக்கம் இங்கே:

• CSS செலக்டர்களை எளிமையாக வைத்திருங்கள்: அதிக சிக்கலான மற்றும் குறிப்பிட்ட செலக்டர்களைத் தவிர்க்கவும்.
• `!important` இன் பயன்பாட்டை குறைக்கவும்: `!important` ஐ குறைவாகவும், தேவைப்படும்போது மட்டுமே பயன்படுத்தவும்.
• CSS படங்களை மேம்படுத்துங்கள்: படங்களை சுருக்கவும், பொருத்தமான வடிவமைப்புகளைப் பயன்படுத்தவும் மற்றும் பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்தவும்.
• CSS கோப்புகளை மினிஃபைங் மற்றும் கம்ப்ரெஸ் செய்யுங்கள்: ஏற்றுதல் நேரத்தை மேம்படுத்த CSS கோப்பு அளவைக் குறைக்கவும்.
• பயன்படுத்தப்படாத CSSஐ அகற்றவும்: தவறாமல் தணிக்கை செய்து, பயன்படுத்தப்படாத CSS விதிகளை அகற்றவும்.
• CSS ஸ்ப்ரைட்ஸ் அல்லது ஐகான் எழுத்துருக்களைப் பயன்படுத்தவும்: சிறிய, மீண்டும் மீண்டும் வரும் படங்களுக்கு.
• செலவுமிக்க CSS பண்புகளைத் தவிர்க்கவும்: கணக்கீட்டு ரீதியாக விலை உயர்ந்த பண்புகளைப் புத்திசாலித்தனமாகப் பயன்படுத்துங்கள்.
• முக்கியமான CSSஐ உள்வைக்கவும்: ஆரம்ப ரெண்டர் நேரத்தை மேம்படுத்த.
• `media` பண்புக்கூறைப் பயன்படுத்தவும்: CSS கோப்புகளை ஒத்திசைவற்ற முறையில் ஏற்ற.
• படங்கள் மற்றும் வீடியோக்களுக்கான பரிமாணங்களைக் குறிப்பிடவும்: தளவமைப்பு மாற்றங்களைத் தடுக்க.
• CSS மாறிகளைப் பயன்படுத்தவும் (தனிப்பயன் பண்புகள்): பராமரிப்பு மற்றும் சாத்தியமான செயல்திறன் நன்மைகளுக்காக (குறியீடு நகலை குறைத்தல்).
• உலாவி கேச்சிங்கைப் பயன்படுத்தவும்: CSS கோப்புகளை சரியாக கேச் செய்ய உங்கள் வலை சேவையகத்தை கட்டமைக்கவும்.
• CSS ப்ரீப்ராசசரைப் பயன்படுத்தவும் (Sass, Less, Stylus): மேம்பட்ட அமைப்பு, பராமரிப்பு மற்றும் சாத்தியமான செயல்திறன் மேம்படுத்தல்களுக்கு (எ.கா., குறியீடு மறுபயன்பாடு).
• CSS கட்டமைப்பை புத்திசாலித்தனமாகப் பயன்படுத்துங்கள்: CSS கட்டமைப்புகள் மேம்பாட்டை விரைவுபடுத்தினாலும், அவை செயல்திறன் ஓவர்ஹெட்டை அறிமுகப்படுத்தலாம். இலகுரக மற்றும் நன்கு உகந்த கட்டமைப்பைத் தேர்ந்தெடுக்கவும்.
• வழக்கமான சுயவிவரம் மற்றும் சோதனை: தொடர்ந்து உங்கள் வலைத்தளத்தின் செயல்திறனைக் கண்காணித்து, மேம்பாட்டுக்கான பகுதிகளை அடையாளம் காணவும்.

CSS செயல்திறனுக்கான உலகளாவிய பரிசீலனைகள்

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

• நெட்வொர்க் லேட்டன்சி: உலகின் வெவ்வேறு பகுதிகளில் உள்ள பயனர்கள் வெவ்வேறு நெட்வொர்க் லேட்டன்சியை அனுபவிக்கலாம். லேட்டன்சியின் தாக்கத்தை குறைக்க உங்கள் CSS விநியோகத்தை மேம்படுத்தவும். பயனர்களுக்கு நெருக்கமாக CSS கோப்புகளை கேச் செய்ய ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கைப் (CDN) பயன்படுத்தவும்.
• சாதன திறன்: பயனர்கள் பல்வேறு செயலாக்க சக்தி மற்றும் திரை அளவுகளைக் கொண்ட பல்வேறு சாதனங்களிலிருந்து உங்கள் வலைத்தளத்தை அணுகலாம். பதிலளிக்கக்கூடிய வடிவமைப்பு நுட்பங்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்தி வெவ்வேறு சாதனங்களுக்காக உங்கள் CSSஐ மேம்படுத்தவும். வெவ்வேறு சாதனங்களில் உங்கள் CSS ஒரு குறிப்பிட்ட அளவு அல்லது சிக்கலை மீறாது என்பதை உறுதிப்படுத்த செயல்திறன் வரவு செலவுத் திட்டங்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• உலாவி ஆதரவு: உங்கள் இலக்கு பார்வையாளர்கள் பயன்படுத்தும் உலாவிகளுடன் உங்கள் CSS இணக்கமாக இருப்பதை உறுதி செய்யவும். உலாவி முன்னொட்டுகளை புத்திசாலித்தனமாகப் பயன்படுத்தவும் மற்றும் முன்னொட்டுகளை தானாகச் சேர்க்க Autoprefixer போன்ற ஒரு கருவியைப் பயன்படுத்தவும். வெவ்வேறு உலாவிகளிலும், வெவ்வேறு சாதனங்களிலும் உங்கள் வலைத்தளத்தை சோதிக்கவும்.
• உள்ளூர்மயமாக்கல்: உங்கள் வலைத்தளம் பல மொழிகளில் உள்ளூர்மயமாக்கப்பட்டால், உங்கள் CSS சரியாக உள்ளூர்மயமாக்கப்படுவதை உறுதி செய்யவும். யூனிகோட் எழுத்துக்களைப் பயன்படுத்தவும், தேவைப்பட்டால் வெவ்வேறு மொழிகளுக்கு வெவ்வேறு ஸ்டைல்ஷீட்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• அணுகல்தன்மை: உங்கள் CSS ஆனது ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதி செய்யவும். செமண்டிக் HTML ஐப் பயன்படுத்தவும் அணுகல்தன்மை வழிகாட்டுதல்களைப் பின்பற்றவும். உதவி தொழில்நுட்பங்களுடன் உங்கள் வலைத்தளத்தை சோதிக்கவும்.

முடிவுரை

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

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