कुल लेआउट शिफ़्ट ऑप्टिमाइज़ करें

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, अचानक लेआउट में बदलाव होने से रोकने का तरीका जानें

Addy Osmani

Barry Pollard

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

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

उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, यह ज़रूरी है कि साइटों का सीएलएस 0.1 या उससे कम हो. हालांकि, यह ज़रूरी है कि साइट पर कम से कम 75% विज़िट हों.

सीएलएस की अच्छी वैल्यू 0.1 या इससे कम है. खराब वैल्यू 0.25 से ज़्यादा हैं.

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

इस गाइड में, हम लेआउट शिफ़्ट की आम वजहों को ऑप्टिमाइज़ करने के बारे में जानकारी देंगे.

सीएलएस खराब होने की सबसे सामान्य वजहें ये हैं:

• बिना डाइमेंशन वाली इमेज.
• बिना डाइमेंशन वाले विज्ञापन, एम्बेड, और iframe.
• डाइनैमिक तौर पर इंजेक्ट किया गया कॉन्टेंट, जैसे कि विज्ञापन, एम्बेड, और डाइमेंशन के बिना iframes.
• वेब फ़ॉन्ट.

ध्यान दें: इस गाइड में मौजूद कॉन्टेंट के बारे में विज़ुअल की मदद से खास जानकारी पाने के लिए, Google I/O 2020 का 'वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के लिए Optimize' वीडियो देखें:

लेआउट में बदलाव होने की वजहों को समझना

सीएलएस से जुड़ी आम समस्याओं के समाधान देखने से पहले, अपने सीएलएस स्कोर को समझना ज़रूरी है. साथ ही, यह भी समझना ज़रूरी है कि बदलाव कहां से आ रहे हैं.

लैब टूल बनाम फ़ील्ड में सीएलएस

आम तौर पर, डेवलपर यह सोचते हैं कि Chrome UX रिपोर्ट (CrUX) से मेज़र किया गया सीएलएस गलत है. ऐसा इसलिए होता है, क्योंकि यह सीएलएस, Chrome DevTools या अन्य लैब टूल से मेज़र किए गए सीएलएस से मेल नहीं खाता. ऐसा हो सकता है कि Lighthouse जैसे वेब परफ़ॉर्मेंस लैब टूल, किसी पेज का पूरा सीएलएस न दिखाएं. ऐसा इसलिए, क्योंकि वे आम तौर पर वेब की परफ़ॉर्मेंस से जुड़ी कुछ मेट्रिक को मेज़र करने के लिए पेज पर सामान्य तरीके से लोड होते हैं और कुछ दिशा-निर्देश देते हैं. हालांकि, Lighthouse यूज़र फ़्लो की मदद से, डिफ़ॉल्ट पेज लोड ऑडिट के अलावा भी अन्य चीज़ों को मेज़र किया जा सकता है.

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

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

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

PageSpeed Insights, यूज़र-पर्सीव्ड, दोनों तरह की गतिविधियों की जानकारी दिखाता है "जानें कि आपके असली उपयोगकर्ता क्या अनुभव कर रहे हैं" में मौजूद यूआरएल से सीएलएस सेक्शन, साथ ही, लैब पर आधारित लोड सीएलएस की मदद से, "परफ़ॉर्मेंस से जुड़ी समस्याओं का विश्लेषण करें" सेक्शन में जाएं. ऐसा हो सकता है कि इन वैल्यू में अंतर, लोड होने के बाद वाले सीएलएस की वजह से हो.

इस उदाहरण में, CrUX, लाइटहाउस की तुलना में काफ़ी बड़े सीएलएस को मेज़र करता है.

ध्यान दें: PageSpeed Insights, यूआरएल-लेवल का डेटा तब दिखाएगा, जब वह मौजूद होगा. अगर वह मौजूद नहीं होगा, तो ऑरिजिन-लेवल का डेटा दिखाने की कोशिश की जाएगी. हमेशा यह देखें कि कौनसा डेटा दिख रहा है, ताकि आप सीएलएस से जुड़ी उस समस्या को ट्रैक करने में समय बर्बाद न करें जो आपके ऑरिजिन के दूसरे पेजों पर मौजूद है! पिछले उदाहरण में, यह देखा जा सकता है कि यह यूआरएल-लेवल का डेटा है, जैसा कि इमेज में सबसे ऊपर दाईं ओर दिखाया गया है.

