ऐनिमेशन के स्मूदनेस मेट्रिक की ओर

ऐनिमेशन को मेज़र करने, ऐनिमेशन फ़्रेम के बारे में सोचने का तरीका, और पेज को आसानी से इस्तेमाल करने लायक बनाने के बारे में जानें.

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

हम हाल ही में हुई कुछ प्रोग्रेस शेयर करना चाहते हैं. साथ ही, टूल के इस्तेमाल से जुड़े दिशा-निर्देश देना चाहते हैं और आने वाले समय में ऐनिमेशन के बेहतर होने से जुड़ी मेट्रिक के आइडिया के बारे में बातचीत करना चाहते हैं. हमेशा की तरह, हमें आपका सुझाव/राय पाकर खुशी होगी.

इस पोस्ट में तीन मुख्य विषयों के बारे में बताया गया है:

• ऐनिमेशन और ऐनिमेशन फ़्रेम के बारे में खास जानकारी.
• ऐनिमेशन के चलने के तरीके को मेज़र करने के बारे में हमारी मौजूदा सोच.
• लैब टूल का फ़ायदा पाने के लिए, आज ही कुछ काम के सुझाव पाएं.

ऐनिमेशन क्या होते हैं?

ऐनिमेशन से कॉन्टेंट को दिलचस्प बनाया जा सकता है! ऐनिमेशन की मदद से कॉन्टेंट को हिलाया जा सकता है. खास तौर पर, उपयोगकर्ता के इंटरैक्शन के जवाब में ऐसा किया जा सकता है. इससे, कॉन्टेंट को ज़्यादा स्वाभाविक, समझने लायक, और मज़ेदार बनाया जा सकता है.

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

ऐनिमेशन कैसे काम करते हैं?

रेंडरिंग पाइपलाइन में कुछ क्रम से चरण होते हैं:

1. स्टाइल: एलिमेंट पर लागू होने वाली स्टाइल का हिसाब लगाएं.
2. लेआउट: हर एलिमेंट के लिए ज्यामिति और पोज़िशन जनरेट करें.
3. पेंट: हर एलिमेंट के लिए, लेयर में पिक्सल भरें.
4. कंपोज़िट: स्क्रीन पर लेयर बनाएं.

ऐनिमेशन तय करने के कई तरीके हैं, लेकिन ये सभी मुख्य रूप से इनमें से किसी एक तरीके से काम करते हैं:

• लेआउट प्रॉपर्टी में बदलाव करना.
• पेंट प्रॉपर्टी में बदलाव करना.
• कंपोज़िट प्रॉपर्टी में बदलाव करना.

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

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

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

ऐनिमेशन फ़्रेम क्या होते हैं?

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

यह कुछ समय के अंतराल पर अपडेट दिखाता है, ताकि विज़ुअल अपडेट एक साथ किए जा सकें. कई डिसप्ले, तय समय के अंतराल पर अपडेट होते हैं. जैसे, एक सेकंड में 60 बार (यानी 60 हर्ट्ज़). कुछ आधुनिक डिसप्ले, ज़्यादा रीफ़्रेश रेट (90–120 Hz आम हो रहे हैं) दे सकते हैं. अक्सर, ये डिसप्ले ज़रूरत के हिसाब से रीफ़्रेश रेट में बदलाव कर सकते हैं. इसके अलावा, ये पूरी तरह से वैरिएबल फ़्रेम रेट भी ऑफ़र कर सकते हैं.

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

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

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

एनिमेशन फ़्रेम पर किन चीज़ों का असर पड़ता है?

वेब डेवलपर, ब्राउज़र की इस क्षमता पर काफ़ी असर डाल सकते हैं कि वह विज़ुअल अपडेट को तेज़ी से और बेहतर तरीके से रेंडर और दिखाए!

कुछ उदाहरण:

• टारगेट डिवाइस पर तेज़ी से डिकोड करने के लिए, बहुत बड़ा या ज़्यादा संसाधनों वाला कॉन्टेंट इस्तेमाल करना.
• बहुत ज़्यादा लेयर का इस्तेमाल करने पर, GPU मेमोरी का बहुत ज़्यादा इस्तेमाल होता है.
• बहुत जटिल सीएसएस स्टाइल या वेब ऐनिमेशन तय करना.
• डिज़ाइन के ऐसे एंटी-पैटर्न का इस्तेमाल करना जो तेज़ रेंडरिंग ऑप्टिमाइज़ेशन को बंद कर देते हैं.
• मुख्य थ्रेड पर बहुत ज़्यादा JS काम करता है. इस वजह से, लंबे समय तक चलने वाले टास्क होते हैं, जो विज़ुअल अपडेट को ब्लॉक करते हैं.

