वर्डप्रेस में क्रिटिकल पाथ सीएसएस कैसे बनाएं

वर्डप्रेस सीएसएस को समझना

इससे पहले कि हम इसमें गोता लगाएँ, आइए समझते हैं कि वर्डप्रेस में नियमित सीएसएस कैसे काम करता है।

प्रत्येक वर्डप्रेस थीम में style.css होता है जिसमें आपकी साइट को स्टाइल करने के लिए आवश्यक सभी कोड होते हैं। थीम डेवलपर्स को सभी वर्डप्रेस सुविधाओं का समर्थन करना चाहिए जिसमें ब्लॉग पोस्ट, टिप्पणियां, उत्पाद पृष्ठ, सदस्यता पृष्ठ, फॉर्म आदि शामिल हैं। आपके द्वारा इंस्टॉल किए गए अन्य प्लगइन्स भी समान सीएसएस स्टाइलशीट जोड़ सकते हैं।

यह सीएसएस फाइलों को फूला हुआ और 200kb या उससे भी अधिक के आकार में बड़ा बना सकता है।

क्रिटिकल पाथ सीएसएस क्या है?

जैसे-जैसे आपकी CSS फ़ाइलें बढ़ती हैं, आपके ब्राउज़र को उन बड़ी फ़ाइलों को डाउनलोड करने, उन्हें पार्स करने और उन्हें रेंडर करने की आवश्यकता होती है। रेंडर ब्लॉकिंग के रूप में भी जाना जाता है। यह पहले सार्थक रेंडर और पहले सार्थक रेंडर को भी बढ़ा देगा।

क्रिटिकल पाथ सीएसएस प्रत्येक वेब पेज पर उपरोक्त सामग्री को प्रस्तुत करने के लिए आवश्यक सीएसएस है। जैसा कि नाम से पता चलता है, "महत्वपूर्ण" सीएसएस, जो ब्राउज़र को पूर्ण सीएसएस फ़ाइलों को लोड करने से पहले इसे जल्दी से खींचने और प्रस्तुत करने में मदद करता है।

आमतौर पर महत्वपूर्ण पथ का सीएसएस हेडर में एम्बेड किया जाता है और स्रोत सीएसएस फ़ाइल को उपयोग में आसानी के लिए एसिंक्रोनस रूप से या पाद लेख में लोड किया जाता है।

क्रिटिकल पाथ सीएसएस इतना महत्वपूर्ण क्यों है?

आपने Google PageSpeed ​​Insights या GTmetrix जैसे टूल से पहले ही "सीएसएस डिलीवरी को ऑप्टिमाइज़ करें" या "अप्रयुक्त सीएसएस को स्थगित करें" कहते हुए एक चेतावनी देखी होगी।

क्रिटिकल सीएसएस का पेज लोड समय से कोई लेना-देना नहीं है। यह लोडिंग समय को बढ़ाता / घटाता नहीं है। लेकिन एक बेहतर यूजर एक्सपीरियंस देता है। यह वेब पेज को जल्दी से "रेंडर" या "रंगीन" करने में मदद करता है।

• पहले सामग्री ड्रा (FCP) में सुधार करता है
• पहले महत्वपूर्ण भुगतान में सुधार (FMP)
• अप्रयुक्त सीएसएस को हटा दें (तकनीकी रूप से इसे न हटाएं, लेकिन "उपयोगी" सीएसएस को प्राथमिकता दें)

क्रिटिकल सीएसएस के साथ और बिना मेरे ब्लॉग के दो स्क्रीनशॉट यहां दिए गए हैं।

जैसा कि आप "नो क्रिटिकल css पाथ" सेक्शन में देख सकते हैं, उपयोगकर्ता को मोबाइल डिवाइस पर कुछ उपयोगी दिखाने में लगभग 5 सेकंड का समय लगा। ब्राउज़र को सीएसएस फ़ाइल के लिए एक अतिरिक्त HTTP अनुरोध करना होगा, इसे डाउनलोड करना होगा, प्रतिपादन शुरू करने के लिए इसे पार्स करना होगा। लेकिन महत्वपूर्ण css का उपयोग करते समय, सभी आवश्यक css इनलाइन होने चाहिए और ब्राउज़र HTML फ़ाइल को एक सेकंड या उससे कम समय में लोड करने के तुरंत बाद रेंडर करना शुरू कर सकता है।

