নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া (INP)

Jeremy Wagner

ব্রাউজার সমর্থন

• 96
• 96
• এক্স
• এক্স

উৎস

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

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

• আপনি একটি অনলাইন শপিং কার্ট যোগ করা একটি আইটেম আসলে যোগ করা হচ্ছে কিনা.
• একটি মোবাইল নেভিগেশন মেনু খোলা হয়েছে কিনা।
• একটি লগইন বিষয়বস্তু সার্ভার দ্বারা প্রমাণীকরণ করা হচ্ছে কিনা.

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

INP-এর লক্ষ্য হল ব্যবহারকারীর সূচনা করা সমস্ত বা সর্বাধিক মিথস্ক্রিয়াগুলির জন্য, পরবর্তী ফ্রেমটি আঁকা না হওয়া পর্যন্ত যখন একজন ব্যবহারকারী একটি মিথস্ক্রিয়া শুরু করে তখন থেকে সময়কে কমিয়ে আনা।

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

কিভাবে INP গণনা করা হয় তার একটি নোট

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

একটি মিথস্ক্রিয়া হল ইভেন্ট হ্যান্ডলারদের একটি গ্রুপ যা একই যৌক্তিক ব্যবহারকারীর অঙ্গভঙ্গির সময় ফায়ার করে। উদাহরণস্বরূপ, একটি টাচস্ক্রিন ডিভাইসে "ট্যাপ" মিথস্ক্রিয়া একাধিক ইভেন্ট অন্তর্ভুক্ত করে, যেমন pointerup , pointerdown , এবং click ৷ একটি মিথস্ক্রিয়া জাভাস্ক্রিপ্ট, সিএসএস, বিল্ট-ইন ব্রাউজার নিয়ন্ত্রণ যেমন ফর্ম উপাদান, বা এই জিনিসগুলির সংমিশ্রণ দ্বারা চালিত হতে পারে।

একটি ইন্টারঅ্যাকশনের লেটেন্সি ইভেন্ট হ্যান্ডলারদের একটি গ্রুপের একক দীর্ঘতম সময় নিয়ে গঠিত যা মিথস্ক্রিয়াটি চালায়, ব্যবহারকারী মিথস্ক্রিয়া শুরু করার মুহুর্ত থেকে পরবর্তী ফ্রেমটি ভিজ্যুয়াল প্রতিক্রিয়া সহ উপস্থাপন করা হয়।

মূল পয়েন্ট: কিভাবে INP পরিমাপ করা হয় সে সম্পর্কে আরও বিশদ বিবরণের জন্য, "একটি মিথস্ক্রিয়ায় কী আছে?" .

একটি ভাল INP স্কোর কি?

আপনি ভাল প্রতিক্রিয়াশীলতার সাথে ব্যবহারকারীর অভিজ্ঞতা প্রদান করছেন তা নিশ্চিত করতে, পরিমাপ করার জন্য একটি ভাল থ্রেশহোল্ড হল ক্ষেত্রটিতে রেকর্ড করা পৃষ্ঠা লোডের 75 তম শতাংশ , মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে বিভক্ত:

• 200 মিলিসেকেন্ডের সমান বা তার কম একটি INP মানে আপনার পৃষ্ঠার ভালো প্রতিক্রিয়াশীলতা রয়েছে৷
• 200 মিলিসেকেন্ড এবং 500 মিলিসেকেন্ডের মধ্যে একটি INP মানে আপনার পৃষ্ঠার প্রতিক্রিয়াশীলতার উন্নতি প্রয়োজন ৷
• 500 মিলিসেকেন্ডের বেশি INP মানে আপনার পৃষ্ঠার প্রতিক্রিয়াশীলতা দুর্বল ।

ভাল INP মান 200 ms বা তার কম। খারাপ মানগুলি 500 ms-এর বেশি।

একটি মিথস্ক্রিয়া মধ্যে কি?

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

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

INP এর উদ্দেশ্যে, শুধুমাত্র নিম্নলিখিত মিথস্ক্রিয়া প্রকারগুলি পরিলক্ষিত হয়:

• একটি মাউস দিয়ে ক্লিক করুন.
• একটি টাচস্ক্রিন সহ একটি ডিভাইসে আলতো চাপুন৷
• একটি ফিজিক্যাল বা অনস্ক্রিন কীবোর্ডে একটি কী টিপে।

