এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

প্রতিক্রিয়া চাই: একটি পরীক্ষামূলক প্রতিক্রিয়া মেট্রিক

ওয়েবে প্রতিক্রিয়াশীলতা পরিমাপের জন্য আমাদের পরিকল্পনার একটি আপডেট৷

Hongbo Song

মূল পয়েন্ট: এই নিবন্ধটি এমন একটি সময়ের মধ্যে লেখা হয়েছিল যেখানে ওয়েব পৃষ্ঠাগুলিতে শেষ থেকে শেষ লেটেন্সি পরিমাপ করার জন্য একটি নতুন প্রতিক্রিয়াশীলতা মেট্রিক তৈরি করা হয়েছিল৷ সেই নতুন মেট্রিকটি প্রকাশিত হয়েছে, এবং এর নাম দেওয়া হয়েছে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) । 12 মার্চ, 2024-এ, INP একটি কোর ওয়েব ভাইটাল হয়ে ওঠে, FID এর পরিবর্তে।

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

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

এই বিকল্পগুলির মধ্যে কোনটি তাদের পৃষ্ঠাগুলির সামগ্রিক ইনপুট প্রতিক্রিয়াশীলতার সবচেয়ে প্রতিনিধিত্ব করবে সে সম্পর্কে আমরা বিকাশকারী এবং সাইটের মালিকদের কাছ থেকে প্রতিক্রিয়া পেতে চাই৷

মিথস্ক্রিয়া বিলম্বিতা পরিমাপ করুন

পর্যালোচনা হিসাবে, প্রথম ইনপুট বিলম্ব (FID) মেট্রিক ইনপুট লেটেন্সির বিলম্বের অংশকে ক্যাপচার করে । অর্থাৎ, ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার সময় থেকে ইভেন্ট হ্যান্ডলাররা চালানোর সময় পর্যন্ত।

এই নতুন মেট্রিকের সাহায্যে আমরা ইভেন্ট হ্যান্ডলার চালানোর পরে প্রাথমিক ব্যবহারকারীর ইনপুট থেকে পরবর্তী ফ্রেম আঁকা না হওয়া পর্যন্ত পুরো ইভেন্টের সময়কাল ক্যাপচার করার জন্য এটি প্রসারিত করার পরিকল্পনা করছি।

আমরা পৃথক ইভেন্টের পরিবর্তে মিথস্ক্রিয়া পরিমাপ করার পরিকল্পনা করি। মিথস্ক্রিয়া হল ইভেন্টের গোষ্ঠী যা একই, যৌক্তিক ব্যবহারকারীর অঙ্গভঙ্গির অংশ হিসাবে প্রেরণ করা হয় (উদাহরণস্বরূপ: pointerdown , click , pointerup )।

পৃথক ইভেন্টের সময়কালের একটি গ্রুপ থেকে মোট মিথস্ক্রিয়া বিলম্বতা পরিমাপ করতে, আমরা দুটি সম্ভাব্য পন্থা বিবেচনা করছি:

সর্বাধিক ইভেন্টের সময়কাল: ইন্টারঅ্যাকশন লেটেন্সি মিথস্ক্রিয়া গ্রুপের যেকোনো ইভেন্ট থেকে সবচেয়ে বড় একক ইভেন্ট সময়কালের সমান।
মোট ইভেন্টের সময়কাল: কোনো ওভারল্যাপ উপেক্ষা করে মিথস্ক্রিয়া লেটেন্সি হল সমস্ত ইভেন্টের সময়কালের যোগফল।

একটি উদাহরণ হিসাবে, নীচের চিত্রটি একটি কী প্রেস ইন্টারঅ্যাকশন দেখায় যা একটি keydown এবং একটি keyup ইভেন্ট নিয়ে গঠিত। এই উদাহরণে এই দুটি ঘটনার মধ্যে একটি সময়কাল ওভারল্যাপ আছে। কী প্রেস ইন্টারঅ্যাকশনের লেটেন্সি পরিমাপ করতে, আমরা max(keydown duration, keyup duration) বা sum(keydown duration, keyup duration) - duration overlap ব্যবহার করতে পারি :

ইভেন্টের সময়কালের উপর ভিত্তি করে ইন্টারঅ্যাকশন লেটেন্সি দেখানো একটি চিত্র

প্রতিটি পদ্ধতির সুবিধা এবং অসুবিধা রয়েছে এবং আমরা একটি লেটেন্সি সংজ্ঞা চূড়ান্ত করার আগে আরও ডেটা এবং প্রতিক্রিয়া সংগ্রহ করতে চাই৷

দ্রষ্টব্য: ইভেন্টের সময়কালটি ইভেন্ট হার্ডওয়্যার টাইমস্ট্যাম্প থেকে ইভেন্ট পরিচালনা করার পরে পরবর্তী পেইন্টটি সম্পাদিত হওয়ার সময়কে বোঝানো হয়। কিন্তু যদি ইভেন্ট কোনো আপডেট না করে, তাহলে সময়কাল হবে ইভেন্ট হার্ডওয়্যার টাইমস্ট্যাম্প থেকে সেই সময় পর্যন্ত যখন আমরা নিশ্চিত যে এটি কোনো আপডেটের কারণ হবে না।

দ্রষ্টব্য: কীবোর্ড ইন্টারঅ্যাকশনের জন্য, আমরা সাধারণত keydown এবং keyup পরিমাপ করি। কিন্তু IME-এর জন্য, যেমন চাইনিজ এবং জাপানিদের জন্য ইনপুট পদ্ধতি, আমরা একটি compositionstart এবং একটি compositionend এর মধ্যে input ইভেন্ট পরিমাপ করি।

