गै़र-ज़रूरी सीएसएस को कुछ समय के लिए रोकें

Demián Renzulli

अहम जानकारी: इस गाइड में, परफ़ॉर्मेंस को बेहतर बनाने की एक बेहतर तकनीक के बारे में बताया गया है. हालांकि, इसे सही तरीके से लागू न करने पर, बग भी हो सकते हैं. ज़्यादातर साइटें, इस तकनीक को लागू किए बिना ही परफ़ॉर्मेंस के लिए सुझाए गए सभी लक्ष्यों को हासिल कर सकती हैं.

सीएसएस फ़ाइलें रेंडरिंग को रोकने वाले रिसॉर्स हैं: ब्राउज़र के पेज को रेंडर करने से पहले, उन्हें लोड और प्रोसेस करना ज़रूरी है. जिन वेब पेजों में ज़रूरत से ज़्यादा बड़ी स्टाइल शीट होती हैं उन्हें रेंडर होने में ज़्यादा समय लगता है.

इस गाइड में, आपको क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करने और फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) को बेहतर बनाने के लिए, ग़ैर-ज़रूरी सीएसएस को बाद में लोड करने का तरीका पता चलेगा.

उदाहरण: सीएसएस लोड होने में लगने वाला समय ज़्यादा होना

नीचे दिए गए उदाहरण में, टेक्स्ट के तीन छिपे हुए पैराग्राफ़ वाला एक अकॉर्डियन है. इनमें से हर पैराग्राफ़ को अलग-अलग क्लास के साथ स्टाइल किया गया है:

यह पेज, आठ क्लास वाली सीएसएस फ़ाइल का अनुरोध करता है. हालांकि, "दिखने वाले" कॉन्टेंट को रेंडर करने के लिए, इन सभी क्लास की ज़रूरत नहीं होती.

इस गाइड का मकसद, इस पेज को ऑप्टिमाइज़ करना है, ताकि सिर्फ़ ज़रूरी स्टाइल एक साथ लोड हों. वहीं, बाकी स्टाइल (पैराग्राफ़ स्टाइल भी शामिल हैं), बिना ब्लॉक किए लोड हों.

मापें

पेज पर Lighthouse चलाएं और परफ़ॉर्मेंस सेक्शन पर जाएं.

रिपोर्ट में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट मेट्रिक की वैल्यू "1 सेकंड" के साथ दिख रही है. साथ ही, style.css फ़ाइल पर ले जाने वाले रेंडर ब्लॉक करने वाले रिसॉर्स को हटाएं का अवसर दिख रहा है:

लाइटहाउस रिपोर्ट में, पेज को तेज़ी से लोड करने के लिए, अपनी स्टाइल शीट को आसान बनाने का सुझाव दिया गया है.

ध्यान दें: इस डेमो साइट में बहुत छोटी स्टाइल शीट का इस्तेमाल किया गया है. प्रोडक्शन के मामलों में, आम तौर पर बहुत बड़ी सीएसएस फ़ाइलों की ज़रूरत होती है. अगर Lighthouse को पता चलता है कि किसी पेज पर, पेज के ऊपरी हिस्से के कॉन्टेंट को रेंडर करते समय, इस्तेमाल नहीं किए गए कम से कम 2,048 बाइट के सीएसएस नियम हैं, तो वह इस्तेमाल न की गई सीएसएस हटाएं का सुझाव भी दिखाता है.

यह सीएसएस रेंडरिंग को कैसे ब्लॉक करती है, यह देखने के लिए:

1. Chrome में पेज खोलें.
2. DevTools खोलने के लिए, Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
3. परफ़ॉर्मेंस टैब पर क्लिक करें.
4. परफ़ॉर्मेंस पैनल में, फिर से लोड करें पर क्लिक करें.

इसके बाद, आपको ट्रैक में दिखेगा कि सीएसएस लोड होने के तुरंत बाद, FCP मार्कर दिखता है:

बिना ऑप्टिमाइज़ किए गए डेमो पेज पर, एफ़सीपी तब तक नहीं हो सकता, जब तक सीएसएस लोड नहीं हो जाती.

इसका मतलब है कि स्क्रीन पर एक भी पिक्सल दिखाने से पहले, ब्राउज़र को सभी सीएसएस के लोड होने और प्रोसेस होने का इंतज़ार करना पड़ता है.

Optimize

इस पेज को ऑप्टिमाइज़ करने के लिए, आपको यह जानना होगा कि किन क्लास को ज़रूरी माना जाता है. यह पता लगाने के लिए, कवरेज टूल का इस्तेमाल करें:

1. DevTools में, Control+Shift+P या Command+Shift+P (Mac) दबाकर कमांड मेन्यू खोलें.
2. "कवरेज" टाइप करें और कवरेज दिखाएं चुनें.
3. पेज को फिर से लोड करने और कवरेज को कैप्चर करने के लिए, फिर से लोड करें पर क्लिक करें.

कवरेज रिपोर्ट से पता चलता है कि पेज के शुरुआती लोड में, आपकी सीएसएस का कितना हिस्सा इस्तेमाल किया गया है.

जानकारी देखने के लिए, रिपोर्ट पर दो बार क्लिक करें:

• हरे रंग से मार्क की गई क्लास अहम हैं. ब्राउज़र को दिखने वाले कॉन्टेंट को रेंडर करने के लिए, इनकी ज़रूरत होती है. इनमें टाइटल, सबटाइटल, और अकॉर्डियन बटन शामिल हैं.
• लाल रंग से मार्क की गई क्लास, ग़ैर-ज़रूरी होती हैं. ये सिर्फ़ ऐसे कॉन्टेंट पर असर डालती हैं जो तुरंत नहीं दिखता. जैसे, छिपाए गए पैराग्राफ़.

इस जानकारी की मदद से, अपनी सीएसएस को ऑप्टिमाइज़ करें, ताकि पेज लोड होने के तुरंत बाद ब्राउज़र ज़रूरी स्टाइल को प्रोसेस करना शुरू कर सके और ज़रूरी नहीं सीएसएस को बाद के लिए छोड़ सके:

1. कवरेज रिपोर्ट में हरे रंग से मार्क की गई क्लास की परिभाषाएं निकालें और उन क्लास को पेज के हेडर में <style> ब्लॉक में डालें:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. बाकी क्लासों को असिंक्रोनस तरीके से लोड करने के लिए, यह पैटर्न अपनाएं:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

सीएसएस लोड करने का यह स्टैंडर्ड तरीका नहीं है. यह इस तरह से काम करता है:

• link rel="preload" as="style", स्टाइल शीट का अनुरोध एसिंक्रोनस तरीके से करता है. preload के बारे में ज़्यादा जानने के लिए, ज़रूरी ऐसेट को प्रीलोड करने के बारे में गाइड पढ़ें.
• link में मौजूद onload एट्रिब्यूट की मदद से, स्टाइल शीट लोड होने के बाद ब्राउज़र, सीएसएस को प्रोसेस कर पाता है.
• onload हैंडलर का इस्तेमाल करने के बाद उसे "शून्य" कर देने से, कुछ ब्राउज़र को rel एट्रिब्यूट स्विच करने पर, हैंडलर को फिर से कॉल करने से बचने में मदद मिलती है.
• noscript एलिमेंट में मौजूद स्टाइल शीट का रेफ़रंस, उन ब्राउज़र के लिए फ़ॉलबैक उपलब्ध कराता है जो JavaScript को लागू नहीं करते.

ध्यान दें:

असल प्रोडक्शन के मामले में, हमारा सुझाव है कि आप loadCSS जैसे, सीएसएस को बाद में लोड करने वाले फ़ंक्शन का इस्तेमाल करें. ये फ़ंक्शन, इस व्यवहार को शामिल कर सकते हैं और सभी ब्राउज़र पर अच्छी तरह से काम कर सकते हैं. साथ ही, ये कॉन्टेंट सुरक्षा नीति के साथ काम करते हैं. ऐसा हो सकता है कि ये इनलाइन onload JavaScript की अनुमति न दें.

सीएसएस लिंक को पेज के सबसे नीचे भी रखा जा सकता है. इससे, Firefox और Chrome में स्टाइल शीट के रेंडर होने से पहले, कॉन्टेंट को रेंडर करने की अनुमति मिलती है. हालांकि, इस मामले में ब्राउज़र अब भी स्टाइल शीट को प्राथमिकता देता है, ताकि वह सभी ब्राउज़र में अब भी संवेदनशील कॉन्टेंट को ब्लॉक कर सके.

नतीजा पेज, पिछले वर्शन की तरह ही दिखता है. भले ही, ज़्यादातर स्टाइल असिंक्रोनस तरीके से लोड हों. एचटीएमएल फ़ाइल में, इनलाइन किए गए स्टाइल और सीएसएस फ़ाइल के लिए असाइनोक्रोनस अनुरोध इस तरह दिखते हैं:

निगरानी

ऑप्टिमाइज़ किए गए पेज पर, परफ़ॉर्मेंस का एक और ट्रेस चलाने के लिए, DevTools का इस्तेमाल करें.

FCP मार्कर, पेज के सीएसएस का अनुरोध करने से पहले दिखता है. इसका मतलब है कि ब्राउज़र को पेज को रेंडर करने से पहले, सीएसएस के लोड होने का इंतज़ार नहीं करना पड़ता:

ऑप्टिमाइज़ किए गए पेज पर, एफ़सीपी, स्टाइल शीट लोड होने से पहले शुरू हो सकता है.

आखिरी चरण के तौर पर, ऑप्टिमाइज़ किए गए पेज पर Lighthouse चलाएं.

रिपोर्ट में, आपको दिखेगा कि एफ़सीपी पेज 0.2 सेकंड कम हो गया है. यह 20% का सुधार है!

नया और कम किया गया एफ़सीपी.

रेंडर ब्लॉक करने वाले रिसॉर्स हटाएं सुझाव अब अवसर सेक्शन में नहीं दिखता. अब यह पास किए गए ऑडिट सेक्शन में दिखता है:

अब पेज, ब्लॉक किए गए रिसॉर्स के ऑडिट की शर्तें पूरी करता है.

अगले चरण और रेफ़रंस

इस गाइड में, पेज में मौजूद इस्तेमाल न किए गए कोड को मैन्युअल तरीके से निकालकर, गैर-ज़रूरी सीएसएस को डेफ़र करने का तरीका बताया गया है. ज़्यादा जटिल प्रोडक्शन एनवायरमेंट के लिए, ज़रूरी सीएसएस निकालने की गाइड में, ज़रूरी सीएसएस निकालने के लिए कुछ सबसे लोकप्रिय टूल शामिल हैं. साथ ही, इसमें कोडलैब भी शामिल है, ताकि यह देखा जा सके कि ये टूल असल में कैसे काम करते हैं