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

ক্ষেত্রে ধীর মিথস্ক্রিয়া খুঁজুন
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

আপনার ওয়েবসাইটের ফিল্ড ডেটাতে কীভাবে ধীর মিথস্ক্রিয়া খুঁজে বের করবেন তা শিখুন যাতে আপনি নেক্সট পেইন্টে এর ইন্টারঅ্যাকশন উন্নত করার সুযোগ পেতে পারেন।

Jeremy Wagner

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

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

আপনার ওয়েবসাইটের INP মূল্যায়ন করতে CrUX দিয়ে শুরু করুন

আপনি যদি আপনার ওয়েবসাইটের ব্যবহারকারীদের থেকে ফিল্ড ডেটা সংগ্রহ না করেন, CrUX একটি ভাল সূচনা পয়েন্ট হতে পারে। CrUX প্রকৃত Chrome ব্যবহারকারীদের কাছ থেকে ফিল্ড ডেটা সংগ্রহ করে যারা টেলিমেট্রি ডেটা পাঠানোর বিকল্প বেছে নিয়েছে।

CrUX ডেটা বিভিন্ন ক্ষেত্রে দেখা যায়, এবং এটি নির্ভর করে আপনি যে তথ্য খুঁজছেন তার সুযোগের উপর। CrUX এর জন্য INP এবং অন্যান্য কোর ওয়েব ভাইটালগুলিতে ডেটা সরবরাহ করতে পারে:

PageSpeed Insights ব্যবহার করে স্বতন্ত্র পৃষ্ঠা এবং সমগ্র উৎস।
পৃষ্ঠার ধরন। উদাহরণস্বরূপ, অনেক ইকমার্স ওয়েবসাইটে পণ্যের বিস্তারিত পৃষ্ঠা এবং পণ্য তালিকা পৃষ্ঠার ধরন রয়েছে। আপনি সার্চ কনসোলে অনন্য পৃষ্ঠার ধরনগুলির জন্য CrUX ডেটা পেতে পারেন৷

প্রারম্ভিক বিন্দু হিসেবে, আপনি PageSpeed Insights-এ আপনার ওয়েবসাইটের URL লিখতে পারেন। একবার আপনি URLটি প্রবেশ করালে, এটির জন্য ফিল্ড ডেটা — যদি উপলব্ধ থাকে — INP সহ একাধিক মেট্রিক্সের জন্য প্রদর্শিত হবে৷ আপনি মোবাইল এবং ডেস্কটপ মাত্রার জন্য আপনার INP মান পরীক্ষা করতে টগলগুলি ব্যবহার করতে পারেন।

PageSpeed Insights-এ CrUX দ্বারা দেখানো ফিল্ড ডেটা, তিনটি কোর ওয়েব ভাইটালে LCP, INP, CLS, এবং TTFB, FCP ডায়াগনস্টিক মেট্রিক্স হিসাবে এবং FID একটি অবচিত কোর ওয়েব ভাইটাল মেট্রিক হিসাবে দেখানো হয়েছে৷ — PageSpeed অন্তর্দৃষ্টিতে দেখা CrUX ডেটার একটি রিডআউট। এই উদাহরণে, প্রদত্ত ওয়েব পৃষ্ঠার INP-এর উন্নতি প্রয়োজন৷

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

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি হল একটি স্ক্রিপ্ট যা আপনি আপনার ওয়েবসাইটের ব্যবহারকারীদের থেকে ফিল্ড ডেটা সংগ্রহ করতে আপনার ওয়েবসাইটে লোড করতে পারেন। আপনি এটিকে সমর্থন করে এমন ব্রাউজারগুলিতে INP সহ বেশ কয়েকটি মেট্রিক্স রেকর্ড করতে এটি ব্যবহার করতে পারেন।

Browser Support

Source

ওয়েব-ভাইটাল লাইব্রেরির স্ট্যান্ডার্ড বিল্ডটি ক্ষেত্রের ব্যবহারকারীদের কাছ থেকে মৌলিক INP ডেটা পেতে ব্যবহার করা যেতে পারে:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

আপনার ব্যবহারকারীদের থেকে আপনার ফিল্ড ডেটা বিশ্লেষণ করার জন্য, আপনি এই ডেটা কোথাও পাঠাতে চাইবেন:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

যাইহোক, এই ডেটা নিজেই আপনাকে CrUX এর চেয়ে বেশি কিছু বলে না। এখানেই ওয়েব-ভাইটাল লাইব্রেরির অ্যাট্রিবিউশন বিল্ড আসে।

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

ওয়েব-ভাইটাল লাইব্রেরির অ্যাট্রিবিউশন বিল্ড অতিরিক্ত ডেটা সারফেস করে যা আপনি ক্ষেত্রের ব্যবহারকারীদের কাছ থেকে পেতে পারেন যাতে আপনি আপনার ওয়েবসাইটের INP-কে প্রভাবিত করে এমন সমস্যাযুক্ত ইন্টারঅ্যাকশনগুলিকে আরও ভালভাবে সমাধান করতে সহায়তা করতে পারেন। এই ডেটা লাইব্রেরির onINP() পদ্ধতিতে প্রদর্শিত attribution অবজেক্টের মাধ্যমে অ্যাক্সেসযোগ্য:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});

ওয়েব-ভিটালস লাইব্রেরি থেকে কনসোল লগগুলি কীভাবে উপস্থিত হয়। এই উদাহরণে কনসোলটি মেট্রিকের নাম (INP), INP মান (56), যেখানে সেই মানটি INP থ্রেশহোল্ডের মধ্যে থাকে (ভাল), এবং The Long Animation Frames API-এর এন্ট্রি সহ অ্যাট্রিবিউশন অবজেক্টে দেখানো তথ্যের বিভিন্ন বিট দেখায়। — কীভাবে ওয়েব-ভাইটাল লাইব্রেরি থেকে ডেটা কনসোলে উপস্থিত হয়।

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

"ব্যবহারকারী কি পৃষ্ঠাটি লোড করার সময় তার সাথে ইন্টারঅ্যাক্ট করেছে?"
"ইন্টারঅ্যাকশনের ইভেন্ট হ্যান্ডলাররা কি দীর্ঘ সময় ধরে চালিয়েছিল?"
"মিথস্ক্রিয়া ইভেন্ট হ্যান্ডলার কোডটি কি শুরু হতে দেরি হয়েছিল? যদি তাই হয়, সেই সময়ে মূল থ্রেডে আর কি ঘটছিল?"
"মিথস্ক্রিয়াটি কি অনেক রেন্ডারিং কাজ করেছে যা পরবর্তী ফ্রেমটি আঁকা হতে দেরি করেছে?"

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