वर्डप्रेस में क्रिटिकल सीएसएस कैसे बनाएं?

वर्डप्रेस में क्रिटिकल सीएसएस जेनरेट करने के कई तरीके हैं।

कैशिंग प्लगइन्स का उपयोग करना

WP रॉकेट एक प्रीमियम कैशिंग प्लगइन है जो वास्तव में अच्छी तरह से काम करता है।

मैं हर साइट पर WP रॉकेट का उपयोग करने के कारणों में से एक महत्वपूर्ण CSS पीढ़ी ही है। वे होम पेज, पोस्ट पेज, कैटेगरी पेज, प्रोडक्ट पेज आदि के लिए अलग से क्रिटिकल सीएसएस जेनरेट करते हैं और इसे एम्बेड करते हैं। थीम या सेटिंग में बदलाव होने पर वे महत्वपूर्ण CSS को पुनर्स्थापित कर देंगे।

सब कुछ एक बटन के स्पर्श में किया जा सकता है।

अन्य कैशिंग प्लगइन्स जो महत्वपूर्ण CSS उत्पन्न कर सकते हैं

स्विफ्ट प्रदर्शन और लाइटस्पीड (लाइटस्पीड/ओपनलाइटस्पीड सर्वर की आवश्यकता है) समान प्लगइन्स हैं जो क्रिटिकल सीएसएस उत्पन्न कर सकते हैं। इन दोनों प्लगइन्स में उनके सर्वर में क्लाउड और पूर्ण कैश बनाया गया है।

ऑटोऑप्टिमाइज़ + फ्री क्रिटिकल सीएसएस जेनरेटर का उपयोग करना

तीसरे पक्ष के ऑनलाइन उपकरण हैं जो आपकी साइट के यूआरएल को दर्ज करके महत्वपूर्ण सीएसएस प्रदान करते हैं। पेगासा एक ऐसा बेहतरीन फ्री टूल है।

यहाँ यह कैसे करना है:

स्टेप 1। https://pegasaas.com/critical-path-css-generator/ पर जाएं और अपना URL दर्ज करें। उत्पन्न "क्रिटिकल पाथ सीएसएस" की प्रतिलिपि बनाएँ।

चरण दो ऑटो-ऑप्टिमाइज़ सेटिंग्स (उन्नत सेटिंग्स सक्षम करें) में, "सीएसएस विकल्प" के तहत, "इनलाइन और डेफर सीएसएस" की जांच करें और कॉपी किए गए सीएसएस को पेस्ट करें।

पेशेवरों:

• मुफ्त है

माइनस:

• विभिन्न पेज प्रकारों के लिए कोई अलग महत्वपूर्ण सीएसएस नहीं (उदा: होम पेज, पोस्ट पेज, श्रेणी पेज, उत्पाद पेज, आदि)
• थीम/सेटिंग परिवर्तन पर स्वचालित रूप से पुनर्निर्माण न करें

वर्डप्रेस स्वयं महत्वपूर्ण CSS क्यों नहीं उत्पन्न कर सकता है?

जैसा कि आपने देखा होगा, एक सीएसएस महत्वपूर्ण पथ बनाने से बाहरी सेवाएं सक्षम होती हैं। तो वर्डप्रेस खुद इसे क्यों नहीं बना सकता?

क्रिटिकल सीएसएस बनाना क्रिटिकल (गूगल द्वारा), क्रिटिकल सीएसएस या पेंटहाउस जैसे ओपन सोर्स प्रोजेक्ट्स द्वारा संभव बनाया गया है। ये सभी प्रोजेक्ट NodeJS पर आधारित हैं, PHP पर नहीं। तो, आपको अपने सर्वर पर NodeJS स्थापित करने की आवश्यकता है। अधिकांश साझा/प्रबंधित होस्टिंग प्रदाता कई कारणों से इसकी अनुमति नहीं देते हैं।