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

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

Addy Osmani

Barry Pollard

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इस उदाहरण में, CrUX, Lighthouse की तुलना में बहुत ज़्यादा सीएलएस मेज़र करता है.

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

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

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

Lighthouse की सीएलएस से जुड़ी गड़बड़ी की पूरी जानकारी.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

डाइमेंशन के बिना इमेज

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

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

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

Lighthouse 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 पिक्सल होगी
• अगर drive.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 में अब किसी <picture> एलिमेंट में मौजूद <source> एलिमेंट पर width और height सेट करने की सुविधा उपलब्ध है:

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

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

यह पक्का करके सीएलएस को कम करना कि पेज, bfcache की ज़रूरी शर्तें पूरी करते हों

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

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

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

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

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

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

नतीजा

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