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