preload, prefetch మరియు preconnect వంటి రిసోర్స్ హింట్‌లు ఏమిటి?

Question

Accepted Answer

**రిసోర్స్ హింట్‌లు** `` ట్యాగ్‌లు, అవి బ్రౌజర్‌కు ఉత్సాహంగా రిసోర్సులను ఫెచ్ చేయడానికి లేదా కనెక్ట్ చేయడానికి చెప్పుకుంటాయి, లోడ్ పెర్ఫార్మెన్స్‌ను అప్టిమైజ్ చేస్తాయి. ప్రతి ఒక్కటి భిన్న టైమింగ్/ప్రాధాన్యత సరిగ్గా ఎదుర్కుంటుంది. ```html ``` ## ప్రతిది ఎలా పనిచేస్తుందో - **`preload`** — "నాకు ఈ **ప్రస్తుత పేజీకి** అవసరం, దీన్ని ఇప్పుడే ఎక్కువ ప్రాధాన్యతతో ఫెచ్ చేయండి." క్రిటికల్ రిసోర్సుల కోసం పార్సర్ ఆలస్యంగా కనుగొనే: ఫాంట్‌లు, హీరో ఇమేజ్‌లు, CSS-రిఫరెన్స్‌డ్ ఆస్తులు. బ్రౌజర్ సరైన ప్రాధాన్యత/హెడర్‌లను సెట్ చేయాలని `as` అవసరం. - **`preconnect`** — "నేను ఈ **మూలానికి** త్వరలో కనెక్ట్ చేస్తాను; ఇప్పుడు DNS లుకప్ + TCP + TLS హ్యాండ్‌షేక్ చేయండి." మూడవ-పక్ష (API, ఫాంట్ హోస్ట్, CDN) కు మొదటి అభ్యర్థనకు ముందు రౌండ్-ట్రిప్‌లను సేవ్ చేస్తుంది. కొన్ని క్రిటికల్ మూలాల కోసం ఉపయోగించండి. - **`dns-prefetch`** — preconnect యొక్క తేలికైన సంస్కరణ: కేవలం DNS రిజల్యూషన్. చాలా మూలాల కోసం మంచి ఫాల్‌బ్యాక్ / చేరుకున్న. - **`prefetch`** — "నాకు **బహుశా** **తర్వాత** నావిగేషన్‌కి ఇది అవసరం; నిష్క్రియమైన సమయంలో కనిష్ట ప్రాధాన్యతతో ఫెచ్ చేయండి." సంభావ్య-తర్వాత పేజీలు/ఆస్తుల కోసం. భవిష్యత్‌కు క్యాష్‌చేసినవి, ప్రస్తుత పేజీకి కాదు. ## సాధారణ నిజ-జీవితం ఉదాహరణ: ఫాంట్‌లు ```html ``` ఫాంట్‌లు ఆలస్యంగా కనిపిస్తాయి (బ్రౌజర్ మొదట CSS ను పార్స్ చేయాలి), కాబట్టి వాటిని ప్రిలోడ్ చేయడం అదృశ్య-టెక్స్ట్ ఆలస్యాలను నివారిస్తుంది. ## హెచ్చరిక: ఓవర్-హింట్ చేయవద్దు ప్రతిదీ ప్రిలోడ్ చేయడం ఉద్దేశ్యాన్ని ఓడిపోదీ — ఇది నిజమైన క్రిటికల్ రిసోర్సుల కోసం బ్యాండ్‌విడ్‌థ్‌తో పోటీ చేస్తుంది. చాలా ముఖ్యమైన కొన్నిటిని మాత్రమే హింట్ చేయండి. ## ఇది ఎందుకు ముఖ్యమైనది రిసోర్స్ హింట్‌లు క్రిటికల్ పాథ్ నుండి లేటెన్సీని కటిమీర్చుతాయి: `preconnect` మూడవ-పక్ష కోసం హ్యాండ్‌షేక్ ఆలస్యాన్ని తొలిగిస్తుంది, `preload` ఆలస్యంగా-కనిపించిన క్రిటికల్ ఆస్తులకు (ఫాంట్‌లు, LCP ఇమేజ్) ప్రాధాన్యతను ఇస్తుంది, మరియు `prefetch` *తర్వాత* నావిగేషన్‌ను తక్షణమైనది చేస్తుంది. శస్త్ర నిపుణంగా ఉపయోగించిన, అవి Core Web Vitals ను అర్థవంతంగా మెరుగుపరుస్తాయి.