सीएसएस डिलीवरी को अनुकूलित करना: विलंबित सीएसएस लोडिंग की तकनीक को समझना

वेबसाइट के प्रदर्शन को बेहतर बनाने के लिए, डेवलपर्स अक्सर सीएसएस डिलीवरी को अनुकूलित करते हैं। Google डेवलपर्स दस्तावेज़ में उल्लिखित एक रणनीति में

हालाँकि, यह हमारे सामने सवाल खड़ा करता है: पेज लोड होने के बाद हम एक बड़ी सीएसएस फ़ाइल कैसे लोड कर सकते हैं?

समाधान: बड़ी सीएसएस फ़ाइलों की लोडिंग को स्थगित करना

एक बड़ी सीएसएस फ़ाइल की लोडिंग को स्थगित करने के लिए, हम एक सरल jQuery कोड स्निपेट का उपयोग कर सकते हैं:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

इस फ़ंक्शन को $(document).ready() या window.onload फ़ंक्शन के भीतर कॉल करके, हम पेज लोड होने के बाद सीएसएस फ़ाइल को गतिशील रूप से लोड कर सकते हैं।

विधि सत्यापन

यह सत्यापित करने के लिए कि यह विधि काम करती है, अपने ब्राउज़र में जावास्क्रिप्ट को अक्षम करने का प्रयास करें और फिर पृष्ठ को पुनः लोड करें। यदि लागू स्टाइलशीट के साथ पृष्ठ अभी भी सही ढंग से लोड होता है, तो यह सीएसएस लोडिंग के सफल स्थगन को दर्शाता है।

वैकल्पिक तरीके

सीएसएस लोडिंग को स्थगित करने के लिए वैकल्पिक तरीके हैं, जैसे