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

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

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

हो सकता है कि आपको पेजों को स्क्रोल करने या ऐनिमेशन के दौरान, पेजों के "लगातार रुकने" या "फ़्रीज़ होने" की समस्या का सामना करना पड़ा हो. हम आपको बताना चाहते हैं कि ये अनुभव आसान नहीं हैं. इस तरह की समस्याओं को हल करने के लिए, 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() के एफ़पीएस (फ़्रेम प्रति सेकंड) में कमी की सूचना दिख सकती है.

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

यह एक ऐसा उदाहरण है जिसमें मुख्य थ्रेड पर कई फ़्रेम हटाए गए हैं, लेकिन इसमें अब भी कंपोज़िटर थ्रेड पर स्क्रोल करने के कई फ़्रेम मौजूद हैं. लंबा टास्क पूरा होने के बाद, मुख्य थ्रेड पेंट के अपडेट में, दिखने में कोई बदलाव नहीं होता. 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 कैनरी में भी. हमें लगता है कि इससे ऐनिमेशन की समस्याओं को डीबग करने में आसानी होगी.

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

Chrome ट्रैकिंग

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

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

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

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

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

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

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

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

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

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