लंबी अवधि के ऐनिमेशन फ़्रेम एपीआई को अब शिप कर दिया गया है

Barry Pollard

Browser Support

• 123
• 123
• x
• x

Source

Long Animation Frame API (LoAF-pronounced Lo-Af) को Chrome 123 में शामिल किया गया है. साथ ही, हमने इस नए एपीआई का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, टूल और दिशा-निर्देशों को भी अपडेट किया है.

LoAF, web-vitals JavaScript लाइब्रेरी में उपलब्ध है

वेब-विटल्स JavaScript लाइब्रेरी के वर्शन 4 में, INP इंटरैक्शन से जुड़ा लंबा ऐनिमेशन फ़्रेम (या फ़्रेम) शामिल होता है. इस बारे में फ़ील्ड में धीमे इंटरैक्शन ढूंढें गाइड में बताया गया है. इसमें, LoAF का फ़ायदा पाने का तरीका शामिल करने के लिए जानकारी शामिल होती है.

हमने Google I/O 2024 में, INP को डीबग करने के लिए नई फ़ील्ड इनसाइट टॉक में यह जानकारी दी थी. इसमें, LoAF का इस्तेमाल करके उन अन्य स्क्रिप्ट की पहचान करने के बारे में बताया गया था जो आपके INP इंटरैक्शन को धीमा कर रही हैं.

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

LoAF, Web Vitals एक्सटेंशन में उपलब्ध है

अब काम नहीं करता: इस पोस्ट के पब्लिश होने के बाद, वेब विटल्स एक्सटेंशन को बंद कर दिया गया है. साथ ही, यहां बताई गई LoAF सुविधा अब DevTools में उपलब्ध है.

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

वेब Vitals एक्सटेंशन कंसोल, लॉगिंग के ज़रिए LoAF डेटा दिखाता है.

इससे यह पता चलता है कि आपके इंटरैक्शन के समय कौनसी अन्य स्क्रिप्ट चल रही हैं. अक्सर, देरी (खास तौर पर इनपुट में देरी) की वजह ये स्क्रिप्ट होती हैं. हालांकि, अब तक एक्सटेंशन का इस्तेमाल करते समय, इनकी पहचान करना मुश्किल था.

LoAF का इस्तेमाल करने के बारे में अपडेट किए गए दिशा-निर्देश

हमने Long Animation Frames API के मुख्य दस्तावेज़ में, अपने दिशा-निर्देशों को अपडेट किया है, ताकि आप इस एपीआई का ज़्यादा से ज़्यादा फ़ायदा ले सकें.

किसी पेज में कई LoAF हो सकते हैं. इनमें से एक, आईएनपी इंटरैक्शन से जुड़ा होता है.

यह दिशा-निर्देश इस बात पर आधारित है कि हमने इस एपीआई का इस्तेमाल फ़ील्ड में कैसे देखा है. उदाहरण के लिए, Tabaloo की इस केस स्टडी में. हम कई अन्य केस स्टडी पर काम कर रहे हैं. आने वाले समय में, हम इस तरह के और उदाहरण पब्लिश करेंगे.

इसके अलावा, हमने MDN पर एपीआई का दस्तावेज़ भी बनाया है.

नतीजा

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