Lighthouse रिपोर्ट के अवसर सेक्शन में, उन सभी यूआरएल की सूची होती है जो आपके पेज के फ़र्स्ट पेंट को ब्लॉक कर रहे हैं. इसका मकसद, ज़रूरी रिसॉर्स को इनलाइन करके, ज़रूरी न होने वाले रिसॉर्स को बाद में लोड करने की सुविधा देकर, और इस्तेमाल न किए गए रिसॉर्स को हटाकर, रेंडरिंग को रोकने वाले इन यूआरएल के असर को कम करना है.
किन यूआरएल को रेंडर ब्लॉक करने वाले रिसॉर्स के तौर पर फ़्लैग किया जाता है?
Lighthouse, रेंडर करने से रोकने वाले दो तरह के यूआरएल के लिए फ़्लैग करता है: स्क्रिप्ट और स्टाइलशीट.
ऐसा <script> टैग जो:
- दस्तावेज़ के
<head>में है. deferएट्रिब्यूट मौजूद नहीं है.asyncएट्रिब्यूट मौजूद नहीं है.
ऐसा <link rel="stylesheet"> टैग जो:
disabledएट्रिब्यूट मौजूद नहीं है. जब यह एट्रिब्यूट मौजूद होता है, तो ब्राउज़र स्टाइलशीट डाउनलोड नहीं करता है.- इसमें
mediaएट्रिब्यूट नहीं है, जो उपयोगकर्ता के डिवाइस से मेल खाता हो.media="all"को रेंडर रोकने वाला प्लैटफ़ॉर्म माना जाता है.
ज़रूरी संसाधनों की पहचान करने का तरीका
रेंडर करने से रोकने वाले संसाधनों के असर को कम करने के लिए, सबसे पहले यह पता करना ज़रूरी है कि कौनसे संसाधन ज़रूरी हैं और कौनसे नहीं. ग़ैर-ज़रूरी सीएसएस और JS की पहचान करने के लिए, Chrome DevTools में कवरेज टैब का इस्तेमाल करें. किसी पेज को लोड या चलाने पर, टैब से पता चलता है कि कितने कोड का इस्तेमाल किया गया है और कितने कोड को लोड किया गया है:
सिर्फ़ ज़रूरी कोड और स्टाइल शिप करके, अपने पेजों का साइज़ कम किया जा सकता है. सोर्स पैनल में किसी फ़ाइल की जांच करने के लिए, उस फ़ाइल के यूआरएल पर क्लिक करें. सीएसएस फ़ाइलों में मौजूद स्टाइल और JavaScript फ़ाइलों में मौजूद कोड को दो रंगों में मार्क किया जाता है:
- हरा (गंभीर): पहली बार पेज दिखने के लिए ज़रूरी स्टाइल; पेज के मुख्य फ़ंक्शन के लिए ज़रूरी कोड.
- लाल (गंभीर नहीं): ऐसी स्टाइल जो तुरंत न दिखने वाले कॉन्टेंट पर लागू होती हैं. साथ ही, पेज के मुख्य फ़ंक्शन में इस्तेमाल नहीं किए जा रहे कोड पर भी लागू होती हैं.
रेंडर ब्लॉक करने वाली स्क्रिप्ट को हटाने का तरीका
ज़रूरी कोड की पहचान करने के बाद, उस कोड को रेंडर रोकने वाले यूआरएल से अपने एचटीएमएल पेज में इनलाइन script टैग में ले जाएं.
पेज लोड होने पर, उसमें पेज की मुख्य सुविधाओं को मैनेज करने के लिए ज़रूरी चीज़ें होंगी.
अगर रेंडरिंग को रोकने वाले यूआरएल में ऐसा कोड है जो ज़रूरी नहीं है, तो उसे यूआरएल में रखा जा सकता है. इसके बाद, यूआरएल को async या defer एट्रिब्यूट के साथ मार्क करें. JavaScript की मदद से इंटरैक्टिविटी जोड़ना भी देखें.
ऐसे कोड हटा दें जिनका इस्तेमाल नहीं किया जा रहा है (इस्तेमाल न किए गए कोड हटाएं देखें).
रेंडर ब्लॉक करने वाली स्टाइलशीट को हटाने का तरीका
<script> टैग में कोड इनलाइन करने की तरह ही, एचटीएमएल पेज के head में <style> ब्लॉक के अंदर, पहले पेंट के लिए ज़रूरी स्टाइल को इनलाइन करें.
इसके बाद, preload लिंक का इस्तेमाल करके, बाकी स्टाइल को एसिंक्रोनस रूप से लोड करें
(इस्तेमाल नहीं किए गए सीएसएस को हटाएं देखें).
ज़रूरी टूल का इस्तेमाल करके, "फ़ोल्ड के ऊपर" सीएसएस को निकालने और इनलाइन करने की प्रोसेस को ऑटोमेट करें.
रेंडर करने में रुकावट डालने वाले स्टाइल को हटाने का एक और तरीका है, उन स्टाइल को अलग-अलग फ़ाइलों में बांटना. इन फ़ाइलों को मीडिया क्वेरी के हिसाब से व्यवस्थित किया जाता है. इसके बाद, हर स्टाइलशीट लिंक में मीडिया एट्रिब्यूट जोड़ें. पेज लोड करते समय, ब्राउज़र सिर्फ़ पहले पेंट को ब्लॉक करता है, ताकि उपयोगकर्ता के डिवाइस से मेल खाने वाली स्टाइलशीट फिर से हासिल की जा सकें (रेंडर-ब्लॉक करने वाला सीएसएस देखें).
आखिर में, आपको अपनी सीएसएस को छोटा करना होगा, ताकि अतिरिक्त खाली जगह या वर्ण हटाए जा सकें. इसके लिए, सीएसएस को छोटा करना देखें. इससे यह पक्का होता है कि आपने अपने उपयोगकर्ताओं को जितना हो सके उतना छोटा बंडल भेजा है.
स्टैक के हिसाब से दिशा-निर्देश
एएमपी
एएमपी लेआउट को सर्वर-साइड पर रेंडर करने के लिए, एएमपी ऑप्टिमाइज़र जैसे टूल का इस्तेमाल करें.
Drupal
ज़रूरी सीएसएस और JavaScript को इनलाइन करने के लिए, मॉड्यूल का इस्तेमाल करें. साथ ही, गैर-ज़रूरी सीएसएस या JavaScript के लिए, डेफ़र एट्रिब्यूट का इस्तेमाल करें.
Joomla
ऐसे कई Joomla प्लगिन हैं जो क्रिटिकल ऐसेट को इनलाइन करने या कम ज़रूरी संसाधनों को डेफ़र करने में आपकी मदद कर सकते हैं.
WordPress
ऐसे कई WordPress प्लग इन हैं जो क्रिटिकल एसेट इनलाइन करने या कम ज़रूरी संसाधनों को डेफ़र करने में आपकी मदद कर सकते हैं.