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

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

জেরেমি ওয়াগনার

ফিলিপ ওয়ালটন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

প্রায়ই প্রধান থ্রেড ফলন

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

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

setTimeout হল কাজগুলি ভাঙার একটি উপায়, কারণ এতে পাস করা কলব্যাক একটি নতুন টাস্কে চলে। আপনি নিজেই setTimeout ব্যবহার করতে পারেন বা আরও ergonomic ফলনের জন্য একটি পৃথক ফাংশনে এর ব্যবহারকে বিমূর্ত করতে পারেন।

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

রেন্ডারিং কাজ তাড়াতাড়ি ঘটতে অনুমতি দিতে ফলন

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

উদাহরণস্বরূপ, একটি সমৃদ্ধ পাঠ্য সম্পাদক কল্পনা করুন যেটি আপনার টাইপ করার সাথে সাথে টেক্সট ফর্ম্যাট করে, তবে আপনি যা লিখেছেন তার প্রতিক্রিয়া হিসাবে 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() ব্যবহার করাটা স্বীকৃতভাবে কিছুটা গুপ্ত, এটি একটি কার্যকর পদ্ধতি যা সমস্ত ব্রাউজারে কাজ করে তা নিশ্চিত করার জন্য যে নন-ক্রিটিকাল কোড পরবর্তী ফ্রেমটিকে ব্লক করে না।

লেআউট থ্র্যাশিং এড়িয়ে চলুন

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

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

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

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

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 রেন্ডার করার সময় পারফরম্যান্স খরচ সম্পর্কে সচেতন থাকুন

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

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

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

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

উপসংহার

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

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

আনস্প্ল্যাশ থেকে হিরো ছবি, ডেভিড পিসনয় দ্বারা এবং আনস্প্ল্যাশ লাইসেন্স অনুসারে পরিবর্তিত।