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

Demián Renzulli

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

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

उदाहरण: सीएसएस लोड होना सबसे अच्छा नहीं है

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

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

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

मापें

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

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

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

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

नतीजे में मिले ट्रेस में आपको दिखेगा कि एफ़सीपी मार्कर को तुरंत रखा गया है सीएसएस पूरी तरह लोड हो जाने के बाद:

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

Optimize

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

1. DevTools में Command मेन्यू खोलें 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 का इस्तेमाल नहीं करते हैं.

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

निगरानी

DevTools का इस्तेमाल करके, ऑप्टिमाइज़ किया गया पेज.

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

आखिर में, ऑप्टिमाइज़ किए गए पेज पर लाइटहाउस को चलाएं.

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

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

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

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