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

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

  • ক্রোম: 76।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 89।
  • সাফারি: সমর্থিত নয়।

উৎস

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

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

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

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

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

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

FID কি?

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

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

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

ভাল FID মান 2.5 সেকেন্ড বা তার কম, খারাপ মান 4.0 সেকেন্ডের বেশি এবং এর মধ্যে যেকোন কিছুর উন্নতি প্রয়োজন

বিস্তারিত FID

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

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

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

উদাহরণ পৃষ্ঠা লোড ট্রেস

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

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

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

FCP এবং TTI সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

FCP, TTI, এবং FID সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

জাভাস্ক্রিপ্টে 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 গ্রুপে তা প্রদান করতে পারেন।

,

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

  • ক্রোম: 76।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 89।
  • সাফারি: সমর্থিত নয়।

উৎস

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

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

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

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

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

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

FID কি?

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

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

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

ভাল FID মান 2.5 সেকেন্ড বা তার কম, খারাপ মান 4.0 সেকেন্ডের বেশি এবং এর মধ্যে যেকোন কিছুর উন্নতি প্রয়োজন

বিস্তারিত FID

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

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

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

উদাহরণ পৃষ্ঠা লোড ট্রেস

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

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

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

FCP এবং TTI সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

FCP, TTI, এবং FID সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

জাভাস্ক্রিপ্টে 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 গ্রুপে তা প্রদান করতে পারেন।

,

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

  • ক্রোম: 76।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 89।
  • সাফারি: সমর্থিত নয়।

উৎস

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

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

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

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

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

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

FID কি?

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

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

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

ভাল FID মান 2.5 সেকেন্ড বা তার কম, খারাপ মান 4.0 সেকেন্ডের বেশি এবং এর মধ্যে যেকোন কিছুর উন্নতি প্রয়োজন

বিস্তারিত FID

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

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

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

উদাহরণ পৃষ্ঠা লোড ট্রেস

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

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

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

FCP এবং TTI সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

FCP, TTI, এবং FID সহ পৃষ্ঠা লোড ট্রেস উদাহরণ

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

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

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

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

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

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

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

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

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

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

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

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

যদি কোনও ব্যবহারকারী কখনও আপনার সাইটের সাথে যোগাযোগ করে না?

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

এর অর্থ কিছু ব্যবহারকারীর কোনও এফআইডি মান থাকবে না, কিছু ব্যবহারকারীর কম এফআইডি মান থাকবে এবং কিছু ব্যবহারকারীর সম্ভবত উচ্চ এফআইডি মান থাকবে।

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

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

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

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

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

কীভাবে এফআইডি পরিমাপ করবেন

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

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

জাভাস্ক্রিপ্টে এফআইডি পরিমাপ করুন

জাভাস্ক্রিপ্টে এফআইডি পরিমাপ করতে, আপনি ইভেন্ট টাইমিং এপিআই ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে এমন একটি 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 টাইমস্ট্যাম্পগুলির মধ্যে ডেল্টা নিয়ে পরিমাপ করা হয়। বেশিরভাগ ক্ষেত্রে এটি এফআইডি মান হবে; তবে, সমস্ত first-input এন্ট্রি এফআইডি পরিমাপের জন্য বৈধ নয়।

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

মেট্রিক এবং এপিআইয়ের মধ্যে পার্থক্য

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

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

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

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

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

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

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

চেঞ্জলগ

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

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

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