सीएसएस फ़ाइलें रेंडरिंग रोकने वाले रिसॉर्स होती हैं: ब्राउज़र की ओर से पेज को रेंडर करने से पहले उन्हें लोड और प्रोसेस किया जाना चाहिए. जिन वेब पेजों में ज़रूरत से ज़्यादा बड़ी स्टाइल शीट होती हैं उन्हें रेंडर होने में ज़्यादा समय लगता है.
इस गाइड में, गैर-ज़रूरी सीएसएस को कुछ समय के लिए रोकने का तरीका बताया गया है, ताकि क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ किया जा सके और फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) को बेहतर बनाया जा सके.
उदाहरण: सीएसएस की सबसे अच्छी लोडिंग
नीचे दिए गए उदाहरण में एक अकॉर्डियन दिया गया है, जिसमें टेक्स्ट के तीन छिपे हुए पैराग्राफ़ हैं. हर पैराग्राफ़ को अलग क्लास की शैली में बनाया गया है:
यह पेज आठ क्लास वाली एक सीएसएस फ़ाइल का अनुरोध करता है, लेकिन सभी सभी क्लास के लिए "दिखने वाला" कॉन्टेंट रेंडर करने की ज़रूरत नहीं होती.
इस गाइड का मकसद इस पेज को ऑप्टिमाइज़ करना है, ताकि सिर्फ़ ज़रूरी स्टाइल एक साथ लोड हों, जबकि बाकी सभी (इसमें पैराग्राफ़ स्टाइल भी शामिल हैं) बिना ब्लॉक किए लोड किए जाएं.
दूरी मापें
पेज पर Lighthouse चलाएं और परफ़ॉर्मेंस सेक्शन पर जाएं.
इस रिपोर्ट में "1s" की वैल्यू के साथ फ़र्स्ट कॉन्टेंटफ़ुल पेंट मेट्रिक दिखाई जाती है. साथ ही, style.css फ़ाइल पर ले जाने वाले रेंडर ब्लॉक करने वाले संसाधनों को हटाने का मौका मिलता है:
![ऑप्टिमाइज़ नहीं किए गए पेज की लाइटहाउस रिपोर्ट, जो 'ऑपर्च्यूनिटी' में '1s' का एफ़सीपी और 'ब्लॉक करने
के रिसॉर्स हटाएं' दिखा रही है](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=3&hl=hi)
यह देखने के लिए कि सीएसएस कैसे रेंडरिंग को ब्लॉक करती है:
- Chrome में पेज खोलें.
- DevTools खोलने के लिए
Control+Shift+J
(या Mac परCommand+Option+J
) दबाएं. - परफ़ॉर्मेंस टैब पर क्लिक करें.
- परफ़ॉर्मेंस पैनल में, फिर से लोड करें पर क्लिक करें.
इस नतीजे में, आपको दिखेगा कि एफ़सीपी मार्कर, सीएसएस के लोड होने के तुरंत बाद लगाया जाता है:
![ऑप्टिमाइज़ नहीं किए गए पेज के लिए DevTools परफ़ॉर्मेंस ट्रेस. इसमें, सीएसएस के लोड होने के बाद एफ़सीपी को शुरू किया गया है.](https://web.dev/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=3&hl=hi)
इसका मतलब है कि स्क्रीन पर एक पिक्सल बनाने से पहले, ब्राउज़र को सभी सीएसएस के लोड होने और प्रोसेस होने का इंतज़ार करना होगा.
Optimize
इस पेज को ऑप्टिमाइज़ करने के लिए, आपको यह जानना होगा कि किन क्लास को ज़रूरी माना जाता है. इसका पता लगाने के लिए, कवरेज टूल का इस्तेमाल करें:
- DevTools में,
Control+Shift+P
याCommand+Shift+P
(Mac) दबाकर Command मेन्यू खोलें. - "कवरेज" टाइप करें और कवरेज दिखाएं को चुनें.
- पेज को फिर से लोड करने और कवरेज को कैप्चर करना शुरू करने के लिए, फिर से लोड करें पर क्लिक करें.
![सीएसएस फ़ाइल का कवरेज, जो 55.9% इस्तेमाल नहीं की गई बाइट दिखाता है.](https://web.dev/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?authuser=3&hl=hi)
जानकारी देखने के लिए, रिपोर्ट पर दो बार क्लिक करें:
- हरे रंग से मार्क की गई क्लास का होना बहुत ज़रूरी है. ब्राउज़र को इनकी ज़रूरत होती है कि वे दिखाई जा रही सामग्री को रेंडर करें, जिसमें शीर्षक, सबटाइटल, और अकॉर्डियन बटन शामिल हैं.
- लाल रंग से मार्क की गई क्लास गैर-ज़रूरी होती हैं. उनका असर सिर्फ़ उस कॉन्टेंट पर पड़ता है जो तुरंत नहीं दिखता. जैसे, छिपे हुए पैराग्राफ़.
इस जानकारी के साथ, अपने सीएसएस को ऑप्टिमाइज़ करें, ताकि ब्राउज़र पेज लोड होने के तुरंत बाद अहम स्टाइल को प्रोसेस करना शुरू कर सके. साथ ही, बाद के लिए गैर-ज़रूरी सीएसएस को कुछ समय के लिए रोक दें:
कवरेज रिपोर्ट में हरे रंग से मार्क की गई क्लास की परिभाषाएं निकालें और उन क्लास को पेज के सबसे ऊपर एक
<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>
नीचे दिए गए पैटर्न को लागू करके, बाकी क्लास को एसिंक्रोनस रूप से लोड करें:
<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 का इस्तेमाल करें.
पेज के सीएसएस का अनुरोध करने से पहले, एफ़सीपी मार्कर दिखता है. इसका मतलब है कि पेज को रेंडर करने से पहले, ब्राउज़र को सीएसएस के लोड होने का इंतज़ार नहीं करना होता है:
![ऑप्टिमाइज़ किए गए पेज के लिए DevTools
परफ़ॉर्मेंस ट्रेस. इसमें, सीएसएस के लोड होने से पहले एफ़सीपी
शुरू करने का तरीका दिखाया गया है.](https://web.dev/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=3&hl=hi)
आखिरी चरण में, ऑप्टिमाइज़ किए गए पेज पर Lighthouse चलाएं.
रिपोर्ट में, आपको दिखेगा कि एफ़सीपी पेज को 0.2s तक घटाया गया है (यह 20% बेहतर है!):
![लाइटहाउस रिपोर्ट, जो '0.8s' की एफ़सीपी वैल्यू दिखा रही है.](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=3&hl=hi)
रेंडर ब्लॉक करने वाले संसाधनों को हटाने का सुझाव, अब ऑपर्च्यूनिटी में नहीं दिखता. इसके बजाय, यह पास किए गए ऑडिट सेक्शन में दिखता है:
![लाइटहाउस
रिपोर्ट, जिसमें 'पास हुए ऑडिट' सेक्शन में, 'ब्लॉक करने वाले संसाधनों को हटाने की सुविधा'
दिख रही है.](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=3&hl=hi)
अगले चरण और रेफ़रंस
इस गाइड में, आपने पेज से इस्तेमाल न होने वाले कोड को मैन्युअल तरीके से निकालकर, गैर-ज़रूरी सीएसएस को कुछ समय के लिए रोकने का तरीका सीखा. ज़्यादा मुश्किल प्रोडक्शन एनवायरमेंट के लिए, सीएसएस के बारे में ज़रूरी जानकारी वाली गाइड में, ज़रूरी सीएसएस को निकालने के लिए इस्तेमाल किए जाने वाले कुछ सबसे लोकप्रिय टूल के बारे में बताया गया है. साथ ही, इसमें एक कोडलैब भी शामिल किया गया है, जिससे पता चलता है कि ये टूल असल में कैसे काम करते हैं