preload, prefetch மற்றும் preconnect போன்ற resource hints என்றால் என்ன?

Question

Accepted Answer

**Resource hints** என்பவை browser-ஐ resources-ஐ முன்கூட்டியே fetch செய்யவோ அல்லது இணைக்கவோ சொல்லும் `` tags ஆகும், இவை load performance-ஐ optimize செய்கின்றன. ஒவ்வொன்றும் வேறுபட்ட timing/priority தேவையை பூர்த்தி செய்கின்றன. ```html ``` ## ஒவ்வொன்றும் என்ன செய்கிறது - **`preload`** — "இது எனக்கு **தற்போதைய page-க்கு** தேவை, இப்போதே அதிக priority-யில் fetch செய்." parser தாமதமாக கண்டறியும் முக்கியமான resources-க்கு: fonts, hero images, CSS-referenced assets. browser சரியான priority/headers-ஐ அமைக்க `as` தேவை. - **`preconnect`** — "நான் விரைவில் இந்த **origin**-உடன் இணைப்பேன்; DNS lookup + TCP + TLS handshake-ஐ இப்போதே செய்." ஒரு third-party-க்கு (API, font host, CDN) முதல் request-க்கு முன் round-trips-ஐ சேமிக்கிறது. சில முக்கியமான origins-க்கு பயன்படுத்துங்கள். - **`dns-prefetch`** — preconnect-இன் இலகுவான பதிப்பு: வெறுமனே DNS resolution மட்டும். நல்ல fallback / பல origins-க்கு. - **`prefetch`** — "இது **அடுத்த** navigation-க்கு எனக்கு **அநேகமாக** தேவைப்படும்; idle-ஆக இருக்கும்போது குறைந்த priority-யில் fetch செய்." சாத்தியமாக-அடுத்த pages/assets-க்கு. தற்போதைய page-க்கு அல்ல, எதிர்காலத்திற்கு cache செய்யப்படுகிறது. ## ஒரு பொதுவான உண்மையான உதாரணம்: fonts ```html ``` Fonts தாமதமாக கண்டறியப்படுகின்றன (browser முதலில் CSS-ஐ parse செய்ய வேண்டும்), எனவே அவற்றை preload செய்வது invisible-text தாமதங்களைத் தவிர்க்கிறது. ## எச்சரிக்கை: அதிகமாக hint செய்யாதீர்கள் அனைத்தையும் preload செய்வது நோக்கத்தையே தோற்கடிக்கிறது — இது உண்மையிலேயே முக்கியமான resources-உடன் bandwidth-க்காக போட்டியிடுகிறது. மிக முக்கியமான சிலவற்றை மட்டுமே hint செய்யுங்கள். ## இது ஏன் முக்கியம் Resource hints critical path-இலிருந்து latency-ஐ குறைக்கின்றன: `preconnect` third parties-க்கான handshake தாமதத்தை அகற்றுகிறது, `preload` தாமதமாக-கண்டறியப்பட்ட முக்கியமான assets-க்கு (fonts, LCP image) முன்னுரிமை அளிக்கிறது, மற்றும் `prefetch` *அடுத்த* navigation-ஐ உடனடியாக உணரச் செய்கிறது. நுட்பமாக பயன்படுத்தப்படும்போது, அவை Core Web Vitals-ஐ அர்த்தமுள்ள வகையில் மேம்படுத்துகின்றன.