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

Demián Renzulli

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

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

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

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

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

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

मापें

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

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

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

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 को लागू नहीं करते.

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

निगरानी

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

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

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

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

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

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

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