सीएलएस लोड होने से जुड़ी समस्याओं की पहचान करना

जब PageSpeed Insights के CrUX और Lighthouse CLS के स्कोर को बड़े पैमाने पर अलाइन किया जाता है, तो आम तौर पर इससे यह पता चलता है कि लोड सीएलएस की समस्या है. इसका पता लाइटहाउस से लगाया गया है. इस मामले में, Lighthouse दो ऑडिट की मदद से, चौड़ाई और ऊंचाई की जानकारी न होने की वजह से सीएलएस की समस्या पैदा करने वाली इमेज के बारे में ज़्यादा जानकारी देगा. साथ ही, पेज लोड होने के दौरान शिफ़्ट हुए सभी एलिमेंट की सूची भी बनाएगा. साथ ही, सीएलएस में उनके योगदान की जानकारी भी देगा. सीएलएस ऑडिट को फ़िल्टर करके, इन ऑडिट को देखा जा सकता है:

लाइटहाउस की सीएलएस डाइग्नोस्टिक्स की ज़्यादा जानकारी.

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

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

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

सीएलएस की लोड होने के बाद की समस्याओं का पता लगाना

CrUX और Lighthouse के सीएलएस स्कोर के बीच अंतर होने का मतलब है कि आपके पेज पर लोड होने के बाद, सीएलएस की परफ़ॉर्मेंस खराब है. फ़ील्ड डेटा के बिना, इन बदलावों को ट्रैक करना मुश्किल हो सकता है. फ़ील्ड डेटा इकट्ठा करने के बारे में जानने के लिए, फ़ील्ड में सीएलएस एलिमेंट मेज़र करना लेख पढ़ें.

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

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

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

ज़्यादा जानकारी के लिए, लेआउट शिफ़्ट डीबग करना लेख पढ़ें.

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

फ़ील्ड में सीएलएस एलिमेंट को मेज़र करना

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

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

ध्यान दें: web-vitals लाइब्रेरी के साथ-साथ फ़ील्ड में सीएलएस को मेज़र करने वाले आरयूएम (रीयल यूज़र मेज़रमेंट) सलूशन, CrUX डेटा से अलग नतीजे दिखा सकते हैं. इस बारे में CrUX डेटा, मेरे आरयूएम डेटा से अलग क्यों है? पोस्ट में बताया गया है. खास तौर पर, iframes में होने वाले सीएलएस को वेब एपीआई से मेज़र नहीं किया जा सकता. हालांकि, यह उपयोगकर्ता को दिखता है और इसलिए, इसे CrUX में शामिल किया जाता है. इसलिए, सीएलएस से जुड़ी समस्याओं की पहचान करने के लिए फ़ील्ड डेटा काफ़ी अहम हो सकता है. हालांकि, ध्यान रखें कि कुछ मामलों में यह डेटा अधूरा हो सकता है.

सीएलएस की आम वजहें

सीएलएस की वजहों की पहचान करने के बाद, समस्याओं को ठीक करने पर काम किया जा सकता है. इस सेक्शन में, हम आपको सीएलएस की कुछ आम वजहें बताएंगे. साथ ही, इनसे बचने के तरीके भी बताएंगे.

बिना डाइमेंशन वाली इमेज

अपनी इमेज और वीडियो एलिमेंट में, साइज़ के width और height एट्रिब्यूट को हमेशा शामिल करें. आप चाहें, तो सीएसएस aspect-ratio या इससे मिलती-जुलती वैल्यू का इस्तेमाल करके, ज़रूरी जगह बुक करें. इससे यह पक्का होता है कि इमेज लोड होने के दौरान ब्राउज़र, दस्तावेज़ में सही जगह तय कर सके.

ऐसी इमेज जिनकी चौड़ाई और ऊंचाई की जानकारी नहीं दी गई है.

चौड़ाई और ऊंचाई की जानकारी देने वाली इमेज.

