CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) क्या है?

CLS मापता है कि कोई पेज लोड होने या उपयोग किए जाने के दौरान दृश्य तत्व (visible elements) अप्रत्याशित रूप से कितना स्थानांतरित (shift) होते हैं। यह स्कोर इकाई रहित (unitless) होता है और इसकी गणना impact fraction (व्यूपोर्ट का कितना हिस्सा प्रभावित हुआ है) और distance fraction (तत्व कितनी दूर स्थानांतरित हुए हैं) को गुणा करके की जाती है। CLS, LCP और INP के साथ Google के तीन Core Web Vitals में से एक है, और 75वें पर्सेंटाइल पर एक अच्छा स्कोर 0.1 या उससे कम है — 0.25 से ऊपर के किसी भी स्कोर को खराब माना जाता है।

CLS (Cumulative Layout Shift) क्यों महत्वपूर्ण है?

एक ऑनलाइन स्टोर में लेआउट का अचानक कूदना (layout jumps) सीधे तौर पर नुकसानदेह होता है: उदाहरण के लिए, एक खरीदार “खरीदें” (Buy) बटन पर टैप करने ही वाला होता है, लेकिन एक बैनर या देरी से लोड होने वाली छवि बटन को नीचे धकेल देती है और खरीदार का टैप किसी अन्य चीज़ पर पड़ जाता है। यह कन्वर्शन से ठीक पहले निराशा, गलत क्लिक और अविश्वास पैदा करता है। CLS Google के पेज अनुभव संकेतों (page experience signals) का भी हिस्सा है, इसलिए लगातार उच्च स्कोर रैंकिंग को नीचे खींच सकता है। एक स्थिर पेज अधिक तेज़ और अधिक पेशेवर महसूस कराता है — भले ही उसकी वास्तविक लोडिंग गति समान हो।

सामान्य उपयोग के मामले

• बिना आयाम (dimensions) वाले चित्र और वीडियो। width/height या aspect-ratio के बिना ब्राउज़र पहले से स्थान सुरक्षित नहीं कर पाता है, इसलिए मीडिया लोड होने पर सामग्री अचानक कूदती है — इसे सही ऑल्ट टेक्स्ट (alt text) के साथ जोड़ें।
• कुकी बैनर और पॉपअप। पेज के शीर्ष या मध्य में डाली गई सामग्री उसके नीचे की हर चीज़ को धकेल देती है।
• ऐप विजेट। समीक्षाएं (reviews), “हाल ही में देखे गए उत्पाद” (recently viewed), और अपसेल ब्लॉक जो बाकी पेज के बाद लोड होते हैं और लेआउट को पुनर्व्यवस्थित करते हैं।
• वेब फ़ॉन्ट। फ़ॉलबैक फ़ॉन्ट से अंतिम फ़ॉन्ट पर जाने से टेक्स्ट का आकार बदल सकता है और लेआउट शिफ्ट हो सकता है।
• विज्ञापन और आईफ्रेम जिनके लिए Above the Fold (अबोव द फोल्ड) क्षेत्र में कोई स्थान आरक्षित नहीं किया गया है।

शॉपिफाई का नजरिया

Shopify में, अधिकांश लेआउट शिफ्ट मुख्य प्लेटफ़ॉर्म के बजाय ऐप्स और थीम संपादन के कारण होते हैं। गतिशील ब्लॉक (dynamic blocks) के लिए हमेशा स्थान आरक्षित रखें, उत्पाद छवियों पर निश्चित आयाम सेट करें, और कुकी बैनर व पॉपअप को इस तरह लोड करें कि वे सामग्री को इधर-उधर न धकेलें। मोबाइल और डेस्कटॉप दोनों पर PageSpeed Insights या Lighthouse के साथ इसके प्रभाव को मापें, और Shopify एडमिन में Online Store के तहत गति रिपोर्ट पर नज़र रखें, जो Google Lighthouse डेटा पर आधारित है।