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

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

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

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

लेआउट

डीओएम में कॉन्टेंट शामिल करना

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

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

पहचानें

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

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

पहचानें

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

समाधान

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

ज़रूरी सीएसएस

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

नतीजा

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