নেক্সট পেইন্টে ইন্টারঅ্যাকশন অপ্টিমাইজ করুন

আপনার ওয়েবসাইটের ইন্টারঅ্যাকশনকে নেক্সট পেইন্টের জন্য কীভাবে অপ্টিমাইজ করবেন তা শিখুন।

জেরেমি ওয়াগনার
ফিলিপ ওয়ালটন
ব্যারি পোলার্ড

প্রকাশিত: ১৯ মে, ২০২৩, সর্বশেষ হালনাগাদ: ২ সেপ্টেম্বর, ২০২৫

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

ব্যবহারকারীদের ভালো অভিজ্ঞতা দেওয়ার জন্য, ওয়েবসাইটগুলোর উচিত ‘ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট’ সময়কাল ২০০ মিলিসেকেন্ড বা তার কম রাখার চেষ্টা করা। আপনার অধিকাংশ ব্যবহারকারীর জন্য এই লক্ষ্যমাত্রা অর্জন করতে, মোবাইল এবং ডেস্কটপ ডিভাইসের ভিত্তিতে পেজ লোডের ৭৫তম পার্সেন্টাইলকে একটি ভালো পরিমাপক হিসেবে ধরা যেতে পারে।

ভালো INP মান হলো ২০০ মিলিসেকেন্ড বা তার কম, খারাপ মান হলো ৫০০ মিলিসেকেন্ডের বেশি, এবং এর মধ্যবর্তী যেকোনো মানের উন্নতি প্রয়োজন।
আইএনপি থ্রেশহোল্ড

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

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

দুর্বল INP-এর কারণ খুঁজে বের করুন

ধীরগতির ইন্টারঅ্যাকশন ঠিক করার আগে, আপনার ওয়েবসাইটের INP দুর্বল কিনা বা এর উন্নতি প্রয়োজন কিনা, তা জানার জন্য ডেটার প্রয়োজন হবে। একবার সেই তথ্য হাতে পেলে, আপনি ল্যাবে গিয়ে ধীরগতির ইন্টারঅ্যাকশনগুলো নির্ণয় করা শুরু করতে পারেন এবং সমাধানের দিকে এগিয়ে যেতে পারেন।

মাঠে ধীরগতির মিথস্ক্রিয়া খুঁজুন

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

আপনি যদি ফিল্ড ডেটা পাওয়ার জন্য কোনো RUM প্রোভাইডারের উপর নির্ভর না করেন, তাহলে INP ফিল্ড ডেটা গাইডটি ফাঁক পূরণের জন্য PageSpeed ​​Insights ব্যবহার করে Chrome User Experience Report (CrUX)-এর ডেটা দেখার পরামর্শ দেয়। CrUX হলো Core Web Vitals প্রোগ্রামের Google ডেটাসেট এবং এটি INP সহ লক্ষ লক্ষ ওয়েবসাইটের মেট্রিক্সের একটি উচ্চ-স্তরের সারাংশ প্রদান করে। তবে, সমস্যা বিশ্লেষণ করতে সাহায্য করার জন্য একজন RUM প্রোভাইডারের কাছ থেকে যে প্রাসঙ্গিক ডেটা পাওয়া যায়, CrUX প্রায়শই তা প্রদান করে না। এই কারণে, আমরা এখনও সুপারিশ করি যে সাইটগুলো সম্ভব হলে একজন RUM প্রোভাইডার ব্যবহার করুক, অথবা CrUX-এ যা পাওয়া যায় তার পরিপূরক হিসেবে তাদের নিজস্ব RUM সলিউশন প্রয়োগ করুক।

ল্যাবে ধীরগতির মিথস্ক্রিয়া নির্ণয় করুন

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

মিথস্ক্রিয়া অপ্টিমাইজ করুন

একবার আপনি কোনো ধীরগতির মিথস্ক্রিয়া শনাক্ত করতে পারলে এবং পরীক্ষাগারে ম্যানুয়ালি এর পুনরাবৃত্তি ঘটাতে পারলে , পরবর্তী পদক্ষেপ হলো এটিকে অপ্টিমাইজ করা।

মিথস্ক্রিয়াকে তিনটি উপভাগে ভাগ করা যায়:

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

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

ইনপুট বিলম্ব শনাক্ত করুন এবং হ্রাস করুন

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

ইন্টারঅ্যাকশনের ইনপুট বিলম্বের উৎস যাই হোক না কেন, আপনি ইনপুট বিলম্বকে সর্বনিম্ন পর্যায়ে কমিয়ে আনতে চাইবেন, যাতে ইন্টারঅ্যাকশনগুলো যত দ্রুত সম্ভব ইভেন্ট কলব্যাকগুলো চালানো শুরু করতে পারে।

স্টার্টআপের সময় স্ক্রিপ্ট মূল্যায়ন এবং দীর্ঘ কাজগুলির মধ্যে সম্পর্ক

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

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

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

ইভেন্ট কলব্যাক অপ্টিমাইজ করুন

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

প্রায়শই মূল আলোচনার সুযোগ দিন

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

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

