கோர் வெப் வைட்டல்ஸை மேம்படுத்துவதன் மூலம் உலகளவில் உங்கள் வலைத்தளத்தின் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துங்கள். ஏற்றும் வேகம், ஊடாடுதல் மற்றும் காட்சி நிலைத்தன்மையை அதிகரிக்க நடைமுறை உத்திகளைக் கற்றுக்கொள்ளுங்கள்.
முன்பக்க செயல்திறன்: உலகளாவிய பார்வையாளர்களுக்கான கோர் வெப் வைட்டல்ஸ் மேம்படுத்தல்
இன்றைய டிஜிட்டல் உலகில், வலைத்தளத்தின் செயல்திறன் மிகவும் முக்கியமானது. ஒரு மெதுவான அல்லது பதிலளிக்காத வலைத்தளம் பயனர்களை எரிச்சலூட்டி, அதிக பவுன்ஸ் விகிதங்களுக்கும், இறுதியில் வருவாய் இழப்புக்கும் வழிவகுக்கும். கோர் வெப் வைட்டல்ஸ் (CWV) என்பது பயனர் அனுபவத்தை அளவிடுவதற்காக கூகுளால் அறிமுகப்படுத்தப்பட்ட தரப்படுத்தப்பட்ட அளவீடுகளின் தொகுப்பாகும். இது ஏற்றுதல், ஊடாடுதல் மற்றும் காட்சி நிலைத்தன்மை ஆகியவற்றில் கவனம் செலுத்துகிறது. இந்த அளவீடுகளை மேம்படுத்துவது எஸ்சிஓ-க்கு மட்டுமல்ல, உங்கள் உலகளாவிய பார்வையாளர்களுக்கு ஒரு தடையற்ற மற்றும் மகிழ்ச்சியான அனுபவத்தை வழங்குவதற்கும் முக்கியமானது.
கோர் வெப் வைட்டல்ஸ் என்றால் என்ன?
கோர் வெப் வைட்டல்ஸ் என்பது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குவதற்கு அவசியமானவை என்று கூகுள் கருதும் வெப் வைட்டல்ஸின் ஒரு துணைக்குழுவாகும். இந்த அளவீடுகள் நிஜ உலக பயனர் தொடர்புகளை பிரதிபலிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளன. மூன்று கோர் வெப் வைட்டல்ஸ் ஆவன:
- மிகப்பெரிய உள்ளடக்க வரைவு (LCP): பார்வைக்களத்திற்குள் மிகப்பெரிய உள்ளடக்க உறுப்பு (எ.கா., படம், வீடியோ, உரைத் தொகுதி) தெரிவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது. ஒரு நல்ல LCP ஸ்கோர் 2.5 வினாடிகள் அல்லது அதற்கும் குறைவானது.
- முதல் உள்ளீட்டு தாமதம் (FID): ஒரு பயனர் ஒரு பக்கத்துடன் முதலில் தொடர்பு கொள்ளும் நேரத்திலிருந்து (எ.கா., ஒரு இணைப்பைக் கிளிக் செய்வது, ஒரு பொத்தானைத் தட்டுவது) அந்த தொடர்புக்கு உலாவி உண்மையில் பதிலளிக்கக்கூடிய நேரம் வரை அளவிடுகிறது. ஒரு நல்ல FID ஸ்கோர் 100 மில்லி விநாடிகள் அல்லது அதற்கும் குறைவானது.
- ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS): ஒரு பக்கத்தின் ஆயுட்காலத்தின் போது ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது. ஒரு நல்ல CLS ஸ்கோர் 0.1 அல்லது அதற்கும் குறைவானது.
பயனர்கள் உங்கள் வலைத்தளத்தின் செயல்திறனை எவ்வாறு உணர்கிறார்கள் என்பதைப் புரிந்துகொள்ள இந்த அளவீடுகள் மிக முக்கியமானவை. அவற்றை மேம்படுத்துவது நேரடியாக ஒரு சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கிறது மற்றும் உங்கள் தேடுபொறி தரவரிசைகளை சாதகமாக பாதிக்கலாம்.
உலகளாவிய பார்வையாளர்களுக்காக கோர் வெப் வைட்டல்ஸை ஏன் மேம்படுத்த வேண்டும்?
கோர் வெப் வைட்டல்ஸை மேம்படுத்துவது அனைத்து பயனர்களுக்கும் பயனளிக்கும் என்றாலும், உலகளாவிய பார்வையாளர்களை இலக்காகக் கொண்ட வலைத்தளங்களுக்கு இது மிகவும் முக்கியமானது. இதற்கான காரணங்கள்:
- மாறுபடும் நெட்வொர்க் நிலைகள்: உலகின் பல்வேறு பகுதிகளில் உள்ள பயனர்கள் மாறுபட்ட இணைய வேகம் மற்றும் நெட்வொர்க் நம்பகத்தன்மையைக் கொண்டுள்ளனர். CWV-ஐ மேம்படுத்துவது மெதுவான இணைப்புகளில் கூட ஒரு நியாயமான அனுபவத்தை உறுதி செய்கிறது. உதாரணமாக, உள்கட்டமைப்பு குறைவாக வளர்ந்த நாடுகளில் உள்ள பயனர்கள் ஒரு தளம் மேம்படுத்தப்படாவிட்டால் கணிசமாக மெதுவான ஏற்றுதல் நேரங்களை அனுபவிக்கலாம்.
- பல்வகைப்பட்ட சாதனங்கள்: உங்கள் வலைத்தளம் உயர்தர ஸ்மார்ட்போன்கள் முதல் பழைய, குறைந்த சக்திவாய்ந்த சாதனங்கள் வரை பலதரப்பட்ட சாதனங்களில் அணுகப்படும். CWV-ஐ மேம்படுத்துவது பயன்படுத்தப்படும் சாதனத்தைப் பொருட்படுத்தாமல் உங்கள் வலைத்தளம் சிறப்பாக செயல்படுவதை உறுதி செய்கிறது. சில பிராந்தியங்களில், பழைய சாதனங்கள் அதிகமாகப் பரவியுள்ளன, எனவே குறைந்த விலை வன்பொருளுக்கான மேம்படுத்தல் அவசியம்.
- மொழி மற்றும் உள்ளூர்மயமாக்கல்: வெவ்வேறு மொழிகள் மற்றும் எழுத்துருக்கள் வலைத்தளத்தின் செயல்திறனைப் பாதிக்கலாம். CWV-ஐ மேம்படுத்துவது இந்த வேறுபாடுகளைக் கணக்கில் எடுத்துக்கொள்கிறது, உங்கள் தளத்தின் வெவ்வேறு மொழி பதிப்புகளில் ஒரு சீரான அனுபவத்தை உறுதி செய்கிறது. உதாரணமாக, வலமிருந்து இடமாக எழுதும் மொழிகளுக்கு தளவமைப்பு மாற்றங்களைத் தவிர்க்க குறிப்பிட்ட CSS மேம்படுத்தல்கள் தேவைப்படலாம்.
- தேடுபொறி தரவரிசை: கூகுள் கோர் வெப் வைட்டல்ஸை ஒரு தரவரிசைக் காரணியாகப் பயன்படுத்துகிறது. இந்த அளவீடுகளை மேம்படுத்துவது தேடல் முடிவுகளில் உங்கள் வலைத்தளத்தின் தெரிவுநிலையை மேம்படுத்தி, உலகளாவிய பார்வையாளர்களிடமிருந்து அதிக போக்குவரத்தை ஈர்க்கும். விரைவாக ஏற்றப்படும் மற்றும் ஒரு மென்மையான அனுபவத்தை வழங்கும் ஒரு தளம் உயர் தரவரிசையைப் பெற அதிக வாய்ப்புள்ளது, இது உலகம் முழுவதிலுமிருந்து பயனர்களை ஈர்க்கிறது.
- உலகளாவிய அணுகல்தன்மை: நன்கு மேம்படுத்தப்பட்ட வலைத்தளம் மாற்றுத்திறனாளி பயனர்களுக்கு மிகவும் அணுகக்கூடியதாக உள்ளது. செயல்திறனை மேம்படுத்துவதன் மூலம், உங்கள் வலைத்தளத்தை அவர்களின் திறன்கள் அல்லது இருப்பிடத்தைப் பொருட்படுத்தாமல் அனைவருக்கும் பயன்படுத்த எளிதாக்கலாம்.
கோர் வெப் வைட்டல்ஸை மேம்படுத்துவதற்கான உத்திகள்
ஒவ்வொரு கோர் வெப் வைட்டல்ஸையும் உலகளாவிய பார்வையாளர்களுக்காக மேம்படுத்துவதற்கான நடைமுறை உத்திகள் இங்கே:
1. மிகப்பெரிய உள்ளடக்க வரைவை (LCP) மேம்படுத்துதல்
LCP ஏற்றுதல் செயல்திறனை அளவிடுகிறது. அதை மேம்படுத்த சில உத்திகள் இங்கே:
- படங்களை மேம்படுத்துதல்:
- படங்களை சுருக்குதல்: தரத்தை இழக்காமல் படக் கோப்பு அளவுகளைக் குறைக்க TinyPNG, ImageOptim, அல்லது ShortPixel போன்ற கருவிகளைப் பயன்படுத்தவும். சராசரி இணைப்பு வேகங்களின் அடிப்படையில் வெவ்வேறு பிராந்தியங்களுக்கு வெவ்வேறு சுருக்க நிலைகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
- பொருத்தமான பட வடிவங்களைப் பயன்படுத்துதல்: நவீன உலாவிகளுக்கு WebP மற்றும் ஆதரிக்கப்பட்டால் AVIF-ஐப் பயன்படுத்தவும், ஏனெனில் அவை JPEG அல்லது PNG-ஐ விட சிறந்த சுருக்கத்தை வழங்குகின்றன. பழைய உலாவிகளுக்கு மாற்று வழிகளை வழங்கவும்.
- பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்துதல்:
<picture>
உறுப்பு அல்லது<img>
குறிச்சொல்லின்srcset
பண்பைப் பயன்படுத்தி பயனரின் சாதனம் மற்றும் திரை அளவுக்கு ஏற்ப வெவ்வேறு பட அளவுகளை வழங்கவும். - படங்களை சோம்பேறித்தனமாக ஏற்றுதல்: திரை மறைவில் உள்ள படங்களை அவை பார்வைக்களத்திற்குள் நுழையவிருக்கும் வரை ஏற்றுவதை ஒத்திவைக்கவும்.
loading="lazy"
பண்பைப் பயன்படுத்தவும். - பட CDNs-ஐ மேம்படுத்துதல்: பயனரின் இருப்பிடத்திற்கு நெருக்கமான சேவையகங்களிலிருந்து படங்களை வழங்க ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்தவும். உலகளாவிய கவரேஜ் மற்றும் டைனமிக் பட மேம்படுத்தல் திறன்களைக் கொண்ட CDNs-ஐக் கருத்தில் கொள்ளுங்கள். எடுத்துக்காட்டுகளில் Cloudinary, Akamai, மற்றும் Fastly ஆகியவை அடங்கும்.
- உரை ஏற்றுதலை மேம்படுத்துதல்:
- கணினி எழுத்துருக்களைப் பயன்படுத்துதல்: கணினி எழுத்துருக்கள் பயனரின் சாதனத்தில் உடனடியாகக் கிடைக்கின்றன, இது எழுத்துரு கோப்புகளைப் பதிவிறக்குவதற்கான தேவையை நீக்குகிறது.
- வலை எழுத்துருக்களை மேம்படுத்துதல்: நீங்கள் வலை எழுத்துருக்களைப் பயன்படுத்த வேண்டும் என்றால், எழுத்துருக்கள் எவ்வாறு ஏற்றப்படுகின்றன என்பதைக் கட்டுப்படுத்த
font-display
பண்பைப் பயன்படுத்தவும். வலை எழுத்துரு ஏற்றப்படும்போது ஒரு மாற்று எழுத்துருவைக் காட்டfont-display: swap;
ஐப் பயன்படுத்தவும், இது ஒரு வெற்றுத் திரையைத் தடுக்கிறது. - முக்கிய எழுத்துருக்களை முன்கூட்டியே ஏற்றுதல்: முக்கியமான எழுத்துருக்களை முன்கூட்டியே ஏற்றுவதற்கு
<link rel="preload" as="font">
குறிச்சொல்லைப் பயன்படுத்தவும், அவை ஏற்றுதல் செயல்பாட்டின் ஆரம்பத்திலேயே பதிவிறக்கப்படுவதை உறுதிசெய்கிறது.
- வீடியோ ஏற்றுதலை மேம்படுத்துதல்:
- வீடியோ CDNs-ஐப் பயன்படுத்துதல்: படங்களைப் போலவே, பயனருக்கு நெருக்கமான சேவையகங்களிலிருந்து வீடியோக்களை வழங்க வீடியோ விநியோகத்திற்காக மேம்படுத்தப்பட்ட ஒரு CDN-ஐப் பயன்படுத்தவும்.
- வீடியோ கோப்புகளை சுருக்குதல்: வீடியோ கோப்பு அளவுகளைக் குறைக்க பொருத்தமான கோடெக்குகள் மற்றும் சுருக்க அமைப்புகளைப் பயன்படுத்தவும்.
- வீடியோக்களுக்கு சோம்பேறித்தனமான ஏற்றுதலைப் பயன்படுத்துதல்: திரை மறைவில் உள்ள வீடியோக்களை அவை பார்வைக்களத்திற்குள் நுழையவிருக்கும் வரை ஏற்றுவதை ஒத்திவைக்கவும்.
- சுவரொட்டி படங்களைப் பயன்படுத்துதல்: வீடியோ ஏற்றப்படும்போது ஒரு பதிலி படத்தை (சுவரொட்டி படம்) காட்டவும்.
- சேவையக மறுமொழி நேரத்தை மேம்படுத்துதல்:
- ஒரு நம்பகமான ஹோஸ்டிங் வழங்குநரைத் தேர்ந்தெடுங்கள்: உங்கள் இலக்கு பார்வையாளர்களுக்கு அருகிலுள்ள பிராந்தியங்களில் சேவையகங்களைக் கொண்ட ஒரு ஹோஸ்டிங் வழங்குநரைத் தேர்ந்தெடுக்கவும்.
- ஒரு CDN-ஐப் பயன்படுத்துதல்: ஒரு CDN நிலையான உள்ளடக்கத்தை தற்காலிகமாக சேமித்து பயனருக்கு நெருக்கமான சேவையகங்களிலிருந்து வழங்க முடியும், இது தாமதத்தைக் குறைக்கிறது.
- உங்கள் சேவையக உள்ளமைவை மேம்படுத்துதல்: உங்கள் சேவையகம் போக்குவரத்தைக் கையாளவும் உள்ளடக்கத்தை திறமையாக வழங்கவும் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
- தற்காலிக சேமிப்பைச் செயல்படுத்துதல்: சேவையகத்திற்கான கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க உலாவி தற்காலிக சேமிப்பு மற்றும் சேவையக பக்க தற்காலிக சேமிப்பைப் பயன்படுத்தவும்.
உதாரணம்: ஒரு உலகளாவிய இ-காமர்ஸ் தளம் வட அமெரிக்காவில் உள்ள பயனர்களுக்கும் தென்கிழக்கு ஆசியாவில் உள்ள பயனர்களுக்கும் வெவ்வேறு பட அளவுகள் மற்றும் சுருக்க நிலைகளைப் பயன்படுத்தலாம், அங்கு நெட்வொர்க் நிலைமைகள் குறைவாக நம்பகமானவையாக இருக்கலாம். அவர்கள் அனைத்து பயனர்களுக்கும் விரைவான ஏற்றுதல் நேரங்களை உறுதிசெய்ய இரு பிராந்தியங்களிலும் சேவையகங்களைக் கொண்ட ஒரு CDN-ஐயும் பயன்படுத்தலாம்.
2. முதல் உள்ளீட்டு தாமதத்தை (FID) மேம்படுத்துதல்
FID ஊடாடுதலை அளவிடுகிறது. அதை மேம்படுத்த சில உத்திகள் இங்கே:
- ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரத்தைக் குறைத்தல்:
- ஜாவாஸ்கிரிப்டைக் குறைத்தல்: உங்கள் ஜாவாஸ்கிரிப்ட் கோப்புகளிலிருந்து தேவையற்ற குறியீடு மற்றும் வெற்று இடங்களை அகற்றவும்.
- குறியீடு பிரித்தல்: உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை சிறிய துண்டுகளாக உடைத்து, தற்போதைய பக்கத்திற்குத் தேவையான குறியீட்டை மட்டும் ஏற்றவும்.
- பயன்படுத்தப்படாத ஜாவாஸ்கிரிப்டை அகற்றுதல்: பயன்படுத்தப்படாத எந்த ஜாவாஸ்கிரிப்ட் குறியீட்டையும் கண்டறிந்து அகற்றவும்.
- முக்கியமற்ற ஜாவாஸ்கிரிப்டை ஏற்றுவதை ஒத்திவைத்தல்: முக்கிய உள்ளடக்கம் ஏற்றப்பட்ட பிறகு முக்கியமற்ற ஜாவாஸ்கிரிப்ட் கோப்புகளை ஏற்றுவதை ஒத்திவைக்க
async
அல்லதுdefer
பண்புகளைப் பயன்படுத்தவும். - மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மேம்படுத்துதல்: உங்கள் வலைத்தளத்தை மெதுவாக்கும் எந்த மூன்றாம் தரப்பு ஸ்கிரிப்ட்களையும் கண்டறிந்து மேம்படுத்தவும். தேவையற்ற ஸ்கிரிப்ட்களை சோம்பேறித்தனமாக ஏற்றுவதையோ அல்லது அகற்றுவதையோ கருத்தில் கொள்ளுங்கள்.
- நீண்ட பணிகளைத் தவிர்த்தல்:
- நீண்ட பணிகளை உடைத்தல்: நீண்ட ஜாவாஸ்கிரிப்ட் பணிகளை சிறிய, மேலும் நிர்வகிக்கக்கூடிய துண்டுகளாக உடைக்கவும்.
requestAnimationFrame
-ஐப் பயன்படுத்துதல்: அனிமேஷன்கள் மற்றும் பிற காட்சி புதுப்பிப்புகளைத் திட்டமிடrequestAnimationFrame
API-ஐப் பயன்படுத்தவும்.- வலைத் தொழிலாளர்களைப் பயன்படுத்துதல்: கணக்கீட்டு ரீதியாக தீவிரமான பணிகளை வலைத் தொழிலாளர்களுக்கு நகர்த்தவும், அவை ஒரு தனி திரியில் இயங்குகின்றன மற்றும் பிரதான திரியைத் தடுக்காது.
- மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மேம்படுத்துதல்:
- மெதுவான ஸ்கிரிப்ட்களைக் கண்டறிதல்: உங்கள் வலைத்தளத்தை மெதுவாக்கும் மூன்றாம் தரப்பு ஸ்கிரிப்ட்களைக் கண்டறிய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
- ஸ்கிரிப்ட்களை சோம்பேறித்தனமாக ஏற்றுதல்: ஆரம்ப பக்க ஏற்றுதலுக்கு முக்கியமற்ற மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை சோம்பேறித்தனமாக ஏற்றவும்.
- ஸ்கிரிப்ட்களை உள்ளூரில் ஹோஸ்ட் செய்தல்: தாமதத்தைக் குறைக்கவும் தற்காலிக சேமிப்பின் மீது கட்டுப்பாட்டை மேம்படுத்தவும் முடிந்த போதெல்லாம் மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை உள்ளூரில் ஹோஸ்ட் செய்யவும்.
- மூன்றாம் தரப்பு ஸ்கிரிப்ட்களுக்கு ஒரு CDN-ஐப் பயன்படுத்துதல்: நீங்கள் ஸ்கிரிப்ட்களை உள்ளூரில் ஹோஸ்ட் செய்ய முடியாவிட்டால், அவற்றை பயனருக்கு நெருக்கமான சேவையகங்களிலிருந்து வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும்.
உதாரணம்: ஒரு உலகளாவிய செய்தித் தளம் தற்போதைய கட்டுரைக்குத் தேவையான ஜாவாஸ்கிரிப்ட் குறியீட்டை மட்டும் ஏற்ற குறியீடு பிரிப்பைப் பயன்படுத்தலாம், இது ஊடாடுதலை மேம்படுத்துகிறது மற்றும் FID-ஐக் குறைக்கிறது. அவர்கள் பயனர் கருத்துகளைச் செயலாக்குவது போன்ற கணக்கீட்டு ரீதியாக தீவிரமான பணிகளைக் கையாள வலைத் தொழிலாளர்களையும் பின்னணியில் பயன்படுத்தலாம்.
3. ஒட்டுமொத்த தளவமைப்பு மாற்றத்தை (CLS) மேம்படுத்துதல்
CLS காட்சி நிலைத்தன்மையை அளவிடுகிறது. அதை மேம்படுத்த சில உத்திகள் இங்கே:
- படங்கள் மற்றும் வீடியோக்களுக்கு இடத்தை ஒதுக்குதல்:
- அகலம் மற்றும் உயரம் பண்புகளைக் குறிப்பிடுதல்: படங்கள் மற்றும் வீடியோக்கள் ஏற்றப்படுவதற்கு முன்பு அவற்றுக்கு இடத்தை ஒதுக்க எப்போதும்
width
மற்றும்height
பண்புகளைக் குறிப்பிடவும். - தோற்ற விகித பெட்டிகளைப் பயன்படுத்துதல்: படங்கள் மற்றும் வீடியோக்களுக்கு இடத்தை ஒதுக்க CSS தோற்ற விகித பெட்டிகளைப் பயன்படுத்தவும், அவை ஏற்றப்படும்போது தளவமைப்பு மாற்றங்களை ஏற்படுத்தாது என்பதை உறுதிசெய்கிறது.
- அகலம் மற்றும் உயரம் பண்புகளைக் குறிப்பிடுதல்: படங்கள் மற்றும் வீடியோக்கள் ஏற்றப்படுவதற்கு முன்பு அவற்றுக்கு இடத்தை ஒதுக்க எப்போதும்
- விளம்பரங்களுக்கு இடத்தை ஒதுக்குதல்:
- போதுமான இடத்தை ஒதுக்குதல்: விளம்பரங்கள் ஏற்றப்படும்போது தளவமைப்பு மாற்றங்களை ஏற்படுத்தாமல் தடுக்க போதுமான இடத்தை ஒதுக்கவும்.
- இடப்பிடிப்பான்களைப் பயன்படுத்துதல்: விளம்பரங்கள் ஏற்றப்படுவதற்கு முன்பு அவற்றுக்கு இடத்தை ஒதுக்க இடப்பிடிப்பான்களைப் பயன்படுத்தவும்.
- இருக்கும் உள்ளடக்கத்திற்கு மேலே புதிய உள்ளடக்கத்தைச் செருகுவதைத் தவிர்த்தல்:
- டைனமிக் உள்ளடக்கச் செருகலைத் தவிர்த்தல்: இருக்கும் உள்ளடக்கத்திற்கு மேலே புதிய உள்ளடக்கத்தைச் செருகுவதைத் தவிர்க்கவும், குறிப்பாக பயனர் தொடர்பு இல்லாமல்.
- அனிமேஷன்கள் மற்றும் மாற்றங்களைப் பயன்படுத்துதல்: புதிய உள்ளடக்கத்தை மென்மையாக அறிமுகப்படுத்த CSS அனிமேஷன்கள் மற்றும் மாற்றங்களைப் பயன்படுத்தவும்.
- அனிமேஷன்களுக்கு CSS
transform
பண்பைப் பயன்படுத்துதல்:top
,left
,width
, அல்லதுheight
என்பதற்குப் பதிலாகtransform
-ஐப் பயன்படுத்துதல்: தளவமைப்பு மறுஓட்டங்களைத் தூண்டும் பண்புகளுக்குப் பதிலாக அனிமேஷன்களுக்கு CSStransform
பண்பைப் பயன்படுத்தவும்.
உதாரணம்: ஒரு உலகளாவிய பயண முன்பதிவு தளம் ஹோட்டல்கள் மற்றும் இடங்களின் படங்களுக்கு இடத்தை ஒதுக்க CSS தோற்ற விகித பெட்டிகளைப் பயன்படுத்தலாம், படங்கள் ஏற்றப்படும்போது தளவமைப்பு மாற்றங்களைத் தடுக்கிறது. அவர்கள் பயனர் தொடர்பு இல்லாமல் இருக்கும் உள்ளடக்கத்திற்கு மேலே புதிய உள்ளடக்கத்தைச் செருகுவதையும் தவிர்க்கலாம், இது ஒரு நிலையான மற்றும் கணிக்கக்கூடிய பயனர் அனுபவத்தை உறுதி செய்கிறது.
கோர் வெப் வைட்டல்ஸை அளவிடுவதற்கும் கண்காணிப்பதற்கும் கருவிகள்
பல கருவிகள் உங்கள் வலைத்தளத்தின் கோர் வெப் வைட்டல்ஸை அளவிடவும் கண்காணிக்கவும் உதவும்:
- Google PageSpeed Insights: உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த விரிவான அறிக்கைகளை வழங்குகிறது மற்றும் மேம்பாட்டிற்கான பரிந்துரைகளை வழங்குகிறது.
- Google Search Console: Google தேடலில் உங்கள் வலைத்தளத்தின் கோர் வெப் வைட்டல்ஸ் செயல்திறன் குறித்த தரவை வழங்குகிறது.
- WebPageTest: வெவ்வேறு இடங்களிலிருந்தும் வெவ்வேறு நெட்வொர்க் நிலைமைகளுடனும் உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிப்பதற்கான ஒரு சக்திவாய்ந்த கருவி.
- Lighthouse: வலைப்பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவி. இது செயல்திறன், அணுகல்தன்மை, முற்போக்கான வலை பயன்பாடுகள், எஸ்சிஓ மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது.
- Chrome DevTools: உங்கள் வலைத்தளத்தின் செயல்திறனை பிழைதிருத்தம் செய்வதற்கும் விவரக்குறிப்பு செய்வதற்கும் பல கருவிகளை வழங்குகிறது.
- உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகள்: New Relic, Dynatrace, மற்றும் Datadog போன்ற கருவிகள் உண்மையான பயனர்களிடமிருந்து உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த நிகழ்நேரத் தரவை வழங்குகின்றன. உங்கள் மேம்படுத்தல் முயற்சிகளின் நிஜ உலகத் தாக்கத்தைப் புரிந்துகொள்வதற்கு இவை முக்கியமானவை.
உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த முழுமையான படத்தைப் பெற ஆய்வக அடிப்படையிலான கருவிகள் (எ.கா., PageSpeed Insights, WebPageTest) மற்றும் உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகளின் கலவையைப் பயன்படுத்துவது அவசியம். ஆய்வக அடிப்படையிலான கருவிகள் நிலையான மற்றும் மீண்டும் உருவாக்கக்கூடிய முடிவுகளை வழங்குகின்றன, அதே நேரத்தில் RUM கருவிகள் உண்மையான பயனர் அனுபவத்தைக் கைப்பற்றுகின்றன.
உள்ளூர்மயமாக்கல் மற்றும் சர்வதேசமயமாக்கல் (i18n) கவலைகளை நிவர்த்தி செய்தல்
ஒரு உலகளாவிய பார்வையாளர்களுக்காக மேம்படுத்தும்போது, உள்ளூர்மயமாக்கல் மற்றும் சர்வதேசமயமாக்கல் கோர் வெப் வைட்டல்ஸை எவ்வாறு பாதிக்கிறது என்பதைக் கருத்தில் கொள்ளுங்கள்:
- உள்ளடக்க உள்ளூர்மயமாக்கல்: மொழிபெயர்க்கப்பட்ட உள்ளடக்கம் செயல்திறனுக்காக மேம்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். சில மொழிகளில் நீண்ட உரை தளவமைப்பு மற்றும் CLS-ஐ பாதிக்கலாம்.
- எழுத்துக்குறி குறியாக்கம்: பரந்த அளவிலான எழுத்துக்களை ஆதரிக்க UTF-8 குறியாக்கத்தைப் பயன்படுத்தவும்.
- வலமிருந்து இடமாக (RTL) எழுதும் மொழிகள்: தளவமைப்பு மாற்றங்களைத் தவிர்க்கவும் சரியான காட்சியை உறுதி செய்யவும் RTL மொழிகளுக்கான CSS-ஐ மேம்படுத்தவும்.
- தேதி மற்றும் எண் வடிவமைப்பு: வெவ்வேறு தேதி மற்றும் எண் வடிவங்கள் தளவமைப்பு மற்றும் பயனர் அனுபவத்தை எவ்வாறு பாதிக்கலாம் என்பதைக் கருத்தில் கொள்ளுங்கள்.
- CDN தேர்வு: பயனரின் இருப்பிடம் மற்றும் மொழி விருப்பங்களின் அடிப்படையில் டைனமிக் உள்ளடக்க விநியோகத்தை ஆதரிக்கும் உலகளாவிய கவரேஜ் கொண்ட ஒரு CDN-ஐத் தேர்ந்தெடுக்கவும்.
தொடர்ச்சியான கண்காணிப்பு மற்றும் மேம்பாடு
கோர் வெப் வைட்டல்ஸை மேம்படுத்துவது ஒரு முறை செய்யும் பணி அல்ல. இது தொடர்ச்சியான கண்காணிப்பு மற்றும் மேம்பாடு தேவைப்படும் ஒரு தொடர்ச்சியான செயல்முறையாகும். மேலே குறிப்பிடப்பட்ட கருவிகளைப் பயன்படுத்தி உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும், தேவைக்கேற்ப மாற்றங்களைச் செய்யவும். உங்கள் வலைத்தளம் உங்கள் உலகளாவிய பார்வையாளர்களுக்கு ஒரு சிறந்த பயனர் அனுபவத்தைத் தொடர்ந்து வழங்குவதை உறுதிசெய்ய சமீபத்திய சிறந்த நடைமுறைகள் மற்றும் தொழில்நுட்பங்களுடன் புதுப்பித்த நிலையில் இருங்கள்.
முடிவுரை
உங்கள் உலகளாவிய பார்வையாளர்களுக்கு ஒரு வேகமான, ஊடாடும் மற்றும் பார்வைக்கு நிலையான வலைத்தள அனுபவத்தை வழங்குவதற்கு கோர் வெப் வைட்டல்ஸை மேம்படுத்துவது அவசியம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள உத்திகளைச் செயல்படுத்துவதன் மூலம், உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்தலாம், பயனர் திருப்தியை அதிகரிக்கலாம் மற்றும் உங்கள் தேடுபொறி தரவரிசைகளை உயர்த்தலாம். உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, வளைவில் முன்னால் இருக்க உங்கள் மேம்படுத்தல் உத்திகளைத் தேவைக்கேற்ப மாற்றியமைக்க நினைவில் கொள்ளுங்கள்.
இந்த முக்கிய அளவீடுகளில் கவனம் செலுத்துவதன் மூலமும், பலதரப்பட்ட உலகளாவிய பார்வையாளர்களுக்காக உங்கள் உத்திகளை மாற்றியமைப்பதன் மூலமும், உலகம் முழுவதும் உள்ள பயனர்களுக்கு சிறப்பாகச் செயல்படும் மற்றும் ஒரு நேர்மறையான அனுபவத்தை வழங்கும் ஒரு வலைத்தளத்தை நீங்கள் உருவாக்கலாம்.