கடிகாரத்திற்கு அப்பால்: இணைய செயல்திறன் API-களை உண்மையான பயனர் அனுபவத்துடன் இணைத்தல்

டிஜிட்டல் பொருளாதாரத்தில், வேகம் என்பது ஒரு அம்சம் மட்டுமல்ல; அது பயனர் அனுபவத்தின் அடித்தளம். ஒரு மெதுவான இணையதளம் விரக்தியடைந்த பயனர்களுக்கும், அதிக பவுன்ஸ் ரேட்களுக்கும், வருவாயில் நேரடி பாதிப்புக்கும் வழிவகுக்கும். பல ஆண்டுகளாக, டெவலப்பர்கள் செயல்திறனை அளவிட window.onload போன்ற நேர அளவீடுகளை நம்பியிருந்தனர். ஆனால் ஒரு வேகமான லோட் டைம் உண்மையிலேயே ஒரு மகிழ்ச்சியான பயனருக்கு சமமானதா? பதில் பெரும்பாலும் இல்லை என்பதுதான்.

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

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

அடித்தளம்: இணைய செயல்திறன் API-களைப் புரிந்துகொள்ளுதல்

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

நேவிகேஷன் டைமிங் API: பக்கத்தின் பயணம்

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

இந்தத் தரவை ஒரு எளிய ஜாவாஸ்கிரிப்ட் அழைப்பு மூலம் அணுகலாம்:

const navigationEntry = performance.getEntriesByType('navigation')[0]; console.log(navigationEntry.toJSON());

இது நேரமுத்திரைகள் நிறைந்த ஒரு ஆப்ஜெக்டைத் திருப்பித் தரும். சில முக்கிய பண்புகள் பின்வருமாறு:

• fetchStart: உலாவி ஆவணத்தைப் பெறத் தொடங்கும் போது.
• responseStart: உலாவி சேவையகத்திலிருந்து பதாலின் முதல் பைட்டைப் பெறும்போது. fetchStart மற்றும் responseStart இடையேயான நேரம் பெரும்பாலும் டைம் டு ஃபர்ஸ்ட் பைட் (TTFB) என்று குறிப்பிடப்படுகிறது.
• domContentLoadedEventEnd: ஸ்டைல்ஷீட்கள், படங்கள் மற்றும் சப்ஃப்ரேம்கள் ஏற்று முடிக்க காத்திருக்காமல், ஆரம்ப HTML ஆவணம் முழுமையாக ஏற்றப்பட்டு பார்ஸ் செய்யப்பட்டவுடன்.
• loadEventEnd: பக்கத்திற்கான அனைத்து வளங்களும் (படங்கள், CSS போன்றவை உட்பட) முழுமையாக ஏற்றப்பட்டவுடன்.

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

ரிசோர்ஸ் டைமிங் API: கூறுகளைப் பிரித்தாய்தல்

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

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

அனைத்து வளங்களின் பட்டியலையும் இதுபோன்று பெறலாம்:

const resourceEntries = performance.getEntriesByType('resource'); resourceEntries.forEach(resource => { if (resource.duration > 200) { // 200ms-க்கு மேல் எடுத்த வளங்களைக் கண்டறியவும் console.log(`மெதுவான வளம்: ${resource.name}, காலம்: ${resource.duration}ms`); } });

முக்கிய பண்புகளில் name (வளத்தின் URL), initiatorType (வளத்தை ஏற்றுவதற்கு என்ன காரணம், எ.கா., 'img', 'script'), மற்றும் duration (அதைப் பெறுவதற்கு எடுத்துக்கொண்ட மொத்த நேரம்) ஆகியவை அடங்கும்.

பயனர் டைமிங் API: உங்கள் பயன்பாட்டின் லாஜிக்கை அளவிடுதல்

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

இது இரண்டு முக்கிய முறைகளுடன் செயல்படுகிறது:

• performance.mark(name): செயல்திறன் இடையகத்தில் பெயரிடப்பட்ட நேரமுத்திரையை உருவாக்குகிறது.
• performance.measure(name, startMark, endMark): இரண்டு மார்க்குகளுக்கு இடையேயான கால அளவைக் கணக்கிட்டு பெயரிடப்பட்ட அளவீட்டை உருவாக்குகிறது.

உதாரணம்: ஒரு தயாரிப்பு பட்டியல் கூறின் ரெண்டர் நேரத்தை அளவிடுதல்.

// நீங்கள் தரவைப் பெறத் தொடங்கும் போது performance.mark('product-list-fetch-start'); fetch('/api/products') .then(response => response.json()) .then(data => { // பெற்ற பிறகு, ரெண்டரிங் செய்வதற்கு முன் performance.mark('product-list-render-start'); renderProductList(data); // ரெண்டரிங் முடிந்த உடனேயே performance.mark('product-list-render-end'); // ஒரு அளவீட்டை உருவாக்கவும் performance.measure( 'Product List Render Time', 'product-list-render-start', 'product-list-render-end' ); });

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

PerformanceObserver: நவீன, திறமையான அணுகுமுறை

தொடர்ந்து `performance.getEntriesByType()` ஐ போல் செய்வது திறனற்றது. `PerformanceObserver` API செயல்திறன் உள்ளீடுகளைக் கேட்க ஒரு சிறந்த வழியை வழங்குகிறது. நீங்கள் குறிப்பிட்ட உள்ளீட்டு வகைகளுக்கு குழுசேருகிறீர்கள், மற்றும் உலாவி அவை பதிவு செய்யப்படும்போது உங்கள் கால்பேக் செயல்பாட்டை ஒத்திசைவற்ற முறையில் அறிவிக்கிறது. இது உங்கள் பயன்பாட்டிற்கு கூடுதல் சுமையைச் சேர்க்காமல் செயல்திறன் தரவைச் சேகரிக்க பரிந்துரைக்கப்பட்ட வழியாகும்.

const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(`உள்ளீட்டு வகை: ${entry.entryType}, பெயர்: ${entry.name}`); } }); observer.observe({ entryTypes: ['resource', 'navigation', 'mark', 'measure'] });

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

பயனர்-மையத்திற்கு மாற்றம்: கோர் வெப் வைட்டல்ஸ்

ஒரு பக்கம் 2 வினாடிகளில் ஏற்றப்பட்டது என்பதை அறிவது பயனுள்ளது, ஆனால் அது முக்கியமான கேள்விகளுக்கு பதிலளிக்கவில்லை: அந்த 2 வினாடிகளுக்கு பயனர் வெற்றுத் திரையைப் பார்த்துக் கொண்டிருந்தாரா? அவர்களால் பக்கத்துடன் தொடர்பு கொள்ள முடிந்ததா, அல்லது அது உறைந்திருந்ததா? அவர்கள் படிக்க முயற்சிக்கும்போது எதிர்பாராத விதமாக உள்ளடக்கம் நகர்ந்ததா?

இதை நிவர்த்தி செய்ய, கூகிள் கோர் வெப் வைட்டல்ஸ் (CWV) ஐ அறிமுகப்படுத்தியது, இது ஒரு பக்கத்தின் நிஜ-உலக பயனர் அனுபவத்தை மூன்று முக்கிய பரிமாணங்களில் அளவிடுவதற்காக வடிவமைக்கப்பட்ட அளவீடுகளின் தொகுப்பாகும்: ஏற்றுதல், ஊடாடுதல், மற்றும் காட்சி நிலைத்தன்மை.

லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (LCP): உணரப்பட்ட ஏற்றுதலை அளவிடுதல்

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

• நல்லது: 2.5 வினாடிகளுக்குக் கீழே
• மேம்பாடு தேவை: 2.5s மற்றும் 4.0s இடையே
• மோசம்: 4.0 வினாடிகளுக்கு மேல்