setTimeout হলো টাস্ক ভাগ করার একটি উপায়, কারণ এতে পাঠানো কলব্যাকটি একটি নতুন টাস্কে চলে। আপনি setTimeout সরাসরি ব্যবহার করতে পারেন অথবা আরও সহজে কাজ সম্পন্ন করার জন্য এর ব্যবহারকে একটি আলাদা ফাংশনে অন্তর্ভুক্ত করতে পারেন।

একেবারেই ইয়েল্ড না করার চেয়ে নির্বিচারে ইয়েল্ড করা ভালো—তবে, মেইন থ্রেডে ইয়েল্ড করার আরও একটি সূক্ষ্ম উপায় আছে, এবং সেটি হলো ইউজার ইন্টারফেস আপডেট করে এমন কোনো ইভেন্ট কলব্যাকের ঠিক পরেই ইয়েল্ড করা, যাতে রেন্ডারিং লজিক আরও দ্রুত চলতে পারে।

রেন্ডারিংয়ের কাজ দ্রুত সম্পন্ন করার জন্য সুযোগ দেওয়া।

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

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

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

  1. ব্যবহারকারীর টাইপ করা তথ্য দিয়ে টেক্সট বক্সটি আপডেট করুন এবং প্রয়োজনীয় ফরম্যাটিং প্রয়োগ করুন।
  2. UI-এর যে অংশে বর্তমান শব্দ সংখ্যা প্রদর্শিত হয়, সেটি আপডেট করুন।
  3. বানান ভুল পরীক্ষা করার জন্য লজিকটি চালান।
  4. সর্বশেষ পরিবর্তনগুলি সংরক্ষণ করুন (স্থানীয়ভাবে অথবা দূরবর্তী ডেটাবেসে)।

এটি করার জন্য কোডটি দেখতে নিচের মতো হতে পারে:

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() এর ব্যবহার কিছুটা দুর্বোধ্য হলেও, এটি একটি কার্যকর পদ্ধতি যা সমস্ত ব্রাউজারে কাজ করে এবং অপ্রয়োজনীয় কোডকে পরবর্তী ফ্রেম ব্লক করা থেকে বিরত রাখে।

লেআউটের এলোমেলো পরিবর্তন এড়িয়ে চলুন

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

ক্রোম ডেভটুলস-এর পারফরম্যান্স প্যানেলে প্রদর্শিত লেআউট থ্র্যাশিং-এর একটি চিত্রায়ন।
লেআউট থ্র্যাশিং-এর একটি উদাহরণ, যা ক্রোম ডেভটুলস-এর পারফরম্যান্স প্যানেলে দেখানো হয়েছে। যে রেন্ডারিং টাস্কগুলোতে লেআউট থ্র্যাশিং ঘটে, সেগুলোকে কল স্ট্যাকের সেই অংশের উপরের ডান কোণায় একটি লাল ত্রিভুজ দিয়ে চিহ্নিত করা হবে, যেটিকে প্রায়শই ‘Recalculate Style’ বা ‘Layout ’ লেবেল দেওয়া থাকে।

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

উপস্থাপনার বিলম্ব কমান

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

DOM আকার কমানো

যখন একটি পেজের DOM ছোট হয়, তখন রেন্ডারিংয়ের কাজ সাধারণত দ্রুত শেষ হয়ে যায়। তবে, যখন DOM খুব বড় হয়ে যায়, তখন রেন্ডারিংয়ের কাজও DOM-এর আকার বৃদ্ধির সাথে সাথে বাড়তে থাকে। রেন্ডারিংয়ের কাজ এবং DOM-এর আকারের মধ্যে সম্পর্কটি রৈখিক নয়, কিন্তু ছোট DOM-এর তুলনায় বড় DOM রেন্ডার করতে বেশি কাজ করতে হয়। দুটি ক্ষেত্রে একটি বড় DOM সমস্যা তৈরি করে:

  1. প্রাথমিক পেজ রেন্ডারের সময়, একটি বড় DOM-কে পেজের প্রাথমিক অবস্থা রেন্ডার করার জন্য অনেক কাজ করতে হয়।
  2. ব্যবহারকারীর কোনো ইন্টারঅ্যাকশনের প্রতিক্রিয়ায়, একটি বড় DOM রেন্ডারিং আপডেটকে অত্যন্ত ব্যয়বহুল করে তুলতে পারে, এবং এর ফলে ব্রাউজারের পরবর্তী ফ্রেমটি প্রদর্শন করতে যে সময় লাগে তা বেড়ে যায়।

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

স্ক্রিনের বাইরের উপাদানগুলিকে লেজি রেন্ডার করতে content-visibility ব্যবহার করুন।

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

জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল রেন্ডার করার সময় পারফরম্যান্সের ব্যয় সম্পর্কে সচেতন থাকুন।

যেখানে HTML থাকে, সেখানে HTML পার্সিংও থাকে, এবং ব্রাউজার যখন HTML পার্স করে একটি DOM তৈরি করে ফেলে, তখন তাকে সেটির উপর স্টাইল প্রয়োগ করতে হয়, লেআউটের হিসাব-নিকাশ করতে হয় এবং সবশেষে সেই লেআউটটি রেন্ডার করতে হয়। এটি একটি অনিবার্য প্রক্রিয়া, কিন্তু আপনি কীভাবে HTML রেন্ডার করছেন তা গুরুত্বপূর্ণ।

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

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

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

উপসংহার

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

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

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