প্রথম ইনপুট বিলম্ব (FID)

Philip Walton

আমরা সবাই জানি এটি একটি ভাল প্রথম ছাপ তৈরি করা কতটা গুরুত্বপূর্ণ। নতুন লোকের সাথে দেখা করার সময় এটি গুরুত্বপূর্ণ, এবং ওয়েবে অভিজ্ঞতা তৈরি করার সময়ও এটি গুরুত্বপূর্ণ।

ওয়েবে, একটি ভাল প্রথম ইমপ্রেশন কেউ একজন বিশ্বস্ত ব্যবহারকারী হয়ে ওঠা বা তাদের চলে যাওয়া এবং কখনও ফিরে না আসার মধ্যে পার্থক্য তৈরি করতে পারে। প্রশ্ন হল, কোনটি ভাল ইম্প্রেশনের জন্য তৈরি করে এবং আপনি কীভাবে পরিমাপ করবেন যে আপনি আপনার ব্যবহারকারীদের উপর কী ধরনের ইমপ্রেশন তৈরি করছেন?

ওয়েবে, প্রথম ইম্প্রেশনগুলি অনেকগুলি ভিন্ন রূপ নিতে পারে—আমাদের কাছে একটি সাইটের ডিজাইন এবং ভিজ্যুয়াল আবেদনের প্রথম ইম্প্রেশনের পাশাপাশি এর গতি এবং প্রতিক্রিয়াশীলতার প্রথম ইমপ্রেশন রয়েছে৷

ওয়েব এপিআই-এর সাহায্যে একটি সাইটের ডিজাইন ব্যবহারকারীরা কতটা পছন্দ করেন তা পরিমাপ করা কঠিন, কিন্তু এর গতি এবং প্রতিক্রিয়া পরিমাপ করা হয় না!

ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) দিয়ে আপনার সাইটের লোড কত দ্রুত পরিমাপ করা যায় তা ব্যবহারকারীদের প্রথম ধারণা। কিন্তু আপনার সাইট কত দ্রুত স্ক্রিনে পিক্সেল আঁকতে পারে তা গল্পের অংশ। ব্যবহারকারীরা যখন সেই পিক্সেলগুলির সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করেন তখন আপনার সাইটটি কতটা প্রতিক্রিয়াশীল তা সমানভাবে গুরুত্বপূর্ণ!

প্রথম ইনপুট বিলম্ব (এফআইডি) মেট্রিক আপনার সাইটের ইন্টারঅ্যাক্টিভিটি এবং প্রতিক্রিয়াশীলতা সম্পর্কে আপনার ব্যবহারকারীর প্রথম ইম্প্রেশন পরিমাপ করতে সাহায্য করে।

FID কি?

FID সেই সময়কে পরিমাপ করে যখন একজন ব্যবহারকারী প্রথম কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (অর্থাৎ, যখন তারা কোনো লিঙ্কে ক্লিক করে, একটি বোতামে আলতো চাপ দেয় বা কাস্টম, জাভাস্ক্রিপ্ট-চালিত নিয়ন্ত্রণ ব্যবহার করে) তখন থেকে ব্রাউজার আসলে প্রক্রিয়াকরণ শুরু করতে সক্ষম হয়। যে মিথস্ক্রিয়া প্রতিক্রিয়া ইভেন্ট হ্যান্ডলার.

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

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

বিস্তারিত FID

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

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

একটি সাধারণ ওয়েব পৃষ্ঠা লোডের নিম্নলিখিত টাইমলাইনটি বিবেচনা করুন:

উপরের ভিজ্যুয়ালাইজেশনটি এমন একটি পৃষ্ঠা দেখায় যা সংস্থানগুলির জন্য কয়েকটি নেটওয়ার্ক অনুরোধ করছে (সম্ভবত CSS এবং JS ফাইল), এবং — সেই সংস্থানগুলি ডাউনলোড করা শেষ হওয়ার পরে — সেগুলি মূল থ্রেডে প্রক্রিয়া করা হয়৷

এর ফলে এমন সময় হয় যেখানে মূল থ্রেডটি মুহূর্তের জন্য ব্যস্ত থাকে, যা বেইজ রঙের টাস্ক ব্লক দ্বারা নির্দেশিত হয়।

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

