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

Jeremy Wagner

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

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

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

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

নিচের ভিডিওতে, ডানদিকের উদাহরণটি তাৎক্ষণিক ভিজ্যুয়াল ফিডব্যাক দেয় যে একটি অ্যাকর্ডিয়ন খুলছে। খারাপ প্রতিক্রিয়াশীলতা বাম দিকে উদাহরণ হিসাবে প্রদর্শিত হয়, এবং এটি কিভাবে খারাপ ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারে।

এই নির্দেশিকাটি ব্যাখ্যা করে কিভাবে INP কাজ করে, কিভাবে এটি পরিমাপ করা যায় এবং এটির উন্নতির জন্য সংস্থানগুলি নির্দেশ করে৷

INP কি?

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

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

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

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

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

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

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

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

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

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

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

ইন্টারঅ্যাকশনগুলি প্রধান নথিতে বা দস্তাবেজে এম্বেড করা iframes-এ ঘটে-উদাহরণস্বরূপ একটি এম্বেড করা ভিডিওতে প্লে ক্লিক করা। শেষ ব্যবহারকারীরা আইফ্রেমে কী আছে বা না তা জানেন না, তাই শীর্ষ স্তরের পৃষ্ঠার জন্য ব্যবহারকারীর অভিজ্ঞতা পরিমাপের জন্য iframes-এর মধ্যে INP প্রয়োজন৷ যেহেতু জাভাস্ক্রিপ্ট ওয়েব API-এর আইফ্রেমের বিষয়বস্তুতে অ্যাক্সেস নেই, তাই এটি 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 অপ্টিমাইজ করার ক্ষেত্রে আপনার যাত্রা ফিল্ড ডেটা দিয়ে শুরু হবে। সর্বোত্তমভাবে, রিয়েল ইউজার মনিটরিং (RUM) থেকে ফিল্ড ডেটা আপনাকে শুধুমাত্র একটি পৃষ্ঠার INP মান নয়, প্রাসঙ্গিক ডেটাও দেবে যা হাইলাইট করে যে নির্দিষ্ট ইন্টারঅ্যাকশনটি INP মানের জন্য দায়ী ছিল, ইন্টারঅ্যাকশনটি পৃষ্ঠা লোডের সময় বা পরে ঘটেছে কিনা, ইন্টারঅ্যাকশনের ধরন (ক্লিক, কী প্রেস বা ট্যাপ), এবং অন্যান্য মূল্যবান সময় যা আপনাকে সনাক্ত করতে সাহায্য করতে পারে মিথস্ক্রিয়াটির কোন অংশ প্রতিক্রিয়াশীলতাকে প্রভাবিত করছে।

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

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

ল্যাবে

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

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

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

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

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

চেঞ্জলগ

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

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

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

আপনার জ্ঞান পরীক্ষা করুন