लेकिन, आपको कैसे पता चलेगा कि किसी ऐनिमेशन फ़्रेम को रेंडर होने में तय समय से ज़्यादा समय लगा है और इसलिए, फ़्रेम नहीं दिखाया गया है?

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

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

requestAnimationFrame() पोलिंग का इस्तेमाल करना कई वजहों से अच्छा नहीं है:

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

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

जब मुख्य थ्रेड में रुकावट आती है, तो विज़ुअल अपडेट में रुकावट आती है. यह तो कमाल हो गया!

मेज़रमेंट टूल में, मुख्य धागे के समय पर काम करने और ऐनिमेशन फ़्रेम के आसानी से चलने पर ज़्यादा ध्यान दिया गया है. हालांकि, यह पूरी कहानी नहीं है! नीचे दिया गया उदाहरण देखें:

ऊपर दिए गए वीडियो में एक ऐसा पेज दिखाया गया है जो समय-समय पर मुख्य थ्रेड में लंबे टास्क इंजेक्ट करता है. ये लंबे टास्क, पेज पर कुछ तरह के विज़ुअल अपडेट देने की सुविधा को पूरी तरह से खराब कर देते हैं. साथ ही, ऊपरी बाएं कोने में, requestAnimationFrame() के रिपोर्ट किए गए फ़्रेम प्रति सेकंड की दर को 0 पर गिरते हुए देखा जा सकता है.

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

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

ऐनिमेशन फ़्रेम के लिए, कहानी इतनी आसान नहीं है.

ऐनिमेशन फ़्रेम: अहम अपडेट

ऊपर दिए गए उदाहरण से पता चलता है कि requestAnimationFrame() के अलावा और भी चीज़ें हैं.

तो, ऐनिमेशन अपडेट और ऐनिमेशन फ़्रेम कब मायने रखते हैं? हम इन शर्तों पर विचार कर रहे हैं. हमें इन पर आपका सुझाव, शिकायत या राय चाहिए:

• मुख्य और कंपोजिटर थ्रेड से जुड़े अपडेट
• पेंट के अपडेट मौजूद नहीं हैं
• ऐनिमेशन का पता लगाना
• क्वालिटी बनाम संख्या

मुख्य और कंपोजिटर थ्रेड से जुड़े अपडेट

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

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

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

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

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

पेंट के अपडेट मौजूद नहीं हैं

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

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

हर फ़्रेम रेंडर करने के अवसर के साथ, यह ट्रैक किया जा सकता है कि स्क्रीन पर कितने नए विज़ुअल अपडेट दिखे. कई फ़्रेम (या समय) में ऐसा करने की क्षमता को मेज़र करने को आम तौर पर फ़्रेम थ्रूपुट कहा जाता है.

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

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

तो फ़्रेम थ्रूपुट कब मायने रखता है?

ऐनिमेशन का पता लगाना

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

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

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

क्वालिटी बनाम संख्या

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

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

इसके अलावा, ऐसा भी हो सकता है कि कोई गेम <canvas> का फ़ायदा ले रहा हो. ऐसा हो सकता है कि वह गेम, ऑफ़स्क्रीन कैनवस जैसी तकनीकों का इस्तेमाल करके, फ़्रेम रेट को स्थिर बनाए रखता हो. हालांकि, वह गेम ऐनिमेशन फ़्रेम के मामले में तकनीकी तौर पर पूरी तरह से स्मूद हो सकता है. इसके बावजूद, वह गेम सीन में अच्छी क्वालिटी की गेम ऐसेट लोड नहीं कर पा रहा हो या रेंडरिंग आर्टफ़ैक्ट दिखा रहा हो.

और हां, किसी साइट पर बहुत खराब ऐनिमेशन भी हो सकते हैं 🙂

मुझे लगता है कि अपने समय के हिसाब से वे बहुत शानदार थे!

किसी एक ऐनिमेशन फ़्रेम की स्थितियां

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

यहां उन तरीकों के बारे में बताया गया है जिनसे हम किसी एक ऐनिमेशन फ़्रेम की स्थिति का पता लगाते हैं. इन तरीकों को सबसे अच्छे से सबसे खराब के क्रम में रखा गया है:

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

सभी जानकारी को एक साथ देखना: ड्रॉप किए गए फ़्रेम का प्रतिशत दिखाने वाली मेट्रिक

कभी-कभी, हर ऐनिमेशन फ़्रेम की स्थिति के बारे में ज़्यादा जानकारी ज़रूरी हो सकती है. हालांकि, किसी अनुभव के लिए "एक नज़र में" स्कोर असाइन करना भी मददगार होता है.

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

मेंटल मॉडल को इनसे बदलना चाहिए:

1. फ़्रेम प्रति सेकंड,
2. ऐनिमेशन से जुड़े ऐसे अपडेट का पता लगाना जो मौजूद नहीं हैं और जो ज़रूरी हैं, ताकि
3. किसी तय समयावधि में सदस्यों की संख्या में गिरावट का प्रतिशत.

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

