वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली सीएसएस

वेब पर परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकें

स्टाइल लिखने और लेआउट बनाने के तरीके से, रीयल टाइम में किसी पेज की परफ़ॉर्मेंस की मेट्रिक पर काफ़ी असर पड़ सकता है. यह बात खास तौर पर, लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस) और सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) के लिए सही है.

इस लेख में, वेब विटल को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकों के बारे में बताया गया है. इन ऑप्टिमाइज़ेशन को पेज के अलग-अलग हिस्सों के हिसाब से बांटा गया है: लेआउट, इमेज, फ़ॉन्ट, ऐनिमेशन, और लोडिंग. साथ ही, हम उदाहरण के तौर पर दिए गए पेज को बेहतर बनाने के बारे में भी जानेंगे:

लेआउट

DOM में कॉन्टेंट डालना

आस-पास का कॉन्टेंट लोड होने के बाद, पेज में कॉन्टेंट डालने पर, पेज पर मौजूद बाकी सभी कॉन्टेंट नीचे की ओर धकेल दिया जाता है. इससे लेआउट में बदलाव होता है.

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

पहचानें

Lighthouse का "बड़े लेआउट शिफ़्ट से बचें" ऑडिट, पेज के उन एलिमेंट की पहचान करता है जो बदल गए हैं. इस डेमो के लिए, नतीजे इस तरह दिखते हैं:

इन नतीजों में कुकी की सूचना शामिल नहीं है, क्योंकि कुकी की सूचना लोड होने पर, वह अपने-आप शिफ़्ट नहीं हो रही है. इसके बजाय, इससे पेज पर उसके नीचे मौजूद आइटम (यानी, 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 के बारे में साफ़ तौर पर जानकारी न देने वाली इमेज की पहचान करने के लिए, Lighthouse के "इमेज एलिमेंट की चौड़ाई और ऊंचाई के बारे में साफ़ तौर पर जानकारी दी गई है" ऑडिट का इस्तेमाल करें.

इस उदाहरण में, हीरो इमेज और लेख की इमेज, दोनों में 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 जैसी सीएसएस प्रॉपर्टी का इस्तेमाल करके, इन ऐनिमेशन को बेहतर परफ़ॉर्म करने वाले ऐनिमेशन से बदला जा सकता है. ज़्यादा जानकारी के लिए, बेहतर परफ़ॉर्मेंस वाले CSS ऐनिमेशन बनाने का तरीका देखें.

पहचानें

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);
  }
}

क्रिटिकल सीएसएस

स्टाइलशीट, पेज को रेंडर होने से रोक रही हैं. इसका मतलब है कि जब ब्राउज़र को कोई स्टाइलशीट मिलती है, तो वह दूसरे संसाधनों को तब तक डाउनलोड करना बंद कर देता है, जब तक कि वह स्टाइलशीट को डाउनलोड और पार्स नहीं कर लेता. इससे एलसीपी में देरी हो सकती है. परफ़ॉर्मेंस को बेहतर बनाने के लिए, इस्तेमाल न की गई सीएसएस हटाएं, ज़रूरी सीएसएस को इनलाइन करें, और ग़ैर-ज़रूरी सीएसएस को बाद में लोड होने के लिए सेट करें.

नतीजा

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