वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकें
स्टाइल लिखने और लेआउट बनाने के तरीके से, रीयल टाइम में किसी पेज की परफ़ॉर्मेंस की मेट्रिक पर काफ़ी असर पड़ सकता है. यह खास तौर पर कुल लेआउट शिफ़्ट (सीएलएस) और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए सही है.
इस लेख में, वेब विटल को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकों के बारे में बताया गया है. इन ऑप्टिमाइज़ेशन को पेज के अलग-अलग हिस्सों के हिसाब से बांटा गया है: लेआउट, इमेज, फ़ॉन्ट, ऐनिमेशन, और लोडिंग. इस काम में, हम एक उदाहरण पेज को बेहतर बनाने के बारे में जानेंगे:
लेआउट
DOM में कॉन्टेंट डालना
आस-पास का कॉन्टेंट लोड होने के बाद, पेज में कॉन्टेंट डालने पर, पेज पर मौजूद बाकी सभी कॉन्टेंट नीचे की ओर धंस जाता है. इससे लेआउट में बदलाव होता है.
कुकी की सूचनाएं, खास तौर पर पेज पर सबसे ऊपर मौजूद सूचनाएं, इस समस्या का एक सामान्य उदाहरण हैं. पेज के अन्य एलिमेंट, जैसे कि विज्ञापन और एम्बेड किए गए कॉन्टेंट के लोड होने पर, अक्सर इस तरह का लेआउट शिफ़्ट होता है.
पहचानें
लाइटहाउस "बड़े लेआउट शिफ़्ट से बचें" ऑडिट से, उन पेज एलिमेंट की पहचान होती है जो शिफ़्ट हो गए हैं. इस डेमो के लिए नतीजे कुछ इस तरह से दिखते हैं:
कुकी की सूचना इन नतीजों में शामिल नहीं है, क्योंकि कुकी के लोड होने पर वह सूचना शिफ़्ट नहीं हो रही है. इसके बजाय, इससे पेज पर उसके नीचे मौजूद आइटम (यानी, div.hero और article) शिफ़्ट हो जाते हैं. लेआउट शिफ़्ट की पहचान करने और उन्हें ठीक करने के बारे में ज़्यादा जानने के लिए, लेआउट शिफ़्ट की गड़बड़ी को डीबग करना लेख पढ़ें.
ठीक करें
कुकी की सूचना को पेज पर सबसे नीचे रखें. इसके लिए, एब्सोलूट या फ़िक्स की गई पोज़िशन का इस्तेमाल करें.
पहले:
.banner {
position: sticky;
top: 0;
}
बाद में:
.banner {
position: fixed;
bottom: 0;
}
लेआउट में हुए इस बदलाव को ठीक करने का एक और तरीका यह है कि स्क्रीन पर सबसे ऊपर, कुकी की सूचना के लिए जगह तय की जाए. यह तरीका भी उतना ही असरदार है. ज़्यादा जानकारी के लिए, कुकी नोटिस के सबसे सही तरीके देखें.
इमेज
इमेज और सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
आम तौर पर, इमेज किसी पेज पर सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) एलिमेंट होती हैं. अन्य पेज एलिमेंट जो एलसीपी एलिमेंट हो सकते हैं, उनमें टेक्स्ट ब्लॉक और वीडियो पोस्टर इमेज शामिल हैं. एलसीपी एलिमेंट के लोड होने के समय से तय होता है कि एलसीपी किस समय होगा.
यह ध्यान रखना ज़रूरी है कि पेज का एलसीपी एलिमेंट, पेज लोड होने के साथ-साथ अलग-अलग हो सकता है. यह इस बात पर निर्भर करता है कि पेज पहली बार दिखने पर, उपयोगकर्ता को कौनसा कॉन्टेंट दिखता है. उदाहरण के लिए, इस डेमो में, कुकी सूचना का बैकग्राउंड, हीरो इमेज, और लेख का टेक्स्ट एलसीपी के कुछ संभावित एलिमेंट हैं.
उदाहरण के तौर पर दी गई साइट में, कुकी की सूचना की बैकग्राउंड इमेज असल में एक बड़ी इमेज है. एलसीपी को बेहतर बनाने के लिए, इफ़ेक्ट बनाने के लिए इमेज लोड करने के बजाय, सीएसएस में ग्रेडिएंट पेंट किया जा सकता है.
ठीक करें
इमेज के बजाय, सीएसएस ग्रेडिएंट का इस्तेमाल करने के लिए .banner सीएसएस बदलें:
पहले:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
बाद में:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
इमेज और लेआउट शिफ़्ट
ब्राउज़र, इमेज लोड होने के बाद ही उसका साइज़ तय कर सकते हैं. अगर पेज रेंडर होने के बाद इमेज लोड होती है, लेकिन इमेज के लिए कोई जगह तय नहीं की गई है, तो इमेज दिखने पर लेआउट में बदलाव होता है. डेमो में, हीरो इमेज के लोड होने पर लेआउट शिफ़्ट हो रहा है.
पहचानें
साफ़ तौर पर width और height वाली इमेज की पहचान करने के लिए, लाइटहाउस के "इमेज एलिमेंट की चौड़ाई और ऊंचाई की जानकारी साफ़ तौर पर दी गई है" ऑडिट का इस्तेमाल करें.
इस उदाहरण में, हीरो इमेज और लेख की इमेज, दोनों में width और
height एट्रिब्यूट मौजूद नहीं हैं.
ठीक करें
लेआउट शिफ़्ट से बचने के लिए, इन इमेज पर width और height एट्रिब्यूट सेट करें.
पहले:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
बाद में:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
फ़ॉन्ट
फ़ॉन्ट की वजह से, टेक्स्ट रेंडर होने में देरी हो सकती है और लेआउट में बदलाव हो सकता है. इसलिए, फ़ॉन्ट को तेज़ी से डिलीवर करना ज़रूरी है.
देर से टेक्स्ट रेंडर होना
डिफ़ॉल्ट रूप से, अगर ब्राउज़र से जुड़े वेब फ़ॉन्ट अभी तक लोड नहीं हुए हैं, तो ब्राउज़र तुरंत टेक्स्ट एलिमेंट को रेंडर नहीं करेगा. ऐसा "बिना स्टाइल वाले टेक्स्ट का फ़्लैश" (FOUT) से बचने के लिए किया जाता है. कई मामलों में, इससे फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) में देरी होती है. कुछ मामलों में, इसकी वजह से सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) में देरी होती है.
लेआउट शिफ़्ट
फ़ॉन्ट बदलने की सुविधा, उपयोगकर्ता को तुरंत कॉन्टेंट दिखाने के लिए बेहतरीन है. हालांकि, इसकी वजह से लेआउट शिफ़्ट हो सकते हैं. ये लेआउट शिफ़्ट तब होते हैं, जब कोई वेब फ़ॉन्ट और इसका फ़ॉलबैक फ़ॉन्ट, पेज पर अलग-अलग जगह लेते हैं. इसी तरह के अनुपात वाले फ़ॉन्ट का इस्तेमाल करने से, इन लेआउट शिफ़्ट का साइज़ कम हो जाएगा.
पहचानें
किसी खास पेज पर लोड हो रहे फ़ॉन्ट देखने के लिए, DevTools में नेटवर्क टैब खोलें और फ़ॉन्ट के हिसाब से फ़िल्टर करें. फ़ॉन्ट बड़ी फ़ाइलें हो सकते हैं, इसलिए प्रदर्शन के लिए आम तौर पर कम फ़ॉन्ट का इस्तेमाल करना बेहतर होता है.
फ़ॉन्ट का अनुरोध करने में कितना समय लगता है, यह देखने के लिए समय टैब पर क्लिक करें. किसी फ़ॉन्ट का अनुरोध जितना जल्दी किया जाता है, उसे उतनी ही जल्दी लोड और इस्तेमाल किया जा सकता है.
किसी फ़ॉन्ट के लिए अनुरोध की चेन देखने के लिए, शुरू करने वाला टैब पर क्लिक करें. आम तौर पर, अनुरोध की चेन जितनी छोटी होती है, फ़ॉन्ट का अनुरोध उतनी जल्दी किया जा सकता है.
ठीक करें
यह डेमो, Google Fonts API का इस्तेमाल करता है. Google Fonts, <link> टैग या @import स्टेटमेंट के ज़रिए फ़ॉन्ट लोड करने का विकल्प देता है. <link> कोड स्निपेट में, preconnect संसाधन संकेत शामिल होता है. इससे, @import वर्शन का इस्तेमाल करने के मुकाबले, स्टाइलशीट की डिलीवरी तेज़ी से होगी.
काफ़ी हद तक, संसाधनों के संकेत को ब्राउज़र को यह बताने के तरीके के तौर पर समझा जा सकता है कि इसे कोई खास कनेक्शन सेट अप करना होगा या कोई खास संसाधन डाउनलोड करना होगा. इसलिए, ब्राउज़र इन कार्रवाइयों को प्राथमिकता देगा. रिसॉर्स हिंट का इस्तेमाल करते समय, ध्यान रखें कि किसी खास कार्रवाई की प्राथमिकता तय करने से ब्राउज़र रिसॉर्स को दूसरी कार्रवाइयों से हटा दिया जाता है. इसलिए, रिसॉर्स के सुझावों का इस्तेमाल सोच-समझकर करना चाहिए. ज़्यादा जानकारी के लिए, पेज की अनुमानित स्पीड को बेहतर बनाने के लिए, नेटवर्क कनेक्शन को पहले से सेट अप करना लेख पढ़ें.
अपनी स्टाइलशीट से यह @import स्टेटमेंट हटाएं:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
दस्तावेज़ के <head> में ये <link> टैग जोड़ें:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
ये लिंक टैग ब्राउज़र को Google Fonts इस्तेमाल करने वाले ऑरिजिन के साथ शुरुआती कनेक्शन बनाने और वह स्टाइलशीट लोड करने का निर्देश देते हैं जिसमें Montserrat और Roboto के लिए फ़ॉन्ट की जानकारी मौजूद होती है. इन <link> टैग को <head> में जल्द से जल्द डाला जाना चाहिए.
ऐनिमेशन
ऐनिमेशन से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर सबसे ज़्यादा असर तब पड़ता है, जब उनके लेआउट में बदलाव होता है. आपको दो तरह के ऐनिमेशन का इस्तेमाल करने से बचना चाहिए: लेआउट को ट्रिगर करने वाले ऐनिमेशन और "ऐनिमेशन जैसे" इफ़ेक्ट, जो पेज के एलिमेंट को मूव करते हैं. आम तौर पर, इन ऐनिमेशन को transform,
opacity, और
filter जैसी सीएसएस प्रॉपर्टी का इस्तेमाल करके, बेहतर परफ़ॉर्म करने वाले ऐनिमेशन से बदला जा सकता है. ज़्यादा जानकारी के लिए, बेहतरीन परफ़ॉर्मेंस वाली सीएसएस ऐनिमेशन बनाने का तरीका देखें.
पहचानें
Lighthouse का "कंपोज़िट नहीं किए गए ऐनिमेशन से बचें" ऑडिट, परफ़ॉर्म न करने वाले ऐनिमेशन की पहचान करने में मददगार हो सकता है.
ठीक करें
margin-left प्रॉपर्टी को ट्रांज़िशन करने के बजाय, transform: translateX() का इस्तेमाल करने के लिए, slideIn ऐनिमेशन सीक्वेंस बदलें.
पहले:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
बाद में:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
ज़रूरी सीएसएस
स्टाइलशीट, रेंडर होने से रोक रही हैं. इसका मतलब है कि जब ब्राउज़र को कोई स्टाइलशीट मिलती है, तो वह दूसरे संसाधनों को तब तक डाउनलोड करना बंद कर देता है, जब तक कि वह स्टाइलशीट को डाउनलोड और पार्स नहीं कर लेता. इससे एलसीपी में देरी हो सकती है. परफ़ॉर्मेंस को बेहतर बनाने के लिए, इस्तेमाल नहीं की गई सीएसएस को हटाएं, क्रिटिकल सीएसएस को इनलाइन करें, और गैर-ज़रूरी सीएसएस को हटाएं.
नतीजा
हालांकि, इसमें और भी सुधार किए जा सकते हैं. उदाहरण के लिए, इमेज को तेज़ी से डिलीवर करने के लिए इमेज कंप्रेस करने की सुविधा का इस्तेमाल किया जा सकता है. इन बदलावों से, इस साइट के वेब विटल्स में काफ़ी सुधार हुआ है. अगर यह कोई असल साइट होती, तो अगला चरण असल उपयोगकर्ताओं से परफ़ॉर्मेंस का डेटा इकट्ठा करना होता. इससे यह पता चलता है कि साइट ज़्यादातर उपयोगकर्ताओं के लिए, वेब विटल्स थ्रेशोल्ड को पूरा कर रही है या नहीं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के बारे में ज़्यादा जानने के लिए, वेबसाइट के बारे में जानें लेख पढ़ें.