• ड्रॉप किए गए फ़्रेम का औसत प्रतिशत: पूरी टाइमलाइन में, उन सभी ऐनिमेशन फ़्रेम के लिए जो आइडल नहीं हैं
• फ़्रेम छोड़ने की सबसे खराब स्थिति: इसे एक सेकंड की स्लाइडिंग विंडो में मेज़र किया जाता है.
• ड्यूप किए गए फ़्रेम का 95वां पर्सेंटाइल: इसे एक सेकंड की स्लाइडिंग विंडो में मेज़र किया जाता है.

फ़िलहाल, ये स्कोर Chrome के कुछ डेवलपर टूल में देखे जा सकते हैं. ये मेट्रिक सिर्फ़ फ़्रेम के कुल थ्रूपुट पर फ़ोकस करती हैं. हालांकि, हम फ़्रेम के इंतज़ार का समय जैसे अन्य फ़ैक्टर का भी आकलन कर रहे हैं.

डेवलपर टूल में इसे खुद आज़माएं!

परफ़ॉर्मेंस HUD

Chromium में एक बेहतरीन परफ़ॉर्मेंस HUD है, जो फ़्लैग (chrome://flags/#show-performance-metrics-hud) के पीछे छिपा है. इसमें, आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक जैसे आंकड़े लाइव दिख सकते हैं. साथ ही, समय के साथ फ़्रेम छोड़ने की दर के आधार पर, ऐनिमेशन को बेहतर बनाने के लिए कुछ प्रयोग के तौर पर बनाई गई परिभाषाएं भी दिख सकती हैं.

फ़्रेम की रेंडरिंग से जुड़े आंकड़े

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

DevTools की परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्डिंग में फ़्रेम व्यूअर

DevTools के परफ़ॉर्मेंस पैनल में, फ़्रेम व्यूअर का इस्तेमाल लंबे समय से किया जा रहा है. हालांकि, यह आधुनिक रेंडरिंग पाइपलाइन के काम करने के तरीके से थोड़ा अलग हो गया था. हाल ही में, Chrome Canary के नए वर्शन में भी कई सुधार किए गए हैं. हमें लगता है कि इससे ऐनिमेशन से जुड़ी समस्याओं को डीबग करना काफ़ी आसान हो जाएगा.

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

Chrome ट्रैकिंग

आखिर में, Chrome ट्रैकिंग की मदद से, ज़्यादा जानकारी हासिल की जा सकती है. इसके लिए, Perfetto के नए यूज़र इंटरफ़ेस (या about:tracing) की मदद से, "वेब कॉन्टेंट रेंडरिंग" ट्रैक रिकॉर्ड किया जा सकता है. साथ ही, Chrome की ग्राफ़िक्स पाइपलाइन के बारे में ज़्यादा जानकारी हासिल की जा सकती है. यह मुश्किल काम हो सकता है. हालांकि, इसे आसान बनाने के लिए, हाल ही में Chromium में कुछ चीज़ें जोड़ी गई हैं. फ़्रेम की लाइफ़ दस्तावेज़ में उपलब्ध जानकारी की खास जानकारी देखी जा सकती है.

ट्रैक इवेंट की मदद से, यह तय किया जा सकता है:

• कौनसे ऐनिमेशन चल रहे हैं (TrackerValidation नाम वाले इवेंट का इस्तेमाल करके).
• ऐनिमेशन फ़्रेम की सटीक टाइमलाइन पाना (PipelineReporter नाम वाले इवेंट का इस्तेमाल करके).
• ऐनिमेशन के अपडेट में रुकावट आने की समस्या को हल करने के लिए, यह पता लगाएं कि ऐनिमेशन को तेज़ी से चलने से कौनसी वजहें रोक रही हैं. इसके लिए, PipelineReporter इवेंट में इवेंट के ब्रेकडाउन का इस्तेमाल करें.
• इनपुट से चलने वाले ऐनिमेशन के लिए, देखें कि विज़ुअल अपडेट होने में कितना समय लगता है (EventLatency नाम वाले इवेंट का इस्तेमाल करके).

आगे क्या करना है

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

हम आपको इस बारे में अपडेट देते रहेंगे. हम अलग-अलग ऐनिमेशन फ़्रेम के डेटा के आधार पर, एक बेहतर मेट्रिक डिज़ाइन करने के लिए लगातार काम कर रहे हैं.

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

सुझाव/राय दें या शिकायत करें

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

अपनी टिप्पणियां, web-vitals-feedback Google ग्रुप को भेजी जा सकती हैं. इसके लिए, विषय पंक्ति में "[Smoothness Metrics]" लिखें. हमें आपके सुझावों का इंतज़ार रहेगा!