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

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

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

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

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

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

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

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

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

लेआउट शिफ़्ट की वजहों को समझना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इमेज पर 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 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए:

• अगर drive.jpg की ऊंचाई 360 पिक्सल है, तो चौड़ाई 360 x (16 / 9) = 640 पिक्सल होगी
• अगरgoogle.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 का इस्तेमाल करने से पैरंट एलिमेंट का साइज़ ज़रूरत के मुताबिक बढ़ जाता है और लेआउट शिफ़्ट का असर कम होता है. वहीं, खाली एलिमेंट का डिफ़ॉल्ट साइज़ 0 पिक्सल होना चाहिए.

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

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

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

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

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

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

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

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

ऐनिमेशन

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

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

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

वेब फ़ॉन्ट

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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