अपनी स्क्रिप्ट के निष्पादन को defer और async के साथ क्रमबद्ध करें, फिर preload, preconnect, और prefetch के साथ नेटवर्क को दिशा दें।
इस पाठ को Kodokon में खोलेंएक क्लासिक <script src> HTML पार्सिंग को रोक देता है: ब्राउज़र रुकता है, डाउनलोड करता है, निष्पादित करता है, फिर आगे बढ़ता है। दो एट्रिब्यूट खेल बदल देते हैं। defer पार्सिंग के समानांतर डाउनलोड करता है और स्क्रिप्ट को दस्तावेज़ क्रम में निष्पादित करता है, DOMContentLoaded से ठीक पहले: यह आपके एप्लिकेशन कोड के लिए डिफ़ॉल्ट विकल्प है, जो DOM और अन्य स्क्रिप्ट पर निर्भर हो सकता है। async भी समानांतर में डाउनलोड करता है लेकिन फ़ाइल आते ही निष्पादित करता है, बिना किसी गारंटीशुदा क्रम के: इसे analytics जैसी स्वतंत्र स्क्रिप्ट के लिए आरक्षित रखें, जो किसी चीज़ पर निर्भर नहीं होतीं।
<script src="/js/analytics.js" async></script>
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>ब्राउज़र कुछ महत्वपूर्ण संसाधनों को बहुत देर से ही खोजता है: किसी CSS फ़ाइल के अंदर संदर्भित एक फ़ॉन्ट, JavaScript में लोड की गई एक छवि। <link rel="preload"> उस देरी से खोज को ठीक करता है, संसाधन को सीधे <head> में घोषित करके, अनिवार्य as एट्रिब्यूट के साथ ताकि ब्राउज़र सही प्राथमिकता और सही कैश लागू करे। पाठ्यपुस्तक का मामला: webfonts, जिनका अन्यथा अनुरोध केवल CSS के डाउनलोड और पार्स होने के बाद ही किया जाता है।
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>
<link rel="preload" as="image"
href="/img/hero-1600.jpg" fetchpriority="high">अंतिम परिवार: कम-प्राथमिकता वाले नेटवर्क संकेत। <link rel="preconnect"> किसी ऐसे तृतीय-पक्ष origin के लिए पहले से पूरा कनेक्शन (DNS, TCP, TLS) स्थापित करता है जिसका आप निश्चित रूप से उपयोग करेंगे: पहले अनुरोध पर 300 ms तक की बचत। dns-prefetch इसका हल्का चचेरा भाई है (केवल DNS समाधान), कम निश्चित origins के लिए एक फ़ॉलबैक के रूप में उपयोगी। और prefetch निष्क्रिय समय के दौरान, अगले नेविगेशन के लिए बना एक संसाधन डाउनलोड करता है: उदाहरण के लिए कार्ट से चेकआउट पृष्ठ। समझौता स्पष्ट है: preload वर्तमान पृष्ठ की सेवा करता है, prefetch अगले पर दाँव लगाता है।
<link rel="preconnect"
href="https://api.example.com">
<link rel="dns-prefetch"
href="https://cdn.example.com">
<link rel="prefetch" href="/checkout.html">