Resource hints என்பவை browser-ஐ resources-ஐ முன்கூட்டியே fetch செய்யவோ அல்லது இணைக்கவோ சொல்லும் <link> tags ஆகும், இவை load performance-ஐ optimize செய்கின்றன. ஒவ்வொன்றும் வேறுபட்ட timing/priority தேவையை பூர்த்தி செய்கின்றன.
Resource hints என்பவை browser-ஐ resources-ஐ முன்கூட்டியே fetch செய்யவோ அல்லது இணைக்கவோ சொல்லும் <link> tags ஆகும், இவை load performance-ஐ optimize செய்கின்றன. ஒவ்வொன்றும் வேறுபட்ட timing/priority தேவையை பூர்த்தி செய்கின்றன.
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 செய்யப்படுகிறது.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fonts தாமதமாக கண்டறியப்படுகின்றன (browser முதலில் CSS-ஐ parse செய்ய வேண்டும்), எனவே அவற்றை preload செய்வது invisible-text தாமதங்களைத் தவிர்க்கிறது.
அனைத்தையும் preload செய்வது நோக்கத்தையே தோற்கடிக்கிறது — இது உண்மையிலேயே முக்கியமான resources-உடன் bandwidth-க்காக போட்டியிடுகிறது. மிக முக்கியமான சிலவற்றை மட்டுமே hint செய்யுங்கள்.
Resource hints critical path-இலிருந்து latency-ஐ குறைக்கின்றன: preconnect third parties-க்கான handshake தாமதத்தை அகற்றுகிறது, preload தாமதமாக-கண்டறியப்பட்ட முக்கியமான assets-க்கு (fonts, LCP image) முன்னுரிமை அளிக்கிறது, மற்றும் prefetch அடுத்த navigation-ஐ உடனடியாக உணரச் செய்கிறது.
நுட்பமாக பயன்படுத்தப்படும்போது, அவை Core Web Vitals-ஐ அர்த்தமுள்ள வகையில் மேம்படுத்துகின்றன.