आपकी लाइटहाउस रिपोर्ट का ऑपर्च्यूनिटी सेक्शन, आपकी अहम अनुरोध चेन में अनुरोधों के तीसरे लेवल को पहले से लोड किए गए कैंडिडेट के तौर पर फ़्लैग करता है:
लाइटहाउस फ़्लैग, पहले से लोड किए गए उम्मीदवारों का पता कैसे लगाता है
मान लें कि आपके पेज की ज़रूरी अनुरोधों की चेन कुछ इस तरह दिखती है:
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
अब हर अनुरोध के लिए बॉटलनेक नहीं है.
पहले से लोड करने के अनुरोध से, आपके पेज तेज़ी से लोड हो सकते हैं.
इसमें समस्या यह है कि app.js
को डाउनलोड, पार्स, और एक्ज़ीक्यूट करने के बाद, ब्राउज़र को सिर्फ़ आखिरी दो रिसॉर्स के बारे में पता चलता है.
हालांकि, आपको पता है कि ये संसाधन ज़रूरी हैं और उन्हें जल्द से जल्द डाउनलोड कर लें.
पहले से लोड किए गए लिंक के बारे में बताएं
अपने एचटीएमएल में, पहले से लोड किए गए लिंक के बारे में बताएं, ताकि ब्राउज़र को यह निर्देश दिया जा सके कि वह मुख्य संसाधनों को जल्द से जल्द डाउनलोड कर ले.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
ज़्यादा जानकारी के लिए, कॉन्टेंट लोड होने की स्पीड को बेहतर बनाने के लिए, ज़रूरी ऐसेट को पहले से लोड करने का तरीका भी देखें.
वेबसाइट का अलग-अलग ब्राउज़र पर चलना
जून 2020 से, Chromium पर आधारित ब्राउज़र में, पेजों को पहले से लोड करने की सुविधा काम करती है. अपडेट के लिए ब्राउज़र के साथ काम करने की सुविधा देखें.
पेजों को पहले से लोड करने की सुविधा देने वाला टूल
Tooling.Report का पहले से लोड किया जाने वाला ऐसेट पेज देखें.
स्टैक के हिसाब से सलाह
Angular
नेविगेशन की रफ़्तार बढ़ाने के लिए, रास्ते को पहले से लोड करें.
Magento
अपनी थीम के लेआउट में बदलाव करें
और <link rel=preload>
टैग जोड़ें.