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

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

Hongbo Song

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

একটি পৃষ্ঠায় ঘটে যাওয়া সবচেয়ে বড়, স্বতন্ত্র ইন্টারঅ্যাকশন লেটেন্সি। উপরে তালিকাভুক্ত ইন্টারঅ্যাকশনের উদাহরণ দেওয়া হলে, সবচেয়ে খারাপ ইন্টারঅ্যাকশন লেটেন্সি হবে 120 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});

প্রতিক্রিয়া

আমরা ডেভেলপারদের তাদের সাইটে এই নতুন প্রতিক্রিয়াশীলতা মেট্রিকগুলি ব্যবহার করে দেখতে উত্সাহিত করতে চাই এবং আপনি যদি কোনও সমস্যা খুঁজে পান তবে আমাদের জানান৷

সাবজেক্ট লাইনে "[রিস্পন্সিভনেস মেট্রিক্স]" সহ ওয়েব-ভিটালস-ফিডব্যাক গুগল গ্রুপে এখানে বর্ণিত পদ্ধতির বিষয়ে যেকোনো সাধারণ প্রতিক্রিয়া ইমেল করুন। আমরা সত্যিই আপনি কি মনে করেন শোনার জন্য উন্মুখ!