প্রতি পৃষ্ঠায় সমস্ত মিথস্ক্রিয়া একত্রিত করুন

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

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

একত্রীকরণ কৌশল বিকল্প

নিম্নলিখিত প্রতিটি কৌশল ব্যাখ্যা করতে সাহায্য করার জন্য, চারটি মিথস্ক্রিয়া নিয়ে গঠিত একটি উদাহরণ পৃষ্ঠা পরিদর্শন বিবেচনা করুন:

মিথষ্ক্রিয়া	লেটেন্সি
ক্লিক	120 ms
ক্লিক	20 ms
কী প্রেস	60 ms
কী প্রেস	80 ms

সবচেয়ে খারাপ মিথস্ক্রিয়া বিলম্বিতা

একটি পৃষ্ঠায় ঘটে যাওয়া সবচেয়ে বড়, স্বতন্ত্র ইন্টারঅ্যাকশন লেটেন্সি। উপরে তালিকাভুক্ত ইন্টারঅ্যাকশনের উদাহরণ দেওয়া হলে, সবচেয়ে খারাপ ইন্টারঅ্যাকশন লেটেন্সি হবে 120 ms।

বাজেটের কৌশল

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

মিথস্ক্রিয়া প্রকার	বাজেট থ্রেশহোল্ড
ক্লিক/ট্যাপ করুন	100 ms
টেনে আনুন	100 ms
কীবোর্ড	50 ms

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

মিথষ্ক্রিয়া	লেটেন্সি	বাজেটের উপর বিলম্ব
ক্লিক	120 ms	20 ms
ক্লিক	20 ms	0 ms
কী প্রেস	60 ms	10 ms
কী প্রেস	80 ms	30 ms

বাজেটের উপর সবচেয়ে খারাপ ইন্টারঅ্যাকশন লেটেন্সি

বাজেটের উপর সবচেয়ে বড় একক মিথস্ক্রিয়া বিলম্ব। উপরের উদাহরণ ব্যবহার করে, স্কোর হবে max(20, 0, 10, 30) = 30 ms ।

বাজেটের উপর মোট মিথস্ক্রিয়া বিলম্ব

বাজেটের উপর সমস্ত মিথস্ক্রিয়া বিলম্বের সমষ্টি। উপরের উদাহরণটি ব্যবহার করে, স্কোর হবে (20 + 0 + 10 + 30) = 60 ms ।

বাজেটের তুলনায় গড় মিথস্ক্রিয়া বিলম্ব

মোট অতি-বাজেট ইন্টারঅ্যাকশন লেটেন্সিকে মোট ইন্টারঅ্যাকশনের সংখ্যা দিয়ে ভাগ করে। উপরের উদাহরণটি ব্যবহার করে, স্কোর হবে (20 + 0 + 10 + 30) / 4 = 15 ms ।

উচ্চ কোয়ান্টাইল আনুমানিক

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

বিকল্প 1: বাজেটের উপর সবচেয়ে বড় এবং দ্বিতীয় বৃহত্তম ইন্টারঅ্যাকশনের উপর নজর রাখুন। প্রতি 50টি নতুন ইন্টারঅ্যাকশনের পর, 50টির আগের সেট থেকে সবচেয়ে বড় ইন্টারঅ্যাকশনটি বাদ দিন এবং 50টির বর্তমান সেট থেকে সবচেয়ে বড় ইন্টারঅ্যাকশন যোগ করুন। চূড়ান্ত মানটি হবে বাজেটের তুলনায় সবচেয়ে বড় বাকী ইন্টারঅ্যাকশন।
বিকল্প 2: বাজেটের উপর সবচেয়ে বড় 10টি মিথস্ক্রিয়া গণনা করুন এবং মোট মিথস্ক্রিয়া সংখ্যার উপর নির্ভর করে সেই তালিকা থেকে একটি মান চয়ন করুন। N মোট ইন্টারঅ্যাকশন দেওয়া হলে, (N / 50 + 1)তম বৃহত্তম মান বা 500 টির বেশি ইন্টারঅ্যাকশন সহ পৃষ্ঠাগুলির জন্য 10 তম মান নির্বাচন করুন।

জাভাস্ক্রিপ্টে এই বিকল্পগুলি পরিমাপ করুন

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

const interactionMap = new Map();

let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;

new PerformanceObserver((entries) => {
  for (const entry of entries.getEntries()) {
    // Ignore entries without an interaction ID.
    if (entry.interactionId > 0) {
      // Get the interaction for this entry, or create one if it doesn't exist.
      let interaction = interactionMap.get(entry.interactionId);
      if (!interaction) {
        interaction = {latency: 0, entries: []};
        interactionMap.set(entry.interactionId, interaction);
      }
      interaction.entries.push(entry);

      const latency = Math.max(entry.duration, interaction.latency);
      worstLatency = Math.max(worstLatency, latency);

      const budget = entry.name.includes('key') ? 50 : 100;
      const latencyOverBudget = Math.max(latency - budget, 0);
      worstLatencyOverBudget = Math.max(
        latencyOverBudget,
        worstLatencyOverBudget,
      );

      if (latencyOverBudget) {
        const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
        totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
      }

      // Set the latency on the interaction so future events can reference.
      interaction.latency = latency;

      // Log the updated metric values.
      console.log({
        worstLatency,
        worstLatencyOverBudget,
        totalLatencyOverBudget,
      });
    }
  }
  // Set the `durationThreshold` to 50 to capture keyboard interactions
  // that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});