`loadEventEnd` போலல்லாமல், LCP பயனர் முதலில் எதைப் பார்க்கிறார் என்பதில் கவனம் செலுத்துகிறது, இது உணரப்பட்ட சுமை வேகத்தின் மிகவும் துல்லியமான பிரதிபலிப்பாக அமைகிறது.

இன்டராக்ஷன் டு நெக்ஸ்ட் பெயின்ட் (INP): பதிலளிக்கும் திறனை அளவிடுதல்

INP என்பது ஃபர்ஸ்ட் இன்புட் டிலே (FID) இன் வாரிசு மற்றும் மார்ச் 2024 இல் அதிகாரப்பூர்வ கோர் வெப் வைட்டலாக ஆனது. FID *முதல்* தொடர்புகளின் தாமதத்தை மட்டுமே அளவிடும் போது, INP பக்கத்தின் வாழ்க்கைச் சுழற்சி முழுவதும் *அனைத்து* பயனர் தொடர்புகளின் (கிளிக்குகள், தட்டுகள், விசை அழுத்தங்கள்) தாமதத்தை அளவிடுகிறது. இது மிக நீண்ட தொடர்பை báo cáo செய்கிறது, இதன் மூலம் ஒரு பயனர் அனுபவிக்கும் மோசமான பதிலளிப்புத் திறனை திறம்பட அடையாளம் காட்டுகிறது.

INP பயனரின் உள்ளீட்டிலிருந்து அடுத்த பிரேம் வரையப்படும் வரை முழு நேரத்தையும் அளவிடுகிறது, இது காட்சிப் பின்னூட்டத்தை பிரதிபலிக்கிறது. இது பயனரின் கேள்விக்கு பதிலளிக்கிறது: "நான் இந்த பொத்தானைக் கிளிக் செய்யும் போது, பக்கம் விரைவாக பதிலளிக்கிறதா?"

• நல்லது: 200 மில்லி விநாடிகளுக்குக் கீழே
• மேம்பாடு தேவை: 200ms மற்றும் 500ms இடையே
• மோசம்: 500ms-க்கு மேல்

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

குமுலேட்டிவ் லேஅவுட் ஷிஃப்ட் (CLS): காட்சி நிலைத்தன்மையை அளவிடுதல்

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

CLS பயனரின் கேள்விக்கு பதிலளிக்கிறது: "உறுப்புகள் எல்லா இடங்களிலும் குதிக்காமல் இந்த பக்கத்தைப் பயன்படுத்த முடியுமா?"

• நல்லது: 0.1-க்குக் கீழே
• மேம்பாடு தேவை: 0.1 மற்றும் 0.25 இடையே
• மோசம்: 0.25-க்கு மேல்

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

இடைவெளியை இணைத்தல்: மோசமான பயனர் அனுபவத்தைக் கண்டறிய API-களைப் பயன்படுத்துதல்

இங்குதான் எல்லாம் ஒன்றிணைகிறது. கோர் வெப் வைட்டல்ஸ் பயனர் *என்ன* அனுபவித்தார் என்பதை நமக்குச் சொல்கிறது (எ.கா., மெதுவான LCP). இணைய செயல்திறன் API-கள் அது *ஏன்* நடந்தது என்பதை நமக்குச் சொல்கிறது. அவற்றை இணைப்பதன் மூலம், செயல்திறனைக் கவனிப்பதிலிருந்து அதைச் செயலில் கண்டறிந்து சரிசெய்வதற்கு நாம் மாறுகிறோம்.

மெதுவான LCP-ஐ கண்டறிதல்

உங்கள் உண்மையான பயனர் கண்காணிப்பு (RUM) கருவி ஒரு குறிப்பிட்ட பிராந்தியத்தில் உள்ள பயனர்களுக்கு 4.5 வினாடிகள் என்ற மோசமான LCP-ஐ báo cáo செய்கிறது என்று கற்பனை செய்து பாருங்கள். அதை எப்படி சரி செய்வது? நீங்கள் LCP நேரத்தை அதன் பாகங்களாகப் பிரிக்க வேண்டும்.

