आपकी Lighthouse रिपोर्ट के ऑपर्च्यूनिटी सेक्शन में, ऐसी सभी स्टाइलशीट शामिल होती हैं जिनका इस्तेमाल नहीं किया गया है और जिनसे 2 किबीबी या उससे ज़्यादा की बचत हो सकती है. नेटवर्क गतिविधि में खर्च होने वाले गैर-ज़रूरी बाइट को कम करने के लिए, इस्तेमाल नहीं किए गए सीएसएस को हटाएं:
इस्तेमाल नहीं किया गया सीएसएस, परफ़ॉर्मेंस को कैसे धीमा कर देता है
<link> टैग का इस्तेमाल करना, किसी पेज में स्टाइल जोड़ने का एक आम तरीका है:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
ब्राउज़र से डाउनलोड की गई main.css फ़ाइल को बाहरी स्टाइलशीट कहा जाता है.
क्योंकि इसे उस एचटीएमएल से अलग स्टोर किया जाता है जो इसका इस्तेमाल करता है.
डिफ़ॉल्ट रूप से, ब्राउज़र को उपयोगकर्ता की स्क्रीन पर कोई भी कॉन्टेंट दिखाने या रेंडर करने से पहले, मिलने वाली सभी बाहरी स्टाइलशीट को डाउनलोड, पार्स, और प्रोसेस करना चाहिए. स्टाइलशीट को प्रोसेस करने से पहले, ब्राउज़र कॉन्टेंट दिखाने की कोशिश नहीं करता, क्योंकि स्टाइलशीट में ऐसे नियम हो सकते हैं जो पेज की स्टाइल पर असर डालते हैं.
हर बाहरी स्टाइलशीट को नेटवर्क से डाउनलोड करना ज़रूरी है. इन अतिरिक्त नेटवर्क यात्राओं से समय काफ़ी बढ़ सकता है. इसलिए, लोगों को स्क्रीन पर कोई भी कॉन्टेंट देखने के लिए इंतज़ार करना पड़ता है.
अप्रयुक्त CSS, ब्राउज़र के रेंडर ट्री के निर्माण की प्रक्रिया को भी धीमा कर देता है. रेंडर ट्री, डीओएम ट्री की तरह होता है. हालांकि, इसमें हर नोड के लिए स्टाइल भी शामिल होती है. रेंडर ट्री बनाने के लिए, ब्राउज़र को पूरे डीओएम ट्री पर चलना होगा और यह देखना होगा कि हर नोड पर कौनसे सीएसएस नियम लागू होते हैं. ज़्यादा इस्तेमाल न होने वाले सीएसएस को हर नोड के लिए स्टाइल की गणना करने में ब्राउज़र को उतना ही ज़्यादा समय लग सकता है.
इस्तेमाल न हुए सीएसएस का पता लगाने का तरीका
Chrome DevTools के कवरेज टैब की मदद से, ज़रूरी और गैर-ज़रूरी सीएसएस खोजने में मदद मिल सकती है. कवरेज टैब की मदद से, इस्तेमाल और इस्तेमाल नहीं की गई सीएसएस देखें.
क्रिटिकल सीएसएस को इनलाइन करें और गै़र-ज़रूरी सीएसएस को रोकें
कोड को <script> टैग में इनलाइन करने की तरह ही, एचटीएमएल पेज के head पर मौजूद <style> ब्लॉक में, पहले पेंट के लिए ज़रूरी स्टाइल को इनलाइन करें.
इसके बाद, preload लिंक का इस्तेमाल करके बाकी स्टाइल को एसिंक्रोनस रूप से लोड करें.
अहम टूल का इस्तेमाल करके, "पेज के ऊपर" सीएसएस को एक्सट्रैक्ट और इनलाइन करने की प्रोसेस को ऑटोमेट करने के बारे में सोचें.
गैर-ज़रूरी सीएसएस को बंद करने के बारे में ज़्यादा जानें.
स्टैक के लिए खास सलाह
Drupal
ऐसे सीएसएस नियमों को हटाएं जिनका इस्तेमाल नहीं किया गया है. किसी पेज के सही पेज या कॉम्पोनेंट में, सिर्फ़ ज़रूरी Drupal लाइब्रेरी अटैच करें. ज़्यादा जानकारी के लिए लाइब्रेरी तय करना देखें.
जूमला
आपके पेज में बिना इस्तेमाल वाले सीएसएस लोड करने वाले Joomla एक्सटेंशन की संख्या कम करें या स्विच करें.
WordPress
उन WordPress प्लग इन की संख्या कम करें या स्विच करें जो आपके पेज में ऐसी सीएसएस लोड कर रहे हैं जिनका इस्तेमाल नहीं किया गया है.