सीएलएस पर इमेज के डाइमेंशन सेट करने का लाइटहाउस 6.0 का असर.

इमेज पर width और height एट्रिब्यूट का इतिहास

वेब के शुरुआती दिनों में, डेवलपर अपने <img> टैग में width और height एट्रिब्यूट जोड़ते थे. इससे यह पक्का किया जाता था कि ब्राउज़र पर इमेज फ़ेच करने से पहले पेज पर ज़रूरत के मुताबिक जगह उपलब्ध हो. इससे रीफ़्लो और री-लेआउट कम हो जाएंगे.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

इस उदाहरण में, width और height में यूनिट शामिल नहीं हैं. ये "पिक्सल" डाइमेंशन से यह पक्का होगा कि ब्राउज़र ने पेज के लेआउट में 640x360 का हिस्सा रिज़र्व किया है. इमेज इस जगह में फ़िट हो जाएगी, भले ही वह इमेज इससे मेल खाती हो या नहीं.

रिस्पॉन्सिव वेब डिज़ाइन के आने के बाद, डेवलपर ने width और height को हटाना शुरू कर दिया. इसके बजाय, इमेज का साइज़ बदलने के लिए सीएसएस का इस्तेमाल किया जाने लगा:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

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

ऐसे में, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल किया जाता है. किसी इमेज का आसपेक्ट रेशियो, उसकी चौड़ाई और ऊंचाई का अनुपात होता है. आम तौर पर, इसे दो संख्याओं के तौर पर दिखाया जाता है. इन संख्याओं को कोलन से अलग किया जाता है. जैसे, 16:9 या 4:3. x:y आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए, इमेज की चौड़ाई x यूनिट चौड़ी और y यूनिट ऊंची है.

इसका मतलब है कि अगर हमें एक डाइमेंशन की जानकारी है, तो दूसरे डाइमेंशन का पता लगाया जा सकता है. 16:9 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए:

• अगर puppy.jpg की ऊंचाई 360 पिक्सल है, तो चौड़ाई 360 x (16 / 9) = 640 पिक्सल होगी
• अगर puppy.jpg की चौड़ाई 640 पिक्सल है, तो ऊंचाई 640 x (9 / 16) = 360 पिक्सल होगी

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

इमेज डाइमेंशन सेट करने के लिए सबसे सही आधुनिक तरीका

क्योंकि मॉडर्न ब्राउज़र इमेज का डिफ़ॉल्ट आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करते हैं. इमेज के width और height एट्रिब्यूट के हिसाब से, लेआउट शिफ़्ट रोका जा सकता है उन एट्रिब्यूट को इमेज पर सेट करके और पिछले सीएसएस को स्टाइल शीट.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

इसके बाद, सभी ब्राउज़र एलिमेंट के मौजूदा width और height एट्रिब्यूट के आधार पर, डिफ़ॉल्ट आसपेक्ट रेशियो जोड़ देंगे.

यह इमेज लोड होने से पहले, width और height एट्रिब्यूट के आधार पर आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का हिसाब लगाता है. यह जानकारी, लेआउट कैलकुलेशन की शुरुआत में ही मिल जाती है. जैसे ही किसी इमेज को कोई खास चौड़ाई (जैसे कि width: 100%) बताया जाता है, आसपेक्ट रेशियो का इस्तेमाल करके ऊंचाई कैलकुलेट की जाती है.

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

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

एचटीएमएल एट्रिब्यूट स्टाइल सोर्स का इस्तेमाल करके Safari इसी तरह काम करता है. Firefox अपने इंस्पेक्टर पैनल में इस कैलकुलेटेड aspect-ratio को नहीं दिखाता, लेकिन लेआउट के लिए इसका इस्तेमाल करता है.