আপনি হয়তো লক্ষ্য করেছেন যে FCP এবং TTI-এর মধ্যে যথেষ্ট সময় (তিনটি দীর্ঘ টাস্ক সহ) আছে, যদি কোনও ব্যবহারকারী সেই সময়ের মধ্যে পৃষ্ঠাটির সাথে যোগাযোগ করার চেষ্টা করে (উদাহরণস্বরূপ, একটি লিঙ্কে ক্লিক করে), সেখানে বিলম্ব হবে যখন ক্লিক প্রাপ্ত হয় এবং যখন প্রধান থ্রেড প্রতিক্রিয়া করতে সক্ষম হয়।

একজন ব্যবহারকারী দীর্ঘতম টাস্কের শুরুতে পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করলে কী ঘটবে তা বিবেচনা করুন:

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

যদি একটি মিথস্ক্রিয়া একটি ইভেন্ট শ্রোতা না থাকে?

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

উদাহরণ স্বরূপ, ব্যবহারকারীর ইন্টারঅ্যাকশনে সাড়া দেওয়ার আগে নিম্নলিখিত HTML উপাদানগুলির মূল থ্রেডে চলমান কাজগুলি সম্পূর্ণ করার জন্য অপেক্ষা করতে হবে:

• পাঠ্য ক্ষেত্র, চেকবক্স এবং রেডিও বোতাম ( <input> , <textarea> )
• ড্রপডাউন নির্বাচন করুন ( <select> )
• লিঙ্ক ( <a> )

কেন শুধুমাত্র প্রথম ইনপুট বিবেচনা?

যদিও যেকোনো ইনপুট থেকে দেরি হলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হতে পারে, আমরা প্রাথমিকভাবে কয়েকটি কারণে প্রথম ইনপুট বিলম্ব পরিমাপ করার পরামর্শ দিই:

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

একটি প্রথম ইনপুট হিসাবে গণনা কি?

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

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

এটিকে অন্যভাবে বলতে গেলে, FID RAIL পারফরম্যান্স মডেলে R (প্রতিক্রিয়াশীলতা) এর উপর ফোকাস করে, যেখানে স্ক্রলিং এবং জুমিং A (অ্যানিমেশন) এর সাথে আরও বেশি সম্পর্কিত এবং তাদের কর্মক্ষমতা গুণাবলী আলাদাভাবে মূল্যায়ন করা উচিত।

কোন ব্যবহারকারী আপনার সাইটের সাথে ইন্টারঅ্যাক্ট না করলে কি হবে?

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

এর মানে কিছু ব্যবহারকারীর কোনো FID মান থাকবে না, কিছু ব্যবহারকারীর FID মান কম থাকবে, এবং কিছু ব্যবহারকারীর সম্ভবত উচ্চ FID মান থাকবে৷

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

কেন শুধুমাত্র ইনপুট বিলম্ব বিবেচনা?

উপরে উল্লিখিত হিসাবে, FID শুধুমাত্র ইভেন্ট প্রক্রিয়াকরণে "বিলম্ব" পরিমাপ করে। এটি মোট ইভেন্ট প্রক্রিয়াকরণের সময়কাল নিজেই পরিমাপ করে না, বা ইভেন্ট হ্যান্ডলার চালানোর পরে UI আপডেট করতে ব্রাউজারটির সময় লাগে না।

যদিও এই সময়টি ব্যবহারকারীর জন্য গুরুত্বপূর্ণ এবং অভিজ্ঞতাকে প্রভাবিত করে , তবুও এটি এই মেট্রিকে অন্তর্ভুক্ত করা হয়নি কারণ এটি করার ফলে বিকাশকারীদের এমন কাজ যোগ করতে উৎসাহিত করা যেতে পারে যা বাস্তবে অভিজ্ঞতাকে আরও খারাপ করে তোলে—অর্থাৎ, তারা তাদের ইভেন্ট হ্যান্ডলার লজিককে একটি অ্যাসিঙ্ক্রোনাসে মোড়ানো করতে পারে কলব্যাক ( setTimeout() বা requestAnimationFrame() ) এর মাধ্যমে ইভেন্টের সাথে যুক্ত টাস্ক থেকে আলাদা করার জন্য। ফলাফলটি মেট্রিক স্কোরের একটি উন্নতি হবে কিন্তু ব্যবহারকারীর দ্বারা অনুভূত একটি ধীর প্রতিক্রিয়া।

যাইহোক, যদিও FID শুধুমাত্র ইভেন্ট লেটেন্সির "বিলম্ব" অংশ পরিমাপ করে, যে ডেভেলপাররা ইভেন্ট লাইফসাইকেল আরও ট্র্যাক করতে চান তারা ইভেন্ট টাইমিং API ব্যবহার করে তা করতে পারেন। আরো বিস্তারিত জানার জন্য কাস্টম মেট্রিক্সের নির্দেশিকা দেখুন।

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