*4 সংস্করণে নতুন
`attribution` অবজেক্ট কী	ডেটা
`interactionTarget`	একটি CSS নির্বাচক উপাদানটি নির্দেশ করে যা পৃষ্ঠার INP মান তৈরি করে—উদাহরণস্বরূপ, `button#save` ।
`interactionType`	ইন্টারঅ্যাকশনের ধরন, হয় ক্লিক, ট্যাপ বা কীবোর্ড ইনপুট থেকে।
`inputDelay` *	ইন্টারঅ্যাকশনের ইনপুট বিলম্ব ।
`processingDuration` *	যে সময় থেকে প্রথম ইভেন্ট শ্রোতা ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া হিসাবে চলতে শুরু করে যখন সমস্ত ইভেন্ট শ্রোতা প্রক্রিয়াকরণ শেষ হয়।
`presentationDelay` *	ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্ব , যা ইভেন্ট হ্যান্ডলাররা শেষ হওয়ার পর থেকে পরবর্তী ফ্রেম আঁকার সময় পর্যন্ত ঘটে।
`longAnimationFrameEntries` *	মিথস্ক্রিয়া সঙ্গে যুক্ত LoAF থেকে এন্ট্রি. অতিরিক্ত তথ্যের জন্য পরবর্তী দেখুন.

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

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

Browser Support

Source

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

ওয়েব-ভাইটাল লাইব্রেরির অ্যাট্রিবিউশন বিল্ড attribution অবজেক্টের longAnimationFrameEntries কী-এর অধীনে LoAF এন্ট্রিগুলির একটি অ্যারে প্রকাশ করে। নিম্নলিখিত সারণীতে কয়েকটি মূল বিট ডেটা তালিকাভুক্ত করা হয়েছে যা আপনি প্রতিটি LoAF এন্ট্রিতে খুঁজে পেতে পারেন:

LoAF এন্ট্রি অবজেক্ট কী	ডেটা
`duration`	দীর্ঘ অ্যানিমেশন ফ্রেমের সময়কাল, লেআউট শেষ হওয়া পর্যন্ত, কিন্তু পেইন্টিং এবং কম্পোজিটিং বাদ দিয়ে।
`blockingDuration`	দীর্ঘ কাজের কারণে ব্রাউজারটি দ্রুত প্রতিক্রিয়া জানাতে অক্ষম ফ্রেমে থাকা মোট সময়। এই ব্লকিং টাইমে জাভাস্ক্রিপ্টে চলমান দীর্ঘ টাস্ক, সেইসাথে ফ্রেমে পরবর্তী যেকোন দীর্ঘ রেন্ডারিং টাস্ক অন্তর্ভুক্ত থাকতে পারে।
`firstUIEventTimestamp`	ফ্রেমের সময় যখন ইভেন্টটি সারিবদ্ধ ছিল তার টাইমস্ট্যাম্প৷ একটি ইন্টারঅ্যাকশনের ইনপুট বিলম্বের শুরু বের করার জন্য দরকারী।
`startTime`	ফ্রেমের শুরুর টাইমস্ট্যাম্প।
`renderStart`	যখন ফ্রেমের জন্য রেন্ডারিংয়ের কাজ শুরু হয়েছিল। এর মধ্যে যেকোন `requestAnimationFrame` কলব্যাক (এবং প্রযোজ্য হলে `ResizeObserver` কলব্যাকগুলি) অন্তর্ভুক্ত রয়েছে, তবে সম্ভাব্য কোনো স্টাইল/লেআউট কাজ শুরু হওয়ার আগে।
`styleAndLayoutStart`	যখন ফ্রেমে শৈলী/লেআউট কাজ হয়। অন্যান্য উপলব্ধ টাইমস্ট্যাম্পে চিত্রিত করার সময় শৈলী/লেআউট কাজের দৈর্ঘ্য নির্ধারণে কার্যকর হতে পারে।
`scripts`	পৃষ্ঠার INP-তে অবদানকারী স্ক্রিপ্ট অ্যাট্রিবিউশন তথ্য ধারণকারী আইটেমগুলির একটি অ্যারে৷

LoAF মডেল অনুযায়ী একটি দীর্ঘ অ্যানিমেশন ফ্রেমের একটি ভিজ্যুয়ালাইজেশন। — LoAF API (মাইনাস `blockingDuration` ) অনুযায়ী একটি দীর্ঘ অ্যানিমেশন ফ্রেমের সময়ের একটি চিত্র।

এই সমস্ত তথ্যগুলি আপনাকে কী মিথস্ক্রিয়াকে ধীর করে তোলে সে সম্পর্কে অনেক কিছু বলতে পারে-কিন্তু scripts অ্যারে যে LoAF এন্ট্রি পৃষ্ঠ বিশেষ আগ্রহের হওয়া উচিত:

স্ক্রিপ্ট অ্যাট্রিবিউশন অবজেক্ট কী	ডেটা
`invoker`	আহ্বানকারী। এটি পরবর্তী সারিতে বর্ণিত আমন্ত্রণের প্রকারের উপর ভিত্তি করে পরিবর্তিত হতে পারে। ইনভোকারদের উদাহরণ `'IMG#id.onload'` , `'Window.requestAnimationFrame'` , বা `'Response.json.then'` এর মতো মান হতে পারে।
`invokerType`	আহ্বানকারীর ধরন। `'user-callback'` , `'event-listener'` , `'resolve-promise'` , `'reject-promise'` , `'classic-script'` , বা `'module-script'` হতে পারে।
`sourceURL`	স্ক্রিপ্টের URL যেখান থেকে দীর্ঘ অ্যানিমেশন ফ্রেম উদ্ভূত হয়েছে৷
`sourceCharPosition`	`sourceURL` দ্বারা চিহ্নিত স্ক্রিপ্টে অক্ষরের অবস্থান।
`sourceFunctionName`	চিহ্নিত স্ক্রিপ্টে ফাংশনের নাম।

এই অ্যারের প্রতিটি এন্ট্রিতে এই টেবিলে দেখানো ডেটা রয়েছে, যা আপনাকে স্ক্রিপ্ট সম্পর্কে তথ্য দেয় যা ধীর মিথস্ক্রিয়াটির জন্য দায়ী ছিল—এবং এটি কীভাবে দায়ী ছিল।

ধীর মিথস্ক্রিয়াগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং চিহ্নিত করুন

