𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗕𝘂𝘁 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄? 𝗜𝘁'𝘀 𝗜𝗡𝗣
உங்கள் Lighthouse அறிக்கை பச்சை நிறத்தில் (green) இருக்கலாம். LCP சரியாக இருக்கலாம். CLS சரியாக இருக்கலாம். பக்கம் வேகமாகத் திறக்கலாம்.
ஆனால், நிஜ உலகப் பயன்பாட்டில் (real-world) உங்கள் மதிப்பெண்கள் குறையலாம். அது ஏன் என்று உங்களுக்குத் தெரியாமல் இருக்கலாம்.
பிரச்சனை பெரும்பாலும் INP-ஆக இருக்கலாம். Interaction to Next Paint என்பது மார்ச் 2024-இல் FID-க்கு மாற்றாக வந்தது. FID முதல் தாமதத்தை மட்டுமே அளவிட்டது. ஆனால், ஒரு பயனர் உங்கள் பக்கத்தில் இருக்கும்போது நடக்கும் ஒவ்வொரு தொடர்பையும் (interaction) INP அளவிடுகிறது. இது அதில் மிக மெதுவான ஒன்றையே அறிக்கையாகத் தருகிறது.
INP என்பது ஒரு லோடிங் (loading) அளவீடு அல்ல. இது ஒரு பதிலளிக்கும் திறன் (responsiveness) அளவீடு. இது ஒரு கேள்விக்கு விடையளிக்கிறது: நீங்கள் கிளிக் செய்யும்போதோ அல்லது தட்டச்சு செய்யும்போதோ, திரை மாற எவ்வளவு நேரம் ஆகிறது?
Google இந்த அளவீடுகளைப் பயன்படுத்துகிறது:
- 200ms அல்லது அதற்குக் குறைவானது நல்லது.
- 500ms-க்கு மேல் இருப்பது மோசமானது.
ஒரு தளம் ஒரு வினாடியில் லோட் ஆகலாம், ஆனாலும் அது தோல்வியடையலாம். வேகமாக லோட் ஆவதும், வேகமாகப் பதிலளிப்பதும் வெவ்வேறு வேலைகள்.
Lighthouse கருவிகள் பெரும்பாலும் INP-ஐக் கவனிக்கத் தவறிவிடுகின்றன. Lighthouse உங்கள் பொத்தான்களை (buttons) கிளிக் செய்யாது. அது ஒரு மதிப்பீட்டை மட்டுமே வழங்கும். உங்களிடம் பச்சை நிற லேப் அறிக்கை (lab report) இருக்கலாம், ஆனால் சிவப்பு நிற ஃபீல்ட் ஸ்கோர் (field score) இருக்கலாம்.
உண்மையான எண்ணைப் பார்க்க, இந்த குறியீட்டைப் (code) பயன்படுத்தவும்:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
இது மெதுவான தொடர்பையும் (interaction) குறிப்பிட்ட உறுப்பையும் (element) பதிவு செய்யும்.
மெயின் த்ரெட் (main thread) வேலையாக இருப்பதால் INP சிக்கல்கள் ஏற்படுகின்றன. ஒரு JavaScript பணி முடியும் வரை பிரவுசர் பதிலைக் காட்ட (paint) முடியாது.
பொதுவான காரணங்கள்:
- ஒவ்வொரு கிளிக் செய்யும்போதும் இயங்கும் கனமான event handlers.
- சாட் விட்ஜெட்டுகள் (chat widgets) அல்லது அனலிட்டிக்ஸ் (analytics) போன்ற மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள் (third-party scripts).
- தொடர்ச்சியான DOM வாசிப்புகள் மற்றும் எழுதுதல்களால் ஏற்படும் Layout thrashing.
- Framework hydration பணிகள்.
நீண்ட பணிகளைப் பிரிப்பதன் மூலம் இதைச் சரிசெய்யலாம். படிகளுக்கு இடையே பிரவுசருக்குச் சற்று இடைவெளி விடுங்கள்:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
மெதுவான வேலை தொடங்குவதற்கு முன்பே பிரவுசர் UI-ஐக் காட்ட yieldToMain-ஐப் பயன்படுத்தவும்.
இதர தீர்வுகள்:
- உடனடியாகத் தேவையில்லாத ஸ்கிரிப்ட்களைத் தள்ளிப்போடவும் (Defer).
- மூன்றாம் தரப்பு விட்ஜெட்களைச் சரிபார்க்கவும் (Audit).
- அதிகச் சுமை கொண்ட handlers-களுக்கு Debounce பயன்படுத்தவும்.
- உங்கள் DOM வாசிப்புகள் மற்றும் எழுதுதல்களைத் தொகுக்கவும் (Batch).
உங்கள் உண்மையான மதிப்பெண்கள் குறைவாக இருந்தால், LCP-ஐப் பார்த்துக் கொண்டிருப்பதை நிறுத்துங்கள். அதற்குப் பதிலாக உங்கள் தொடர்புகளை (interactions) அளவிடுங்கள்.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn