निर्णय करें कि क्या क्रिटिकल CSS सही समस्या है
लेबल के बजाय साक्ष्यों के साथ शुरू करें। किसी प्राथमिक पृष्ठ के लिए प्रतिनिधि मोबाइल और डेस्कटॉप प्रोफाइल पर एक cold-cache लोड रिकॉर्ड करें। वॉटरफॉल और ट्रेस का निरीक्षण करें: क्या कोई stylesheet पहली सामग्री को देरी कर रहा है, और क्या वह इतना बड़ा है कि मायने रखता हो? DevTools का Coverage किसी एक सत्र में उपयोग किए गए CSS को दिखाता है, न कि हर रूट या स्टेट को।
पहले कम-रख-रखाव वाले काम आज़माएँ: अनउपयोगी नियमों को हटाएँ, आउटपुट को मिनिफ़ाई और कंप्रेस करें, केवल जहाँ चाहिए वहां रूट CSS लोड करें, और साधारण CSS @import चेन से बचें। web.dev इनक्ट्रैक्शन और डिफ़र करने की तकनीकें उन्नत कहता है।
जाँच में पहली रेंडर देरी CSS से जुड़ी है, cold विज़िट मायने रखती है, और प्रारम्भिक लेआउट को बनाए रखा जा सकता है।
यदि सर्वर देरी, इमेज, फ़ॉन्ट, JavaScript, या पहले से छोटा stylesheet बाधा है, तो इनलाइन CSS मददगार होने की संभावना कम है।
प्रारम्भिक व्यूपोर्ट को एक टेस्ट मैट्रिक्स के रूप में परिभाषित करें
प्रारम्भिक व्यूपोर्ट, जिसे कभी-कभी ऊपर के फोल्ड (above the fold) कहा जाता है, वह होता है जो विज़िटर स्क्रॉल करने से पहले देखता है। इसकी कोई सार्वभौमिक ऊँचाई नहीं है: डिवाइस, ज़ूम, भाषा, कुकीज़ और कंटेंट वेरिएंट इसे बदलते हैं। एक डेस्कटॉप स्क्रीनशॉट फोन या अनुवादित हेडलाइन को मिस कर सकता है।
नामित प्रोफ़ाइल्स का उपयोग करें। संकीर्ण और चौड़े लेआउट, प्रमुख ब्रेकपॉइंट्स, भिन्न लॉगिन संरचनाएँ, और कोई भी सहमति बैनर, प्रोमोशन, मेंटेनेंस संदेश, या टॉप-ऑफ़-पेज वैलिडेशन त्रुटि शामिल करें जो पृष्ठ के शीर्ष पर प्रवेश कर सकती है।
सेट को जनरेट और टेस्ट करने के लिए टेम्पलेट, व्यूपोर्ट, लोकल, प्रमाणीकरण, सहमति, और टॉप-ऑफ़-पेज वेरिएंट्स रिकॉर्ड करें।
त्वरित स्क्रॉलिंग, मेन्यू और फॉर्म फोकस का परीक्षण करें; यदि कोई डिफ़र्ड नियम उसके कंट्रोल के पूर्ण CSS लागू होने से पहले दिख सकता है, तो वह असुरक्षित है।
एक स्रोत-ऑफ-ट्रूदथ से छोटा सेट एक्सट्रेक्ट करें
प्रोडक्शन बिल्ड से क्रिटिकल CSS जनरेट करें। एक्सट्रैक्शन व्यूपोर्ट में उपयोग किए गए नियमों की पहचान कर सकती है, पर शर्तीय, डायनामिक और ट्रांज़िशन नियमों की समीक्षा करें। किसी दूसरे डिज़ाइन सिस्टम को मैन्युअल रूप से टेम्प्लेट में कॉपी न करें; जैसे-जैसे कंपोनेंट्स और मार्कअप बदलते हैं यह ड्रिफ्ट करेगा।
आउटपुट को जनरेटेड और रिलीज़ के साथ वर्शन-कियाम रखें, जबकि सोर्स CSS आधिकारिक बनी रहे। केवल पहले उपयोग योग्य स्टेट के लिए आवश्यक नियम इनलाइन करें। बड़े इनलाइन ब्लॉक्स HTML को देरी करते हैं और बाहरी CSS कैश से बाद के पेजों पर पुन:उपयोग नहीं कर पाते। बदलाव को सुधार कहा जाने से पहले cold और warm नेविगेशन की तुलना करें।
कम्प्रेस्ड इनलाइन बाइट्स, शेष stylesheet बाइट्स, और डुप्लिकेट नियमों का ट्रैक रखें। एक कम ब्लॉकिंग रिक्वेस्ट जरूरी नहीं कि नेट लाभ हो।
जब एक्सट्रैक्शन खाली हो, इनलाइन-साइज़ बजट पार हो, या समीक्षित बेसलाइन से अप्रत्याशित रूप से बदले तो बिल्ड को फ्लैग करें।
शेष CSS को सुरक्षित रूप से लोड करें और नीति प्रतिबंधों का सम्मान करें
शेष stylesheet तब तक आना चाहिए जब तक कि निचला कंटेंट और बाद के स्टेट पूरा दिखने लगें। एक प्रलेखित पैटर्न CSS को style के रूप में preload करता है और लोड होने के बाद उसे stylesheet में बदल देता है, साथ ही एक non-JavaScript फॉलबैक के साथ। Preload संसाधन को जल्दी अनुरोध करता है; यह CSS लागू नहीं करता। एक अपूर्ण सेट दृश्यमान रूप से री-स्टाइल कर सकता है।
इनलाइन लोड हैंडलर का उपयोग करने से पहले Content Security Policy की जाँच करें। web.dev नोट करता है कि नीतियाँ inline onload JavaScript को निषिद्ध कर सकती हैं, इसलिए एक संगत लोडर या अलग डिजाइन का उपयोग करें। JavaScript अक्षम हुए परीक्षण करें। मीडिया-योग्य फ़ाइलें उन वास्तविक शर्तीय शैलियों के लिए मददगार हैं जैसे प्रिंट; एक मेल न खाने वाला मीडिया-क्वेरी रेंडर-ब्लॉक नहीं करता, हालांकि वह अभी भी डाउनलोड कर सकता है।
जाँचें कि बिना JavaScript वाला विज़िटर पूर्ण CSS प्राप्त करता है और प्राथमिक यात्रा पूरी कर सकता है।
एक देरी से लोड होने वाला पहला-व्यूपोर्ट फ़ॉन्ट या इमेज अलग से जाँचे; क्रिटिकल CSS उसकी फेच बिहेवियर को ठीक नहीं करता।
दृश्य, कार्यात्मक और कैश रिग्रेशन का परीक्षण करें
प्रत्येक नामित व्यूपोर्ट और टॉप-ऑफ़-पेज स्टेट पर विजुअल तुलना का उपयोग करें। अनस्टाइल्ड टेक्स्ट, ओवरलैप, छिपा नेविगेशन, गायब फोकस संकेतक, लेआउट शिफ्ट, और जब डिफ़र्ड CSS लागू हो तो आने वाला स्नैप देखिए। कीबोर्ड नेविगेशन, टच पाथ, त्रुटियाँ, और तेज़ स्क्रॉलिंग का अभ्यास करें। यदि किसी डिफ़र्ड नियम से कोई कंट्रोल अनुपयोगी बनता है, तो वह क्रिटिकल पाथ में होना चाहिए या डिज़ाइन बदलनी चाहिए।
cold और warm विज़िट्स का परीक्षण करें। कोल्ड टेस्ट दिखाता है कि हटाए गए CSS वेट से रेंडरिंग में सुधार होता है या नहीं; वार्म टेस्ट इनलाइन-बाइट की लागत दिखाता है। कैश्ड पूर्व HTML और डिप्लॉयमेंट के बाद वापसी का परीक्षण करें। संगत अस्सेट्स को बनाए रखें जबकि कैश्ड HTML उन्हें अनुरोध कर सकता है, और फ़िंगरप्रिन्टेड stylesheet URL को ओवरराइट न करें।
पहली सामग्री और मुख्य दृश्य सामग्री की तुलना करें, फिर लाभ या रिग्रेशन की व्याख्या करने के लिए ट्रेस का उपयोग करें।
फोकस, कंट्रास्ट, मोशन प्राथमिकताएँ, ज़ूम, और पठनीय क्रम शामिल करें। तेज़ रेंडरिंग ही पास नहीं है यदि इंटरफेस असमर्थनीय है।
इसे रिवर्सिबल डिलीवरी फीचर के रूप में संचालित करें
पाइपलाइन का एक ओनर रखें और इसके इनपुट्स, आर्टिफैक्ट, टेम्पलेट्स, टेस्ट प्रोफ़ाइल्स, और इनलाइन-साइज़ लिमिट का दस्तावेज़ीकरण करें। CSS, मार्कअप, कोई कंपोनेंट लाइब्रेरी, फीचर फ्लैग, या ऊपर-के-फोल्ड थर्ड-पार्टी में बदलाव होने पर परीक्षण चलाएँ। Coverage समीक्षा मार्गदर्शन देती है, पर एक रिकॉर्डिंग यह साबित नहीं कर सकती कि कोई नियम हर जगह सुरक्षित है।
जहाँ व्यावहारिक हो, इसे रिवर्सिबल कॉन्फ़िगरेशन के पीछे रिलीज़ करें। ज्ञात-भली stylesheet पाथ, आर्टिफैक्ट वर्शन, बिल्ड आइडेंटिफ़ायर, और रिकवरी मेथड रिकॉर्ड करें। यदि कोई रिग्रेशन दिखाई दे, तो पहले संगत डिलीवरी को बहाल करें, फिर मिस की गई स्टेट का डायग्नोसिस करें। SIU इस वर्कफ़्लो का उपयोग करके महत्वपूर्ण पाथ को ग्राहक प्रभाव फैलने से पहले स्थिर करता है।
एक नया बैनर, सहमति फ़्लो, लोकल, ब्रेकपॉइंट, या खाता लेआउट regeneration और परीक्षण की आवश्यकता रखता है।
संगत जनरेशन के लिए टेम्पलेट और डिलीवरी कॉन्फ़िगरेशन को रिवर्ट करें; पुराने दस्तावेज़ संदर्भित कर सकते असम्प्रभाव्य (immutable) अस्सेट URLs को न बदलें।