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

Demián Renzulli

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

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

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

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

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

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

दूरी मापें

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

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

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

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

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

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

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

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

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

Optimize

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

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

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

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

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

रिपोर्ट में, आपको दिखेगा कि एफ़सीपी पेज को 0.2s तक घटाया गया है (यह 20% बेहतर है!):

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

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

यह पेज अब ब्लॉक करने वाले रिसॉर्स के ऑडिट में पास हो गया है.

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

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