ऊपर दिए गए कोड का auto हिस्सा ज़रूरी है, क्योंकि इससे इमेज डाउनलोड होने के बाद, इमेज के डाइमेंशन डिफ़ॉल्ट आसपेक्ट रेशियो को बदल देते हैं. अगर इमेज के डाइमेंशन अलग-अलग हैं, तो इमेज लोड होने के बाद भी लेआउट में कुछ बदलाव होता है. हालांकि, इससे यह पक्का हो जाता है कि इमेज के उपलब्ध होने पर भी, इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल किया जा रहा है, ताकि एचटीएमएल गलत हो. असल आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) डिफ़ॉल्ट से अलग होने पर भी, बिना डाइमेंशन वाली इमेज के 0x0 डिफ़ॉल्ट साइज़ की तुलना में, कम लेआउट शिफ़्ट होता है.

सलाह: अगर आपको आसपेक्ट रेशियो समझने में परेशानी हो रही है, तो आपकी मदद के लिए एक आसान कैलकुलेटर उपलब्ध है.

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के बारे में ज़्यादा जानने के लिए, रिस्पॉन्सिव इमेज के बारे में बेहतर तरीके से सोचें. इसके लिए, मीडिया के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के साथ पेज लोड होने की सुविधा के बिना, जैंक के बिना पेज देखें.

अगर आपकी इमेज किसी कंटेनर में है, तो सीएसएस का इस्तेमाल करके इमेज का साइज़, कंटेनर की चौड़ाई के हिसाब से बदला जा सकता है. इमेज की ऊंचाई के लिए, किसी तय वैल्यू का इस्तेमाल करने से बचने के लिए, हम height: auto; को सेट करते हैं.

img {
  height: auto;
  width: 100%;
}

रिस्पॉन्सिव इमेज के बारे में क्या?

रिस्पॉन्सिव इमेज के साथ काम करते समय, srcset उन इमेज के बारे में बताता है जिन्हें ब्राउज़र चुन सकता है. साथ ही, यह भी बताता है कि हर इमेज का साइज़ क्या है. <img> की चौड़ाई और ऊंचाई के एट्रिब्यूट सेट किए जा सकें, इसके लिए हर इमेज का आसपेक्ट रेशियो एक जैसा होना चाहिए.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

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

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox और Safari अबwidthheight दिए गए <picture> एलिमेंट में <source> एलिमेंट:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

विज्ञापन, एम्बेड, और देर से लोड किया गया अन्य कॉन्टेंट

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

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

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

इन सभी समस्याओं को हल करने की तकनीकें एक जैसी हैं. इन दोनों में मुख्य अंतर यह है कि डाले जाने वाले कॉन्टेंट पर आपका कितना कंट्रोल है. अगर इसे किसी तीसरे पक्ष ने डाला है, जैसे कि विज्ञापन पार्टनर, तो हो सकता है कि आपको यह पता न हो कि डाले जाने वाले कॉन्टेंट का साइज़ कितना होगा. साथ ही, हो सकता है कि आप उन एम्बेड में होने वाले लेआउट में बदलाव न कर पाएं.

देर से लोड होने वाले कॉन्टेंट के लिए, जगह खाली करें

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

एक तरीका यह है कि जगह बुक करने के लिए min-height सीएसएस नियम जोड़ें. उदाहरण के लिए, विज्ञापनों जैसे रिस्पॉन्सिव कॉन्टेंट के लिए, aspect-ratio सीएसएस प्रॉपर्टी का इस्तेमाल उसी तरह करें जिस तरह से ब्राउज़र दिए गए डाइमेंशन वाली इमेज के लिए, इसका इस्तेमाल अपने-आप करते हैं.

विज्ञापनों के लिए जगह रिज़र्व करने से, लेआउट शिफ़्ट नहीं हो सकते

मीडिया क्वेरी का इस्तेमाल करके, आपको डिवाइस के साइज़ के हिसाब से विज्ञापन या प्लेसहोल्डर के साइज़ में होने वाले छोटे-मोटे अंतरों को ध्यान में रखना पड़ सकता है.

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

इसके बजाय, शुरुआती साइज़ को सबसे छोटे साइज़ पर सेट किया जा सकता है. साथ ही, बड़े कॉन्टेंट के लिए कुछ हद तक बदलाव स्वीकार किया जा सकता है. जैसा कि पहले सुझाया गया था, min-height का इस्तेमाल करने से पैरंट एलिमेंट को ज़रूरत के हिसाब से बड़ा किया जा सकता है. साथ ही, खाली एलिमेंट के 0px डिफ़ॉल्ट साइज़ की तुलना में, लेआउट शिफ़्ट के असर को कम किया जा सकता है.

