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

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 मार्कर, पेज के सीएसएस का अनुरोध करने से पहले दिखता है. इसका मतलब है कि पेज को रेंडर करने से पहले, ब्राउज़र को सीएसएस के लोड होने का इंतज़ार नहीं करना होगा:

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

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

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

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

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