কাস্টম মেট্রিক্স

Philip Walton

ব্যবহারকারী-কেন্দ্রিক মেট্রিক থাকার অনেক সুবিধা রয়েছে, যা আপনি যেকোনো ওয়েবসাইটে সার্বিকভাবে পরিমাপ করতে পারেন। এই মেট্রিকগুলো আপনাকে নিম্নলিখিত কাজগুলো করতে দেয়:

• প্রকৃত ব্যবহারকারীরা সামগ্রিকভাবে ওয়েবকে কীভাবে ব্যবহার করেন, তা বুঝুন।
• আপনার সাইটকে প্রতিযোগীর সাইটের সাথে তুলনা করুন।
• কাস্টম কোড লেখার প্রয়োজন ছাড়াই আপনার অ্যানালিটিক্স টুলগুলিতে দরকারি ও কার্যকরী ডেটা ট্র্যাক করুন।

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

কাস্টম মেট্রিক্স আপনাকে আপনার সাইটের অভিজ্ঞতার এমন সব দিক পরিমাপ করতে দেয় যা শুধুমাত্র আপনার সাইটের জন্যই প্রযোজ্য হতে পারে, যেমন:

• একটি একক পৃষ্ঠার অ্যাপের (SPA) এক "পৃষ্ঠা" থেকে অন্য "পৃষ্ঠায়" যেতে যে সময় লাগে
• লগ-ইন করা ব্যবহারকারীদের জন্য ডাটাবেস থেকে আনা ডেটা একটি পেজে প্রদর্শিত হতে কতক্ষণ সময় লাগে
• একটি সার্ভার-সাইড-রেন্ডারড (SSR) অ্যাপের হাইড্রেট হতে কতক্ষণ সময় লাগে।
• পুনরায় ব্যবহারকারীদের দ্বারা লোড করা রিসোর্সগুলির ক্যাশে হিট রেট।
• একটি গেমে ক্লিক বা কীবোর্ড ইভেন্টের ইভেন্ট লেটেন্সি।

কাস্টম মেট্রিক পরিমাপ করার জন্য এপিআই

ঐতিহাসিকভাবে ওয়েব ডেভেলপারদের কাছে পারফরম্যান্স পরিমাপ করার জন্য খুব বেশি লো-লেভেল এপিআই ছিল না, এবং ফলস্বরূপ একটি সাইট ভালোভাবে কাজ করছে কিনা তা পরিমাপ করার জন্য তাদের হ্যাকের আশ্রয় নিতে হতো।

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

কার্যকরী পারফরম্যান্স পরিমাপের প্রথম নিয়ম হলো, আপনার পারফরম্যান্স পরিমাপের কৌশলগুলো যেন নিজেরাই কোনো পারফরম্যান্স সমস্যা তৈরি না করে, তা নিশ্চিত করা। তাই আপনার সাইটে পরিমাপ করা যেকোনো কাস্টম মেট্রিকের জন্য, সম্ভব হলে নিম্নলিখিত API-গুলোর মধ্যে একটি ব্যবহার করাই শ্রেয়।

পারফরম্যান্স অবজারভার এপিআই

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

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

একটি PerformanceObserver তৈরি করতে, এটিকে একটি কলব্যাক পাস করুন যা নতুন পারফরম্যান্স এন্ট্রি ডিসপ্যাচ হওয়ার সাথে সাথে রান হবে। তারপর observe() মেথড ব্যবহার করে অবজারভারকে বলে দিন কোন ধরনের এন্ট্রির জন্য লিসেন করতে হবে:

const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Log the entry and all associated details.
    console.log(entry.toJSON());
  }
});

po.observe({type: 'some-entry-type'});

নিম্নলিখিত বিভাগগুলিতে পর্যবেক্ষণের জন্য উপলব্ধ সমস্ত বিভিন্ন এন্ট্রি প্রকার তালিকাভুক্ত করা হয়েছে, তবে নতুন ব্রাউজারগুলিতে, আপনি স্ট্যাটিক PerformanceObserver.supportedEntryTypes প্রপার্টির মাধ্যমে কোন এন্ট্রি প্রকারগুলি উপলব্ধ তা পরীক্ষা করতে পারেন।