আপনি কীভাবে এই তথ্যটি ব্যবহার করতে পারেন সে সম্পর্কে আপনাকে ধারণা দিতে, এই নির্দেশিকাটি এখন ধীর মিথস্ক্রিয়াগুলির পিছনে কিছু কারণ নির্ধারণ করতে web-vitals লাইব্রেরিতে প্রদর্শিত LoAF ডেটা কীভাবে ব্যবহার করতে পারে তা নিয়ে চলে।

দীর্ঘ প্রক্রিয়াকরণের সময়কাল

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

আপনি পূর্ববর্তী কোড স্নিপেটে দেখতে পাচ্ছেন, আপনি উচ্চ প্রক্রিয়াকরণের সময়কালের মানগুলির সাথে মিথস্ক্রিয়াটির পিছনে সঠিক কারণটি ট্র্যাক করতে LoAF ডেটার সাথে কাজ করতে পারেন, যার মধ্যে রয়েছে:

উপাদান এবং তার নিবন্ধিত ইভেন্ট শ্রোতা.
স্ক্রিপ্ট ফাইল—এবং এর মধ্যে অক্ষরের অবস্থান—দীর্ঘ-চলমান ইভেন্ট হ্যান্ডলার কোড ধারণ করে।
ফাংশনের নাম।

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

দীর্ঘ ইনপুট বিলম্ব

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

আপনি যদি লক্ষ্য করেন যে কিছু ইন্টারঅ্যাকশনের উচ্চ ইনপুট বিলম্ব আছে, তাহলে আপনাকে খুঁজে বের করতে হবে যে ইন্টারঅ্যাকশনের সময় পৃষ্ঠায় কী ঘটছিল যার কারণে দীর্ঘ ইনপুট বিলম্ব হয়েছে—এবং এটি প্রায়শই পৃষ্ঠাটি লোড হওয়ার সময় ইন্টারঅ্যাকশন ঘটেছে কিনা বা পরে।

এটা কি পেজ লোডের সময় ছিল?

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

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

এটা কি পেজ লোড হওয়ার পর ছিল?

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

'user-callback' নির্দেশ করে যে ব্লক করার কাজটি setInterval , setTimeout বা এমনকি requestAnimationFrame থেকে হয়েছিল।
'event-listener' নির্দেশ করে যে ব্লক করার কাজটি আগের ইনপুট থেকে ছিল যা সারিবদ্ধ ছিল এবং এখনও প্রক্রিয়া করা হচ্ছে।
'resolve-promise' এবং 'reject-promise' এর অর্থ হল ব্লক করার কাজটি কিছু অ্যাসিঙ্ক্রোনাস কাজ থেকে ছিল যা আগে শুরু করা হয়েছিল, এবং এমন সময়ে সমাধান বা প্রত্যাখ্যান করা হয়েছিল যখন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করেছিল, মিথস্ক্রিয়া বিলম্বিত করে।

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

দীর্ঘ উপস্থাপনা বিলম্ব

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

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

ব্যয়বহুল শৈলী এবং বিন্যাস কাজ

দীর্ঘ উপস্থাপনা বিলম্ব ব্যয়বহুল শৈলী পুনঃগণনা এবং লেআউটের কাজ হতে পারে যা জটিল CSS নির্বাচক এবং বড় DOM আকার সহ বেশ কয়েকটি কারণ থেকে উদ্ভূত হয়। আপনি ওয়েব-ভিটালস লাইব্রেরিতে প্রদর্শিত LoAF সময়গুলির সাথে এই কাজের সময়কাল পরিমাপ করতে পারেন:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

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

অ্যানিমেশনফ্রেম কলব্যাকের দীর্ঘ-চলমান `requestAnimationFrame`

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

এই কলব্যাকগুলি সম্পূর্ণ হতে যথেষ্ট সময় নিতে পারে যদি তাদের মধ্যে করা কাজটি জটিল হয়। আপনি যদি requestAnimationFrame সাথে কাজ করার কারণে উচ্চ উপস্থাপনা বিলম্বের মানগুলি সন্দেহ করেন, তাহলে আপনি এই পরিস্থিতিগুলি সনাক্ত করতে ওয়েব-ভাইটাল লাইব্রেরি দ্বারা প্রকাশিত LoAF ডেটা ব্যবহার করতে পারেন:

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

আপনি যদি দেখেন যে উপস্থাপনা বিলম্বের সময়ের একটি উল্লেখযোগ্য অংশ একটি requestAnimationFrame কলব্যাকে ব্যয় করা হয়েছে, নিশ্চিত করুন যে আপনি এই কলব্যাকগুলিতে যে কাজটি করছেন তা কেবলমাত্র সেই কাজ সম্পাদনের মধ্যেই সীমাবদ্ধ যা ব্যবহারকারীর ইন্টারফেসের প্রকৃত আপডেটে পরিণত হয়৷ DOM বা আপডেট শৈলী স্পর্শ করে না এমন অন্য যেকোন কাজ অকারণে পরবর্তী ফ্রেমটিকে আঁকা হতে দেরি করবে, তাই সাবধান!

উপসংহার

ফিল্ড ডেটা হল তথ্যের সর্বোত্তম উৎস যা আপনি আঁকতে পারেন যখন এটি বোঝা যায় যে ক্ষেত্রের প্রকৃত ব্যবহারকারীদের জন্য কোন ইন্টারঅ্যাকশনগুলি সমস্যাযুক্ত। ওয়েব-ভিটালস জাভাস্ক্রিপ্ট লাইব্রেরি (বা একটি RUM প্রদানকারী) এর মতো ফিল্ড ডেটা সংগ্রহের সরঞ্জামগুলির উপর নির্ভর করে, আপনি কোন মিথস্ক্রিয়াগুলি সবচেয়ে বেশি সমস্যাযুক্ত সে সম্পর্কে আরও আত্মবিশ্বাসী হতে পারেন এবং তারপরে ল্যাবে সমস্যাযুক্ত মিথস্ক্রিয়াগুলি পুনরুত্পাদন করতে যান এবং তারপরে সেগুলি ঠিক করতে যান৷

আনস্প্ল্যাশ থেকে হিরো ইমেজ, ফেদেরিকো রেস্পিনি দ্বারা।

Jeremy Wagner

আপনার ওয়েবসাইটের INP মূল্যায়ন করতে CrUX দিয়ে শুরু করুন

