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

ক্ষেত্রে ধীর মিথস্ক্রিয়া খুঁজুন

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

Jeremy Wagner

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

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

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

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

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

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

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

পেজস্পিড ইনসাইটস-এ CrUX-এর দেখানো ফিল্ড ডেটা, তিনটি কোর ওয়েব ভাইটাল-এ LCP, INP, CLS এবং ডায়াগনস্টিক মেট্রিক্স হিসেবে TTFB, FCP এবং একটি অবচিত কোর ওয়েব ভাইটাল মেট্রিক হিসেবে FID দেখানো হয়েছে। — পেজস্পিড ইনসাইটস-এ দেখানো 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 ছাড়াও, অ্যাট্রিবিউশন বিল্ডে প্রচুর ডেটা রয়েছে যা আপনি ধীর ইন্টারঅ্যাকশনের কারণগুলি বুঝতে সাহায্য করতে পারেন, যার মধ্যে ইন্টারঅ্যাকশনের কোন অংশে আপনার মনোযোগ দেওয়া উচিত তাও অন্তর্ভুক্ত। এটি আপনাকে গুরুত্বপূর্ণ প্রশ্নের উত্তর দিতে সাহায্য করতে পারে যেমন:

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

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

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

ওয়েব-ভাইটালস লাইব্রেরির ৪র্থ সংস্করণ থেকে শুরু করে, আপনি 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` ) অনুসারে একটি দীর্ঘ অ্যানিমেশন ফ্রেমের সময়ের একটি চিত্র।

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

স্ক্রিপ্ট অ্যাট্রিবিউশন অবজেক্ট কী	উপাত্ত
`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 দিয়ে করা কাজের কারণে উচ্চ উপস্থাপনা বিলম্বের মান রয়েছে, তাহলে আপনি এই পরিস্থিতিগুলি সনাক্ত করতে web-vitals লাইব্রেরি দ্বারা প্রকাশিত 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 প্রদানকারী) এর মতো ফিল্ড ডেটা সংগ্রহের সরঞ্জামগুলির উপর নির্ভর করে, আপনি কোন ইন্টারঅ্যাকশনগুলি সবচেয়ে সমস্যাযুক্ত তা সম্পর্কে আরও আত্মবিশ্বাসী হতে পারেন এবং তারপরে ল্যাবে সমস্যাযুক্ত ইন্টারঅ্যাকশনগুলি পুনরুত্পাদন করতে এগিয়ে যান এবং তারপরে সেগুলি ঠিক করার দিকে এগিয়ে যান।

আনস্প্ল্যাশ থেকে নেওয়া হিরো ছবি, লিখেছেন ফেদেরিকো রেসপিনি ।