रिज़र्व किए गए स्पेस को छोटा होने से बचाने के लिए, प्लेसहोल्डर दिखाएं. उदाहरण के लिए, कोई विज्ञापन नहीं दिखता. एलिमेंट के लिए अलग से रखी गई जगह को हटाने से, कॉन्टेंट शामिल करने जितना ही सीएलएस होता है.

देर से लोड होने वाले कॉन्टेंट को व्यूपोर्ट में नीचे रखें

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

उपयोगकर्ता के इंटरैक्शन के बिना नया कॉन्टेंट डालने से बचें

हो सकता है कि आपको लेआउट में बदलाव का अनुभव हुआ हो. ऐसा, साइट लोड करते समय व्यूपोर्ट के ऊपर या नीचे पॉप-इन होने वाले यूज़र इंटरफ़ेस (यूआई) की वजह से हुआ हो. विज्ञापनों की तरह ही, ऐसा अक्सर बैनर और फ़ॉर्म के साथ होता है, जो पेज के बाकी कॉन्टेंट में बदलाव करते हैं:

डायनामिक सामग्री, जिसके लिए स्थान आरक्षित नहीं है.

अगर आपको इस तरह के यूज़र इंटरफ़ेस (यूआई) दिखाने हैं, तो इसके लिए व्यूपोर्ट में पहले से ज़रूरत के मुताबिक जगह सुरक्षित कर लें. उदाहरण के लिए, प्लेसहोल्डर या स्केलेटन यूआई का इस्तेमाल करके. इससे, पेज लोड होने पर, कॉन्टेंट अचानक एक जगह से दूसरी जगह नहीं जाएगा. इसके अलावा, यह पक्का करें कि एलिमेंट, दस्तावेज़ के फ़्लो का हिस्सा न हो. इसके लिए, जहां ज़रूरी हो वहां कॉन्टेंट को ओवरले करें. इस तरह के कॉम्पोनेंट के बारे में ज़्यादा सुझावों के लिए, कुकी नोटिस के लिए सबसे सही तरीके पोस्ट देखें.

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

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

अचानक से लेआउट शिफ़्ट हुए बिना, डाइनैमिक कॉन्टेंट लोड होने के उदाहरण. बाईं ओर: Twitter पर लाइव फ़ीड का कॉन्टेंट लोड हो रहा है. दाईं ओर: Chloé की वेबसाइट पर "ज़्यादा लोड करें" का उदाहरण. देखें कि YNAP टीम ने ज़्यादा कॉन्टेंट लोड करते समय, सीएलएस के लिए कैसे ऑप्टिमाइज़ किया.

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

ऐनिमेशन

सीएसएस प्रॉपर्टी की वैल्यू में बदलाव करने पर, ब्राउज़र को इन बदलावों पर प्रतिक्रिया देनी पड़ सकती है. box-shadow और box-sizing जैसी कुछ वैल्यू, री-लेआउट, पेंट, और कंपोज़िट को ट्रिगर करती हैं. top और left प्रॉपर्टी को बदलने से, लेआउट शिफ़्ट भी होते हैं, भले ही किसी एलिमेंट को मूव किया जा रहा हो, वह अपनी ही लेयर पर हो. इन प्रॉपर्टी का इस्तेमाल करके ऐनिमेट करने से बचें.

री-लेआउट को ट्रिगर किए बिना, सीएसएस की अन्य प्रॉपर्टी में बदलाव किया जा सकता है. इनमें एलिमेंट का अनुवाद करने, स्केल करने, घुमाने या स्क्वीज़ करने के लिए, transform ऐनिमेशन का इस्तेमाल करना शामिल है.

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

वेब फ़ॉन्ट

वेब फ़ॉन्ट डाउनलोड होने से पहले, आम तौर पर इनमें से किसी एक तरीके से वेब फ़ॉन्ट डाउनलोड और रेंडर किए जाते हैं:

• फ़ॉलबैक फ़ॉन्ट को वेब फ़ॉन्ट से बदल दिया जाता है, जिससे बिना स्टाइल वाले टेक्स्ट (FOUT) का फ़्लैश बनता है.
• "इनविज़िबल" टेक्स्ट को फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करके तब तक दिखाया जाता है, जब तक कोई वेब फ़ॉन्ट उपलब्ध नहीं हो जाता और टेक्स्ट को दिखाया नहीं जाता (FOIT—इनविज़िबल टेक्स्ट का फ़्लैश).

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

टेक्स्ट के शिफ़्ट होने को कम करने में, नीचे दिए गए टूल आपकी मदद कर सकते हैं:

• font-display: optional, फिर से लेआउट करने से बच सकता है, क्योंकि वेब फ़ॉन्ट का इस्तेमाल सिर्फ़ तब किया जाता है, जब वह शुरुआती लेआउट के समय उपलब्ध हो.
• पक्का करें कि सही फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया गया है. उदाहरण के लिए, font-family: "Google Sans", sans-serif; का इस्तेमाल करने से यह पक्का होगा कि "Google Sans" लोड होने के दौरान, ब्राउज़र के sans-serif फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया जाए. सिर्फ़ font-family: "Google Sans" का इस्तेमाल करके फ़ॉलबैक फ़ॉन्ट तय नहीं करने का मतलब यह होगा कि डिफ़ॉल्ट फ़ॉन्ट का इस्तेमाल किया गया है जो Chrome पर "Times" है—यह एक सेरिफ़ फ़ॉन्ट है, जो डिफ़ॉल्ट sans-serif फ़ॉन्ट से खराब मैच है.
• नए size-adjust, ascent-override, descent-override, और line-gap-override एपीआई का इस्तेमाल करके, फ़ॉलबैक फ़ॉन्ट और वेब फ़ॉन्ट के साइज़ के अंतर को कम करें. इसके बारे में, बेहतर फ़ॉन्ट फ़ॉलबैक पोस्ट में बताया गया है.
• फ़ॉन्ट लोडिंग एपीआई ज़रूरी फ़ॉन्ट पाने में लगने वाले समय को कम कर सकता है.
• <link rel=preload> का इस्तेमाल करके, अहम वेब फ़ॉन्ट को जल्द से जल्द लोड करें. पहले से लोड किए गए फ़ॉन्ट की वजह से सबसे पहले पेंट किए जाने की संभावना ज़्यादा होगी. इस मामले में, लेआउट शिफ़्टिंग नहीं होगी.

फ़ॉन्ट इस्तेमाल करने के सबसे सही अन्य तरीकों के बारे में जानने के लिए, फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीके लेख पढ़ें.

सीएलएस कम करें. इसके लिए, पक्का करें कि पेज, बीएफ़कैश की सुविधा के लिए ज़रूरी शर्तें पूरी करते हों

सीएलएस स्कोर को कम रखने के लिए, यह पक्का करना कि आपके वेब पेज बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) की ज़रूरी शर्तें पूरी करते हों, एक बहुत ही असरदार तरीका है.

किसी पेज से दूसरे पेज पर जाने के बाद, bfcache कुछ समय के लिए उस पेज को ब्राउज़र की मेमोरी में सेव रखता है. इससे, उस पेज पर वापस जाने पर, वह ठीक वैसा ही दिखता है जैसा आपने उसे छोड़ा था. इसका मतलब है कि पूरी तरह से लोड होने वाला पेज तुरंत उपलब्ध हो जाता है. इसमें कोई बदलाव नहीं होता. लोड होने के दौरान इसकी शुरुआत नीचे दी गई वजहों से हो सकती है.

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

पीछे और आगे का नेविगेशन, कई साइटों पर सामान्य है. उदाहरण के लिए, किसी कॉन्टेंट पेज, कैटगरी पेज या खोज के नतीजों पर वापस जाना.

जब इस सुविधा को Chrome पर रोल आउट किया गया था, तब हमें सीएलएस में काफ़ी सुधार देखने को मिले.

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

नतीजा

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