Cumulative Layout Shift (CLS)

इमेज/विज्ञापनों की धीमी लोडिंग, asynchronous व्यवहार, dynamic DOM बदलाव आदि के कारण

वेब पेज का लेआउट कितना बदलता है, इसे मापकर

यूज़र से गलत क्लिक करवाने वाली visual instability को जांचने वाला यूज़र-केंद्रित performance metric

"अच्छा CLS स्कोर 0.1 या उससे कम है"

Layout Instability API, Layout Shift Score नाम का एक measurement value प्रदान करता है

- Layout Shift Score = impact fraction ( कितने आकार की object move होती है ) * distance fraction ( कितना ज्यादा move होती है )

- यूज़र की action से लेआउट बदलना ठीक है - अगर 500ms के भीतर यूज़र input हुआ हो तो `hadRecentInput` सेट हो जाता है, इसलिए इसे calculation से बाहर किया जा सकता है

- `height`/`width` बदलने के बजाय, `transform:scale()` का उपयोग करें

- `top,right,bottom,left` बदलने के बजाय, `transform: translate()` का उपयोग करें

CLS को बेहतर बनाने के तरीके

- इमेज/वीडियो के लिए हमेशा size निर्धारित करें या CSS Aspect Ratio Boxes आदि से पहले से जगह सुरक्षित रखें

- यूज़र interaction को छोड़कर, content के ऊपर नया content न जोड़ें

- states के बीच बदलाव को CSS Transform आदि से animate करें

[kunggom]

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

[xguru]

कोरिया के समाचार प्रकाशकों के यहाँ विज्ञापन इतने ज़्यादा हैं, और वे विज्ञापन खुद भी इतने धीमे और टिमटिमाने वाले होते हैं, कि उनका मापना ही शायद बेकार है...

एक अलग बात करें तो, मैं https://github.com/disjukr/just-news और Tampermonkey का इस्तेमाल करके कोरियाई समाचार साइटों पर सिर्फ़ मुख्य लेख ही देखता हूँ। वेबसाइटें बहुत ज़्यादा बिखरी हुई लगती हैं।

[kunggom]

मैंने पहले Python में [ऐसा प्रोग्राम जो किसी मीडिया संस्थान के लेख का लिंक डालने पर उसे अपने-आप पोर्टल न्यूज़ आर्टिकल लिंक में बदल दे] बनाने की भी कोशिश की थी। लेकिन थोड़ा बेवकूफ़ी भरे तरीके से सोर्स कोड उड़ गया (गलती से सेव RAM drive में किया था, फिर reboot हो गया), और उसके बाद थोड़ा वैराग्य-सा आ गया(?) तो उसे छोड़ दिया।

[xguru]

यूज़र-केंद्रित performance metrics

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

मौजूदा load, DOMContentLoaded अच्छे metrics नहीं हैं

First contentful paint (FCP): जब स्क्रीन पर पहला content दिखना शुरू होता है

Largest contentful paint (LCP): जब पेज का सबसे बड़ा text block या image दिखता है

First input delay (FID): यूज़र इनपुट संभव होने के बाद ब्राउज़र को वास्तव में उस पर प्रतिक्रिया देने में लगने वाला समय

Time to Interactive (TTI): लोडिंग शुरू होने से लेकर यूज़र interaction संभव होने तक लगने वाला समय

Total blocking time (TBT): FCP और TTI के बीच का कुल समय

Cumulative layout shift (CLS): layout बदलाव का metric