1. டைம் டு ஃபர்ஸ்ட் பைட் (TTFB): சேவையகம் பதிலளிக்க மெதுவாக உள்ளதா? நேவிகேஷன் டைமிங் API-ஐப் பயன்படுத்தவும். `responseStart - requestStart` என்ற காலம் உங்களுக்கு ஒரு துல்லியமான TTFB-ஐத் தரும். இது அதிகமாக இருந்தால், சிக்கல் உங்கள் பின்தளத்தில், சேவையக உள்ளமைவில், அல்லது தரவுத்தளத்தில் உள்ளது, ஃப்ரண்ட்எண்ட்டில் அல்ல.
2. வளச் சுமை தாமதம் & நேரம்: LCP உறுப்பு தானாகவே ஏற்றுவதற்கு மெதுவாக உள்ளதா? முதலில், LCP உறுப்பை அடையாளம் காணவும் (எ.கா., ஒரு ஹீரோ படம்). உறுப்பைப் பெற `'largest-contentful-paint'` க்கான `PerformanceObserver`-ஐப் பயன்படுத்தலாம். பின்னர், அந்த உறுப்பின் URL-க்கான உள்ளீட்டைக் கண்டுபிடிக்க ரிசோர்ஸ் டைமிங் API-ஐப் பயன்படுத்தவும். அதன் காலவரிசையை பகுப்பாய்வு செய்யுங்கள்: ஒரு நீண்ட `connectStart` முதல் `connectEnd` இருந்ததா (மெதுவான நெட்வொர்க்)? `responseStart` முதல் `responseEnd` நீண்டதாக இருந்ததா (ஒரு பெரிய கோப்பு அளவு)? CSS அல்லது ஜாவாஸ்கிரிப்ட் போன்ற பிற ரெண்டர்-தடுக்கும் வளங்களால் அதன் `fetchStart` தாமதமானதா?
3. உறுப்பு ரெண்டர் தாமதம்: இது வளம் ஏற்றி முடிந்த பிறகு அது உண்மையில் திரையில் வரையப்படும் வரையிலான நேரம். இது ஒரு பெரிய ஜாவாஸ்கிரிப்ட் பண்டலை இயக்குவது போன்ற பிற பணிகளுடன் பிரதான த்ரெட் பிஸியாக இருப்பதால் ஏற்படலாம்.

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

மோசமான INP-ஐ விசாரித்தல்

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

1. நீண்ட பணிகளைக் கண்டறியவும்: லாங் டாஸ்க்ஸ் API இங்கே உங்கள் முதன்மைக் கருவியாகும். இது பிரதான த்ரெட்டில் 50ms-க்கு மேல் எடுக்கும் எந்தவொரு பணியையும் báo cáo செய்கிறது, ஏனெனில் எதற்கும் நீண்ட நேரம் எடுத்தால் பயனருக்கு குறிப்பிடத்தக்க தாமதம் ஏற்படும் அபாயம் உள்ளது. `'longtask'` உள்ளீடுகளைக் கேட்க ஒரு `PerformanceObserver`-ஐ அமைக்கவும்.
2. பயனர் செயல்களுடன் தொடர்புபடுத்தவும்: ஒரு நீண்ட பணி பயனர் தொடர்பு கொள்ள முயற்சிக்கும்போது ஏற்பட்டால் மட்டுமே ஒரு சிக்கலாகும். ஒரு INP நிகழ்வின் `startTime`-ஐ (`'event'` வகையிலான `PerformanceObserver` மூலம் கவனிக்கப்பட்டது) அதே நேரத்தில் ஏற்பட்ட எந்த நீண்ட பணிகளின் நேரங்களுடனும் நீங்கள் தொடர்புபடுத்தலாம். இது எந்த ஜாவாஸ்கிரிப்ட் செயல்பாடு பயனரின் தொடர்பைத் தடுத்தது என்பதை உங்களுக்குத் துல்லியமாகச் சொல்கிறது.
3. குறிப்பிட்ட ஹேண்ட்லர்களை அளவிடவும்: இன்னும் நுணுக்கமாகப் பெற பயனர் டைமிங் API-ஐப் பயன்படுத்தவும். உங்கள் முக்கியமான நிகழ்வு ஹேண்ட்லர்களை ('கார்ட்டில் சேர்' க்கான 'கிளிக்' ஹேண்ட்லர் போன்றவை) `performance.mark()` மற்றும் `performance.measure()` உடன் சுற்றவும். இது உங்கள் சொந்த குறியீடு செயல்பட எவ்வளவு நேரம் எடுக்கிறது மற்றும் அது நீண்ட பணியின் மூலமா என்பதை உங்களுக்குத் துல்லியமாகச் சொல்லும்.