PageSpeed Insights ব্যবহার করে স্বতন্ত্র পৃষ্ঠা এবং সমগ্র উৎস।
পৃষ্ঠার ধরন। উদাহরণস্বরূপ, অনেক ইকমার্স ওয়েবসাইটে পণ্যের বিস্তারিত পৃষ্ঠা এবং পণ্য তালিকা পৃষ্ঠার ধরন রয়েছে। আপনি সার্চ কনসোলে অনন্য পৃষ্ঠার ধরনগুলির জন্য CrUX ডেটা পেতে পারেন৷

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

Browser Support

Source

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});

"ব্যবহারকারী কি পৃষ্ঠাটি লোড করার সময় তার সাথে ইন্টারঅ্যাক্ট করেছে?"
"ইন্টারঅ্যাকশনের ইভেন্ট হ্যান্ডলাররা কি দীর্ঘ সময় ধরে চালিয়েছিল?"
"মিথস্ক্রিয়া ইভেন্ট হ্যান্ডলার কোডটি কি শুরু হতে দেরি হয়েছিল? যদি তাই হয়, সেই সময়ে মূল থ্রেডে আর কি ঘটছিল?"
"মিথস্ক্রিয়াটি কি অনেক রেন্ডারিং কাজ করেছে যা পরবর্তী ফ্রেমটি আঁকা হতে দেরি করেছে?"

*4 সংস্করণে নতুন
`attribution` অবজেক্ট কী	ডেটা
`interactionTarget`	একটি CSS নির্বাচক উপাদানটি নির্দেশ করে যা পৃষ্ঠার INP মান তৈরি করে—উদাহরণস্বরূপ, `button#save` ।
`interactionType`	ইন্টারঅ্যাকশনের ধরন, হয় ক্লিক, ট্যাপ বা কীবোর্ড ইনপুট থেকে।
`inputDelay` *	ইন্টারঅ্যাকশনের ইনপুট বিলম্ব ।
`processingDuration` *	যে সময় থেকে প্রথম ইভেন্ট শ্রোতা ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া হিসাবে চলতে শুরু করে যখন সমস্ত ইভেন্ট শ্রোতা প্রক্রিয়াকরণ শেষ হয়।
`presentationDelay` *	ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্ব , যা ইভেন্ট হ্যান্ডলাররা শেষ হওয়ার পর থেকে পরবর্তী ফ্রেম আঁকার সময় পর্যন্ত ঘটে।
`longAnimationFrameEntries` *	মিথস্ক্রিয়া সঙ্গে যুক্ত LoAF থেকে এন্ট্রি. অতিরিক্ত তথ্যের জন্য পরবর্তী দেখুন.

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

Browser Support

Source

LoAF এন্ট্রি অবজেক্ট কী	ডেটা
`duration`	দীর্ঘ অ্যানিমেশন ফ্রেমের সময়কাল, লেআউট শেষ হওয়া পর্যন্ত, কিন্তু পেইন্টিং এবং কম্পোজিটিং বাদ দিয়ে।
`blockingDuration`	দীর্ঘ কাজের কারণে ব্রাউজারটি দ্রুত প্রতিক্রিয়া জানাতে অক্ষম ফ্রেমে থাকা মোট সময়। এই ব্লকিং টাইমে জাভাস্ক্রিপ্টে চলমান দীর্ঘ টাস্ক, সেইসাথে ফ্রেমে পরবর্তী যেকোন দীর্ঘ রেন্ডারিং টাস্ক অন্তর্ভুক্ত থাকতে পারে।
`firstUIEventTimestamp`	ফ্রেমের সময় যখন ইভেন্টটি সারিবদ্ধ ছিল তার টাইমস্ট্যাম্প৷ একটি ইন্টারঅ্যাকশনের ইনপুট বিলম্বের শুরু বের করার জন্য দরকারী।
`startTime`	ফ্রেমের শুরুর টাইমস্ট্যাম্প।
`renderStart`	যখন ফ্রেমের জন্য রেন্ডারিংয়ের কাজ শুরু হয়েছিল। এর মধ্যে যেকোন `requestAnimationFrame` কলব্যাক (এবং প্রযোজ্য হলে `ResizeObserver` কলব্যাকগুলি) অন্তর্ভুক্ত রয়েছে, তবে সম্ভাব্য কোনো স্টাইল/লেআউট কাজ শুরু হওয়ার আগে।
`styleAndLayoutStart`	যখন ফ্রেমে শৈলী/লেআউট কাজ হয়। অন্যান্য উপলব্ধ টাইমস্ট্যাম্পে চিত্রিত করার সময় শৈলী/লেআউট কাজের দৈর্ঘ্য নির্ধারণে কার্যকর হতে পারে।
`scripts`	পৃষ্ঠার INP-তে অবদানকারী স্ক্রিপ্ট অ্যাট্রিবিউশন তথ্য ধারণকারী আইটেমগুলির একটি অ্যারে৷

স্ক্রিপ্ট অ্যাট্রিবিউশন অবজেক্ট কী	ডেটা
`invoker`	আহ্বানকারী। এটি পরবর্তী সারিতে বর্ণিত আমন্ত্রণের প্রকারের উপর ভিত্তি করে পরিবর্তিত হতে পারে। ইনভোকারদের উদাহরণ `'IMG#id.onload'` , `'Window.requestAnimationFrame'` , বা `'Response.json.then'` এর মতো মান হতে পারে।
`invokerType`	আহ্বানকারীর ধরন। `'user-callback'` , `'event-listener'` , `'resolve-promise'` , `'reject-promise'` , `'classic-script'` , বা `'module-script'` হতে পারে।
`sourceURL`	স্ক্রিপ্টের URL যেখান থেকে দীর্ঘ অ্যানিমেশন ফ্রেম উদ্ভূত হয়েছে৷
`sourceCharPosition`	`sourceURL` দ্বারা চিহ্নিত স্ক্রিপ্টে অক্ষরের অবস্থান।
`sourceFunctionName`	চিহ্নিত স্ক্রিপ্টে ফাংশনের নাম।

ধীর মিথস্ক্রিয়াগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং চিহ্নিত করুন

দীর্ঘ প্রক্রিয়াকরণের সময়কাল

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

উপাদান এবং তার নিবন্ধিত ইভেন্ট শ্রোতা.
স্ক্রিপ্ট ফাইল—এবং এর মধ্যে অক্ষরের অবস্থান—দীর্ঘ-চলমান ইভেন্ট হ্যান্ডলার কোড ধারণ করে।
ফাংশনের নাম।

দীর্ঘ ইনপুট বিলম্ব

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

এটা কি পেজ লোডের সময় ছিল?

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

এটি পৃষ্ঠার লোডের পরে ছিল?

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