মূল পয়েন্ট: হোভারিং এবং স্ক্রোলিং INP-তে ফ্যাক্টর করে না। যাইহোক, কীবোর্ড (স্পেস বার, পেজ আপ, পেজ ডাউন ইত্যাদি) দিয়ে স্ক্রল করার জন্য একটি কীস্ট্রোক জড়িত, যা INP পরিমাপ করে এমন অন্যান্য ইভেন্টগুলিকে ট্রিগার করতে পারে। যে কোনো ফলস্বরূপ স্ক্রলিং INP গণনার মধ্যে ফ্যাক্টর করা হয় না।

ইন্টারঅ্যাকশনগুলি প্রধান নথিতে বা দস্তাবেজে এম্বেড করা iframes-এ ঘটে—উদাহরণস্বরূপ, এম্বেড করা ভিডিওতে প্লে ক্লিক করা। যেহেতু শেষ ব্যবহারকারীরা জানেন না যে পৃষ্ঠার কোন অংশগুলি iframes-এ রয়েছে, তাই পুরো পৃষ্ঠার জন্য সঠিকভাবে পরিমাপ করতে আপনাকে iframes-এর মধ্যে INP পরিমাপ করতে হবে৷ যাইহোক, JavaScript ওয়েব API-এর iframe বিষয়বস্তুতে অ্যাক্সেস নেই এবং একটি iframe-এর মধ্যে INP পরিমাপ করতে সক্ষম নাও হতে পারে। এটি CrUX এবং RUM এর মধ্যে পার্থক্য হিসাবে দেখায়।

মিথস্ক্রিয়া একাধিক ইভেন্ট নিয়ে গঠিত হতে পারে। উদাহরণস্বরূপ, একটি কীস্ট্রোকে keydown , keypress এবং keyup ইভেন্টগুলি অন্তর্ভুক্ত থাকে এবং ট্যাপ ইন্টারঅ্যাকশনগুলি pointerup এবং pointerdown ইভেন্টগুলি অন্তর্ভুক্ত করে৷ ইন্টারঅ্যাকশনের মধ্যে সবচেয়ে দীর্ঘ সময়কালের ইভেন্টটিকে ইন্টারঅ্যাকশনের লেটেন্সি হিসেবে বেছে নেওয়া হয়।

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

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

কিভাবে INP প্রথম ইনপুট বিলম্ব (FID) থেকে আলাদা?

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

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

কোন INP মান রিপোর্ট না হলে কি হবে?

একটি পৃষ্ঠার জন্য কোন INP মান ফেরত দেওয়া সম্ভব। নিম্নলিখিতগুলি সহ বেশ কয়েকটি কারণে এটি ঘটতে পারে:

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

কিভাবে INP পরিমাপ করা যায়

INP বিভিন্ন সরঞ্জাম ব্যবহার করে ক্ষেত্রে এবং ল্যাব উভয় ক্ষেত্রেই পরিমাপ করা যেতে পারে।

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

মাঠে

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

আরও জানতে পড়ুন: ক্ষেত্রের মধ্যে ধীর মিথস্ক্রিয়া খুঁজুন ।

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

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

পরীক্ষাগারে

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

আরও জানতে পড়ুন: ল্যাবে ধীর মিথস্ক্রিয়া ম্যানুয়ালি নির্ণয় করুন ।

কিভাবে INP উন্নত করা যায়

ক্ষেত্রের মধ্যে ধীর মিথস্ক্রিয়া সনাক্তকরণ এবং তাদের অপ্টিমাইজ করতে ল্যাব ডেটা ব্যবহার করার বিষয়ে নির্দেশনার জন্য INP অপ্টিমাইজ করার জন্য আমাদের গাইডের সংগ্রহ দেখুন৷

চেঞ্জলগ

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

এটি পরিচালনা করতে আপনাকে সাহায্য করার জন্য, এই মেট্রিক্সের বাস্তবায়ন বা সংজ্ঞার সমস্ত পরিবর্তন এই চেঞ্জলগ- এ প্রদর্শিত হয়েছে।

আপনার যদি এই মেট্রিক্সের জন্য প্রতিক্রিয়া থাকে, তাহলে ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে তা প্রদান করুন।