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

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

Lighthouse प्रीलोड के मुख्य अनुरोधों के ऑडिट का स्क्रीनशॉट

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

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

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

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

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

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

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

रिसॉर्स