ন্যাভিগেশন টাইমিং এবং রিসোর্স টাইমিং দিয়ে ক্ষেত্রে লোডিং পারফরম্যান্স কীভাবে মূল্যায়ন করবেন

ক্ষেত্রের লোডিং কর্মক্ষমতা মূল্যায়ন করতে নেভিগেশন এবং রিসোর্স টাইমিং API ব্যবহার করার প্রাথমিক বিষয়গুলি শিখুন৷

Jeremy Wagner

প্রকাশিত হয়েছে: অক্টোবর 8, 2021

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

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

ক্ষেত্রের লোডিং কর্মক্ষমতা মূল্যায়ন করতে আপনাকে সহায়তা করার জন্য APIs

নেভিগেশন টাইমিং এবং রিসোর্স টাইমিং উল্লেখযোগ্য ওভারল্যাপ সহ দুটি অনুরূপ API যা দুটি স্বতন্ত্র জিনিস পরিমাপ করে:

• ন্যাভিগেশন টাইমিং এইচটিএমএল ডকুমেন্টের জন্য অনুরোধের গতি পরিমাপ করে (অর্থাৎ, নেভিগেশন অনুরোধ)।
• রিসোর্স টাইমিং নথি-নির্ভর সংস্থানগুলির জন্য অনুরোধের গতি পরিমাপ করে যেমন CSS, JavaScript, চিত্র এবং অন্যান্য সংস্থান প্রকার।

এই APIগুলি তাদের ডেটা একটি পারফরম্যান্স এন্ট্রি বাফারে প্রকাশ করে, যা জাভাস্ক্রিপ্টের মাধ্যমে ব্রাউজারে অ্যাক্সেস করা যেতে পারে। পারফরম্যান্স বাফার অনুসন্ধান করার একাধিক উপায় রয়েছে, তবে একটি সাধারণ উপায় হল performance.getEntriesByType ব্যবহার করে :

// Get Navigation Timing entries:
performance.getEntriesByType('navigation');

// Get Resource Timing entries:
performance.getEntriesByType('resource');

performance.getEntriesByType পারফরম্যান্স এন্ট্রি বাফার থেকে আপনি যে ধরনের এন্ট্রি পুনরুদ্ধার করতে চান তা বর্ণনা করে একটি স্ট্রিং গ্রহণ করে। 'navigation' এবং 'resource' যথাক্রমে নেভিগেশন টাইমিং এবং রিসোর্স টাইমিং API-এর জন্য সময় পুনরুদ্ধার করে।

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

একটি নেটওয়ার্ক অনুরোধের জীবন এবং সময়

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

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

DNS সন্ধান

যখন একজন ব্যবহারকারী একটি URL-এ যায়, তখন ডোমেন নেম সিস্টেম (DNS) থেকে একটি ডোমেনকে একটি IP ঠিকানায় অনুবাদ করার জন্য জিজ্ঞাসা করা হয়। এই প্রক্রিয়ায় উল্লেখযোগ্য সময় লাগতে পারে—যে সময় আপনি ক্ষেত্রে পরিমাপ করতে চান, এমনকি। নেভিগেশন টাইমিং এবং রিসোর্স টাইমিং দুটি ডিএনএস-সম্পর্কিত সময় প্রকাশ করে:

• domainLookupStart হল যখন DNS লুকআপ শুরু হয়।
• domainLookupEnd হল যখন DNS লুকআপ শেষ হয়।

শেষ মেট্রিক থেকে শুরু মেট্রিক বিয়োগ করে মোট DNS লুকআপ সময় গণনা করা যেতে পারে:

// Measuring DNS lookup time
const [pageNav] = performance.getEntriesByType('navigation');
const totalLookupTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;

সংযোগ আলোচনা

পারফরম্যান্স লোড করার জন্য আরেকটি অবদানকারী ফ্যাক্টর হল সংযোগ আলোচনা, যা একটি ওয়েব সার্ভারের সাথে সংযোগ করার সময় বিলম্বিত হয়। HTTPS জড়িত থাকলে, এই প্রক্রিয়াটি TLS আলোচনার সময়ও অন্তর্ভুক্ত করবে। সংযোগ পর্যায় তিনটি সময় নিয়ে গঠিত:

• connectStart হল যখন ব্রাউজার একটি ওয়েব সার্ভারে একটি সংযোগ খুলতে শুরু করে।
• ক্লায়েন্ট যখন TLS আলোচনা শুরু করে তখন secureConnectionStart চিহ্নিত করে।
• connectEnd হল যখন ওয়েব সার্ভারের সাথে সংযোগ স্থাপন করা হয়।

মোট সংযোগের সময় পরিমাপ করা মোট DNS লুকআপ সময় পরিমাপের অনুরূপ: আপনি শেষ সময় থেকে শুরুর সময় বিয়োগ করেন। যাইহোক, একটি অতিরিক্ত secureConnectionStart প্রপার্টি রয়েছে যা 0 হতে পারে যদি HTTPS ব্যবহার না করা হয় বা সংযোগটি স্থায়ী হয় । আপনি যদি TLS আলোচনার সময় পরিমাপ করতে চান তবে আপনাকে এটি মনে রাখতে হবে:

// Quantifying total connection time
const [pageNav] = performance.getEntriesByType('navigation');
const connectionTime = pageNav.connectEnd - pageNav.connectStart;
let tlsTime = 0; // <-- Assume 0 to start with

// Was there TLS negotiation?
if (pageNav.secureConnectionStart > 0) {
  // Awesome! Calculate it!
  tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart;
}

একবার DNS লুকআপ এবং সংযোগ আলোচনা শেষ হয়ে গেলে, নথিগুলি এবং তাদের নির্ভরশীল সংস্থানগুলি আনার সাথে সম্পর্কিত সময়গুলি কার্যকর হয়৷

অনুরোধ এবং প্রতিক্রিয়া

লোডিং কর্মক্ষমতা দুটি ধরণের কারণ দ্বারা প্রভাবিত হয়:

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

উভয় ধরনের কারণ লোডিং কর্মক্ষমতা প্রভাবিত করে। এই বিষয়গুলির সাথে সম্পর্কিত সময়গুলি অত্যাবশ্যক, কারণ তারা বর্ণনা করে যে সংস্থানগুলি ডাউনলোড করতে কতক্ষণ সময় লাগে৷ ন্যাভিগেশন টাইমিং এবং রিসোর্স টাইমিং উভয়ই নিম্নলিখিত মেট্রিক্সের সাথে লোডিং কর্মক্ষমতা বর্ণনা করে:

• fetchStart চিহ্নিত করে যখন ব্রাউজার একটি রিসোর্স (রিসোর্স টাইমিং) বা নেভিগেশন অনুরোধের জন্য একটি নথি (নেভিগেশন টাইমিং) আনতে শুরু করে। এটি প্রকৃত অনুরোধের আগে, এবং ব্রাউজারটি ক্যাশে পরীক্ষা করছে এমন বিন্দু (উদাহরণস্বরূপ, HTTP এবং Cache উদাহরণ )।
• workerStart চিহ্নিত করে যখন একটি অনুরোধ একটি পরিষেবা কর্মীর fetch ইভেন্ট হ্যান্ডলারের মধ্যে পরিচালনা করা শুরু হয়। এটি 0 হবে যখন কোনও পরিষেবা কর্মী বর্তমান পৃষ্ঠা নিয়ন্ত্রণ করছে না।
• requestStart হল যখন ব্রাউজার অনুরোধ করে।
• responseStart হল যখন প্রতিক্রিয়ার প্রথম বাইট আসে।
• responseEnd হল যখন রেসপন্সের শেষ বাইট আসে।

এই সময়গুলি আপনাকে লোডিং কর্মক্ষমতার একাধিক দিক পরিমাপ করতে দেয়, যেমন একজন পরিষেবা কর্মীর মধ্যে ক্যাশে সন্ধান এবং ডাউনলোডের সময়:

// Cache seek plus response time of the current document
const [pageNav] = performance.getEntriesByType('navigation');
const fetchTime = pageNav.responseEnd - pageNav.fetchStart;

// Service worker time plus response time
let workerTime = 0;

if (pageNav.workerStart > 0) {
  workerTime = pageNav.responseEnd - pageNav.workerStart;
}

আপনি অনুরোধ এবং প্রতিক্রিয়ার বিলম্বের অন্যান্য দিকগুলিও পরিমাপ করতে পারেন:

const [pageNav] = performance.getEntriesByType('navigation');

// Request time only (excluding redirects, DNS, and connection/TLS time)
const requestTime = pageNav.responseStart - pageNav.requestStart;

// Response time only (download)
const responseTime = pageNav.responseEnd - pageNav.responseStart;

// Request + response time
const requestResponseTime = pageNav.responseEnd - pageNav.requestStart;

অন্যান্য পরিমাপ আপনি করতে পারেন

ন্যাভিগেশন টাইমিং এবং রিসোর্স টাইমিং পূর্ববর্তী উদাহরণগুলির রূপরেখার চেয়ে বেশি কিছুর জন্য উপযোগী। এখানে প্রাসঙ্গিক সময়ের সাথে কিছু অন্যান্য পরিস্থিতি রয়েছে যা অন্বেষণের মূল্য হতে পারে:

• পৃষ্ঠা পুনঃনির্দেশ: পুনঃনির্দেশগুলি যোগ করা বিলম্বের একটি উপেক্ষিত উৎস, বিশেষ করে চেইন পুনর্নির্দেশ। লেটেন্সি বিভিন্ন উপায়ে যোগ করা হয়, যেমন HTTP-টু-HTTPs হপস, সেইসাথে 302/আনক্যাশড 301 রিডাইরেক্ট। redirectStart , redirectEnd এবং redirectCount টাইমিং রিডাইরেক্ট লেটেন্সি মূল্যায়নে সহায়ক।
• ডকুমেন্ট আনলোড করা: যে পৃষ্ঠাগুলি একটি unload ইভেন্ট হ্যান্ডলারে কোড চালায়, ব্রাউজারকে অবশ্যই সেই কোডটি কার্যকর করতে হবে তার আগে এটি পরবর্তী পৃষ্ঠায় নেভিগেট করতে পারে৷ unloadEventStart এবং unloadEventEnd পরিমাপ ডকুমেন্ট আনলোড করা।
• ডকুমেন্ট প্রসেসিং: ডকুমেন্ট প্রসেসিং সময় ফলপ্রসূ নাও হতে পারে যদি না আপনার ওয়েবসাইট খুব বড় HTML পেলোড পাঠায়। যদি এটি আপনার পরিস্থিতি বর্ণনা করে, domInteractive , domContentLoadedEventStart , domContentLoadedEventEnd , এবং domComplete সময়গুলি আগ্রহের হতে পারে৷

কিভাবে আপনার কোড সময় পেতে

এখনও পর্যন্ত দেখানো সমস্ত উদাহরণগুলি performance.getEntriesByType ব্যবহার করে, কিন্তু পারফরম্যান্স এন্ট্রি বাফারটি অনুসন্ধান করার অন্যান্য উপায় রয়েছে, যেমন performance.getEntriesByName এবং performance.getEntries । শুধুমাত্র হালকা বিশ্লেষণের প্রয়োজন হলে এই পদ্ধতিগুলি ভাল। অন্যান্য পরিস্থিতিতে, যদিও, তারা প্রচুর সংখ্যক এন্ট্রির পুনরাবৃত্তি করে বা এমনকি বারবার নতুন এন্ট্রি খুঁজতে পারফরম্যান্স বাফারে পোলিং করে অত্যধিক প্রধান থ্রেড কাজ প্রবর্তন করতে পারে।

পারফরম্যান্স এন্ট্রি বাফার থেকে এন্ট্রি সংগ্রহের জন্য প্রস্তাবিত পদ্ধতি হল একটি PerformanceObserver ব্যবহার করা। PerformanceObserver পারফরম্যান্স এন্ট্রিগুলির জন্য শোনে এবং বাফারে যোগ করার সাথে সাথে সেগুলি প্রদান করে:

// Create the performance observer:
const perfObserver = new PerformanceObserver((observedEntries) => {
  // Get all resource entries collected so far:
  const entries = observedEntries.getEntries();

  // Iterate over entries:
  for (let i = 0; i < entries.length; i++) {
    // Do the work!
  }
});

// Run the observer for Navigation Timing entries:
perfObserver.observe({
  type: 'navigation',
  buffered: true
});

// Run the observer for Resource Timing entries:
perfObserver.observe({
  type: 'resource',
  buffered: true
});

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

কিভাবে বাসায় ফোন করবেন

একবার আপনি আপনার প্রয়োজনীয় সমস্ত সময় সংগ্রহ করে ফেললে, আপনি আরও বিশ্লেষণের জন্য সেগুলিকে একটি এন্ডপয়েন্টে পাঠাতে পারেন। এটি করার দুটি উপায় হল navigator.sendBeacon অথবা একটি fetch সহ keepalive অপশন সেট। উভয় পদ্ধতিই একটি নির্দিষ্ট এন্ডপয়েন্টে একটি নন-ব্লকিং উপায়ে একটি অনুরোধ পাঠাবে এবং অনুরোধটি এমনভাবে সারিবদ্ধ করা হবে যা প্রয়োজনে বর্তমান পৃষ্ঠার অধিবেশনের বাইরে থাকে:

// Check for navigator.sendBeacon support:
if ('sendBeacon' in navigator) {
  // Caution: If you have lots of performance entries, don't
  // do this. This is an example for illustrative purposes.
  const data = JSON.stringify(performance.getEntries());

  // Send the data!
  navigator.sendBeacon('/analytics', data);
}

এই উদাহরণে, JSON স্ট্রিংটি একটি POST পেলোডে আসবে যা আপনি প্রয়োজন অনুসারে একটি অ্যাপ্লিকেশন ব্যাকএন্ডে ডিকোড, প্রক্রিয়া এবং সংরক্ষণ করতে পারেন।

উপসংহার

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

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

এই নির্দেশিকাটি ন্যাভিগেশন বা রিসোর্স টাইমিংয়ের একটি সম্পূর্ণ সংস্থান নয়, তবে একটি সূচনা পয়েন্ট। এখানে কিছু অতিরিক্ত সংস্থান রয়েছে যা আপনি সহায়ক হতে পারেন:

• নেভিগেশন টাইমিং স্পেসিক
• রিসোর্স টাইমিং স্পেক
• অনুশীলনে রিসোর্সটাইমিং ।
• নেভিগেশন টাইমিং API (MDN)
• রিসোর্স টাইমিং API (MDN)

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