मुख्य अनुरोधों को पहले से लोड करें

आपकी लाइटहाउस रिपोर्ट का ऑपर्च्यूनिटी सेक्शन आपके ज़रूरी अनुरोध की चेन में तीसरे लेवल के अनुरोधों को पहले से लोड करने वाले उम्मीदवारों के तौर पर फ़्लैग करता है:

लाइटहाउस प्रीलोड कुंजी के अनुरोधों के ऑडिट का स्क्रीनशॉट

लाइटहाउस फ़्लैग, पहले से लोड किए जाने वाले उम्मीदवारों का पता कैसे लगाते हैं

मान लें कि आपके पेज का ज़रूरी अनुरोध की चेन ऐसी दिखती है:

index.html |--app.js |--styles.css |--ui.js

आपकी index.html फ़ाइल, <script src="app.js"> के बारे में है. जब app.js चलता है , तो यह कॉल करता है styles.css और ui.js को डाउनलोड करने के लिए fetch(). पेज पूरा न दिखना जब तक कि उन पिछले दो संसाधनों को डाउनलोड, पार्स, और एक्ज़ीक्यूट नहीं किया जाता. ऊपर दिए गए उदाहरण का इस्तेमाल करके, लाइटहाउस styles.css और ui.js को उम्मीदवारों के तौर पर फ़्लैग करेगा.

संभावित बचत इस बात पर निर्भर करती है कि ब्राउज़र कितने समय पहले काम कर सकता है का इस्तेमाल करें. उदाहरण के लिए, अगर app.js को डाउनलोड, पार्स, और एक्ज़ीक्यूट करने में 200 मि॰से॰ लगते हैं, तो हर संसाधन के लिए संभावित बचत 200 मि॰से॰ है, क्योंकि अब हर अनुरोध के लिए app.js एक रुकावट नहीं है.

पहले से लोड करने के अनुरोधों से आपके पेज तेज़ी से लोड हो सकते हैं.

पहले से लोड किए गए लिंक के बिना, style.css और ui.js का अनुरोध सिर्फ़ app.js के डाउनलोड, पार्स, और लागू होने के बाद किया जाता है.
पहले से लोड किए गए लिंक के बिना, styles.css और app.js के डाउनलोड होने के बाद ही, ui.js का अनुरोध किया जाता है, पार्स किया और एक्ज़ीक्यूट किया गया.

समस्या यह है कि ब्राउज़र को सिर्फ़ जानकारी मिलती है app.js को डाउनलोड, पार्स, और लागू करने के बाद, उन आखिरी दो रिसॉर्स में से. आपको यह पता है कि ये संसाधन ज़रूरी हैं और इसे जल्द से जल्द डाउनलोड कर लिया जाना चाहिए.

ब्राउज़र को मुख्य संसाधन डाउनलोड करने के निर्देश देने के लिए, अपने एचटीएमएल में पहले से लोड किए गए लिंक का एलान करें जल्द से जल्द.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
पहले से लोड किए जाने वाले लिंक का इस्तेमाल करने पर, style.css और ui.js का अनुरोध, app.js के साथ एक ही समय में किया जाता है.
पहले से लोड किए गए लिंक के साथ, styles.css और ui.js का अनुरोध और app.js के साथ किया जाता है.

लोड करने की स्पीड को बेहतर बनाने के लिए, ज़रूरी ऐसेट को पहले से लोड करने की सुविधा लेख भी देखें की मदद ली जा सकती है.

ब्राउज़र के साथ काम करना

जून 2020 से, पहले से लोड करने की सुविधा Chromium पर आधारित ब्राउज़र पर काम करती है. यहां जाएं: अलग-अलग ब्राउज़र के साथ काम करता है या नहीं अपडेट देखें.

पहले से लोड करने के लिए बिल्ड टूल से जुड़ी सहायता

Tooling.report की पहले से लोड की जा रही ऐसेट देखें करें.

स्टैक के लिए सलाह

Angular

नेविगेशन की रफ़्तार बढ़ाने के लिए, समय से पहले रूट पहले से लोड करें.

Magento

अपनी थीम के लेआउट में बदलाव करना और <link rel=preload> टैग जोड़ें.

संसाधन