ইতিমধ্যে ঘটে যাওয়া এন্ট্রিগুলি পর্যবেক্ষণ করুন।

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

ঐতিহাসিক এন্ট্রিগুলো (ঘটে যাওয়ার পরে) পেতে, observe() কল করার সময় buffered ফ্ল্যাগটি true তে সেট করুন। আপনার PerformanceObserver কলব্যাকটি প্রথমবার কল করার সময়, ব্রাউজার তার পারফরম্যান্স এন্ট্রি বাফার থেকে ঐতিহাসিক এন্ট্রিগুলো অন্তর্ভুক্ত করবে, যা সেই ধরনের জন্য সর্বোচ্চ বাফার আকার পর্যন্ত সীমাবদ্ধ থাকবে।

po.observe({
  type: 'some-entry-type',
  buffered: true,
});

পুরোনো পারফরম্যান্স এপিআই যা এড়িয়ে চলতে হবে

পারফরম্যান্স অবজারভার এপিআই-এর আগে, ডেভেলপাররা performance অবজেক্টে সংজ্ঞায়িত নিম্নলিখিত তিনটি পদ্ধতি ব্যবহার করে পারফরম্যান্স এন্ট্রিগুলো অ্যাক্সেস করতে পারতেন:

• getEntries()
• getEntriesByName()
• getEntriesByType()

যদিও এই API-গুলো এখনও সমর্থিত, এগুলোর ব্যবহার সুপারিশ করা হয় না, কারণ নতুন এন্ট্রি কখন নির্গত হচ্ছে তা শোনার সুযোগ এগুলো দেয় না। এছাড়াও, অনেক নতুন API (যেমন largest-contentful-paint ) performance অবজেক্টের মাধ্যমে উন্মুক্ত করা হয় না, সেগুলো শুধুমাত্র PerformanceObserver মাধ্যমে উন্মুক্ত করা হয়।

ইন্টারনেট এক্সপ্লোরারের সাথে সামঞ্জস্যের বিশেষ প্রয়োজন না থাকলে, আপনার কোডে এই পদ্ধতিগুলো এড়িয়ে চলাই ভালো এবং ভবিষ্যতে PerformanceObserver ব্যবহার করুন।

ব্যবহারকারী টাইমিং এপিআই

ইউজার টাইমিং এপিআই হলো সময়-ভিত্তিক মেট্রিক্সের জন্য একটি সাধারণ পরিমাপ এপিআই। এটি আপনাকে ইচ্ছামতো সময়ে বিভিন্ন বিন্দু চিহ্নিত করতে এবং পরবর্তীতে সেই বিন্দুগুলোর মধ্যবর্তী সময়কাল পরিমাপ করতে দেয়।

// Record the time immediately before running a task.
performance.mark('myTask:start');
await doMyTask();

// Record the time immediately after running a task.
performance.mark('myTask:end');

// Measure the delta between the start and end of the task
performance.measure('myTask', 'myTask:start', 'myTask:end');

যদিও Date.now() বা performance.now() এর মতো এপিআইগুলো আপনাকে একই ধরনের সুবিধা দেয়, ইউজার টাইমিং এপিআই ব্যবহারের সুবিধা হলো এটি পারফরম্যান্স টুলিংয়ের সাথে ভালোভাবে সমন্বিত হয়। উদাহরণস্বরূপ, ক্রোম ডেভটুলস তার পারফরম্যান্স প্যানেলে ইউজার টাইমিং পরিমাপগুলো প্রদর্শন করে, এবং অনেক অ্যানালিটিক্স প্রোভাইডারও আপনার করা যেকোনো পরিমাপ স্বয়ংক্রিয়ভাবে ট্র্যাক করে এবং সময়কালের ডেটা তাদের অ্যানালিটিক্স ব্যাকএন্ডে পাঠিয়ে দেয়।

ইউজার টাইমিং পরিমাপ রিপোর্ট করার জন্য, আপনি PerformanceObserver ব্যবহার করতে পারেন এবং ' measure টাইপের এন্ট্রি পর্যবেক্ষণ করতে রেজিস্টার করতে পারেন।

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Log the entry and all associated details.
    console.log(entry.toJSON());
  }
});

