কন্টেইনার টাইমিং অরিজিন ট্রায়াল

Barry Pollard

Jason Williams

José Dapena Paz

প্রকাশিত: ০১ মে, ২০২৬

ক্রোম ১৪৮ থেকে কন্টেইনার টাইমিং পারফরম্যান্স এপিআই-এর জন্য একটি অরিজিন ট্রায়াল চালু করছে।

লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP)- এর মতো মেট্রিকগুলো কোনো পৃষ্ঠার সবচেয়ে বড় অংশের পেইন্ট টাইম দেখে একটি পৃষ্ঠার ব্যবহারকারীর কাছে কখন সেটিকে "লোড হয়েছে" বলে মনে হওয়ার সম্ভাবনা রয়েছে, তার একটি সামগ্রিক ধারণা দেয়। তবে, সাইটগুলো শুধু "সবচেয়ে বড়" অংশটিই নয়, বরং পৃষ্ঠার নির্দিষ্ট কোনো অংশ কখন লোড হয়, তা জানতেও আগ্রহী হতে পারে।

এলিমেন্ট টাইমিং সাইটগুলোকে elementtiming অ্যাট্রিবিউট দিয়ে এলিমেন্ট মার্ক আপ করার সুযোগ দেয়, যার মাধ্যমে বোঝা যায় যে এলিমেন্টটি কখন লোড হয় এবং সেটি LCP এলিমেন্ট কি না। তবে, LCP-এর মতোই, এটি শুধুমাত্র স্বতন্ত্র এলিমেন্টের রেন্ডার টাইম পরিমাপের মধ্যেই সীমাবদ্ধ।

কন্টেইনার টাইমিং, এলিমেন্ট টাইমিং-এর ধারণাটিকে আরও প্রসারিত করে "কন্টেন্টের ব্লক" (বা "কন্টেইনার") পরিমাপ করে। এর মাধ্যমে আপনি বুঝতে পারবেন কখন একটি সম্পূর্ণ কম্পোনেন্ট ব্যবহারকারীর জন্য উপলব্ধ ছিল, যেমন উইজেট, কার্ড, কন্টেন্টের অংশ, সাইডবার... ইত্যাদি। এটি সেইসব সাইটকে অতিরিক্ত পারফরম্যান্স সংক্রান্ত তথ্য প্রদান করে, যারা এর থেকে পাওয়া বাড়তি অন্তর্দৃষ্টি পেতে চায়।

ব্লুমবার্গ দ্বারা তৈরি এবং ইগালিয়া কর্তৃক ক্রোমে বাস্তবায়িত কন্টেইনার টাইমিং, ক্রোম ব্যবহারকারী ও অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলোর জন্য একটি ফ্ল্যাগের আড়ালে উপলব্ধ এবং সাইটগুলো একটি অরিজিন ট্রায়ালের মাধ্যমে এটি ফিল্ডে পরীক্ষা করার জন্যও উপলব্ধ।

একটি এপিআই চালু করার চূড়ান্ত ধাপগুলোর মধ্যে অরিজিন ট্রায়াল অন্যতম। এর মাধ্যমে ডেভেলপাররা ফিচারটি ডিফল্টভাবে চালু হওয়ার আগেই তাদের সাইটে তা সক্রিয় করে পরীক্ষা করতে পারেন এবং এটি প্রত্যাশা অনুযায়ী কাজ করছে ও কার্যকর প্রমাণিত হচ্ছে কিনা, সে বিষয়ে টিমকে জানাতে পারেন। এটি ডেভেলপারদের এপিআই চালুর আগে এর ডিজাইনে যেকোনো পরিবর্তনের পরামর্শ দেওয়ার সুযোগও দেয়।

কন্টেইনার টাইমিং এপিআই কীভাবে কাজ করে

