मुख्य बिंदु
महत्वपूर्ण सीएसएस तकनीकें जो ऊपर-नीचे की सामग्री को तुरंत लोड करने में सक्षम बनाती हैं। अपने उपयोगकर्ताओं को मिलीसेकंड में दृश्यमान सामग्री वितरित करें।
क्रिटिकल सीएसएस क्या है?
क्रिटिकल सीएसएस एक वेब पेज के पहले क्षेत्र के लिए आवश्यक सीएसएस नियमों का निर्धारण है जिसे उपयोगकर्ता पेज खोलने पर देखता है, जिसे एबव-द-फोल्ड कहा जाता है, और HTML में इनलाइन प्रस्तुत किया जाता है। यह तकनीक ब्राउज़र को बाहरी सीएसएस फ़ाइलों की प्रतीक्षा किए बिना पेज को पेंट करने की अनुमति देती है।
रेंडर ब्लॉकिंग समस्या का समाधान
ब्राउज़र, डिफ़ॉल्ट रूप से, सभी सीएसएस फ़ाइलों के डाउनलोड होने तक पेज पेंटिंग की प्रतीक्षा करते हैं। इससे गंभीर विलंब होता है, विशेषकर बड़ी सीएसएस फ़ाइलों वाली परियोजनाओं में। हम महत्वपूर्ण सीएसएस तकनीक के साथ इस प्रतीक्षा को समाप्त करते हैं:
- पृष्ठ के शीर्ष के लिए आवश्यक सीएसएस नियम निर्धारित करें।
- इन नियमों को HTML के
भाग में इनलाइन जोड़ें। - मुख्य CSS फ़ाइल को
media="print" onload="this.media='all'"के साथ अतुल्यकालिक रूप से लोड करें।
टूल्स
क्रिटिकल (npm पैकेज), पेंटहाउस और PurgeCSS जैसे उपकरण आपको इस प्रक्रिया को स्वचालित करने में मदद करते हैं। आप इसे अपने लारवेल मिक्स या वाइट पाइपलाइन में एकीकृत कर सकते हैं।
लाभ
- फर्स्ट कंटेंटफुल पेंट (FCP) समय में 40-60% की कमी।
- उपयोगकर्ता को तुरंत लगता है कि साइट लोड हो रही है।
- लाइटहाउस प्रदर्शन स्कोर में 10-20 अंक की वृद्धि।
Meta विज्ञापन और परफॉर्मेंस
सर्वर CAPI ट्रैकिंग के साथ बजट की बर्बादी रोकें और मापने योग्य ROAS प्राप्त करें