// Start listening for `measure` entries to be dispatched.
po.observe({type: 'measure', buffered: true});

দীর্ঘ কাজ এপিআই

ব্রাউজারের প্রধান থ্রেড কখন দীর্ঘ সময়ের জন্য ব্লক হয়ে ফ্রেম রেট বা ইনপুট ল্যাটেন্সিকে প্রভাবিত করে, তা জানার জন্য লং টাস্কস এপিআই (Long Tasks API) কার্যকর। এই এপিআই ৫০ মিলিসেকেন্ডের বেশি সময় ধরে চলমান যেকোনো টাস্কের রিপোর্ট করবে।

যখনই আপনাকে ব্যয়বহুল কোড চালাতে হয়, বা বড় স্ক্রিপ্ট লোড ও এক্সিকিউট করতে হয়, তখন সেই কোডটি মেইন থ্রেডকে ব্লক করছে কিনা তা ট্র্যাক করা দরকারি। প্রকৃতপক্ষে, অনেক উচ্চ-স্তরের মেট্রিকস লং টাস্কস এপিআই-এর উপরেই তৈরি করা হয়েছে (যেমন টাইম টু ইন্টারঅ্যাক্টিভ (TTI) এবং টোটাল ব্লকিং টাইম (TBT) )।

দীর্ঘ কাজগুলি কখন ঘটে তা নির্ধারণ করতে, আপনি PerformanceObserver ব্যবহার করতে পারেন এবং longtask টাইপের এন্ট্রিগুলি পর্যবেক্ষণ করার জন্য নিবন্ধন করতে পারেন:

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Log the entry and all associated details.
    console.log(entry.toJSON());
  }
});

// Start listening for `longtask` entries to be dispatched.
po.observe({type: 'longtask', buffered: true});

দীর্ঘ অ্যানিমেশন ফ্রেম এপিআই

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

কখন দীর্ঘ ফ্রেম ঘটে তা নির্ধারণ করতে, আপনি PerformanceObserver ব্যবহার করতে পারেন এবং long-animation-frame টাইপের এন্ট্রি পর্যবেক্ষণ করার জন্য নিবন্ধন করতে পারেন:

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Log the entry and all associated details.
    console.log(entry.toJSON());
  }
});

// Start listening for `long-animation-frame` entries to be dispatched.
po.observe({type: 'long-animation-frame', buffered: true});

এলিমেন্ট টাইমিং এপিআই

লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) মেট্রিকটি স্ক্রিনে সবচেয়ে বড় ছবি বা টেক্সট ব্লকটি কখন আঁকা হয়েছিল তা জানার জন্য দরকারি, কিন্তু কিছু ক্ষেত্রে আপনি অন্য কোনো এলিমেন্টের রেন্ডার টাইম পরিমাপ করতে চাইতে পারেন।

এইসব ক্ষেত্রে, এলিমেন্ট টাইমিং এপিআই (Element Timing API) ব্যবহার করুন। এলসিপি এপিআই (LCP API) আসলে এলিমেন্ট টাইমিং এপিআই-এর উপরেই তৈরি এবং এটি বৃহত্তম কন্টেন্টফুল এলিমেন্টের স্বয়ংক্রিয় রিপোর্টিং যোগ করে, কিন্তু আপনি অন্যান্য এলিমেন্টেও স্পষ্টভাবে elementtiming অ্যাট্রিবিউট (elementtiming attribute) যোগ করে এবং element এন্ট্রি টাইপ পর্যবেক্ষণ করার জন্য একটি পারফরম্যান্সঅবজারভার (PerformanceObserver) রেজিস্টার করে সেগুলোর উপরও রিপোর্ট করতে পারেন।

<img elementtiming="hero-image" />
<p elementtiming="important-paragraph">This is text I care about.</p>
<!-- ... -->

<script>
  const po = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });

  // Start listening for `element` entries to be dispatched.
  po.observe({type: 'element', buffered: true});
</script>

