আপনার ওয়েবসাইটের Interaction to Next Paint কীভাবে অপ্টিমাইজ করবেন তা জানুন।
প্রকাশিত: ১৯ মে, ২০২৩, শেষবার আপডেট করা হয়েছে: ২ সেপ্টেম্বর, ২০২৫
ইন্টার্যাকশন টু নেক্সট পেইন্ট (INP) হল একটি স্থিতিশীল Core Web Vital মেট্রিক যা ব্যবহারকারীর ইন্ট্যার্যাকশনের জন্য পৃষ্ঠার সামগ্রিকভাবে রেসপন্সিভ কতটা আছে তা মূল্যায়ন করে। এটি ব্যবহারকারীর পৃষ্ঠায় ভিজিট করার পুরো সময় জুড়ে হওয়া সমস্ত উপযুক্ত ইন্ট্যার্যাকশনের লেটেন্সি পর্যবেক্ষণ করে। চূড়ান্ত INP ভ্যালু হল সবচেয়ে দীর্ঘ ইন্ট্যার্যাকশন (কখনও কখনও আউটলায়ার উপেক্ষা করা হয়)।
ব্যবহারকারীকে ভালো অভিজ্ঞতা প্রদান করার জন্য, ওয়েবসাইটগুলির Interaction to Next Paint ২০০ মিলিসেকেন্ড বা তার কম রাখার চেষ্টা করা উচিত। বেশিরভাগ ব্যবহারকারীর জন্য এই লক্ষ্য পূরণ করতে, পরিমাপের একটি ভালো থ্রেশহোল্ড হল পৃষ্ঠা লোডের ৭৫ পার্সেন্টাইল, যা মোবাইল ও ডেস্কটপ ডিভাইসের মধ্যে ভাগ করা থাকে।
ওয়েবসাইটের উপর নির্ভর করে, খুব কম বা কোনও ইন্টার্যাকশন নাও থাকতে পারে—যেমন, বেশিরভাগ টেক্সট ও ছবি সহ পৃষ্ঠা যাতে খুব কম বা কোনও ইন্টার্যাক্টিভ এলিমেন্ট নেই। অথবা, টেক্সট এডিটর বা গেমের মতো ওয়েবসাইটের ক্ষেত্রে, শত শত—এমনকি হাজার হাজার—ইন্টার্যাকশন হতে পারে। উভয় ক্ষেত্রেই, যেখানে INP বেশি, সেখানে ব্যবহারকারীর অভিজ্ঞতা ঝুঁকির মধ্যে থাকে।
INP উন্নত করতে সময় ও পরিশ্রম লাগে, তবে এর ফলে ব্যবহারকারীর অভিজ্ঞতা আরও ভালো হয়। এই গাইডে, INP উন্নত করার উপায় এক্সপ্লোর করা হবে।
খারাপ INP-এর কারণ খুঁজে বের করা
ধীরগতির ইন্টার্যাকশন সংক্রান্ত সমস্যার সমাধান করার আগে, আপনার ওয়েবসাইটের INP খারাপ নাকি তাতে উন্নতি প্রয়োজন তা জানার জন্য আপনার ডেটা প্রয়োজন হবে। এই তথ্য পাওয়ার পরে, আপনি ল্যাবে গিয়ে স্লো ইন্টার্যাকশন ডায়াগনসিস করা শুরু করতে এবং সমাধানের দিকে এগিয়ে যেতে পারবেন।
ফিল্ডে স্লো ইন্টার্যাকশন খুঁজুন
সাধারণত, INP অপ্টিমাইজ করার জন্য আপনার জার্নি ফিল্ড ডেটা দিয়ে শুরু হবে। সবচেয়ে ভাল হয়, যদি কোনও রিয়েল ইউজার মনিটরিং (RUM) প্রদানকারীর থেকে পাওয়া ফিল্ড ডেটা আপনাকে শুধু পৃষ্ঠার INP ভ্যালু না দেয়, বরং প্রাসঙ্গিক ডেটাও দেয় যা হাইলাইট করে যে কোন নির্দিষ্ট ইন্টার্যাকশন INP ভ্যালুর জন্য দায়ী, পৃষ্ঠা লোড হওয়ার সময় বা পরে ইন্টার্যাকশন হয়েছে কিনা, ইন্টার্যাকশনের ধরন (ক্লিক, কীপ্রেস বা ট্যাপ) এবং অন্যান্য মূল্যবান তথ্য।
আপনি যদি ফিল্ড ডেটা পাওয়ার জন্য RUM পরিষেবা প্রদানকারীর উপর নির্ভর না করেন, তাহলে INP ফিল্ড ডেটা গাইড আপনাকে Chrome User Experience Report (CrUX) ডেটা দেখার জন্য PageSpeed Insights ব্যবহার করার পরামর্শ দেয় যাতে ফাঁকগুলি পূরণ করতে সাহায্য করা যায়। CrUX হল Core Web Vitals প্রোগ্রামের Google ডেটাসেট এবং এটি INP সহ লক্ষ লক্ষ ওয়েবসাইটের মেট্রিক্সের একটি উচ্চ-স্তরের সারাংশ প্রদান করে। তবে, CrUX প্রায়ই প্রাসঙ্গিক ডেটা প্রদান করে না যা আপনি RUM প্রদানকারীর থেকে পান এবং যা আপনাকে সমস্যা বিশ্লেষণ করতে সাহায্য করে। এই কারণে, আমরা এখনও সাজেস্ট করি যে সাইটগুলি যখন সম্ভব হয় তখন একটি RUM প্রদানকারী ব্যবহার করে বা CrUX-এ যা উপলভ্য আছে তা সম্পূর্ণ করার জন্য তাদের নিজস্ব RUM সমাধান প্রয়োগ করে।
ল্যাবে ধীর ইন্টার্যাকশন ডায়াগনসিস করা
সাধারণত, ফিল্ড ডেটা থেকে ইন্টার্যাকশন স্লো হওয়ার ইঙ্গিত পেলে, আপনি ল্যাবে পরীক্ষা শুরু করতে চাইবেন। ফিল্ড ডেটা না থাকলে, ল্যাবে স্লো ইন্টার্যাকশন শনাক্ত করার জন্য কিছু স্ট্র্যাটেজি আছে। এই ধরনের কৌশলের মধ্যে রয়েছে সাধারণ ব্যবহারকারীর ফ্লো অনুসরণ করা এবং সেই অনুযায়ী ইন্টার্যাকশন পরীক্ষা করা, সেইসাথে লোড হওয়ার সময় পৃষ্ঠার সাথে ইন্টার্যাক্ট করা—যখন মূল থ্রেডটি প্রায়শই সবচেয়ে ব্যস্ত থাকে—যাতে ব্যবহারকারীর অভিজ্ঞতার সেই গুরুত্বপূর্ণ অংশে ধীরগতির ইন্টার্যাকশন শনাক্ত করা যায়।
ইন্টার্যাকশন অপ্টিমাইজ করা
আপনি একবার স্লো ইন্টার্যাকশন শনাক্ত করে ল্যাবে ম্যানুয়ালি তা আবার তৈরি করতে পারলে, পরবর্তী ধাপ হল সেটি অপ্টিমাইজ করা।
ইন্টার্যাকশনকে তিনটি সাবপার্টে ভাগ করা যেতে পারে:
- ইনপুট ডিলে, যা ব্যবহারকারী পৃষ্ঠার সাথে ইন্টার্যাকশন শুরু করলে শুরু হয় এবং ইন্টার্যাকশনের জন্য ইভেন্ট কলব্যাক রান করা শুরু হলে শেষ হয়।
- প্রসেসিংয়ের সময়সীমা, যার মধ্যে ইভেন্ট কলব্যাক সম্পূর্ণ হতে যে সময় লাগে তা অন্তর্ভুক্ত থাকে।
- প্রেজেন্টেশন বিলম্ব, যা হল ইন্টার্যাকশনের ভিজ্যুয়াল ফলাফল সহ পরবর্তী ফ্রেম ব্রাউজারের দেখাতে যে সময় লাগে।
এই তিনটি সাবপার্টের যোগফল হল মোট ইন্টার্যাকশন লেটেন্সি। ইন্টার্যাকশনের প্রতিটি সাবপার্ট মোট ইন্টার্যাকশন লেটেন্সিতে কিছুটা সময় যোগ করে, তাই ইন্টার্যাকশনের প্রতিটি অংশ কীভাবে অপ্টিমাইজ করবেন তা জানা গুরুত্বপূর্ণ যাতে এটি যতটা সম্ভব কম সময় নেয়।
ইনপুট সংক্রান্ত দেরি শনাক্ত করা ও কমানো
ব্যবহারকারী কোনও পৃষ্ঠার সাথে ইন্টার্যাক্ট করলে, সেই ইন্টার্যাকশনের প্রথম অংশ হল ইনপুট ডিলে। পৃষ্ঠার অন্যান্য অ্যাক্টিভিটির উপর নির্ভর করে, ইনপুট বিলম্বের দৈর্ঘ্য উল্লেখযোগ্য হতে পারে। এটি মূল থ্রেডে ঘটা অ্যাক্টিভিটির (সম্ভবত স্ক্রিপ্ট লোড, পার্স ও কম্পাইল করার কারণে), ফেচ হ্যান্ডলিং, টাইমার ফাংশন বা এমনকি দ্রুত একের পর এক ঘটা এবং একে অপরের উপর ওভারল্যাপ করা অন্যান্য ইন্টার্যাকশনের কারণে হতে পারে।
ইন্টার্যাকশনের ইনপুট দেরির সোর্স যাই হোক না কেন, আপনি ইনপুট দেরি যতটা সম্ভব কমাতে চাইবেন যাতে ইন্টার্যাকশন যত তাড়াতাড়ি সম্ভব ইভেন্ট কলব্যাক রান করা শুরু করতে পারে।
স্টার্টআপের সময় স্ক্রিপ্ট মূল্যায়ন ও বড় টাস্কের মধ্যে সম্পর্ক
পৃষ্ঠার লাইফসাইকেলে ইন্টারঅ্যাক্টিভিটির একটি গুরুত্বপূর্ণ দিক হল স্টার্টআপের সময়। কোনও পৃষ্ঠা লোড হওয়ার সময়, এটি প্রথমে রেন্ডার হবে, তবে এটি মনে রাখা গুরুত্বপূর্ণ যে কোনও পৃষ্ঠা রেন্ডার হয়েছে মানেই এই নয় যে পৃষ্ঠাটি লোড হওয়া সম্পূর্ণ হয়েছে। কোনও পৃষ্ঠা সম্পূর্ণভাবে কার্যকর হতে কতগুলি রিসোর্স প্রয়োজন তার উপর নির্ভর করে, এটি সম্ভব যে ব্যবহারকারীরা পৃষ্ঠাটি লোড হওয়ার সময় এটির সাথে ইন্টার্যাক্ট করার চেষ্টা করতে পারেন।
পৃষ্ঠা লোড হওয়ার সময় ইন্টার্যাকশনের ইনপুট ডিলে বাড়িয়ে দিতে পারে এমন একটি বিষয় হল স্ক্রিপ্ট মূল্যায়ন। নেটওয়ার্ক থেকে জাভাস্ক্রিপ্ট ফাইল ফেচ করার পরেও, জাভাস্ক্রিপ্ট রান করার আগে ব্রাউজারকে আরও কিছু কাজ করতে হয়; এর মধ্যে রয়েছে সিনট্যাক্স সঠিক কিনা তা চেক করার জন্য স্ক্রিপ্ট পার্স করা, বাইটকোডে কম্পাইল করা এবং সবশেষে তা এক্সিকিউট করা।
স্ক্রিপ্টের সাইজের উপর নির্ভর করে, এই কাজ মূল থ্রেডে বড় টাস্ক তৈরি করতে পারে, যার ফলে ব্রাউজার অন্যান্য ব্যবহারকারীর ইন্টার্যাকশনে উত্তর দিতে দেরি করবে। পৃষ্ঠা লোড হওয়ার সময় ব্যবহারকারীর ইনপুটের প্রতি আপনার পৃষ্ঠাকে রেসপন্সিভ রাখতে, পৃষ্ঠা লোড হওয়ার সময় বড় টাস্কের সম্ভাবনা কমাতে আপনি কী করতে পারেন তা বোঝা গুরুত্বপূর্ণ, যাতে পৃষ্ঠাটি দ্রুত কাজ করে।
ইভেন্ট কলব্যাক অপ্টিমাইজ করুন
ইনপুট ডিলে হল INP যা পরিমাপ করে তার প্রথম অংশ। এছাড়াও, আপনাকে নিশ্চিত করতে হবে যে ব্যবহারকারীর ইন্টার্যাকশনের উত্তরে চলা ইভেন্ট কলব্যাক যেন যত দ্রুত সম্ভব সম্পূর্ণ হতে পারে।
প্রায়ই মূল থ্রেডে ফিরে যান
ইভেন্ট কলব্যাক অপ্টিমাইজ করার জন্য সবচেয়ে ভালো সাধারণ পরামর্শ হল, সেগুলিতে যতটা সম্ভব কম কাজ করা। তবে, আপনার ইন্টার্যাকশন লজিক জটিল হতে পারে এবং আপনি হয়ত তাদের কাজ সামান্যই কমাতে পারবেন।
আপনার ওয়েবসাইটের ক্ষেত্রেও যদি এমনটি ঘটে, তাহলে আপনি ইভেন্ট কলব্যাকে কাজগুলিকে আলাদা আলাদা টাস্কে ভাগ করে দেখতে পারেন। এটি সম্মিলিত কাজকে একটি দীর্ঘ টাস্ক হতে বাধা দেয় যা মূল থ্রেডকে ব্লক করে, যা অন্যান্য ইন্টারঅ্যাকশনের অনুমতি দেয় যা অন্যথায় মূল থ্রেডে শীঘ্রই চালানোর জন্য অপেক্ষা করবে।
setTimeout হল টাস্ককে ছোট ছোট ভাগে ভাগ করার একটি উপায়, কারণ এতে পাস করা কলব্যাক নতুন টাস্কে রান করে। আপনি setTimeout নিজে থেকে ব্যবহার করতে অথবা আরও বেশি এরগোনমিক ইল্ডিংয়ের জন্য আলাদা ফাংশনে এর ব্যবহার অ্যাবস্ট্র্যাক্ট করতে পারবেন।
নির্বিচারে ইল্ডিং করা একেবারেই ইল্ডিং না করার চেয়ে ভাল—তবে, মূল থ্রেডে ইল্ডিং করার আরও সূক্ষ্ম উপায় রয়েছে এবং এর মধ্যে শুধুমাত্র একটি ইভেন্ট কলব্যাকের পরেই ইল্ডিং করা অন্তর্ভুক্ত যা ইউজার ইন্টারফেস আপডেট করে যাতে রেন্ডারিং লজিক আরও দ্রুত রান করতে পারে।
রেন্ডারিংয়ের কাজ যাতে আরও দ্রুত হয় তার জন্য ইল্ড করুন
আরও উন্নত ইল্ডিং টেকনিকের মধ্যে রয়েছে আপনার ইভেন্ট কলব্যাকে কোড স্ট্রাকচার করা যাতে পরবর্তী ফ্রেমের জন্য ভিজ্যুয়াল আপডেট প্রয়োগ করার জন্য প্রয়োজনীয় লজিক অনুযায়ী যা রান করে তা সীমিত করা যায়। অন্য সবকিছু পরবর্তী টাস্কের জন্য স্থগিত রাখা যেতে পারে। এটি শুধু কলব্যাককে হালকা ও চটপটে রাখে না, বরং ইভেন্ট কলব্যাক কোডে ভিজ্যুয়াল আপডেট ব্লক করার অনুমতি না দিয়ে ইন্টার্যাকশনের জন্য রেন্ডার করার মোট সময় উন্নত করে।
যেমন, এমন একটি রিচ টেক্সট এডিটরের কথা ভাবুন যা আপনার টাইপ করার সাথে সাথে টেক্সট ফর্ম্যাট করে, কিন্তু আপনি যা লিখেছেন তার প্রতিক্রিয়া হিসেবে 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 পার্সিং আছে এবং ব্রাউজার HTML-কে DOM-এ পার্স করা শেষ করার পরে, এটিকে অবশ্যই স্টাইল প্রয়োগ করতে হবে, লেআউট গণনা করতে হবে এবং পরবর্তীতে সেই লেআউট রেন্ডার করতে হবে। এই খরচ এড়ানো যায় না, তবে আপনি কীভাবে HTML রেন্ডার করছেন তা গুরুত্বপূর্ণ।
সার্ভার HTML পাঠালে, সেটি ব্রাউজারে স্ট্রিম হিসেবে আসে। স্ট্রিমিংয়ের অর্থ হল, সার্ভার থেকে HTML উত্তর চাঙ্ক হিসেবে আসছে। ব্রাউজার কোনও স্ট্রিমকে কীভাবে ম্যানেজ করবে তা অপ্টিমাইজ করে। এর জন্য, স্ট্রিমটি আসার সাথে সাথে তার চাঙ্কগুলি ইনক্রিমেন্টালভাবে পার্স করে এবং সেগুলি বিট বাই বিট রেন্ডার করে। এটি হল পারফর্ম্যান্স অপ্টিমাইজেশন, যেখানে পৃষ্ঠা লোড হওয়ার সময় ব্রাউজার পর্যায়ক্রমে এবং অটোমেটিক্যালি ইমপ্লিসিটলি ইল্ড করে এবং আপনি এটি ফ্রিতে পান।
যেকোনও ওয়েবসাইটে প্রথমবার ভিজিট করার সময় সবসময় কিছু পরিমাণ HTML থাকে, তবে সাধারণ পদ্ধতি হল, প্রথমে খুব কম পরিমাণ HTML দিয়ে শুরু করা এবং তারপর কন্টেন্ট এরিয়া পূরণ করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা। ব্যবহারকারীর ইন্টার্যাকশনের ফলে সেই কন্টেন্ট এরিয়াতে পরবর্তী আপডেটও হয়। এটিকে সাধারণত সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA) মডেল বলা হয়। এই প্যাটার্নের একটি অসুবিধা হল, ক্লায়েন্টে জাভাস্ক্রিপ্টের মাধ্যমে HTML রেন্ডার করার সময়, HTML তৈরি করার জন্য জাভাস্ক্রিপ্ট প্রসেসিংয়ের খরচ তো হয়ই, তার সাথে HTML পার্স ও রেন্ডার করা সম্পূর্ণ না হওয়া পর্যন্ত ব্রাউজার কিছুই দেখায় না।
তবে, এটি মনে রাখা গুরুত্বপূর্ণ যে, যেসব ওয়েবসাইট SPA নয়, সেগুলিও ইন্টার্যাকশনের ফলে জাভাস্ক্রিপ্টের মাধ্যমে কিছুটা HTML রেন্ডার করতে পারে। এটি সাধারণত ঠিক আছে, যতক্ষণ না আপনি ক্লায়েন্টে প্রচুর পরিমাণে HTML রেন্ডার করছেন, যা পরবর্তী ফ্রেমের প্রেজেন্টেশনকে বিলম্বিত করতে পারে। তবে, ব্রাউজারে HTML রেন্ডার করার এই পদ্ধতির পারফর্ম্যান্সের প্রভাব এবং আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে প্রচুর HTML রেন্ডার করেন তাহলে ব্যবহারকারীর ইনপুটে আপনার ওয়েবসাইটের প্রতিক্রিয়াশীলতাকে এটি কীভাবে প্রভাবিত করতে পারে তা বোঝা গুরুত্বপূর্ণ।
উপসংহার
আপনার সাইটের INP উন্নত করা একটি পুনরাবৃত্তিমূলক প্রক্রিয়া। আপনি ফিল্ডে কোনও স্লো ইন্টার্যাকশন ঠিক করলে, বিশেষ করে আপনার ওয়েবসাইটে অনেক ইন্টার্যাক্টিভিটি থাকলে, আপনি অন্যান্য স্লো ইন্টার্যাকশন খুঁজে পেতে শুরু করবেন এবং সেগুলিও আপনাকে অপ্টিমাইজ করতে হবে।
INP উন্নত করার মূল চাবিকাঠি হল অধ্যবসায়। সময়ের সাথে সাথে, আপনি নিজের পৃষ্ঠার রেসপন্সিভনেস এমন একটি জায়গায় নিয়ে যেতে পারবেন যেখানে ব্যবহারকারীরা আপনার প্রদান করা অভিজ্ঞতা নিয়ে খুশি হবেন। এছাড়াও, ব্যবহারকারীদের জন্য নতুন ফিচার ডেভেলপ করার সময়, তাদের জন্য নির্দিষ্ট ইন্টার্যাকশন অপ্টিমাইজ করার জন্য আপনাকে একই প্রসেস অনুসরণ করতে হতে পারে। এতে সময় ও পরিশ্রম লাগবে, তবে তা সার্থক হবে।