'user-callback' নির্দেশ করে যে ব্লক করার কাজটি setInterval , setTimeout বা এমনকি requestAnimationFrame থেকে হয়েছিল।
'event-listener' নির্দেশ করে যে ব্লক করার কাজটি আগের ইনপুট থেকে ছিল যা সারিবদ্ধ ছিল এবং এখনও প্রক্রিয়া করা হচ্ছে।
'resolve-promise' এবং 'reject-promise' এর অর্থ হল ব্লক করার কাজটি কিছু অ্যাসিঙ্ক্রোনাস কাজ থেকে ছিল যা আগে শুরু করা হয়েছিল, এবং এমন সময়ে সমাধান বা প্রত্যাখ্যান করা হয়েছিল যখন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করেছিল, মিথস্ক্রিয়া বিলম্বিত করে।

দীর্ঘ উপস্থাপনা বিলম্ব

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

ব্যয়বহুল শৈলী এবং বিন্যাস কাজ

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

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

দীর্ঘকাল ধরে চলমান `requestAnimationFrame` কলব্যাকস

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

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

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

উপসংহার

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

ফেডেরিকো রেসিনি দ্বারা আনস্প্ল্যাশ থেকে হিরো ইমেজ।

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

Jeremy Wagner

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

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

আপনার ওয়েবসাইটের আইএনপি মূল্যায়ন করতে ক্রাক্স দিয়ে শুরু করুন

আপনি যদি আপনার ওয়েবসাইটের ব্যবহারকারীদের কাছ থেকে ক্ষেত্রের ডেটা সংগ্রহ না করে থাকেন তবে ক্রাক্স একটি ভাল সূচনা পয়েন্ট হতে পারে। ক্রাক্স বাস্তব ক্রোম ব্যবহারকারীদের কাছ থেকে ক্ষেত্রের ডেটা সংগ্রহ করে যারা টেলিমেট্রি ডেটা প্রেরণে বেছে নিয়েছে।

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

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

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

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

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

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

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

Browser Support

Source

ওয়েব-ভিটালস লাইব্রেরির স্ট্যান্ডার্ড বিল্ডটি ক্ষেত্রের ব্যবহারকারীদের কাছ থেকে বেসিক আইএনপি ডেটা পেতে ব্যবহার করা যেতে পারে:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

আপনার ব্যবহারকারীদের কাছ থেকে আপনার ক্ষেত্রের ডেটা বিশ্লেষণ করার জন্য, আপনি এই ডেটা কোথাও পাঠাতে চাইবেন:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

যাইহোক, এই ডেটা নিজেই ক্রাক্সের চেয়ে বেশি কিছু বলে না। সেখানেই ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডটি আসে।

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডটি আপনার ওয়েবসাইটের আইএনপিকে প্রভাবিত করে এমন সমস্যাযুক্ত ইন্টারঅ্যাকশনগুলিকে আরও ভাল সমস্যা সমাধানে সহায়তা করার জন্য ক্ষেত্রের ব্যবহারকারীদের কাছ থেকে আপনি পেতে পারেন এমন অতিরিক্ত ডেটা পৃষ্ঠতল করে। এই ডেটা লাইব্রেরির onINP() পদ্ধতিতে প্রকাশিত attribution অবজেক্টের মাধ্যমে অ্যাক্সেসযোগ্য:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});

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

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

"ব্যবহারকারী কি পৃষ্ঠাটি লোড হওয়ার সময় ইন্টারঅ্যাক্ট করেছিলেন?"
"ইন্টারঅ্যাকশন ইভেন্টের হ্যান্ডলারগুলি কি দীর্ঘ সময় ধরে চালিয়েছে?"
"ইন্টারঅ্যাকশন ইভেন্ট হ্যান্ডলার কোডটি কি শুরু হতে দেরি হয়েছিল? যদি তাই হয় তবে সেই সময় মূল থ্রেডে আর কী ঘটছিল?"
"মিথস্ক্রিয়াটি কি প্রচুর রেন্ডারিংয়ের কাজ করেছে যা পরবর্তী ফ্রেমটিকে আঁকা হতে বিলম্ব করেছিল?"

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

*সংস্করণ 4 এ নতুন
`attribution` অবজেক্ট কী	ডেটা
`interactionTarget`	একটি সিএসএস নির্বাচক উপাদানটির দিকে নির্দেশ করে যা পৃষ্ঠার আইএনপি মান তৈরি করে - উদাহরণস্বরূপ, `button#save` ।
`interactionType`	ক্লিক, ট্যাপস বা কীবোর্ড ইনপুটগুলি থেকে ইন্টারঅ্যাকশন টাইপ।
`inputDelay` *	মিথস্ক্রিয়া ইনপুট বিলম্ব ।
`processingDuration` *	যখন প্রথম ইভেন্ট শ্রোতা ব্যবহারকারীর মিথস্ক্রিয়াটির প্রতিক্রিয়া হিসাবে চলতে শুরু করেছিল তখন পর্যন্ত সমস্ত ইভেন্ট শ্রোতার প্রক্রিয়াজাতকরণ শেষ না হওয়া পর্যন্ত।
`presentationDelay` *	ইন্টারঅ্যাকশনটির উপস্থাপনার বিলম্ব , যা ইভেন্ট হ্যান্ডলারগুলি পরবর্তী ফ্রেমটি আঁকার সময় পর্যন্ত শেষ হওয়ার পরে শুরু হয়।
`longAnimationFrameEntries` *	মিথস্ক্রিয়াটির সাথে যুক্ত রুটি থেকে এন্ট্রি। অতিরিক্ত তথ্যের জন্য পরবর্তীটি দেখুন।

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

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

Browser Support

Source

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

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডটি attribution অবজেক্টের longAnimationFrameEntries কী এর অধীনে লফ এন্ট্রিগুলির একটি অ্যারে প্রকাশ করে। নিম্নলিখিত টেবিলটি প্রতিটি লফ এন্ট্রিতে আপনি খুঁজে পেতে পারেন এমন কয়েকটি মূল বিট তালিকাভুক্ত করে:

রুটি এন্ট্রি অবজেক্ট কী	ডেটা
`duration`	দীর্ঘ অ্যানিমেশন ফ্রেমের সময়কাল, বিন্যাস শেষ হওয়ার পরে, তবে চিত্রকর্ম এবং কম্পোজিটিং বাদে।
`blockingDuration`	ফ্রেমে মোট সময়ের পরিমাণ যা ব্রাউজার দীর্ঘ কাজের কারণে দ্রুত প্রতিক্রিয়া জানাতে অক্ষম ছিল। এই ব্লকিং সময়টিতে জাভাস্ক্রিপ্ট চলমান দীর্ঘ কার্যগুলি, পাশাপাশি ফ্রেমে পরবর্তী কোনও দীর্ঘ রেন্ডারিং টাস্ক অন্তর্ভুক্ত থাকতে পারে।
`firstUIEventTimestamp`	ফ্রেমের সময় ইভেন্টটি সারি করা হয়েছিল তখন টাইমস্ট্যাম্প। একটি ইন্টারঅ্যাকশন ইনপুট বিলম্ব শুরু করার জন্য দরকারী।
`startTime`	ফ্রেমের প্রারম্ভিক টাইমস্ট্যাম্প।
`renderStart`	ফ্রেমের জন্য রেন্ডারিংয়ের কাজ শুরু হলে। এর মধ্যে যে কোনও `requestAnimationFrame` কলব্যাকস রয়েছে (এবং প্রযোজ্য ক্ষেত্রে `ResizeObserver` কলব্যাকগুলি) অন্তর্ভুক্ত রয়েছে তবে কোনও স্টাইল/লেআউটের কাজ শুরু হওয়ার আগে সম্ভবত।
`styleAndLayoutStart`	যখন ফ্রেমে স্টাইল/লেআউট কাজ ঘটে। অন্যান্য উপলভ্য টাইমস্ট্যাম্পগুলিতে চিত্রিত করার সময় স্টাইল/লেআউট কাজের দৈর্ঘ্য নির্ধারণে কার্যকর হতে পারে।
`scripts`	পৃষ্ঠার আইএনপিতে অবদান রাখার স্ক্রিপ্ট অ্যাট্রিবিউশন সম্পর্কিত তথ্যযুক্ত আইটেমগুলির একটি অ্যারে।

লফ মডেল অনুসারে একটি দীর্ঘ অ্যানিমেশন ফ্রেমের একটি ভিজ্যুয়ালাইজেশন। — লফ এপিআই (মাইনাস `blockingDuration` ) অনুসারে একটি দীর্ঘ অ্যানিমেশন ফ্রেমের সময়গুলির একটি চিত্র।

এই সমস্ত তথ্য আপনাকে ইন্টারঅ্যাকশনকে ধীর করে তোলে সে সম্পর্কে আপনাকে অনেক কিছু বলতে পারে - তবে scripts অ্যারে যে রুটি প্রবেশের পৃষ্ঠটি বিশেষ আগ্রহী হওয়া উচিত:

স্ক্রিপ্ট অ্যাট্রিবিউশন অবজেক্ট কী	ডেটা
`invoker`	ইনভোকার এটি পরবর্তী সারিতে বর্ণিত ইনভোকার ধরণের উপর ভিত্তি করে পরিবর্তিত হতে পারে। আহ্বানকারীদের উদাহরণগুলি `'IMG#id.onload'` , `'Window.requestAnimationFrame'` , বা `'Response.json.then'` এর মতো মান হতে পারে।
`invokerType`	ইনভোকারের ধরণ। `'user-callback'` , `'event-listener'` , `'resolve-promise'` , `'reject-promise'` , `'classic-script'` , বা `'module-script'` হতে পারে।
`sourceURL`	স্ক্রিপ্টে ইউআরএল যেখানে দীর্ঘ অ্যানিমেশন ফ্রেম থেকে উদ্ভূত হয়েছিল।
`sourceCharPosition`	`sourceURL` দ্বারা চিহ্নিত স্ক্রিপ্টে চরিত্রের অবস্থান।
`sourceFunctionName`	চিহ্নিত স্ক্রিপ্টে ফাংশনের নাম।

এই অ্যারেতে প্রতিটি এন্ট্রিটিতে এই টেবিলটিতে প্রদর্শিত ডেটা রয়েছে, যা আপনাকে স্ক্রিপ্ট সম্পর্কে তথ্য দেয় যা ধীর মিথস্ক্রিয়াটির জন্য দায়ী ছিল - এবং এটি কীভাবে দায়বদ্ধ ছিল।

ধীর ইন্টারঅ্যাকশনগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং সনাক্ত করুন

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

দীর্ঘ প্রক্রিয়াকরণ সময়কাল

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

আপনি পূর্ববর্তী কোড স্নিপেটে দেখতে পাচ্ছেন, আপনি উচ্চ প্রক্রিয়াকরণ সময়কাল মানগুলির সাথে মিথস্ক্রিয়াটির পিছনে সুনির্দিষ্ট কারণটি সন্ধান করতে লফ ডেটা নিয়ে কাজ করতে পারেন, সহ:

উপাদান এবং এর নিবন্ধিত ইভেন্ট শ্রোতা।
স্ক্রিপ্ট ফাইল-এবং এর মধ্যে চরিত্রের অবস্থান-দীর্ঘকাল ধরে চলমান ইভেন্ট হ্যান্ডলার কোড সহ।
ফাংশনের নাম।

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

দীর্ঘ ইনপুট বিলম্ব

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

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

এটি কি পৃষ্ঠা লোডের সময় ছিল?

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

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

এটি পৃষ্ঠার লোডের পরে ছিল?

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

'user-callback' ইঙ্গিত দেয় যে ব্লকিং টাস্কটি setInterval , setTimeout বা এমনকি requestAnimationFrame থেকে ছিল।
'event-listener' ইঙ্গিত দেয় যে ব্লকিং টাস্কটি পূর্বের ইনপুট থেকে ছিল যা সারিবদ্ধ ছিল এবং এখনও প্রক্রিয়াজাতকরণ ছিল।
'resolve-promise' এবং 'reject-promise' এর অর্থ হ'ল ব্লকিং টাস্কটি এমন কিছু অ্যাসিনক্রোনাস কাজ থেকে শুরু হয়েছিল যা আগে লাথি মেরেছিল এবং এমন সময়ে সমাধান করা বা প্রত্যাখ্যান করা হয়েছিল যখন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করেছিলেন, ইন্টারঅ্যাকশনটি বিলম্বিত করেছিলেন।

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

দীর্ঘ উপস্থাপনা বিলম্ব

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

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

ব্যয়বহুল স্টাইল এবং লেআউট কাজ

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

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

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

দীর্ঘকাল ধরে চলমান `requestAnimationFrame` কলব্যাকস

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

উপসংহার

ফেডেরিকো রেসিনি দ্বারা আনস্প্ল্যাশ থেকে হিরো ইমেজ।

Jeremy Wagner

