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