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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

ওয়েব-ভাইটাল লাইব্রেরির স্ট্যান্ডার্ড বিল্ডটি ক্ষেত্রের ব্যবহারকারীদের কাছ থেকে মৌলিক 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 ছাড়াও, অ্যাট্রিবিউশন বিল্ড অনেক ডেটা প্রদান করে যা আপনি ধীর মিথস্ক্রিয়াগুলির কারণগুলি বুঝতে সাহায্য করতে ব্যবহার করতে পারেন, যার মধ্যে ইন্টারঅ্যাকশনের কোন অংশে আপনার ফোকাস করা উচিত। এটি আপনাকে গুরুত্বপূর্ণ প্রশ্নের উত্তর দিতে সাহায্য করতে পারে যেমন:

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

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

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

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

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

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

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

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

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

আপনি কীভাবে এই তথ্যটি ব্যবহার করতে পারেন সে সম্পর্কে আপনাকে ধারণা দিতে, এই নির্দেশিকাটি এখন ধীর মিথস্ক্রিয়াগুলির পিছনে কিছু কারণ নির্ধারণ করতে 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.sort((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'
  }
});

আপনি পূর্ববর্তী কোড স্নিপেটে দেখতে পাচ্ছেন, আপনি উচ্চ প্রক্রিয়াকরণের সময়কালের মানগুলির সাথে মিথস্ক্রিয়াটির পিছনে সঠিক কারণটি ট্র্যাক করতে 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.sort((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.sort((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.sort((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 থেকে অন্যান্য ডেটা ব্যবহার করতে পারেন।

অ্যানিমেশনফ্রেম কলব্যাকের দীর্ঘ-চলমান 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.sort((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 প্রদানকারী) এর মতো ফিল্ড ডেটা সংগ্রহের সরঞ্জামগুলির উপর নির্ভর করে, আপনি কোন মিথস্ক্রিয়াগুলি সবচেয়ে বেশি সমস্যাযুক্ত সে সম্পর্কে আরও আত্মবিশ্বাসী হতে পারেন এবং তারপরে ল্যাবে সমস্যাযুক্ত মিথস্ক্রিয়াগুলি পুনরুত্পাদনের দিকে এগিয়ে যান এবং তারপরে ঠিক করার বিষয়ে যান৷ তাদের

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