அதிக CLS-ஐ சமாளித்தல்

பயனர்கள் தங்கள் மொபைல் சாதனங்களில் ஒரு கட்டுரையைப் படிக்கும்போது உரை நகர்வதாக báo cáo செய்கின்றனர். உங்கள் CLS மதிப்பெண் 0.3.

1. லேஅவுட் ஷிஃப்ட்களைக் கவனிக்கவும்: `'layout-shift'` உள்ளீடுகளைக் கேட்க ஒரு `PerformanceObserver`-ஐப் பயன்படுத்தவும். ஒவ்வொரு உள்ளீட்டிலும் ஒரு `value` (CLS மதிப்பெண்ணுக்கு அதன் பங்களிப்பு) மற்றும் `sources`-இன் பட்டியல் இருக்கும், அவை நகர்ந்த DOM உறுப்புகள். இது *என்ன* நகர்ந்தது என்பதை உங்களுக்குச் சொல்கிறது.
2. குற்றவாளி வளத்தைக் கண்டறியவும்: அடுத்த கேள்வி அது *ஏன்* நகர்ந்தது என்பதுதான். ஒரு பொதுவான காரணம், ஒரு வளம் தாமதமாக ஏற்றப்பட்டு மற்ற உள்ளடக்கத்தை கீழே தள்ளுவதாகும். ஒரு `layout-shift` உள்ளீட்டின் `startTime`-ஐ ரிசோர்ஸ் டைமிங் API-இலிருந்து உள்ளீடுகளின் `responseEnd` நேரத்துடன் நீங்கள் தொடர்புபடுத்தலாம். ஒரு விளம்பர ஸ்கிரிப்ட் அல்லது ஒரு பெரிய படம் ஏற்றி முடிந்த உடனேயே ஒரு லேஅவுட் ஷிஃப்ட் நடந்தால், நீங்கள் உங்கள் குற்றவாளியைக் கண்டுபிடித்துவிட்டீர்கள்.
3. முன்கூட்டிய தீர்வுகள்: தீர்வு பெரும்பாலும் படங்கள் மற்றும் விளம்பரங்களுக்கு பரிமாணங்களை வழங்குவதை (``) அல்லது மாறும் உள்ளடக்கத்திற்கு அது ஏற்றப்படுவதற்கு முன்பு பக்கத்தில் இடத்தை ஒதுக்குவதை உள்ளடக்கியது. எந்த வளங்களைப் பற்றி நீங்கள் முன்கூட்டியே செயல்பட வேண்டும் என்பதைக் கண்டறிய ரிசோர்ஸ் டைமிங் உதவுகிறது.

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

இந்த API-களைப் புரிந்துகொள்வது ஒரு விஷயம்; அவற்றை உங்கள் உலகளாவிய பயனர் தளத்தின் அனுபவத்தைக் கண்காணிக்கப் பயன்படுத்துவது அடுத்த படியாகும். இது உண்மையான பயனர் கண்காணிப்பு (RUM) இன் களமாகும்.

`PerformanceObserver` உடன் அனைத்தையும் ஒன்றிணைத்தல்

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

ஒரு வலுவான அப்சர்வர் அமைப்பின் கருத்தியல் துணுக்கு இங்கே:

const collectedMetrics = {}; const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.entryType === 'largest-contentful-paint') { collectedMetrics.lcp = entry.startTime; } else if (entry.entryType === 'layout-shift') { collectedMetrics.cls = (collectedMetrics.cls || 0) + entry.value; } else if (entry.entryType === 'event') { // இது INP கணக்கீட்டின் எளிமைப்படுத்தப்பட்ட பார்வை const duration = entry.duration; if (duration > (collectedMetrics.inp || 0)) { collectedMetrics.inp = duration; } } // ... மற்றும் 'longtask' போன்ற பிற உள்ளீட்டு வகைகளுக்கும் இதேபோல் } }); observer.observe({ entryTypes: ['largest-contentful-paint', 'layout-shift', 'event', 'longtask'] });

தரவை நம்பகத்தன்மையுடன் அனுப்புதல்

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

`navigator.sendBeacon()` API இதற்கு சரியானதாகும். பக்கம் இறக்கப்பட்டாலும், ஒரு சிறிய அளவு தரவை ஒரு சேவையகத்திற்கு நம்பகமான, ஒத்திசைவற்ற முறையில் அனுப்ப இது ஒரு வழியை வழங்குகிறது. இது ஒரு பதிலை எதிர்பார்க்காது, இது இலகுவானதாகவும் தடுக்காததாகவும் அமைகிறது.

window.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { const payload = JSON.stringify(collectedMetrics); navigator.sendBeacon('/api/performance-analytics', payload); } });

ஒரு உலகளாவிய பார்வையின் முக்கியத்துவம்

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

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

• உங்கள் LCP வட அமெரிக்காவில் உள்ள பயனர்களுக்கு சிறப்பாகவும், ஆனால் ஆஸ்திரேலியாவில் உள்ள பயனர்களுக்கு மோசமாகவும் உள்ளது, ஏனெனில் உங்கள் முதன்மை பட சேவையகம் அமெரிக்காவில் உள்ளது.
• உங்கள் INP நடுத்தர ஆண்ட்ராய்டு சாதனங்களில் அதிகமாக உள்ளது, அவை வளர்ந்து வரும் சந்தைகளில் பிரபலமாக உள்ளன, ஏனெனில் உங்கள் ஜாவாஸ்கிரிப்ட் அவற்றுக்கு அதிக CPU-தீவிரமானது.
• உங்கள் CLS குறிப்பிட்ட திரை அளவுகளில் மட்டுமே ஒரு சிக்கலாக உள்ளது, அங்கு ஒரு CSS மீடியா குவெரி ஒரு விளம்பரத்தை தவறாக மறுஅளவிடச் செய்கிறது.

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

முடிவு: அளவீட்டிலிருந்து தேர்ச்சி வரை

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

1. அனுபவத்தை அளவிடவும்: கோர் வெப் வைட்டல்ஸ் (LCP, INP, CLS) சேகரிக்க `PerformanceObserver`-ஐப் பயன்படுத்தவும். இது *என்ன* நடக்கிறது மற்றும் பயனருக்கு *அது எப்படி உணர்கிறது* என்பதை உங்களுக்குச் சொல்கிறது.
2. காரணத்தைக் கண்டறியவும்: ஆழமாக ஆராய foundational Timing API-களை (நேவிகேஷன், ரிசோர்ஸ், பயனர், லாங் டாஸ்க்ஸ்) பயன்படுத்தவும். இது அனுபவம் *ஏன்* மோசமாக உள்ளது என்பதை உங்களுக்குச் சொல்கிறது.
3. துல்லியத்துடன் செயல்படவும்: குறிப்பிட்ட பயனர் பிரிவுகளுக்கான சிக்கலின் மூல காரணத்தை நிவர்த்தி செய்யும் தகவலறிந்த, இலக்கு வைக்கப்பட்ட மேம்படுத்தல்களைச் செய்ய ஒருங்கிணைந்த தரவைப் பயன்படுத்தவும்.

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