এলিমেন্ট টাইমিং-এর মতোই, কন্টেইনার টাইমিং বিভিন্ন HTML এলিমেন্টে একটি অ্যাট্রিবিউট ( 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>

কন্টেইনারে নতুন উপাদান যুক্ত হওয়ার সাথে সাথে, হালনাগাদ তথ্যসহ নতুন পারফরম্যান্স এন্ট্রি নির্গত হয়। যেহেতু পেজের জীবনচক্র জুড়ে নতুন উপাদান যুক্ত হতে পারে, তাই এর কোনো একক সমাপ্তি বিন্দু নেই। এটি LCP-এর অনুরূপ, যা সাধারণত পেজের শেষে, অন্য পেজে চলে যাওয়ার সময় পরিমাপ করা হয়।

এরপর এই পারফরম্যান্স মেট্রিকগুলো পর্যবেক্ষণ ও বিশ্লেষণের জন্য অ্যানালিটিক্সে ফেরত পাঠানো যেতে পারে।

containertiming-ignore অ্যাট্রিবিউট ব্যবহার করে চাইল্ড কন্টেইনারগুলোকেও উপেক্ষা করা যায়:

<div containertiming="main-content">

  <main>...</main>
  
  <!-- This aside and its children will be ignored -->
  <aside containertiming-ignore>...</aside>

</div>

ডেমো

নিম্নলিখিত কোডপেনটিতে কন্টেইনার টাইমিং এপিআই-এর কার্যকারিতা দেখানো হয়েছে:

আপনার ব্রাউজার যদি কন্টেইনার টাইমিং এপিআই (Container Timing API) সমর্থন না করে, তাহলে আপনি নিম্নলিখিত ভিডিওতেও এটি বাস্তবে দেখতে পারেন:

কন্টেইনার টাইমিং-এর জন্য কোন আপডেটগুলো গণনা করা হয়?

কন্টেইনার টাইমিং-এর উদ্দেশ্য হলো, কখন কন্টেইনারটি তার সমস্ত চাইল্ড এলিমেন্ট দ্বারা লোড হয় তা ক্যাপচার করা। এর উদ্দেশ্য ভবিষ্যতের প্রতিটি পেইন্ট পরিমাপ করা নয়—যার মধ্যে অনেকগুলোই অনেক পরে আসতে পারে, যখন ব্যবহারকারী কন্টেইনার বা পেজটির সাথে ইন্টারঅ্যাক্ট করেন। এই কারণে, LCP এবং এলিমেন্ট টাইমিং-এর মতোই, কন্টেইনার টাইমিং 'কন্টেন্টফুল পেইন্ট'-এর উপর নির্ভর করে এবং যেসব এলিমেন্টের ইতিমধ্যে একটি কন্টেন্টফুল পেইন্ট হয়েছে বলে গণ্য করা হয়েছে, তাদের জন্য নতুন কোনো পেইন্ট এন্ট্রি তৈরি করে না।

উদাহরণস্বরূপ, যদি কোনো কন্টেইনার প্রাথমিকভাবে শুধু একটি ব্যাকগ্রাউন্ড কালার দিয়ে রেন্ডার করা হয়, অথবা তাতে কেবল কন্টেন্টবিহীন এলিমেন্ট (যেমন, স্কেলেটন স্ক্রিন) থাকে, তাহলে কন্টেইনারটিতে কোনো কন্টেন্ট যোগ না করা পর্যন্ত কোনো container এন্ট্রি নির্গত হবে না।

আপডেটের একটি উদাহরণ হিসেবে বলা যায়, কন্টেইনারের মধ্যে থাকা কোনো বিদ্যমান এলিমেন্টের টেক্সট আপডেট করলে সেই আপডেটের জন্য কোনো নতুন container এন্ট্রি তৈরি হবে না, কারণ এক্ষেত্রে শুধুমাত্র একটি এলিমেন্টের কন্টেন্টের প্রথম পেইন্টকেই বিবেচনা করা হয়। তবে, যদি কোনো খালি এলিমেন্টে টেক্সট যোগ করা হয়, অথবা সেই টেক্সটের জন্য একটি অতিরিক্ত নতুন এলিমেন্ট যোগ করা হয়, তাহলে একটি নতুন container এন্ট্রি নির্গত হবে, কারণ সেটিই হবে সেই এলিমেন্টটির প্রথম পেইন্ট।

বৈশিষ্ট্য-শনাক্তকারী কন্টেইনার টাইমিং সমর্থন

containertiming অ্যাট্রিবিউটটি অসমর্থিত ব্রাউজারগুলির জন্য কোনো সমস্যা সৃষ্টি করবে না, তাই এটিকে `feature-detected` করার প্রয়োজন নেই।

PerformanceObserver যেকোনো নতুন এন্ট্রি উপেক্ষা করবে, কিন্তু সেগুলো DevTools-এ সতর্কবার্তা (warnings) সৃষ্টি করতে পারে, তাই নিম্নলিখিত কোডের মতো কোড ব্যবহার করে একটি অবজারভার যোগ করার আগে ফিচার-ডিটেক্ট করা উত্তম অভ্যাস:

if (typeof PerformanceContainerTiming !== "undefined") {
  // Container Timing is supported
}

সর্বোত্তম অনুশীলন

কন্টেইনার টাইমিং-এর সর্বোত্তম ব্যবহারের জন্য অনুসরণীয় কিছু সেরা পদ্ধতি রয়েছে:

• অ্যাট্রিবিউটগুলো আগেভাগেই সেট করুন: সম্পূর্ণ ট্র্যাকিংয়ের জন্য HTML ডকুমেন্টে, অথবা এলিমেন্টটি ডকুমেন্টে যুক্ত করার আগেই ` containertiming অ্যাট্রিবিউটটি যোগ করুন। পরে জাভাস্ক্রিপ্ট দিয়ে অ্যাট্রিবিউটটি যোগ করলে পেইন্ট মিস হতে পারে।
• অর্থপূর্ণ শনাক্তকারী ব্যবহার করুন: বিশ্লেষণ সহজ করার জন্য containertiming অ্যাট্রিবিউটের জন্য বর্ণনামূলক নাম বেছে নিন।
• কৌশলগত অবস্থান: আপনার মেট্রিক্সের জন্য গুরুত্বপূর্ণ সিমান্টিক সেকশনগুলিতে containertiming প্রয়োগ করুন, যেমন, hero-section , product-grid , checkout-form । প্রতিটি কন্টেইনার পরিমাপ করার প্রয়োজন নেই।
• অপ্রাসঙ্গিক বিষয়বস্তু উপেক্ষা করুন: যেসব চাইল্ড এলিমেন্ট আপনার কম্পোনেন্ট মেট্রিক্সে প্রভাব ফেলবে না, যেমন বিজ্ঞাপন বা আলংকারিক উপাদান, সেগুলোর ক্ষেত্রে containertiming-ignore ব্যবহার করুন।

কন্টেইনার টাইমিং কীভাবে চালু করবেন?

ক্রোম ১৪৭ থেকে chrome://flags/#enable-experimental-web-platform-features ফ্ল্যাগ ব্যবহার করে এবং কমান্ড লাইন থেকে --enable-blink-features=ContainerTiming ফ্ল্যাগ ব্যবহার করে কন্টেইনার টাইমিং এপিআই সক্রিয় করা যায়।

ক্রোম ১৪৮ সাইট থেকে একটি অরিজিন ট্রায়াল টোকেনের জন্য নিবন্ধন করে ফিচারটি স্বয়ংক্রিয়ভাবে চালু করার জন্য এটি তাদের পেজে যোগ করা যেতে পারে। এর মাধ্যমে আপনি বাস্তব ব্যবহারকারীদের ওপর ফিল্ডে এপিআই পরীক্ষা করতে পারবেন। এপিআই প্রত্যাশা অনুযায়ী কাজ করছে কিনা তা যাচাই করতে এবং প্রয়োজনীয় তথ্য সংগ্রহ করতে কন্টেইনার টাইমিং মেট্রিক্স অ্যানালিটিক্সে রেকর্ড ও বিশ্লেষণ করা যেতে পারে।

মতামত এবং আরও বিস্তারিত তথ্য

কন্টেইনার টাইমিং এপিআই সম্পর্কিত মতামত গিটহাবে ইস্যু হিসেবে উত্থাপন করা উচিত।

এছাড়াও একটি স্পেসিফিকেশন মানকীকরণ প্রক্রিয়ার মধ্যে দিয়ে এগোচ্ছে। যারা এই এপিআই-টি অভ্যন্তরীণভাবে কীভাবে কাজ করে সে বিষয়ে আগ্রহী, তাদের জন্য ইগালিয়া এপিআই-টি প্রযুক্তিগতভাবে কীভাবে বাস্তবায়ন করা হয়েছিল সে সম্পর্কে একটি পোস্ট প্রকাশ করেছে।

উপসংহার

এই এপিআই-টি প্রকাশের কাছাকাছি আসায় আমরা অত্যন্ত আনন্দিত এবং পারফরম্যান্স সংক্রান্ত সমস্যাগুলির বিষয়ে নতুন অন্তর্দৃষ্টি লাভের জন্য এটিকে ডেভেলপারদের হাতে তুলে দিতে আমরা উৎসাহিত। আমরা এপিআই-টির উপর মতামত সংগ্রহের জন্য উন্মুখ এবং সবকিছু ঠিকঠাক থাকলে, এর পরপরই এটি চালু করব।