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