संचयी लेआउट शिफ्ट (सीएलएस)

संचयी लेआउट शिफ्ट किसी पेज के जीवनकाल के दौरान दिखाई देने वाली सामग्री में होने वाली अप्रत्याशित हलचल को मापकर दृश्य अस्थिरता का आकलन करता है। यह Google के मुख्य वेब मापदंडों में से एक है, और लोडिंग और प्रतिक्रियाशीलता मापों के विपरीत, यह एक इकाई रहित स्कोर है, न कि अवधि, जिसकी गणना शिफ्ट से प्रभावित व्यूपोर्ट के अनुपात और सामग्री द्वारा तय की गई दूरी के आधार पर की जाती है। Google द्वारा निर्धारित सीमा के अनुसार, 0.1 या उससे कम को वास्तविक उपयोगकर्ता अनुभवों के 75वें प्रतिशत पर अच्छा माना जाता है।

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

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

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

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

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

क्योंकि समस्या के कारण आमतौर पर किसी एक घटक में नहीं बल्कि टेम्प्लेट, विज्ञापन एकीकरण और तृतीय-पक्ष एम्बेड में निहित होते हैं, इसलिए समाधान के लिए प्रत्येक के लिए जिम्मेदार टीमों के बीच समन्वय की आवश्यकता होती है। व्यवहार में यह एक मानक प्रक्रिया है। वेब प्रदर्शन यह एक ऐसा कार्य है, और यह उन क्षेत्रों में से एक है जहां व्यावसायिक परिणामों से सीधा संबंध होता है, क्योंकि उत्पाद या चेकआउट पृष्ठ पर लेआउट की अस्थिरता गलत टैप और परित्याग का कारण बनती है। यूएक्स ऑडिट अंतर्निहित तकनीकी कारण की पहचान किए बिना ही ये समस्याएं उपयोगिता संबंधी विफलताओं के रूप में सामने आ सकती हैं।