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

Philip Walton

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

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

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

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

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

কাস্টম মেট্রিক্স পরিমাপ করার জন্য API গুলি

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

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

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

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

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

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

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,
});

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

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

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

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

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

ব্যবহারকারীর সময় নির্ধারণ API

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

// 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() এর মতো API গুলি আপনাকে একই রকম ক্ষমতা প্রদান করে, User Timing API ব্যবহারের সুবিধা হল এটি পারফরম্যান্স টুলিংয়ের সাথে ভালভাবে সংহত হয়। উদাহরণস্বরূপ, Chrome DevTools পারফরম্যান্স প্যানেলে User Timing পরিমাপ কল্পনা করে, এবং অনেক বিশ্লেষণ প্রদানকারী আপনার করা যেকোনো পরিমাপ স্বয়ংক্রিয়ভাবে ট্র্যাক করবে এবং সময়কাল ডেটা তাদের বিশ্লেষণ ব্যাকএন্ডে পাঠাবে।

ব্যবহারকারীর সময় পরিমাপ রিপোর্ট করতে, আপনি 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});

লং টাস্ক এপিআই

লং টাস্ক এপিআই ব্রাউজারের মূল থ্রেড কখন ফ্রেম রেট বা ইনপুট ল্যাটেন্সির উপর প্রভাব ফেলতে পারে তা জানার জন্য কার্যকর। ৫০ মিলিসেকেন্ডের বেশি সময় ধরে সঞ্চালিত যেকোনো কাজ সম্পর্কে এপিআই রিপোর্ট করবে।

যখনই আপনাকে ব্যয়বহুল কোড চালাতে হবে, অথবা বড় স্ক্রিপ্ট লোড এবং এক্সিকিউট করতে হবে, তখন সেই কোডটি মূল থ্রেডকে ব্লক করে কিনা তা ট্র্যাক করা কার্যকর। আসলে, অনেক উচ্চ-স্তরের মেট্রিক্স লং টাস্ক 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});

লং অ্যানিমেশন ফ্রেম API

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

লম্বা ফ্রেম কখন হবে তা নির্ধারণ করতে, আপনি 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 আসলে Element Timing API এর উপরে তৈরি এবং বৃহত্তম contentful উপাদানের স্বয়ংক্রিয় প্রতিবেদন যোগ করে, তবে আপনি অন্যান্য উপাদানগুলিতে elementtiming বৈশিষ্ট্যটি স্পষ্টভাবে যুক্ত করে এবং 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>

ইভেন্ট টাইমিং API

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

INP মেট্রিকটি ইভেন্ট টাইমিং API দ্বারা সম্ভব হয়েছে। এই API ইভেন্ট জীবনচক্রের সময় ঘটে যাওয়া বেশ কয়েকটি টাইমস্ট্যাম্প প্রকাশ করে, যার মধ্যে রয়েছে:

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

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

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});

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

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

অনেক ডেভেলপার সার্ভার রেসপন্স টাইম ( টাইম টু ফার্স্ট বাইট (TTFB) ) বোঝার জন্য একটি মেট্রিক ট্র্যাক করেন যা নেভিগেশন টাইমিং 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});

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

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

যেসব ডেভেলপার তৃতীয় পক্ষের বিশ্লেষণ সরবরাহকারী ব্যবহার করেন, তাদের জন্য সার্ভার টাইমিং API হল সার্ভারের কর্মক্ষমতা ডেটাকে অন্যান্য ব্যবসায়িক মেট্রিক্সের সাথে সম্পর্কিত করার একমাত্র উপায় যা এই বিশ্লেষণ সরঞ্জামগুলি পরিমাপ করতে পারে।

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

HTTP/1.1 200 OK

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

তারপর, আপনার পৃষ্ঠাগুলি থেকে, আপনি রিসোর্স টাইমিং এবং নেভিগেশন টাইমিং API থেকে 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});