আপনার ওয়েবসাইটের ইন্টারঅ্যাকশনকে নেক্সট পেইন্টের সাথে কীভাবে অপ্টিমাইজ করবেন তা শিখুন।
প্রকাশিত: ১৯ মে, ২০২৩, সর্বশেষ আপডেট: ২ সেপ্টেম্বর, ২০২৫
ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) হল একটি স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক যা ব্যবহারকারীর কোনও পৃষ্ঠা পরিদর্শনের সময়কাল জুড়ে ঘটে যাওয়া সমস্ত যোগ্য ইন্টারঅ্যাকশনের লেটেন্সি পর্যবেক্ষণ করে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়াশীলতা মূল্যায়ন করে। চূড়ান্ত INP মান হল দীর্ঘতম ইন্টারঅ্যাকশন (কখনও কখনও বহিরাগতদের উপেক্ষা করে)।
ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, ওয়েবসাইটগুলিকে ২০০ মিলিসেকেন্ড বা তার কম সময়ের জন্য নেক্সট পেইন্টের সাথে ইন্টারঅ্যাকশন করার চেষ্টা করা উচিত। আপনার বেশিরভাগ ব্যবহারকারীর জন্য এই লক্ষ্য অর্জনের জন্য, একটি ভাল থ্রেশহোল্ড হল পৃষ্ঠা লোডের ৭৫তম শতাংশ , যা মোবাইল এবং ডেস্কটপ ডিভাইসগুলিতে বিভক্ত।
ওয়েবসাইটের উপর নির্ভর করে, খুব কম বা একেবারেই কোনও ইন্টারঅ্যাকশন নাও হতে পারে—যেমন বেশিরভাগ টেক্সট এবং ছবির পৃষ্ঠা যেখানে খুব কম বা কোনও ইন্টারঅ্যাক্টিভ উপাদান নেই। অথবা, টেক্সট এডিটর বা গেমের মতো ওয়েবসাইটের ক্ষেত্রে, শত শত এমনকি হাজার হাজার ইন্টারঅ্যাকশন হতে পারে। উভয় ক্ষেত্রেই, যেখানে উচ্চ INP থাকে, সেখানে ব্যবহারকারীর অভিজ্ঞতা ঝুঁকির মধ্যে থাকে।
INP উন্নত করতে সময় এবং প্রচেষ্টা লাগে, কিন্তু এর পুরষ্কার হল উন্নত ব্যবহারকারীর অভিজ্ঞতা। এই নির্দেশিকায়, INP উন্নত করার একটি পথ অন্বেষণ করা হবে।
দুর্বল INP এর কারণ কী তা খুঁজে বের করুন
ধীরগতির ইন্টারঅ্যাকশন ঠিক করার আগে, আপনার ওয়েবসাইটের INP খারাপ কিনা বা উন্নতির প্রয়োজন কিনা তা জানার জন্য আপনার ডেটার প্রয়োজন হবে। একবার আপনার কাছে সেই তথ্য থাকলে, আপনি ধীরগতির ইন্টারঅ্যাকশন নির্ণয় শুরু করার জন্য ল্যাবে যেতে পারেন এবং সমাধানের দিকে এগিয়ে যেতে পারেন।
ক্ষেত্রে ধীরগতির মিথস্ক্রিয়া খুঁজুন
আদর্শভাবে, INP অপ্টিমাইজ করার ক্ষেত্রে আপনার যাত্রা শুরু হবে ফিল্ড ডেটা দিয়ে। সর্বোত্তমভাবে, একটি রিয়েল ইউজার মনিটরিং (RUM) প্রদানকারীর ফিল্ড ডেটা আপনাকে কেবল একটি পৃষ্ঠার INP মানই দেবে না, বরং প্রাসঙ্গিক ডেটাও দেবে যা INP মানের জন্য কোন নির্দিষ্ট ইন্টারঅ্যাকশন দায়ী ছিল তা তুলে ধরে, পৃষ্ঠা লোডের সময় বা পরে ইন্টারঅ্যাকশনটি ঘটেছে কিনা, ইন্টারঅ্যাকশনের ধরণ (ক্লিক, কী প্রেস, বা ট্যাপ) এবং অন্যান্য মূল্যবান তথ্য।
যদি আপনি ফিল্ড ডেটা পেতে RUM প্রদানকারীর উপর নির্ভর না করেন, তাহলে INP ফিল্ড ডেটা নির্দেশিকাটি শূন্যস্থান পূরণ করতে সাহায্য করার জন্য Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন (CrUX) ডেটা দেখার জন্য PageSpeed Insights ব্যবহার করার পরামর্শ দেয়। CrUX হল Core Web Vitals প্রোগ্রামের Google ডেটাসেট এবং INP সহ লক্ষ লক্ষ ওয়েবসাইটের জন্য মেট্রিক্সের একটি উচ্চ-স্তরের সারাংশ প্রদান করে। তবে, CrUX প্রায়শই RUM প্রদানকারীর কাছ থেকে প্রাপ্ত প্রাসঙ্গিক ডেটা প্রদান করে না যা আপনাকে সমস্যা বিশ্লেষণ করতে সাহায্য করবে। এই কারণে, আমরা এখনও সুপারিশ করি যে সাইটগুলি যখন সম্ভব তখন একটি RUM প্রদানকারী ব্যবহার করে, অথবা CrUX-এ উপলব্ধ তথ্যের পরিপূরক হিসাবে তাদের নিজস্ব RUM সমাধান বাস্তবায়ন করে।
ল্যাবে ধীরগতির মিথস্ক্রিয়া নির্ণয় করুন
আদর্শভাবে, আপনার কাছে ফিল্ড ডেটা থাকলে ল্যাবে পরীক্ষা শুরু করা উচিত যা ইঙ্গিত দেয় যে আপনার ইন্টারঅ্যাকশন ধীর। ফিল্ড ডেটার অভাবে, ল্যাবে ধীর ইন্টারঅ্যাকশন সনাক্ত করার জন্য কিছু কৌশল রয়েছে। এই কৌশলগুলির মধ্যে রয়েছে সাধারণ ব্যবহারকারীর প্রবাহ অনুসরণ করা এবং পথের মধ্যবর্তী ইন্টারঅ্যাকশন পরীক্ষা করা, সেইসাথে লোডের সময় পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করা - যখন মূল থ্রেড প্রায়শই ব্যস্ত থাকে - যাতে ব্যবহারকারীর অভিজ্ঞতার সেই গুরুত্বপূর্ণ অংশের সময় ধীর ইন্টারঅ্যাকশন সনাক্ত করা যায়।
মিথস্ক্রিয়া অপ্টিমাইজ করুন
একবার আপনি একটি ধীর মিথস্ক্রিয়া শনাক্ত করার পর এবং ল্যাবে ম্যানুয়ালি এটি পুনরুত্পাদন করতে পারলে , পরবর্তী পদক্ষেপ হল এটিকে অপ্টিমাইজ করা।
মিথস্ক্রিয়াগুলিকে তিনটি উপ-ভাগে ভাগ করা যেতে পারে:
- ইনপুট বিলম্ব , যা ব্যবহারকারী যখন পৃষ্ঠার সাথে একটি ইন্টারঅ্যাকশন শুরু করে তখন শুরু হয় এবং যখন ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাকগুলি চালানো শুরু হয় তখন শেষ হয়।
- প্রক্রিয়াকরণের সময়কাল , যা ইভেন্ট কলব্যাকগুলি সম্পূর্ণ হতে যে সময় নেয় তা নিয়ে গঠিত।
- উপস্থাপনা বিলম্ব , যা ব্রাউজারকে পরবর্তী ফ্রেমটি উপস্থাপন করতে যে সময় নেয়, যেখানে ইন্টারঅ্যাকশনের ভিজ্যুয়াল ফলাফল থাকে।
এই তিনটি উপ-অংশের যোগফল হল মোট ইন্টারঅ্যাকশন ল্যাটেন্সি। একটি ইন্টারঅ্যাকশনের প্রতিটি একক উপ-অংশ মোট ইন্টারঅ্যাকশন ল্যাটেন্সিতে কিছু সময় অবদান রাখে, তাই এটি জানা গুরুত্বপূর্ণ যে আপনি কীভাবে ইন্টারঅ্যাকশনের প্রতিটি অংশকে অপ্টিমাইজ করতে পারেন যাতে এটি যতটা সম্ভব কম সময়ের জন্য চলে।
ইনপুট বিলম্ব সনাক্ত করুন এবং হ্রাস করুন
যখন একজন ব্যবহারকারী কোনও পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন, তখন সেই ইন্টারঅ্যাকশনের প্রথম অংশটি হল ইনপুট বিলম্ব । পৃষ্ঠার অন্যান্য কার্যকলাপের উপর নির্ভর করে, ইনপুট বিলম্বের দৈর্ঘ্য যথেষ্ট হতে পারে। এটি মূল থ্রেডে ঘটে যাওয়া কার্যকলাপের কারণে (সম্ভবত স্ক্রিপ্ট লোডিং, পার্সিং এবং কম্পাইলিংয়ের কারণে), ফেচ হ্যান্ডলিং, টাইমার ফাংশন, এমনকি দ্রুত ধারাবাহিকভাবে ঘটে যাওয়া এবং একে অপরের সাথে ওভারল্যাপ হওয়া অন্যান্য ইন্টারঅ্যাকশনের কারণেও হতে পারে।
কোনও ইন্টারঅ্যাকশনের ইনপুট বিলম্বের উৎস যাই হোক না কেন, আপনাকে ইনপুট বিলম্ব সর্বনিম্ন করতে হবে যাতে ইন্টারঅ্যাকশনগুলি যত তাড়াতাড়ি সম্ভব ইভেন্ট কলব্যাক চালানো শুরু করতে পারে।
স্টার্টআপের সময় স্ক্রিপ্ট মূল্যায়ন এবং দীর্ঘ কাজের মধ্যে সম্পর্ক
পৃষ্ঠার জীবনচক্রের ইন্টারঅ্যাক্টিভিটির একটি গুরুত্বপূর্ণ দিক হল স্টার্টআপের সময়। একটি পৃষ্ঠা লোড হওয়ার সাথে সাথে এটি প্রাথমিকভাবে রেন্ডার হবে, তবে এটি মনে রাখা গুরুত্বপূর্ণ যে শুধুমাত্র একটি পৃষ্ঠা রেন্ডার হয়ে যাওয়ার অর্থ এই নয় যে পৃষ্ঠাটি লোড হওয়া শেষ হয়েছে। একটি পৃষ্ঠা সম্পূর্ণরূপে কার্যকরী হতে কতগুলি সংস্থান প্রয়োজন তার উপর নির্ভর করে, এটি সম্ভব যে ব্যবহারকারীরা পৃষ্ঠাটি লোড হওয়ার সময় তার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করতে পারেন।
একটি পৃষ্ঠা লোড হওয়ার সময় একটি ইন্টারঅ্যাকশনের ইনপুট বিলম্বকে দীর্ঘায়িত করতে পারে এমন একটি জিনিস হল স্ক্রিপ্ট মূল্যায়ন। নেটওয়ার্ক থেকে একটি জাভাস্ক্রিপ্ট ফাইল আনার পরে, জাভাস্ক্রিপ্ট চালানোর আগে ব্রাউজারকে এখনও কিছু করতে হবে; সেই কাজের মধ্যে রয়েছে একটি স্ক্রিপ্টের সিনট্যাক্স বৈধ কিনা তা পরীক্ষা করার জন্য পার্স করা, এটিকে বাইটকোডে কম্পাইল করা এবং অবশেষে এটি কার্যকর করা।
স্ক্রিপ্টের আকারের উপর নির্ভর করে, এই কাজটি মূল থ্রেডে দীর্ঘ কাজ শুরু করতে পারে, যা ব্রাউজারকে অন্যান্য ব্যবহারকারীর ইন্টারঅ্যাকশনে সাড়া দিতে বিলম্বিত করবে। পৃষ্ঠা লোডের সময় ব্যবহারকারীর ইনপুটের প্রতি আপনার পৃষ্ঠাটি প্রতিক্রিয়াশীল রাখতে, পৃষ্ঠা লোডের সময় দীর্ঘ কাজের সম্ভাবনা কমাতে আপনি কী করতে পারেন তা বোঝা গুরুত্বপূর্ণ যাতে পৃষ্ঠাটি দ্রুত থাকে।
ইভেন্ট কলব্যাকগুলি অপ্টিমাইজ করুন
ইনপুট বিলম্ব হল INP যা পরিমাপ করে তার প্রথম অংশ। আপনাকে নিশ্চিত করতে হবে যে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় চলমান ইভেন্ট কলব্যাকগুলি যত তাড়াতাড়ি সম্ভব সম্পন্ন করা যায়।
প্রায়শই মূল থ্রেডের প্রতি মনোযোগ দিন
ইভেন্ট কলব্যাক অপ্টিমাইজ করার ক্ষেত্রে সর্বোত্তম সাধারণ পরামর্শ হল যতটা সম্ভব কম কাজ করা। তবে, আপনার ইন্টারঅ্যাকশন লজিক জটিল হতে পারে এবং আপনি তাদের কাজ সামান্য পরিমাণে কমাতে সক্ষম হতে পারেন।
যদি আপনি দেখেন যে এটি আপনার ওয়েবসাইটের ক্ষেত্রে প্রযোজ্য, তাহলে পরবর্তী কাজটি হল ইভেন্ট কলব্যাকের কাজগুলিকে আলাদা আলাদা কাজে ভাগ করা। এটি যৌথ কাজকে একটি দীর্ঘ কাজ হতে বাধা দেয় যা মূল থ্রেডকে ব্লক করে, যা অন্যান্য ইন্টারঅ্যাকশনগুলিকে দ্রুত চালানোর অনুমতি দেয় যা অন্যথায় মূল থ্রেডে অপেক্ষা করত।
setTimeout হল কাজগুলিকে ভাগ করার একটি উপায়, কারণ এতে পাঠানো কলব্যাকটি একটি নতুন টাস্কে চলে। আপনি setTimeout নিজেই ব্যবহার করতে পারেন অথবা আরও ergonomic yielding এর জন্য এর ব্যবহারকে একটি পৃথক ফাংশনে বিমূর্ত করতে পারেন।
একেবারেই না করার চেয়ে নির্বিচারে ফলন দেওয়া ভালো—তবে, মূল থ্রেডে ফলন দেওয়ার আরও সূক্ষ্ম উপায় রয়েছে, এবং এর মধ্যে কেবল একটি ইভেন্ট কলব্যাকের পরপরই ফলন দেওয়া অন্তর্ভুক্ত যা ব্যবহারকারীর ইন্টারফেস আপডেট করে যাতে রেন্ডারিং লজিক দ্রুত চলতে পারে।
রেন্ডারিং কাজ দ্রুত সম্পন্ন করার জন্য ফলন
আরও উন্নত ফলন কৌশলের মধ্যে রয়েছে আপনার ইভেন্ট কলব্যাকগুলিতে কোড স্ট্রাকচার করা যাতে পরবর্তী ফ্রেমের জন্য ভিজ্যুয়াল আপডেট প্রয়োগ করার জন্য প্রয়োজনীয় লজিকের মধ্যে সীমাবদ্ধ থাকে। বাকি সবকিছু পরবর্তী কাজের জন্য স্থগিত করা যেতে পারে। এটি কেবল কলব্যাকগুলিকে হালকা এবং দ্রুত রাখে না, বরং ইভেন্ট কলব্যাক কোডে ভিজ্যুয়াল আপডেটগুলিকে ব্লক না করে ইন্টারঅ্যাকশনের জন্য রেন্ডারিং সময়ও উন্নত করে।
উদাহরণস্বরূপ, কল্পনা করুন একটি রিচ টেক্সট এডিটর যা আপনার টাইপ করার সাথে সাথে টেক্সট ফরম্যাট করে, কিন্তু আপনার লেখার প্রতিক্রিয়ায় UI এর অন্যান্য দিকগুলিও আপডেট করে (যেমন শব্দ গণনা, বানান ভুল হাইলাইট করা এবং অন্যান্য গুরুত্বপূর্ণ ভিজ্যুয়াল প্রতিক্রিয়া)। এছাড়াও, অ্যাপ্লিকেশনটিকে আপনার লেখা সংরক্ষণ করার প্রয়োজন হতে পারে যাতে আপনি চলে গেলে এবং ফিরে আসলে আপনার কোনও কাজ হারাতে না হয়।
এই উদাহরণে, ব্যবহারকারীর টাইপ করা অক্ষরের প্রতিক্রিয়ায় নিম্নলিখিত চারটি জিনিস ঘটতে হবে। তবে, পরবর্তী ফ্রেম উপস্থাপনের আগে শুধুমাত্র প্রথম আইটেমটি করতে হবে।
- ব্যবহারকারী যা টাইপ করেছেন তা দিয়ে টেক্সট বক্সটি আপডেট করুন এবং প্রয়োজনীয় ফর্ম্যাটিং প্রয়োগ করুন।
- UI এর সেই অংশটি আপডেট করুন যা বর্তমান শব্দ গণনা প্রদর্শন করে।
- বানান ভুল পরীক্ষা করার জন্য লজিক চালান।
- সাম্প্রতিক পরিবর্তনগুলি সংরক্ষণ করুন (স্থানীয়ভাবে অথবা দূরবর্তী ডাটাবেসে)।
এটি করার কোডটি দেখতে নিচের মতো হতে পারে:
textBox.addEventListener('input', (inputEvent) => {
// Update the UI immediately, so the changes the user made
// are visible as soon as the next frame is presented.
updateTextBox(inputEvent);
// Use `setTimeout` to defer all other work until at least the next
// frame by queuing a task in a `requestAnimationFrame()` callback.
requestAnimationFrame(() => {
setTimeout(() => {
const text = textBox.textContent;
updateWordCount(text);
checkSpelling(text);
saveChanges(text);
}, 0);
});
});
নিম্নলিখিত ভিজ্যুয়ালাইজেশনটি দেখায় যে পরবর্তী ফ্রেমের পরে কোনও অ-গুরুত্বপূর্ণ আপডেট স্থগিত করলে প্রক্রিয়াকরণের সময়কাল এবং এর ফলে সামগ্রিক ইন্টারঅ্যাকশন ল্যাটেন্সি কীভাবে হ্রাস পেতে পারে।
পূর্ববর্তী কোড উদাহরণে একটি requestAnimationFrame() কলের ভিতরে setTimeout() ব্যবহার কিছুটা রহস্যময় হলেও, এটি একটি কার্যকর পদ্ধতি যা সমস্ত ব্রাউজারে কাজ করে যাতে পরবর্তী ফ্রেমটি অ-গুরুত্বপূর্ণ কোড ব্লক না করে।
লেআউট থ্র্যাশিং এড়িয়ে চলুন
লেআউট থ্র্যাশিং—যাকে কখনও কখনও ফোর্সড সিঙ্ক্রোনাস লেআউট বলা হয়—একটি রেন্ডারিং পারফরম্যান্স সমস্যা যেখানে লেআউট সিঙ্ক্রোনাসভাবে ঘটে। এটি তখন ঘটে যখন আপনি জাভাস্ক্রিপ্টে স্টাইল আপডেট করেন এবং তারপর একই টাস্কে সেগুলি পড়েন—এবং জাভাস্ক্রিপ্টে এমন অনেক বৈশিষ্ট্য রয়েছে যা লেআউট থ্র্যাশিংয়ের কারণ হতে পারে ।
লেআউট থ্র্যাশিং একটি পারফরম্যান্স বাধা কারণ স্টাইল আপডেট করে এবং তারপর তাৎক্ষণিকভাবে জাভাস্ক্রিপ্টে সেই স্টাইলগুলির মানগুলি অনুরোধ করে, ব্রাউজারকে সিঙ্ক্রোনাস লেআউট কাজ করতে বাধ্য করা হয়, অন্যথায় ইভেন্ট কলব্যাকগুলি চালানো শেষ হওয়ার পরে অ্যাসিঙ্ক্রোনাসভাবে সম্পাদনের জন্য অপেক্ষা করতে পারত।
উপস্থাপনার বিলম্ব কমিয়ে আনুন
একটি ইন্টারঅ্যাকশন চিহ্নের উপস্থাপনা বিলম্ব একটি ইন্টারঅ্যাকশনের ইভেন্ট কলব্যাকগুলি চালানো শেষ হওয়ার পর থেকে, ব্রাউজারটি পরবর্তী ফ্রেমটি আঁকতে সক্ষম হয় যা ফলস্বরূপ দৃশ্যমান পরিবর্তনগুলি দেখায় সেই বিন্দু পর্যন্ত বিস্তৃত।
DOM এর আকার ছোট করুন
যখন কোনও পৃষ্ঠার DOM ছোট হয়, তখন রেন্ডারিংয়ের কাজ সাধারণত দ্রুত শেষ হয়। তবে, যখন DOM গুলি খুব বড় হয়ে যায়, তখন DOM আকার বৃদ্ধির সাথে সাথে রেন্ডারিংয়ের কাজও স্কেল হতে থাকে। রেন্ডারিংয়ের কাজ এবং DOM আকারের মধ্যে সম্পর্কটি কোনও রৈখিক সম্পর্ক নয়, তবে বড় DOM গুলিকে ছোট DOM গুলির তুলনায় রেন্ডার করার জন্য বেশি কাজ করতে হয়। একটি বড় DOM দুটি ক্ষেত্রে সমস্যাযুক্ত:
- প্রাথমিক পৃষ্ঠা রেন্ডারের সময়, যেখানে একটি বড় DOM-কে পৃষ্ঠার প্রাথমিক অবস্থা রেন্ডার করতে অনেক পরিশ্রম করতে হয়।
- ব্যবহারকারীর মিথস্ক্রিয়ার প্রতিক্রিয়ায়, যেখানে একটি বৃহৎ DOM আপডেট রেন্ডার করার জন্য খুব ব্যয়বহুল হতে পারে, এবং তাই ব্রাউজারটি পরবর্তী ফ্রেম উপস্থাপন করতে যে সময় নেয় তা বাড়িয়ে দেয়।
মনে রাখবেন যে এমন কিছু ক্ষেত্রে আছে যেখানে বড় DOM গুলি উল্লেখযোগ্যভাবে হ্রাস করা যায় না। যদিও DOM এর আকার হ্রাস করার জন্য আপনি কিছু পদ্ধতি গ্রহণ করতে পারেন, যেমন আপনার DOM সমতল করা বা ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় DOM এ যোগ করা যাতে আপনার প্রাথমিক DOM আকার ছোট থাকে, তবে এই কৌশলগুলি কেবল এতদূর যেতে পারে।
অফ-স্ক্রিন এলিমেন্টগুলিকে অলসভাবে রেন্ডার করতে content-visibility ব্যবহার করুন
পৃষ্ঠা লোডের সময় রেন্ডারিং কাজের পরিমাণ এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় রেন্ডারিং কাজের পরিমাণ সীমিত করার একটি উপায় হল CSS content-visibility বৈশিষ্ট্যের উপর নির্ভর করা, যা কার্যকরভাবে ভিউপোর্টের কাছে যাওয়ার সাথে সাথে অলসভাবে রেন্ডারিং উপাদানগুলিকে বোঝায়। যদিও content-visibility কার্যকরভাবে ব্যবহার করার জন্য কিছু অনুশীলনের প্রয়োজন হতে পারে, তবে এটি তদন্ত করা মূল্যবান যে ফলাফলটি কম রেন্ডারিং সময় যা আপনার পৃষ্ঠার INP উন্নত করতে পারে কিনা।
জাভাস্ক্রিপ্ট ব্যবহার করে HTML রেন্ডার করার সময় পারফরম্যান্স খরচ সম্পর্কে সচেতন থাকুন।
যেখানে HTML আছে, সেখানে HTML পার্সিং আছে, এবং ব্রাউজারটি একটি DOM-এ HTML পার্সিং শেষ করার পরে, এটিতে স্টাইল প্রয়োগ করতে হবে, লেআউট গণনা করতে হবে এবং পরবর্তীতে সেই লেআউটটি রেন্ডার করতে হবে। এটি একটি অনিবার্য খরচ, কিন্তু আপনি কীভাবে HTML রেন্ডার করবেন তা গুরুত্বপূর্ণ।
যখন সার্ভার HTML পাঠায়, তখন এটি ব্রাউজারে একটি স্ট্রিম হিসেবে আসে। স্ট্রিমিং মানে হল সার্ভার থেকে HTML প্রতিক্রিয়া খণ্ডে খণ্ডে আসছে। ব্রাউজারটি স্ট্রিম পরিচালনা করার পদ্ধতিটি অপ্টিমাইজ করে, সেই স্ট্রিমের খণ্ডগুলি আসার সাথে সাথে ক্রমবর্ধমানভাবে পার্স করে এবং সেগুলিকে ধীরে ধীরে রেন্ডার করে। এটি একটি পারফরম্যান্স অপ্টিমাইজেশন যার অর্থ ব্রাউজার পৃষ্ঠা লোডের সময় পর্যায়ক্রমে এবং স্বয়ংক্রিয়ভাবে ফলাফল দেয় এবং আপনি এটি বিনামূল্যে পান।
যেকোনো ওয়েবসাইটে প্রথম ভিজিটে সর্বদা কিছু পরিমাণে HTML ব্যবহার করা হয়, তবে একটি সাধারণ পদ্ধতির শুরুতে HTML-এর ন্যূনতম প্রাথমিক বিট দিয়ে শুরু হয় এবং তারপরে জাভাস্ক্রিপ্ট ব্যবহার করে কন্টেন্ট এরিয়াটি পূরণ করা হয়। ব্যবহারকারীর ইন্টারঅ্যাকশনের ফলেও সেই কন্টেন্ট এরিয়াতে পরবর্তী আপডেটগুলি ঘটে। এটিকে সাধারণত সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA) মডেল বলা হয়। এই প্যাটার্নের একটি অসুবিধা হল, ক্লায়েন্টে জাভাস্ক্রিপ্টের সাথে HTML রেন্ডার করার মাধ্যমে, আপনি কেবল সেই HTML তৈরি করার জন্য জাভাস্ক্রিপ্ট প্রক্রিয়াকরণের খরচই পাবেন না, বরং ব্রাউজারটি HTML পার্সিং এবং রেন্ডারিং শেষ না করা পর্যন্ত তা পাবে না ।
তবে এটা মনে রাখা গুরুত্বপূর্ণ যে, SPA নয় এমন ওয়েবসাইটগুলিতেও ইন্টারঅ্যাকশনের ফলে জাভাস্ক্রিপ্টের মাধ্যমে কিছু পরিমাণে HTML রেন্ডারিং জড়িত হতে পারে। এটি সাধারণত ঠিক থাকে, যতক্ষণ না আপনি ক্লায়েন্টে প্রচুর পরিমাণে HTML রেন্ডার করছেন, যা পরবর্তী ফ্রেমের উপস্থাপনা বিলম্বিত করতে পারে। তবে, ব্রাউজারে HTML রেন্ডার করার এই পদ্ধতির পারফরম্যান্সের প্রভাব এবং আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে প্রচুর HTML রেন্ডার করেন তবে এটি ব্যবহারকারীর ইনপুটের প্রতি আপনার ওয়েবসাইটের প্রতিক্রিয়াশীলতার উপর কীভাবে প্রভাব ফেলতে পারে তা বোঝা গুরুত্বপূর্ণ।
উপসংহার
আপনার সাইটের INP উন্নত করা একটি পুনরাবৃত্তিমূলক প্রক্রিয়া। যখন আপনি ক্ষেত্রের মধ্যে একটি ধীর ইন্টারঅ্যাকশন ঠিক করেন, তখন সম্ভাবনা বেশি থাকে যে - বিশেষ করে যদি আপনার ওয়েবসাইটটি প্রচুর ইন্টারঅ্যাক্টিভিটি প্রদান করে - আপনি অন্যান্য ধীর ইন্টারঅ্যাকশন খুঁজে পেতে শুরু করবেন এবং আপনাকে সেগুলিও অপ্টিমাইজ করতে হবে।
INP উন্নত করার মূল চাবিকাঠি হল অধ্যবসায়। সময়ের সাথে সাথে, আপনি আপনার পৃষ্ঠার প্রতিক্রিয়াশীলতা এমন একটি জায়গায় নিয়ে যেতে পারেন যেখানে ব্যবহারকারীরা আপনার অভিজ্ঞতায় খুশি হবেন। আপনার ব্যবহারকারীদের জন্য নতুন বৈশিষ্ট্য তৈরি করার সাথে সাথে, তাদের জন্য নির্দিষ্ট ইন্টারঅ্যাকশনগুলি অপ্টিমাইজ করার জন্য আপনাকে একই প্রক্রিয়ার মধ্য দিয়ে যেতে হতে পারে। এতে সময় এবং প্রচেষ্টা লাগবে, তবে এটি সময় এবং প্রচেষ্টাকে ভালভাবে ব্যয় করা।
হিরো ছবিটি আনস্প্ল্যাশ থেকে নেওয়া, ডেভিড পিসনয়ের লেখা এবং আনস্প্ল্যাশ লাইসেন্স অনুসারে পরিবর্তিত।