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 अर्थपूर्ण प्रकारे सुधारतात.