ইভেন্ট টাইমিং এপিআই

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিকটি একটি পেজের জীবনচক্র জুড়ে সমস্ত ক্লিক, ট্যাপ এবং কীবোর্ড ইন্টারঅ্যাকশন পর্যবেক্ষণ করে পেজটির সামগ্রিক রেসপন্সিভনেস মূল্যায়ন করে। একটি পেজের INP প্রায়শই সেই ইন্টারঅ্যাকশনটি হয় যা সম্পন্ন হতে সবচেয়ে বেশি সময় নিয়েছে; অর্থাৎ, ব্যবহারকারী যখন ইন্টারঅ্যাকশনটি শুরু করেন, সেই সময় থেকে শুরু করে ব্রাউজার যখন ব্যবহারকারীর ইনপুটের ভিজ্যুয়াল ফলাফল দেখানোর জন্য পরবর্তী ফ্রেমটি আঁকে, সেই পর্যন্ত সময়কাল।

ইভেন্ট টাইমিং এপিআই (Event Timing API)- এর মাধ্যমে আইএনপি (INP) মেট্রিকটি সম্ভব হয়েছে। এই এপিআইটি ইভেন্টের জীবনচক্র চলাকালীন বিভিন্ন টাইমস্ট্যাম্প প্রকাশ করে, যার মধ্যে রয়েছে:

• startTime : যে সময়ে ব্রাউজার ইভেন্টটি গ্রহণ করে।
• processingStart : যে সময়ে ব্রাউজার ইভেন্টটির জন্য ইভেন্ট হ্যান্ডলারগুলো প্রসেস করা শুরু করতে সক্ষম হয়।
• processingEnd : যে সময়ে ব্রাউজার এই ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার থেকে শুরু করা সমস্ত সিনক্রোনাস কোডের নির্বাহ শেষ করে।
• duration : ব্রাউজার ইভেন্টটি গ্রহণ করার মুহূর্ত থেকে শুরু করে ইভেন্ট হ্যান্ডলার থেকে শুরু হওয়া সমস্ত সিনক্রোনাস কোডের নির্বাহ শেষ করে পরবর্তী ফ্রেমটি আঁকার উপযুক্ত হওয়া পর্যন্ত সময় (নিরাপত্তাজনিত কারণে ৮ মিলিসেকেন্ডে পূর্ণসংখ্যায় রূপান্তরিত)।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই মানগুলি ব্যবহার করে কাস্টম পরিমাপ তৈরি করা যায়:

const po = new PerformanceObserver((entryList) => {
  // Get the last interaction observed:
  const entries = Array.from(entryList.getEntries()).forEach((entry) => {
    // Get various bits of interaction data:
    const inputDelay = entry.processingStart - entry.startTime;
    const processingTime = entry.processingEnd - entry.processingStart;
    const presentationDelay = entry.startTime + entry.duration - entry.processingEnd;
    const duration = entry.duration;
    const eventType = entry.name;
    const target = entry.target || "(not set)"

    console.log("----- INTERACTION -----");
    console.log(`Input delay (ms): ${inputDelay}`);
    console.log(`Event handler processing time (ms): ${processingTime}`);
    console.log(`Presentation delay (ms): ${presentationDelay}`);
    console.log(`Total event duration (ms): ${duration}`);
    console.log(`Event type: ${eventType}`);
    console.log(target);
  });
});

// A durationThreshold of 16ms is necessary to include more
// interactions, since the default is 104ms. The minimum
// durationThreshold is 16ms.
po.observe({type: 'event', buffered: true, durationThreshold: 16});

রিসোর্স টাইমিং এপিআই

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

• initiatorType : রিসোর্সটি কীভাবে আনা হয়েছে: যেমন <script> বা <link> ট্যাগ থেকে, অথবা fetch() কলের মাধ্যমে।
• nextHopProtocol : রিসোর্সটি ফেচ করার জন্য ব্যবহৃত প্রোটোকল, যেমন h2 বা quic ।
• encodedBodySize / decodedBodySize ]: রিসোর্সটির যথাক্রমে এনকোডেড বা ডিকোডেড রূপের আকার
• transferSize : নেটওয়ার্কের মাধ্যমে প্রকৃতপক্ষে স্থানান্তরিত রিসোর্সের আকার। যখন রিসোর্সগুলি ক্যাশে দ্বারা পূরণ করা হয়, তখন এই মান encodedBodySize এর চেয়ে অনেক ছোট হতে পারে এবং কিছু ক্ষেত্রে এটি শূন্যও হতে পারে (যদি ক্যাশে পুনঃযাচাইয়ের প্রয়োজন না হয়)।