আপনার ওয়েবসাইটের আইএনপি মূল্যায়ন করতে ক্রাক্স দিয়ে শুরু করুন

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

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

Browser Support

Source

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});

"ব্যবহারকারী কি পৃষ্ঠাটি লোড হওয়ার সময় ইন্টারঅ্যাক্ট করেছিলেন?"
"ইন্টারঅ্যাকশন ইভেন্টের হ্যান্ডলারগুলি কি দীর্ঘ সময় ধরে চালিয়েছে?"
"ইন্টারঅ্যাকশন ইভেন্ট হ্যান্ডলার কোডটি কি শুরু হতে দেরি হয়েছিল? যদি তাই হয় তবে সেই সময় মূল থ্রেডে আর কী ঘটছিল?"
"মিথস্ক্রিয়াটি কি প্রচুর রেন্ডারিংয়ের কাজ করেছে যা পরবর্তী ফ্রেমটিকে আঁকা হতে বিলম্ব করেছিল?"

*সংস্করণ 4 এ নতুন
`attribution` অবজেক্ট কী	ডেটা
`interactionTarget`	একটি সিএসএস নির্বাচক উপাদানটির দিকে নির্দেশ করে যা পৃষ্ঠার আইএনপি মান তৈরি করে - উদাহরণস্বরূপ, `button#save` ।
`interactionType`	ক্লিক, ট্যাপস বা কীবোর্ড ইনপুটগুলি থেকে ইন্টারঅ্যাকশন টাইপ।
`inputDelay` *	মিথস্ক্রিয়া ইনপুট বিলম্ব ।
`processingDuration` *	যখন প্রথম ইভেন্ট শ্রোতা ব্যবহারকারীর মিথস্ক্রিয়াটির প্রতিক্রিয়া হিসাবে চলতে শুরু করেছিল তখন পর্যন্ত সমস্ত ইভেন্ট শ্রোতার প্রক্রিয়াজাতকরণ শেষ না হওয়া পর্যন্ত।
`presentationDelay` *	ইন্টারঅ্যাকশনটির উপস্থাপনার বিলম্ব , যা ইভেন্ট হ্যান্ডলারগুলি পরবর্তী ফ্রেমটি আঁকার সময় পর্যন্ত শেষ হওয়ার পরে শুরু হয়।
`longAnimationFrameEntries` *	মিথস্ক্রিয়াটির সাথে যুক্ত রুটি থেকে এন্ট্রি। অতিরিক্ত তথ্যের জন্য পরবর্তীটি দেখুন।

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

Browser Support

Source

রুটি এন্ট্রি অবজেক্ট কী	ডেটা
`duration`	দীর্ঘ অ্যানিমেশন ফ্রেমের সময়কাল, বিন্যাস শেষ হওয়ার পরে, তবে চিত্রকর্ম এবং কম্পোজিটিং বাদে।
`blockingDuration`	ফ্রেমে মোট সময়ের পরিমাণ যা ব্রাউজার দীর্ঘ কাজের কারণে দ্রুত প্রতিক্রিয়া জানাতে অক্ষম ছিল। এই ব্লকিং সময়টিতে জাভাস্ক্রিপ্ট চলমান দীর্ঘ কার্যগুলি, পাশাপাশি ফ্রেমে পরবর্তী কোনও দীর্ঘ রেন্ডারিং টাস্ক অন্তর্ভুক্ত থাকতে পারে।
`firstUIEventTimestamp`	ফ্রেমের সময় ইভেন্টটি সারি করা হয়েছিল তখন টাইমস্ট্যাম্প। একটি ইন্টারঅ্যাকশন ইনপুট বিলম্ব শুরু করার জন্য দরকারী।
`startTime`	ফ্রেমের প্রারম্ভিক টাইমস্ট্যাম্প।
`renderStart`	ফ্রেমের জন্য রেন্ডারিংয়ের কাজ শুরু হলে। এর মধ্যে যে কোনও `requestAnimationFrame` কলব্যাকস রয়েছে (এবং প্রযোজ্য ক্ষেত্রে `ResizeObserver` কলব্যাকগুলি) অন্তর্ভুক্ত রয়েছে তবে কোনও স্টাইল/লেআউটের কাজ শুরু হওয়ার আগে সম্ভবত।
`styleAndLayoutStart`	যখন ফ্রেমে স্টাইল/লেআউট কাজ ঘটে। অন্যান্য উপলভ্য টাইমস্ট্যাম্পগুলিতে চিত্রিত করার সময় স্টাইল/লেআউট কাজের দৈর্ঘ্য নির্ধারণে কার্যকর হতে পারে।
`scripts`	পৃষ্ঠার আইএনপিতে অবদান রাখার স্ক্রিপ্ট অ্যাট্রিবিউশন সম্পর্কিত তথ্যযুক্ত আইটেমগুলির একটি অ্যারে।

স্ক্রিপ্ট অ্যাট্রিবিউশন অবজেক্ট কী	ডেটা
`invoker`	ইনভোকার এটি পরবর্তী সারিতে বর্ণিত ইনভোকার ধরণের উপর ভিত্তি করে পরিবর্তিত হতে পারে। আহ্বানকারীদের উদাহরণগুলি `'IMG#id.onload'` , `'Window.requestAnimationFrame'` , বা `'Response.json.then'` এর মতো মান হতে পারে।
`invokerType`	ইনভোকারের ধরণ। `'user-callback'` , `'event-listener'` , `'resolve-promise'` , `'reject-promise'` , `'classic-script'` , বা `'module-script'` হতে পারে।
`sourceURL`	স্ক্রিপ্টে ইউআরএল যেখানে দীর্ঘ অ্যানিমেশন ফ্রেম থেকে উদ্ভূত হয়েছিল।
`sourceCharPosition`	`sourceURL` দ্বারা চিহ্নিত স্ক্রিপ্টে চরিত্রের অবস্থান।
`sourceFunctionName`	চিহ্নিত স্ক্রিপ্টে ফাংশনের নাম।

ধীর ইন্টারঅ্যাকশনগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং সনাক্ত করুন

দীর্ঘ প্রক্রিয়াকরণ সময়কাল

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

উপাদান এবং এর নিবন্ধিত ইভেন্ট শ্রোতা।
স্ক্রিপ্ট ফাইল-এবং এর মধ্যে চরিত্রের অবস্থান-দীর্ঘকাল ধরে চলমান ইভেন্ট হ্যান্ডলার কোড সহ।
ফাংশনের নাম।

দীর্ঘ ইনপুট বিলম্ব

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

এটি কি পৃষ্ঠা লোডের সময় ছিল?

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

