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

Demián Renzulli

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

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

सीएसएस को ठीक से लोड नहीं किया गया है

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

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

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

मापें

अहम मेट्रिक की समीक्षा करने के लिए, DevTools में Lighthouse चलाएं.

1. Chrome में डेमो खोलें.
2. Chrome DevTools खोलें.
3. परफ़ॉर्मेंस पैनल को चुनें.
4. पैनल में जाकर, पेज को फिर से लोड करें.

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

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

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

Optimize

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

1. Control+Shift+P या Command+Shift+P (Mac) दबाकर, DevTools का कमांड मेन्यू खोलें.
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 की अनुमति न हो.

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

नया पेज, पिछले वर्शन की तरह ही दिखता है. भले ही, ज़्यादातर स्टाइल एसिंक्रोनस तरीके से लोड होती हों.

निगरानी

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

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

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

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

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

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

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