preload, prefetch र preconnect जस्ता resource hints के हुन्?

Question

Accepted Answer

**Resource hints** भनेको `` ट्यागहरू हुन् जो ब्राउजरलाई संसाधनहरू छिटो फेच गर्न वा जोडिन भन्दछन्, लोड प्रदर्शन अप्टिमाइज गर्दै। प्रत्येकले फरक फरक समय/प्राथमिकता आवश्यकता पूरा गर्दछ। ```html ``` ## प्रत्येकले के गर्दछ - **`preload`** — "मलाई यो **हालको पृष्ठको लागि** चाहिन्छ, अब उच्च प्राथमिकताले फेच गर्नुहोस्।" पार्सरले देरीमा खोज गरेको महत्वपूर्ण संसाधनको लागि: फन्ट, हीरो इमेजहरू, CSS-सन्दर्भित संपत्ति। ब्राउजरले सही प्राथमिकता/हेडरहरू सेट गर्ने गरी `as` आवश्यक छ। - **`preconnect`** — "मैले यो **मूलमा** जोडिन शीघ्रै गर्नेछु; DNS खोज + TCP + TLS हँडशेक अब गर्नुहोस्।" तीस्रो-पक्षको (API, फन्ट होस्ट, CDN) पहिलो अनुरोधको अगाडी राउन्ड-ट्रिपहरू बचाउँछ। केही महत्वपूर्ण मूलहरूको लागि प्रयोग गर्नुहोस्। - **`dns-prefetch`** — preconnect को हल्का संस्करण: केवल DNS रिजोलुसन। धेरै मूलहरूको लागि राम्रो फलब्याक / । - **`prefetch`** — "मलाई यो **सम्भवतः** **अगलो** नेभिगेसनको लागि चाहिन्छ; यो निष्क्रिय हुँदा कम प्राथमिकताले फेच गर्नुहोस्।" सम्भावित-अगलो पृष्ठहरू/संपत्तिको लागि। भविष्यको लागि क्यास गरिएको छ, हालको पृष्ठ होइन। ## एक सामान्य वास्तविक उदाहरण: फन्टहरू ```html ``` फन्टहरू देरीमा खोजिन्छन् (ब्राउजरले पहिले CSS पार्स गर्नु पर्छ), त्यसैले तिनलाई प्रिलोड गरेर अदृश्य-पाठ देरीहरू बचाइन्छ। ## चेतावनी: अत्यधिक संकेत दिनबाट बच्नुहोस् सबै कुरा प्रिलोड गरेर उद्देश्य परास्त हुन्छ — यो साँच्चै महत्वपूर्ण संसाधनहरूसँग ब्यान्डविडको लागि प्रतिस्पर्धा गर्दछ। केवल सबैभन्दा महत्वपूर्ण कुरामा संकेत दिनुहोस्। ## यो किन महत्वपूर्ण छ Resource hints ले गुरु पथबाट लेटेन्सी काट्दछ: `preconnect` ले तीस्रो-पक्षको लागि हँडशेक विलम्ब हटाउँछ, `preload` ले देरीमा खोजिएका महत्वपूर्ण संपत्तिहरू (फन्ट, LCP इमेज) को प्राथमिकता दिन्छ, र `prefetch` ले **अगलो** नेभिगेसनलाई तत्काल महसुस गराउँछ। शल्यक्रियात्मक रूपमा प्रयोग गरेर, तिनीहरूले Core Web Vitals मा अर्थपूर्ण सुधार गर्दछन्।