पब्लिश किया गया: 1 मई, 2026
Chrome, Container Timing परफ़ॉर्मेंस एपीआई के लिए, Chrome 148 से ऑरिजिन ट्रायल शुरू कर रहा है.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) जैसे मेट्रिक से, इस बारे में खास जानकारी मिलती है कि किसी पेज को "लोड" कब माना जा सकता है. इसके लिए, सबसे बड़े कॉन्टेंट को रेंडर करने में लगने वाले समय को देखा जाता है. हालांकि, साइटों को इस बात में भी दिलचस्पी हो सकती है कि पेज के खास हिस्से कब लोड होते हैं. न कि सिर्फ़ "सबसे बड़ा" हिस्सा.
Element Timing की मदद से, साइटें elementtiming एट्रिब्यूट के साथ एलिमेंट मार्क अप कर सकती हैं. इससे उन्हें यह समझने में मदद मिलती है कि एलिमेंट कब लोड होते हैं. भले ही, वे एलसीपी एलिमेंट हों या नहीं. हालांकि, एलसीपी की तरह, यह सिर्फ़ अलग-अलग एलिमेंट को रेंडर करने में लगने वाले समय को मेज़र कर सकता है.
Container Timing, Element Timing के कॉन्सेप्ट को "कॉन्टेंट के ब्लॉक" (या "कंटेनर") को मेज़र करने के लिए बढ़ाता है. इससे आपको यह समझने में मदद मिलती है कि कोई कॉम्पोनेंट, उपयोगकर्ता के लिए कब उपलब्ध हुआ. जैसे, विजेट, कार्ड, कॉन्टेंट के सेक्शन, साइडबार वगैरह. यह उन साइटों के लिए परफ़ॉर्मेंस की ज़्यादा जानकारी देता है जिन्हें इससे मिलने वाली ज़्यादा जानकारी चाहिए.
Bloomberg ने Container Timing को डेवलप किया है. इसे Igalia ने Chrome में लागू किया है. यह Chrome उपयोगकर्ताओं और Chromium पर आधारित अन्य ब्राउज़र के लिए, फ़्लैग के पीछे उपलब्ध है. साथ ही, यह साइटों के लिए, ऑरिजिन ट्रायल के ज़रिए फ़ील्ड में टेस्ट करने के लिए भी उपलब्ध है.
ऑरिजिन ट्रायल, किसी एपीआई को लॉन्च करने के लिए उठाए जाने वाले आखिरी चरणों में से एक है. इसमें डेवलपर, एपीआई को डिफ़ॉल्ट रूप से लॉन्च होने से पहले, अपनी साइटों पर इस सुविधा को चालू करके टेस्ट कर सकते हैं. साथ ही, टीम को यह बता सकते हैं कि यह उम्मीद के मुताबिक काम कर रही है या नहीं और यह काम की है या नहीं. इससे डेवलपर, एपीआई के डिज़ाइन में लॉन्च से पहले कोई भी बदलाव करने का सुझाव भी दे सकते हैं.
Container Timing API कैसे काम करता है
Element Timing की तरह, Container Timing भी अलग-अलग एचटीएमएल एलिमेंट में एक एट्रिब्यूट (containertiming) जोड़कर काम करता है. इससे ब्राउज़र को यह पता चलता है कि इन एलिमेंट को मेज़र किया जाना चाहिए:
<div containertiming="my-component">
<h2>Title</h2>
<div>...</div>
</div>
इसके बाद, PerformanceObserver की मदद से, उस कंटेनर में पेंट को उसी तरह देखा जा सकता है जिस तरह अन्य परफ़ॉर्मेंस मेट्रिक को देखा जाता है:
<script>
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log("Container painted:", entry.identifier);
console.log("First render:", entry.firstRenderTime);
console.log("Latest paint:", entry.startTime);
console.log("Painted area:", entry.size);
console.log("Last painted element:", entry.lastPaintedElement);
}
});
observer.observe({ type: "container", buffered: true });
</script>
कंटेनर में नए एलिमेंट पेंट होने पर, अपडेट की गई जानकारी के साथ नई परफ़ॉर्मेंस एंट्री जनरेट होती हैं. पेज के पूरे लाइफ़साइकल के दौरान नए एलिमेंट जोड़े जा सकते हैं. इसलिए, कोई एक कंप्लीशन पॉइंट नहीं होता. यह एलसीपी की तरह है. इसे आम तौर पर, पेज के आखिर में तब मेज़र किया जाता है, जब उपयोगकर्ता किसी दूसरे पेज पर जाता है.
इसके बाद, इन परफ़ॉर्मेंस मेट्रिक को मॉनिटर करने और उनका विश्लेषण करने के लिए, Analytics में भेजा जा सकता है.
containertiming-ignore एट्रिब्यूट की मदद से, चाइल्ड कंटेनर को भी अनदेखा किया जा सकता है:
<div containertiming="main-content">
<main>...</main>
<!-- This aside and its children will be ignored -->
<aside containertiming-ignore>...</aside>
</div>
डेमो
यहां दिए गए CodePen में, Container Timing API को ऐक्शन में दिखाया गया है:
अगर आपका ब्राउज़र, Container Timing API के साथ काम नहीं करता है, तो इसे यहां दिए गए वीडियो में भी देखा जा सकता है:
Container Timing के लिए, कौनसे अपडेट गिने जाते हैं?
Container Timing का मकसद, यह पता लगाना है कि कंटेनर, सभी चाइल्ड एलिमेंट के साथ कब लोड होता है. इसका मकसद, आने वाले समय में होने वाले हर पेंट को मेज़र करना नहीं है. इनमें से कई पेंट, उपयोगकर्ता के कंटेनर या पेज के साथ इंटरैक्ट करने पर, बाद में हो सकते हैं. इस वजह से, एलसीपी और Element Timing की तरह, Container Timing भी "कॉन्टेंटफ़ुल पेंट" पर निर्भर करता है. साथ ही, उन एलिमेंट के लिए नई पेंट एंट्री जनरेट नहीं करता जिन्हें पहले ही कॉन्टेंटफ़ुल पेंट के तौर पर गिना जा चुका है.
उदाहरण के लिए, अगर कोई कंटेनर शुरू में सिर्फ़ बैकग्राउंड कलर के साथ रेंडर किया जाता है या उसमें सिर्फ़ नॉन-कॉन्टेंटफ़ुल एलिमेंट (उदाहरण के लिए, स्केलेटन स्क्रीन) शामिल होते हैं, तो जब तक कंटेनर में कोई कॉन्टेंट नहीं जोड़ा जाता, तब तक कोई container एंट्री जनरेट नहीं होगी.
अपडेट के उदाहरण के लिए, कंटेनर में मौजूद किसी एलिमेंट पर टेक्स्ट अपडेट करने से, उस अपडेट के लिए कोई नई container एंट्री जनरेट नहीं होगी. ऐसा इसलिए, क्योंकि किसी एलिमेंट के लिए सिर्फ़ कॉन्टेंट के पहले पेंट को गिना जाता है. हालांकि, अगर किसी खाली एलिमेंट में टेक्स्ट जोड़ा जाता है या उस टेक्स्ट के लिए कोई नया एलिमेंट जोड़ा जाता है, तो एक नई container एंट्री जनरेट होगी. ऐसा इसलिए, क्योंकि यह उस एलिमेंट का पहला पेंट होगा.
Container Timing की सुविधा की पहचान करना
containertiming एट्रिब्यूट की वजह से, उन ब्राउज़र में समस्याएं नहीं होंगी जो इस सुविधा के साथ काम नहीं करते. इसलिए, इसकी पहचान करने की ज़रूरत नहीं है.
PerformanceObserver नई एंट्री को अनदेखा करेगा. हालांकि, इससे DevTools में चेतावनियां दिख सकती हैं. इसलिए, यह सबसे सही तरीका है कि कोड के साथ कोई ऑब्ज़र्वर जोड़ने से पहले, सुविधा की पहचान की जाए. जैसे:
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
सबसे सही तरीके
Container Timing का बेहतर तरीके से इस्तेमाल करने के लिए, यहां दिए गए सबसे सही तरीकों को अपनाएं:
- एट्रिब्यूट को पहले से सेट करें: पूरी ट्रैकिंग के लिए, एचटीएमएल दस्तावेज़ में या एलिमेंट को दस्तावेज़ में जोड़ने से पहले,
containertimingएट्रिब्यूट जोड़ें. JavaScript की मदद से, बाद में एट्रिब्यूट जोड़ने पर, पेंट छूट सकते हैं. - काम के आइडेंटिफ़ायर का इस्तेमाल करें: Analytics को आसान बनाने के लिए,
containertimingएट्रिब्यूट के लिए जानकारी देने वाले नाम चुनें. - रणनीतिक प्लेसमेंट:
containertimingको उन सिमैंटिक सेक्शन पर लागू करें जो आपके मेट्रिक के लिए ज़रूरी हैं. जैसे,hero-section,product-grid,checkout-form. हर कंटेनर को मेज़र करने की ज़रूरत नहीं है. - काम के न होने वाले कॉन्टेंट को अनदेखा करें: चाइल्ड एलिमेंट पर
containertiming-ignoreका इस्तेमाल करें. जैसे, विज्ञापन या सजावटी एलिमेंट. इनसे आपके कॉम्पोनेंट मेट्रिक पर कोई असर नहीं पड़ना चाहिए.
Container Timing कैसे चालू करें?
Container Timing API को Chrome 147 से, chrome://flags/#enable-experimental-web-platform-features फ़्लैग का इस्तेमाल करके चालू किया जा सकता है. साथ ही, इसे कमांड लाइन से, --enable-blink-features=ContainerTiming फ़्लैग का इस्तेमाल करके भी चालू किया जा सकता है.
Chrome 148 से, साइटें ऑरिजिन ट्रायल टोकन के लिए रजिस्टर कर सकती हैं. साथ ही, इस सुविधा को अपने-आप चालू करने के लिए, इसे अपने पेज में जोड़ा जा सकता है. इससे, एपीआई को फ़ील्ड में, असली उपयोगकर्ताओं पर टेस्ट किया जा सकता है. Container Timing मेट्रिक को Analytics में रिकॉर्ड किया जा सकता है. साथ ही, यह पुष्टि करने के लिए इनका विश्लेषण किया जा सकता है कि एपीआई उम्मीद के मुताबिक काम कर रहा है या नहीं. इसके अलावा, इनसे अहम जानकारी भी इकट्ठा की जा सकती है.
सुझाव/राय और ज़्यादा जानकारी
Container Timing API के बारे में सुझाव/राय, GitHub पर समस्याओं के तौर पर सबमिट किए जाने चाहिए.
इसके अलावा, एक स्पेसिफ़िकेशन भी है जो स्टैंडर्डाइज़ेशन प्रोसेस के तहत है. जिन लोगों को यह जानने में दिलचस्पी है कि यह एपीआई अंदरूनी तौर पर कैसे काम करता है उनके लिए, Igalia ने एक पोस्ट पब्लिश की है. इसमें बताया गया है कि एपीआई को तकनीकी तौर पर कैसे लागू किया गया था.
नतीजा
हमें यह देखकर खुशी हो रही है कि यह एपीआई जल्द ही लॉन्च होने वाला है. हमें इस बात की भी खुशी है कि डेवलपर को यह एपीआई मिलेगा, ताकि वे परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में नई जानकारी पा सकें. हमें एपीआई के बारे में सुझाव/राय मिलने का इंतज़ार रहेगा. अगर सब कुछ ठीक रहा, तो हम इसे जल्द ही लॉन्च करेंगे.