ক্রোম ব্যবহারের ডেটা দেখায় যে একটি পৃষ্ঠা লোড হওয়ার পরে ব্যবহারকারীর 90% সময় ব্যয় হয়, এইভাবে, পৃষ্ঠার জীবনচক্র জুড়ে প্রতিক্রিয়াশীলতার যত্নশীল পরিমাপ গুরুত্বপূর্ণ। এই INP মেট্রিক মূল্যায়ন কি.
ভাল প্রতিক্রিয়াশীলতার অর্থ হল একটি পৃষ্ঠা এটির সাথে করা মিথস্ক্রিয়াগুলিতে দ্রুত প্রতিক্রিয়া জানায়৷ যখন একটি পৃষ্ঠা একটি মিথস্ক্রিয়ায় সাড়া দেয়, ফলাফলটি হল ভিজ্যুয়াল ফিডব্যাক , যা ব্রাউজার দ্বারা উপস্থাপিত পরবর্তী ফ্রেমে ব্রাউজার উপস্থাপন করে। ভিজ্যুয়াল ফিডব্যাক আপনাকে বলে, উদাহরণস্বরূপ, আপনি যদি একটি অনলাইন শপিং কার্টে যোগ করেন এমন একটি আইটেম সত্যিই যোগ করা হচ্ছে কিনা, একটি মোবাইল নেভিগেশন মেনু খোলা হয়েছে কিনা, সার্ভার দ্বারা লগইন ফর্মের বিষয়বস্তু প্রমাণীকরণ করা হচ্ছে কিনা ইত্যাদি।
কিছু মিথস্ক্রিয়া স্বাভাবিকভাবেই অন্যদের তুলনায় বেশি সময় নেবে, কিন্তু বিশেষ করে জটিল মিথস্ক্রিয়াগুলির জন্য, ব্যবহারকারীর কাছে যে কিছু ঘটছে তার ইঙ্গিত হিসাবে কিছু প্রাথমিক ভিজ্যুয়াল প্রতিক্রিয়া দ্রুত উপস্থাপন করা গুরুত্বপূর্ণ। পরবর্তী পেইন্ট পর্যন্ত সময় এটি করার প্রথম সুযোগ। অতএব, INP-এর উদ্দেশ্য মিথস্ক্রিয়াটির সমস্ত চূড়ান্ত প্রভাব পরিমাপ করা নয় (যেমন নেটওয়ার্ক আনয়ন এবং অন্যান্য অ্যাসিঙ্ক্রোনাস ক্রিয়াকলাপ থেকে UI আপডেট), তবে পরবর্তী পেইন্টটি যে সময়ে ব্লক করা হচ্ছে তা পরিমাপ করা। ভিজ্যুয়াল ফিডব্যাক বিলম্বিত করে, আপনি ব্যবহারকারীদের ধারণা দিতে পারেন যে পৃষ্ঠাটি তাদের ক্রিয়াকলাপে সাড়া দিচ্ছে না।
INP-এর লক্ষ্য হল ব্যবহারকারী যখন একটি মিথস্ক্রিয়া শুরু করে তখন থেকে পরবর্তী ফ্রেমটি আঁকা না হওয়া পর্যন্ত যতটা সম্ভব সংক্ষিপ্ত সময় নিশ্চিত করা, ব্যবহারকারীর করা সমস্ত বা বেশিরভাগ মিথস্ক্রিয়াগুলির জন্য।
নিচের ভিডিওতে, ডানদিকের উদাহরণটি তাৎক্ষণিক ভিজ্যুয়াল ফিডব্যাক দেয় যে একটি অ্যাকর্ডিয়ন খুলছে। এটি আরও দেখায় যে কীভাবে দুর্বল প্রতিক্রিয়াশীলতা ইনপুটে একাধিক অনাকাঙ্ক্ষিত প্রতিক্রিয়া সৃষ্টি করতে পারে কারণ ব্যবহারকারী মনে করে অভিজ্ঞতা ভেঙে গেছে।
এই নিবন্ধটি ব্যাখ্যা করে যে INP কীভাবে কাজ করে, কীভাবে এটি পরিমাপ করা যায় এবং এটির উন্নতির জন্য সংস্থানগুলি নির্দেশ করে৷
INP কি?
INP হল একটি মেট্রিক যা ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়াশীলতা মূল্যায়ন করে সমস্ত ক্লিক, ট্যাপ এবং কীবোর্ড ইন্টারঅ্যাকশনের লেটেন্সি পর্যবেক্ষণ করে যা একটি পৃষ্ঠায় ব্যবহারকারীর ভিজিট করার সময়কাল ধরে ঘটে। চূড়ান্ত INP মান হল দীর্ঘতম মিথস্ক্রিয়া পরিলক্ষিত, বহির্মুখীকে উপেক্ষা করে।
উপরে উল্লিখিত হিসাবে, একটি পৃষ্ঠার সাথে তৈরি সমস্ত মিথস্ক্রিয়া পর্যবেক্ষণ করে INP গণনা করা হয়। বেশিরভাগ সাইটের জন্য সবচেয়ে খারাপ লেটেন্সির সাথে মিথস্ক্রিয়া INP হিসাবে রিপোর্ট করা হয়। যাইহোক, প্রচুর সংখ্যক ইন্টারঅ্যাকশন সহ পৃষ্ঠাগুলির জন্য, এলোমেলো হেঁচকির ফলে অন্যথায় প্রতিক্রিয়াশীল সাইটে অস্বাভাবিকভাবে উচ্চ ইন্টারঅ্যাকশন হতে পারে। যত বেশি মিথস্ক্রিয়া, এটি হওয়ার সম্ভাবনা তত বেশি। এটি মোকাবেলা করার জন্য, এবং এই ধরনের পৃষ্ঠাগুলির জন্য প্রকৃত প্রতিক্রিয়াশীলতার একটি ভাল পরিমাপ দিতে, আমরা প্রতি 50টি ইন্টারঅ্যাকশনের জন্য একটি সর্বোচ্চ মিথস্ক্রিয়া উপেক্ষা করি। বেশিরভাগ পৃষ্ঠার অভিজ্ঞতায় 50 টির বেশি ইন্টারঅ্যাকশন নেই তাই সবচেয়ে খারাপ ইন্টারঅ্যাকশনের রিপোর্ট করবে। সমস্ত পৃষ্ঠা দর্শনের 75 তম পার্সেন্টাইল তারপরে যথারীতি রিপোর্ট করা হয়, যা ব্যবহারকারীদের বিশাল সংখ্যাগরিষ্ঠের অভিজ্ঞতা বা আরও ভাল মান দেওয়ার জন্য আউটলায়ারদের সরিয়ে দেয়।
একটি মিথস্ক্রিয়া হল ইভেন্ট হ্যান্ডলারদের একটি গ্রুপ যা একই যৌক্তিক ব্যবহারকারীর অঙ্গভঙ্গির সময় ফায়ার করে। উদাহরণস্বরূপ, একটি টাচস্ক্রিন ডিভাইসে "ট্যাপ" মিথস্ক্রিয়া একাধিক ইভেন্ট অন্তর্ভুক্ত করে, যেমন pointerup , pointerdown , এবং click ৷ একটি মিথস্ক্রিয়া জাভাস্ক্রিপ্ট, CSS, অন্তর্নির্মিত ব্রাউজার নিয়ন্ত্রণ (যেমন ফর্ম উপাদান), বা এর একটি সংমিশ্রণ দ্বারা চালিত হতে পারে।
একটি ইন্টারঅ্যাকশনের লেটেন্সি ইভেন্ট হ্যান্ডলারদের একটি গ্রুপের একক দীর্ঘতম সময় নিয়ে গঠিত যা মিথস্ক্রিয়াটি চালায়, ব্যবহারকারী মিথস্ক্রিয়া শুরু করার মুহুর্ত থেকে পরবর্তী ফ্রেমটি ভিজ্যুয়াল প্রতিক্রিয়া সহ উপস্থাপন করা হয়।
একটি ভাল INP স্কোর কি?
একটি প্রতিক্রিয়াশীলতা মেট্রিকে "ভাল" বা "দরিদ্র" এর মতো লেবেলগুলি পিন করা কঠিন। একদিকে, আপনি উন্নয়ন অনুশীলনকে উত্সাহিত করতে চান যা ভাল প্রতিক্রিয়াশীলতাকে অগ্রাধিকার দেয়। অন্যদিকে, আপনাকে অবশ্যই এই সত্যটি বিবেচনা করতে হবে যে লোকেরা অর্জনযোগ্য উন্নয়ন প্রত্যাশা সেট করতে যে ডিভাইসগুলি ব্যবহার করে তার ক্ষমতার মধ্যে যথেষ্ট পরিবর্তনশীলতা রয়েছে।
আপনি ভাল প্রতিক্রিয়াশীলতার সাথে ব্যবহারকারীর অভিজ্ঞতা প্রদান করছেন তা নিশ্চিত করতে, পরিমাপ করার জন্য একটি ভাল থ্রেশহোল্ড হল ক্ষেত্রটিতে রেকর্ড করা পৃষ্ঠা লোডের 75 তম শতাংশ , মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে বিভক্ত:
- 200 মিলিসেকেন্ডের নিচে বা INP এর মানে হল আপনার পৃষ্ঠার ভালো প্রতিক্রিয়াশীলতা আছে।
- 200 মিলিসেকেন্ডের উপরে এবং 500 মিলিসেকেন্ডের নিচে বা 500 মিলিসেকেন্ডে একটি INP মানে আপনার পৃষ্ঠার প্রতিক্রিয়াশীলতার উন্নতি প্রয়োজন ৷
- 500 মিলিসেকেন্ডের উপরে একটি INP মানে আপনার পৃষ্ঠার প্রতিক্রিয়াশীলতা দুর্বল ।
একটি মিথস্ক্রিয়া মধ্যে কি?
ইন্টারঅ্যাক্টিভিটির প্রাথমিক চালক প্রায়শই জাভাস্ক্রিপ্ট, যদিও ব্রাউজারগুলি জাভাস্ক্রিপ্ট দ্বারা চালিত নয় যেমন চেকবক্স, রেডিও বোতাম এবং CSS দ্বারা চালিত নিয়ন্ত্রণগুলির মাধ্যমে ইন্টারঅ্যাক্টিভিটি প্রদান করে।
যতদূর INP যায়, শুধুমাত্র নিম্নলিখিত মিথস্ক্রিয়া প্রকারগুলি পরিলক্ষিত হয়:
- একটি মাউস দিয়ে ক্লিক করুন.
- একটি টাচস্ক্রিন সহ একটি ডিভাইসে আলতো চাপুন৷
- একটি ফিজিক্যাল বা অনস্ক্রিন কীবোর্ডে একটি কী টিপে।
ইন্টারঅ্যাকশনগুলি প্রধান নথিতে বা দস্তাবেজে এম্বেড করা iframes-এ ঘটে-উদাহরণস্বরূপ একটি এম্বেড করা ভিডিওতে প্লে ক্লিক করা। শেষ ব্যবহারকারীরা আইফ্রেমে কী আছে বা না তা জানেন না। অতএব, শীর্ষ স্তরের পৃষ্ঠার জন্য ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করতে iframes-এর মধ্যে INP প্রয়োজন৷ নোট করুন JavaScript ওয়েব API-এর iframe বিষয়বস্তুগুলিতে অ্যাক্সেস থাকবে না তাই একটি iframe-এর মধ্যে INP পরিমাপ করতে সক্ষম নাও হতে পারে এবং এটি CrUX এবং RUM-এর মধ্যে পার্থক্য হিসাবে দেখাবে ।
ইন্টারঅ্যাকশন দুটি অংশ নিয়ে গঠিত হতে পারে, প্রতিটি একাধিক ইভেন্ট সহ। উদাহরণস্বরূপ, একটি কীস্ট্রোকে keydown , keypress এবং keyup ইভেন্ট থাকে। ট্যাপ ইন্টারঅ্যাকশনে pointerup এবং pointerdown ইভেন্ট থাকে। ইন্টারঅ্যাকশনের মধ্যে সবচেয়ে দীর্ঘ সময়কালের ইভেন্টটিকে ইন্টারঅ্যাকশনের লেটেন্সি হিসেবে বেছে নেওয়া হয়।
INP গণনা করা হয় যখন ব্যবহারকারী পৃষ্ঠাটি ছেড়ে যায়, যার ফলে একটি একক মান হয় যা সমগ্র পৃষ্ঠার জীবনচক্র জুড়ে পৃষ্ঠার সামগ্রিক প্রতিক্রিয়াশীলতার প্রতিনিধিত্ব করে। একটি কম INP মানে একটি পৃষ্ঠা ব্যবহারকারীর ইনপুট নির্ভরযোগ্যভাবে প্রতিক্রিয়াশীল।
কিভাবে INP প্রথম ইনপুট বিলম্ব (FID) থেকে আলাদা?
যেখানে INP সমস্ত পৃষ্ঠার ইন্টারঅ্যাকশন বিবেচনা করে, সেখানে ফার্স্ট ইনপুট বিলম্ব (FID) শুধুমাত্র প্রথম ইন্টারঅ্যাকশনের জন্য দায়ী। এটি শুধুমাত্র প্রথম ইন্টারঅ্যাকশনের ইনপুট বিলম্ব পরিমাপ করে, ইভেন্ট হ্যান্ডলারগুলি চালানোর সময় বা পরবর্তী ফ্রেম উপস্থাপনে বিলম্ব নয়।
প্রদত্ত যে FIDও একটি লোড প্রতিক্রিয়াশীলতা মেট্রিক , এর পিছনে যুক্তি হল যে লোডিং পর্বে একটি পৃষ্ঠার সাথে করা প্রথম ইন্টারঅ্যাকশনটিতে সামান্য বা কোন ইনপুট বিলম্ব না হলে, পৃষ্ঠাটি একটি ভাল প্রথম ছাপ তৈরি করেছে৷
INP প্রথম ইম্প্রেশনের চেয়ে বেশি। সমস্ত মিথস্ক্রিয়া নমুনা করে, প্রতিক্রিয়াশীলতাকে ব্যাপকভাবে মূল্যায়ন করা যেতে পারে, INP কে FID এর চেয়ে সামগ্রিক প্রতিক্রিয়াশীলতার আরও নির্ভরযোগ্য সূচক করে তোলে।
কোন INP মান রিপোর্ট না হলে কি হবে?
এটা সম্ভব যে একটি পৃষ্ঠা কোনো INP মান ফেরত দিতে পারে না। এটি বেশ কয়েকটি কারণে ঘটতে পারে:
- পৃষ্ঠাটি লোড করা হয়েছিল, কিন্তু ব্যবহারকারী কখনই তাদের কীবোর্ডে ক্লিক, ট্যাপ বা কী চাপেননি।
- পৃষ্ঠাটি লোড করা হয়েছিল, কিন্তু ব্যবহারকারী এমন অঙ্গভঙ্গি ব্যবহার করে পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করেছে যাতে ক্লিক করা, ট্যাপ করা বা কীবোর্ড ব্যবহার করা জড়িত ছিল না৷ উদাহরণস্বরূপ, উপাদানগুলির উপর স্ক্রোল করা বা ঘোরানো INP কীভাবে গণনা করা হয় তা বিবেচনা করে না।
- পৃষ্ঠাটি একটি বট দ্বারা অ্যাক্সেস করা হচ্ছে যেমন একটি অনুসন্ধান ক্রলার বা হেডলেস ব্রাউজার যা পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার জন্য স্ক্রিপ্ট করা হয়নি।
কিভাবে INP পরিমাপ করা যায়
INP বিভিন্ন সরঞ্জামের মাধ্যমে ক্ষেত্র এবং ল্যাব উভয় ক্ষেত্রেই পরিমাপ করা যেতে পারে।
মাঠে
আদর্শভাবে, INP অপ্টিমাইজ করার ক্ষেত্রে আপনার যাত্রা ফিল্ড ডেটা দিয়ে শুরু হবে। সর্বোত্তমভাবে, রিয়েল ইউজার মনিটরিং (RUM) থেকে ফিল্ড ডেটা আপনাকে শুধুমাত্র একটি পৃষ্ঠার INP মান নয়, প্রাসঙ্গিক ডেটাও দেবে যা হাইলাইট করে যে নির্দিষ্ট ইন্টারঅ্যাকশনটি INP মানের জন্য দায়ী ছিল, ইন্টারঅ্যাকশনটি পৃষ্ঠা লোডের সময় বা পরে ঘটেছে কিনা, ইন্টারঅ্যাকশনের ধরন (ক্লিক, কী প্রেস বা আলতো চাপুন), এবং অন্যান্য মূল্যবান তথ্য।
যদি আপনার ওয়েবসাইটটি Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনে (CrUX) অন্তর্ভুক্তির জন্য যোগ্য হয়, তাহলে আপনি পেজস্পিড ইনসাইটস (এবং অন্যান্য মূল ওয়েব ভাইটাল) এ CrUX-এর মাধ্যমে INP-এর জন্য দ্রুত ফিল্ড ডেটা পেতে পারেন। ন্যূনতম, আপনি আপনার ওয়েবসাইটের INP-এর একটি মূল-স্তরের ছবি পেতে পারেন, কিন্তু কিছু ক্ষেত্রে, আপনি পৃষ্ঠা-স্তরের ডেটাও পেতে পারেন।
যাইহোক, যদিও CrUX আপনাকে বলার জন্য উপযোগী যে একটি উচ্চ স্তরে একটি সমস্যা আছে , এটি প্রায়শই সমস্যাটি কী তা পুরোপুরি বুঝতে সাহায্য করার জন্য যথেষ্ট বিশদ প্রদান করে না। একটি RUM সমাধান আপনাকে পৃষ্ঠা, ব্যবহারকারী বা ব্যবহারকারীর মিথস্ক্রিয়া সম্পর্কে আরও বিশদে ড্রিল ডাউন করতে সাহায্য করতে পারে যা ধীর মিথস্ক্রিয়া অনুভব করছে। স্বতন্ত্র মিথস্ক্রিয়ায় INP-কে দায়ী করতে সক্ষম হওয়া অনুমান এবং বৃথা প্রচেষ্টা এড়িয়ে যায়।
পরীক্ষাগারে
সর্বোত্তমভাবে, আপনার কাছে ফিল্ড ডেটা থাকলে আপনি ল্যাবে পরীক্ষা শুরু করতে চাইবেন যা আপনাকে ধীর মিথস্ক্রিয়া করার পরামর্শ দেয়। ফিল্ড ডেটার অনুপস্থিতিতে, তবে, ল্যাবে ধীর মিথস্ক্রিয়া পুনরুত্পাদনের জন্য কিছু কৌশল রয়েছে। ব্যবহারকারীর অভিজ্ঞতার সেই গুরুত্বপূর্ণ অংশের সময় ধীর মিথস্ক্রিয়াগুলিকে পৃষ্ঠ করার জন্য এই ধরনের কৌশলগুলির মধ্যে রয়েছে সাধারণ ব্যবহারকারীর প্রবাহ এবং পথের সাথে পরীক্ষামূলক ইন্টারঅ্যাকশনগুলি, সেইসাথে লোডের সময় পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করা - যখন প্রধান থ্রেডটি প্রায়শই ব্যস্ত থাকে৷
কিভাবে INP উন্নত করা যায়
INP অপ্টিমাইজ করার জন্য গাইডের একটি সংগ্রহ আপনাকে ক্ষেত্রের মধ্যে ধীরগতির মিথস্ক্রিয়া সনাক্তকরণের প্রক্রিয়া এবং ল্যাব ডেটা ব্যবহার করে ড্রিল ডাউন এবং বিভিন্ন উপায়ে অপ্টিমাইজ করার প্রক্রিয়ার মাধ্যমে আপনাকে গাইড করতে উপলব্ধ।
চেঞ্জলগ
মাঝে মাঝে, মেট্রিক্স পরিমাপ করতে ব্যবহৃত API-এ বাগগুলি আবিষ্কৃত হয়, এবং কখনও কখনও মেট্রিক্সের সংজ্ঞায়। ফলস্বরূপ, কখনও কখনও পরিবর্তন করা আবশ্যক, এবং এই পরিবর্তনগুলি আপনার অভ্যন্তরীণ রিপোর্ট এবং ড্যাশবোর্ডে উন্নতি বা রিগ্রেশন হিসাবে দেখাতে পারে৷
এটি পরিচালনা করতে আপনাকে সাহায্য করার জন্য, এই মেট্রিক্সের বাস্তবায়ন বা সংজ্ঞার সমস্ত পরিবর্তন এই চেঞ্জলগে প্রদর্শিত হবে।
আপনার যদি এই মেট্রিক্সের জন্য প্রতিক্রিয়া থাকে, আপনি ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে তা প্রদান করতে পারেন।