আপনি রিসোর্স টাইমিং এন্ট্রির transferSize প্রপার্টি ব্যবহার করে ক্যাশ হিট রেট মেট্রিক অথবা মোট ক্যাশ করা রিসোর্সের আকার মেট্রিক পরিমাপ করতে পারেন, যা বারবার আসা ব্যবহারকারীদের জন্য আপনার রিসোর্স ক্যাশিং কৌশল কীভাবে পারফরম্যান্সকে প্রভাবিত করে তা বুঝতে সহায়ক হতে পারে।

নিম্নলিখিত উদাহরণটি পৃষ্ঠা দ্বারা অনুরোধ করা সমস্ত রিসোর্স লগ করে এবং প্রতিটি রিসোর্স ক্যাশে দ্বারা পূরণ করা হয়েছে কি না তা নির্দেশ করে।

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // If transferSize is 0, the resource was fulfilled using the cache.
    console.log(entry.name, entry.transferSize === 0);
  }
});

// Start listening for `resource` entries to be dispatched.
po.observe({type: 'resource', buffered: true});

নেভিগেশন টাইমিং এপিআই

ন্যাভিগেশন টাইমিং এপিআই রিসোর্স টাইমিং এপিআই-এর অনুরূপ, কিন্তু এটি শুধুমাত্র ন্যাভিগেশন রিকোয়েস্টগুলো রিপোর্ট করে। navigation এন্ট্রি টাইপটিও resource এন্ট্রি টাইপের অনুরূপ, কিন্তু এতে শুধুমাত্র ন্যাভিগেশন রিকোয়েস্টের জন্য নির্দিষ্ট কিছু অতিরিক্ত তথ্য থাকে (যেমন DOMContentLoaded এবং load ইভেন্টগুলো কখন ফায়ার হয়)।

সার্ভারের প্রতিক্রিয়া সময় ( টাইম টু ফার্স্ট বাইট (TTFB) ) বোঝার জন্য অনেক ডেভেলপার যে মেট্রিকটি ট্র্যাক করেন, তা নেভিগেশন টাইমিং এপিআই (Navigation Timing API) ব্যবহার করে পাওয়া যায়—বিশেষত এর এন্ট্রির responseStart টাইমস্ট্যাম্পের মাধ্যমে।

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // If transferSize is 0, the resource was fulfilled using the cache.
    console.log('Time to first byte', entry.responseStart);
  }
});

// Start listening for `navigation` entries to be dispatched.
po.observe({type: 'navigation', buffered: true});

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

একটি নির্দিষ্ট নেভিগেশন অনুরোধের জন্য সার্ভিস ওয়ার্কার চালু হওয়ার সময় entry.responseStart এবং entry.workerStart মধ্যকার পার্থক্য থেকে নির্ধারণ করা যেতে পারে।

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Service Worker startup time:',
        entry.responseStart - entry.workerStart);
  }
});

// Start listening for `navigation` entries to be dispatched.
po.observe({type: 'navigation', buffered: true});

সার্ভার টাইমিং এপিআই

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

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

আপনার রেসপন্সে সার্ভারের টাইমিং ডেটা নির্দিষ্ট করতে, আপনি Server-Timing রেসপন্স হেডারটি ব্যবহার করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো।

HTTP/1.1 200 OK

Server-Timing: miss, db;dur=53, app;dur=47.2

তারপর, আপনার পেজগুলো থেকে, আপনি রিসোর্স টাইমিং এবং নেভিগেশন টাইমিং এপিআই ব্যবহার করে resource বা navigation এন্ট্রি উভয়ের এই ডেটা পড়তে পারবেন।

// Create the performance observer.
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Logs all server timing data for this response
    console.log('Server Timing', entry.serverTiming);
  }
});

// Start listening for `navigation` entries to be dispatched.
po.observe({type: 'navigation', buffered: true});