FID হল একটি মেট্রিক যা শুধুমাত্র ক্ষেত্রে পরিমাপ করা যেতে পারে, কারণ এটি আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার জন্য একজন প্রকৃত ব্যবহারকারীর প্রয়োজন৷ আপনি নিম্নলিখিত সরঞ্জামগুলির সাহায্যে FID পরিমাপ করতে পারেন।

ক্ষেত্র সরঞ্জাম

• ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন
• পেজস্পিড ইনসাইট
• সার্চ কনসোল (কোর ওয়েব ভাইটাল রিপোর্ট)
• web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি

জাভাস্ক্রিপ্টে FID পরিমাপ করুন

জাভাস্ক্রিপ্টে FID পরিমাপ করতে, আপনি ইভেন্ট টাইমিং API ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি PerformanceObserver তৈরি করতে হয় যা first-input এন্ট্রিগুলির জন্য শোনে এবং সেগুলিকে কনসোলে লগ করে:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

উপরের উদাহরণে, first-input এন্ট্রির বিলম্বের মান পরিমাপ করা হয় এন্ট্রির startTime এবং processingStart টাইমস্ট্যাম্পের মধ্যে ডেল্টা নিয়ে। বেশিরভাগ ক্ষেত্রে এটি হবে FID মান; যাইহোক, FID পরিমাপের জন্য সমস্ত first-input এন্ট্রি বৈধ নয়।

নিম্নলিখিত বিভাগে এপিআই রিপোর্ট এবং কিভাবে মেট্রিক গণনা করা হয় তার মধ্যে পার্থক্যগুলি তালিকাভুক্ত করে৷

মেট্রিক এবং API-এর মধ্যে পার্থক্য

• API একটি ব্যাকগ্রাউন্ড ট্যাবে লোড করা পৃষ্ঠাগুলির জন্য first-input এন্ট্রিগুলি প্রেরণ করবে কিন্তু FID গণনা করার সময় সেই পৃষ্ঠাগুলিকে উপেক্ষা করা উচিত৷
• প্রথম ইনপুট হওয়ার আগে যদি পৃষ্ঠাটি ব্যাকগ্রাউন্ড করা হয় তবে API first-input এন্ট্রিগুলিও প্রেরণ করবে, তবে FID গণনা করার সময় সেই পৃষ্ঠাগুলিকেও উপেক্ষা করা উচিত (ইনপুটগুলি কেবল তখনই বিবেচনা করা হয় যদি পৃষ্ঠাটি পুরো সময় অগ্রভাগে থাকে)।
• যখন পৃষ্ঠাটি পিছনে/ফরোয়ার্ড ক্যাশে থেকে পুনরুদ্ধার করা হয় তখন API first-input এন্ট্রিগুলি রিপোর্ট করে না, তবে এই ক্ষেত্রে FID পরিমাপ করা উচিত যেহেতু ব্যবহারকারীরা তাদের স্বতন্ত্র পৃষ্ঠা ভিজিট হিসাবে অনুভব করেন৷
• API আইফ্রেমের মধ্যে ঘটে এমন ইনপুটগুলির রিপোর্ট করে না কিন্তু মেট্রিক করে কারণ সেগুলি পৃষ্ঠার ব্যবহারকারীর অভিজ্ঞতার অংশ৷ এটি CrUX এবং RUM এর মধ্যে পার্থক্য হিসাবে দেখাতে পারে। FID সঠিকভাবে পরিমাপ করতে আপনার সেগুলি বিবেচনা করা উচিত। সাব-ফ্রেমগুলি তাদের first-input এন্ট্রিগুলিকে একত্রিত করার জন্য অভিভাবক ফ্রেমে রিপোর্ট করতে API ব্যবহার করতে পারে।

এফআইডি ডেটা বিশ্লেষণ এবং প্রতিবেদন করা

FID মানগুলির প্রত্যাশিত বৈচিত্র্যের কারণে, এটি গুরুত্বপূর্ণ যে FID-তে রিপোর্ট করার সময় আপনি মানগুলির বিতরণের দিকে নজর দেন এবং উচ্চ শতাংশের উপর ফোকাস করেন৷

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

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

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

এই মেট্রিক উন্নত করার কৌশলগুলির মাধ্যমে আপনাকে গাইড করার জন্য FID অপ্টিমাইজ করার একটি সম্পূর্ণ নির্দেশিকা উপলব্ধ।

চেঞ্জলগ

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

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

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