এটি পৃষ্ঠার লোডের পরে ছিল?

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

As is the case with troubleshooting high processing duration values, high input delays due to the causes mentioned earlier will give you detailed script attribution data. What is different, however, is that the invoker type will change based on the nature of the work that delayed the interaction:

'user-callback' indicates the blocking task was from setInterval , setTimeout , or even requestAnimationFrame .
'event-listener' indicates that the blocking task was from an earlier input that was queued and still processing.
'resolve-promise' and 'reject-promise' means that the blocking task was from some asynchronous work that was kicked off earlier, and resolved or rejected at a time when the user attempted to interact with the page, delaying the interaction.

In any case, the script attribution data will give you a sense of where to start looking, and whether the input delay was due to your own code, or that of a third-party script.

Long presentation delays

Presentation delays are the last mile of an interaction, and begin when the interaction's event handlers finish, up to the point at which the next frame was painted. They occur when the work in an event handler due to an interaction changes the visual state of the user interface. As with processing durations and input delays, the web-vitals library can tell you how long the presentation delay was for an interaction:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

If you record this data and see high presentation delays for interactions contributing to your website's INP, the culprits can vary, but here are a couple causes to be on the lookout for.

Expensive style and layout work

Long presentation delays may be expensive style recalculation and layout work that arises from a number of causes, including complex CSS selectors and large DOM sizes . You can measure the duration this work with the LoAF timings surfaced in the web-vitals library:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

LoAF won't tell you the duration of the style and layout work is for a frame, but it will tell you when it started. With this starting timestamp, you can use other data from LoAF to calculate an accurate duration of that work by determining the end time of the frame, and subtracting the start timestamp of the style and layout work from that.

Note: There's a type of layout known as forced layout, where style recalculation and layout operations are forced to occur in an event handler's callback, before the presentation delay phase. This kind of layout affects interaction latency, and can be accessed in a Long Animation Frame entry's forcedStyleAndLayoutDuration property.

Long-running `requestAnimationFrame` callbacks

One potential cause of long presentation delays is excessive work done in a requestAnimationFrame callback. The contents of this callback are executed after event handlers have finished running, but just prior to style recalculation and layout work.

These callbacks can take considerable time to complete if the work done within them is complex. If you suspect high presentation delay values are due to work you're doing with requestAnimationFrame , you can use LoAF data surfaced by the web-vitals library to identify these scenarios:

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.toSorted((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

If you see that a significant portion of the presentation delay time is spent in a requestAnimationFrame callback, ensure the work you're doing in these callbacks is limited to performing work that results in an actual update to the user interface. Any other work that doesn't touch the DOM or update styles will unnecessarily delay the next frame from being painted, so be careful!

উপসংহার

Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users in the field. By relying on field data collection tools such as the web-vitals JavaScript library (or a RUM provider), you can be more confident about which interactions are most problematic, and then move on to reproducing problematic interactions in the lab and then go about fixing them.

Hero image from Unsplash , by Federico Respini .

আপনার ওয়েবসাইটের INP মূল্যায়ন করতে CrUX দিয়ে শুরু করুন

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

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

ধীর মিথস্ক্রিয়াগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং চিহ্নিত করুন

দীর্ঘ প্রক্রিয়াকরণের সময়কাল

দীর্ঘ ইনপুট বিলম্ব

এটা কি পেজ লোডের সময় ছিল?

এটা কি পেজ লোড হওয়ার পর ছিল?

দীর্ঘ উপস্থাপনা বিলম্ব

ব্যয়বহুল শৈলী এবং বিন্যাস কাজ

অ্যানিমেশনফ্রেম কলব্যাকের দীর্ঘ-চলমান requestAnimationFrame

উপসংহার

আপনার ওয়েবসাইটের INP মূল্যায়ন করতে CrUX দিয়ে শুরু করুন

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

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

ধীর মিথস্ক্রিয়াগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং চিহ্নিত করুন

দীর্ঘ প্রক্রিয়াকরণের সময়কাল

দীর্ঘ ইনপুট বিলম্ব

এটা কি পেজ লোডের সময় ছিল?

এটি পৃষ্ঠার লোডের পরে ছিল?

দীর্ঘ উপস্থাপনা বিলম্ব

ব্যয়বহুল শৈলী এবং বিন্যাস কাজ

দীর্ঘকাল ধরে চলমান requestAnimationFrame কলব্যাকস

উপসংহার

আপনার ওয়েবসাইটের আইএনপি মূল্যায়ন করতে ক্রাক্স দিয়ে শুরু করুন

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

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

ধীর ইন্টারঅ্যাকশনগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং সনাক্ত করুন

দীর্ঘ প্রক্রিয়াকরণ সময়কাল

দীর্ঘ ইনপুট বিলম্ব

এটি কি পৃষ্ঠা লোডের সময় ছিল?

এটি পৃষ্ঠার লোডের পরে ছিল?

দীর্ঘ উপস্থাপনা বিলম্ব

ব্যয়বহুল স্টাইল এবং লেআউট কাজ

দীর্ঘকাল ধরে চলমান requestAnimationFrame কলব্যাকস

উপসংহার

আপনার ওয়েবসাইটের আইএনপি মূল্যায়ন করতে ক্রাক্স দিয়ে শুরু করুন

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

ওয়েব-ভিটালস লাইব্রেরির অ্যাট্রিবিউশন বিল্ডের সাথে আরও এগিয়ে যান

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

ধীর ইন্টারঅ্যাকশনগুলির পিছনে সাধারণ কারণগুলি পরিমাপ করুন এবং সনাক্ত করুন

দীর্ঘ প্রক্রিয়াকরণ সময়কাল

দীর্ঘ ইনপুট বিলম্ব

এটি কি পৃষ্ঠা লোডের সময় ছিল?

এটি পৃষ্ঠার লোডের পরে ছিল?

Long presentation delays

Expensive style and layout work

Long-running requestAnimationFrame callbacks

উপসংহার

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

অ্যানিমেশনফ্রেম কলব্যাকের দীর্ঘ-চলমান `requestAnimationFrame`

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরি দিয়ে ফিল্ড ডেটা সংগ্রহ করুন

দীর্ঘকাল ধরে চলমান `requestAnimationFrame` কলব্যাকস

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

দীর্ঘকাল ধরে চলমান `requestAnimationFrame` কলব্যাকস

`web-vitals` জাভাস্ক্রিপ্ট লাইব্রেরির সাথে মাঠের ডেটা সংগ্রহ করুন

Long-running `requestAnimationFrame` callbacks