কিভাবে পাবটেকের সম্মতি ব্যবস্থাপনা প্ল্যাটফর্ম তাদের গ্রাহকদের INP কমিয়েছে। ওয়েবসাইটগুলি 64% পর্যন্ত, বিজ্ঞাপনের দৃশ্যমানতা 1.5% পর্যন্ত উন্নত করে

কিভাবে PubConsent CMP তাদের গ্রাহকদের জন্য INP 64% পর্যন্ত কমিয়েছে একটি ফলন কৌশল ব্যবহার করে যা Chrome DevTools ব্যবহার করে চিহ্নিত প্রতিক্রিয়াশীলতা সমস্যাগুলি সমাধান করতে ব্রাউজারের সময়সূচী API ব্যবহার করে।

মার্কো প্রন্টেরা
গিলবার্তো কচি
Gilberto Cocchi
X GitHub

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

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

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

কেন PubTech কর্মক্ষমতা সম্পর্কে যত্নশীল?

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

পারফরম্যান্সকে অগ্রাধিকার দিয়ে এবং PubConsent CMP স্ক্রিপ্ট হালকা রাখার মাধ্যমে, ওয়েবসাইটের মালিকরা ব্যবহারকারীর অভিজ্ঞতার গুণমান রক্ষা করার সময় মূল্যবান সম্মতি ব্যবস্থাপনা কার্যকারিতা অন্তর্ভুক্ত করার মধ্যে একটি সূক্ষ্ম ভারসাম্য বজায় রাখতে পারেন।

একটি CMP প্রদান করে কার্যকারিতার গুরুত্বের পরিপ্রেক্ষিতে—এবং এটি কার্যক্ষমতার উপর প্রভাব ফেলতে পারে—পাবটেক নিম্নলিখিত লক্ষ্যগুলি সেট করে:

  1. INP-তে PubConsent CMP পণ্যের প্রভাব কমিয়ে দিন।
  2. সিএমপি পণ্যের জন্য দায়ী দীর্ঘ কাজগুলি হ্রাস করুন।
  3. মোট ব্লকিং টাইম (TBT) হ্রাস করুন, যা একটি পৃষ্ঠার INP-তে নেতিবাচক প্রভাব ফেলতে পারে৷

কিভাবে INP পরিমাপ করা হয়েছিল

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

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

ব্যবহারকারী PubConsent CMP-তে 'Accept All' বোতামে ক্লিক করার পরে একটি দীর্ঘ টাস্ক কীভাবে ব্যবহারকারীর ইন্টারফেসকে আপডেট করা থেকে ব্লক করে তা দেখানোর একটি প্রবাহ। পাঁচটি ধাপ রয়েছে যা একটি একক দীর্ঘ টাস্ক নিয়ে গঠিত, যা ব্যবহারকারীর ইন্টারফেসটিকে অলস বোধ করে।
ব্যবহারকারীরা "সব স্বীকার করুন" বোতামে ক্লিক করলে কী ঘটে তার ভিজ্যুয়াল উপস্থাপনা৷

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

INP উন্নত করার জন্য, PubConsent CMP-তে বিভিন্ন ফলন কৌশল গ্রহণ করা হয়েছিল।

উচ্চ অগ্রাধিকার কাজ ফলন

নিম্নলিখিত কোড স্নিপেটে দেখানো yieldToMainUiBlocking পদ্ধতিটি যদি উপলব্ধ থাকে তবে scheduler.yield দিয়ে ফলন করে উচ্চ-প্রধান জাভাস্ক্রিপ্ট কাজগুলিকে অপ্টিমাইজ করার জন্য ডিজাইন করা হয়েছে, কিন্তু postTask উপলভ্য থাকলে user-blocking (উচ্চ) অগ্রাধিকার সহ postTask ফিরে আসা, শেষ পর্যন্ত কিছুই ফিরে আসে না। .

setTimeout এখানে এড়ানো হয়েছে কারণ yieldToMainUiBlocking পদ্ধতিটি অভ্যন্তরীণ CMP সেটিংস অপারেশন এবং উচ্চ অগ্রাধিকারের কাজ পরিচালনা করার জন্য ডিজাইন করা হয়েছে যা ফলন করার সময় এই জাতীয় অগ্রাধিকার বজায় রাখতে হবে। এর মানে এই যে শুধুমাত্র ব্রাউজারগুলি এই সময়সূচী APIগুলিকে প্রয়োগ করে—যা বর্তমানে লেখার সময় শুধুমাত্র Chromium-ভিত্তিক ব্রাউজারগুলিতে উপলব্ধ—এই কেস স্টাডিতে বিস্তারিত উন্নতিগুলি থেকে উপকৃত হবে৷ তবুও, এই পদ্ধতিটিকে এই উচ্চ-অগ্রাধিকারমূলক কাজগুলির জন্য একটি গ্রহণযোগ্য প্রগতিশীল বর্ধন হিসাবে বিবেচনা করা হয়েছিল।

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

মাঝারি এবং ব্যাকগ্রাউন্ডের কাজগুলিতে ফলন

নিম্নলিখিত কোড স্নিপেটে দেখানো yieldToMainBackground পদ্ধতিটি user-visible (মাঝারি) বা background অগ্রাধিকার রয়েছে এমন দীর্ঘ কাজগুলিকে ভাঙতে ব্যবহৃত হয়। লজিক এটি উপলব্ধ হলে scheduler.yield() প্রয়োগ করে, কিন্তু এটি মধ্যম অগ্রাধিকার সহ postTask ব্যবহার করে এবং অবশেষে নন-Chromium ব্রাউজারগুলিতে setTimeout ফিরে আসার দ্বারা পৃথক হয়।

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};
PubConsent CMP-তে ব্যবহারকারী 'Accept All' বোতামে ক্লিক করার পর ব্যবহারকারীর ইন্টারফেসকে আপডেট করা থেকে যে দীর্ঘ টাস্কটি ব্লক করে তা কীভাবে অপ্টিমাইজ করা হয়েছে তা দেখানোর একটি প্রবাহ। পাঁচটি ধাপ এখন সম্ভব হলে ফল দেয়, ব্যবহারকারী ইন্টারফেসকে তার রেন্ডারিং তাড়াতাড়ি আপডেট করার অনুমতি দেয়।
yieldToMainBackground ব্যবহার করে কীভাবে ফল পাওয়া যায় তার ভিজ্যুয়াল উপস্থাপনা ব্রাউজারকে পরবর্তী পেইন্ট রেন্ডার করতে সক্ষম করে (এই ক্ষেত্রে CMP UI বন্ধ করে) তাড়াতাড়ি।

রেন্ডারিং লেআউট অপ্টিমাইজেশনের মাধ্যমে PubTech কীভাবে TBT আরও কমিয়েছে

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

Chrome DevTools-এ পারফরম্যান্স প্যানেলের একটি স্ক্রিনশট, PubConsent CMP-তে একটি UI ডায়ালগ বন্ধ করার জন্য কার্যকলাপের একটি কল স্ট্যাক সহ একটি ট্রেসের একটি বিভাগ দেখাচ্ছে৷ UI ডায়ালগ বন্ধ করার কাজটি নিজেই DOM নোডগুলি অপসারণকে ট্রিগার করে যা ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্বে যোগ করে।

DOM থেকে উপাদানগুলি সরানোর জন্য প্রয়োজনীয় রেন্ডারিং কাজের বর্ধিত পরিমাণকে মোকাবেলা করার জন্য, একটি সমাধান চালু করা হয়েছিল যেটিকে দলটি "অলস ডি-রেন্ডারিং" বলে। এই পদ্ধতিটি প্রথমে একটি display: none । তারপরে, CMP ডায়ালগের সাথে যুক্ত DOM নোডগুলি অপসারণ পরবর্তী সময়ে একটি সময়ে স্থানান্তরিত হয় যখন ব্রাউজারটি নিষ্ক্রিয় থাকে requestIdleCallback ব্যবহার করে। ব্যবহারকারী সম্মতি ডায়ালগ বন্ধ করার মুহুর্তে DOM নোডগুলি সরানোর চেয়ে এই পদ্ধতিটি অনেক দ্রুত প্রমাণিত হয়েছে।

Chrome DevTools-এ পারফরম্যান্স প্যানেলের একটি স্ক্রিনশট, আগের মতো একই ট্রেস দেখাচ্ছে, কিন্তু অপ্টিমাইজ করা হয়েছে৷ PubConsent CMP-এর ডায়ালগ বন্ধ হয়ে গেলে, CSS ডিসপ্লে ব্যবহার করে এটিকে আড়াল করা প্রাথমিক পদক্ষেপ: কোনো নিয়ম নয়। তারপর, যখন ব্রাউজারটি পরে নিষ্ক্রিয় থাকে, তখন DOM নোড অপসারণ করা হয়।
DevTools স্ক্রিনশট DOM অপসারণের কাজটি স্থানান্তর করে INP উন্নতি হাইলাইট করছে।

কিভাবে PubTech IAB TCF লাইব্রেরি উন্নত করে INP আরও কমিয়েছে

CMP-এর বেশিরভাগ প্রতিক্রিয়াশীলতার সমস্যাগুলি সফলভাবে সমাধান করার পরে, এর প্রধান নির্ভরতাগুলির একটিতে উন্নতির আরও সুযোগগুলি চিহ্নিত করা হয়েছিল: IAB স্বচ্ছতা এবং সম্মতি কাঠামো ( TCF ) লাইব্রেরি৷

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

  1. ডিকোডিং প্রক্রিয়ার জন্য গণনাকৃত ফলাফল পুনঃব্যবহার করা, যা ব্যবহারকারীর সম্মতি পড়ার জন্য প্রতিটি তৃতীয় পক্ষের কলব্যাকের জন্য কার্যকর করা হয়।
  2. প্রকাশক বিধিনিষেধ এনকোডিং প্রক্রিয়ায় অপ্রয়োজনীয় লুপ এড়ানো এবং কমানো, যা ব্যবহারকারী সম্মতি দিলে কার্যকর করা হয়।

এই অপ্টিমাইজেশনগুলির মধ্যে প্রথমটি IAB TCF লাইব্রেরির সাথে যুক্ত প্রতিটি তৃতীয় পক্ষের কলব্যাকে CMP-এর ব্যয় করা সময়কে কমিয়ে দেয়। দ্বিতীয় অপ্টিমাইজেশানটি "বিল্ড স্ট্রিং" উপাদান দ্বারা প্রসেসিং সময়কালকে হ্রাস করেছে। প্রকৃতপক্ষে, এই অপ্টিমাইজেশানটি লুপগুলির 60% পর্যন্ত হ্রাস করার অনুমতি দেয় যা প্রতিবার ব্যবহারকারীর সম্মতি প্রকাশ করার সময় কার্যকর করা হয়েছিল।

ফলাফল

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

এই উন্নতিগুলি ছাড়াও, IAB-এর TCF লাইব্রেরিতে দেখা গেছে যে 85% পর্যন্ত TCF-প্ররোচিত দীর্ঘ কাজগুলি হ্রাস করার ফলে প্রভাবিত গ্রাহকদের জন্য মোবাইলে INP 77% পর্যন্ত উন্নত হয়েছে ৷ এটি একটি পৃষ্ঠার সমগ্র জীবনচক্রের সময় সম্পাদিত প্রতিটি তৃতীয় পক্ষের কলব্যাকের ওভারহেডকে উল্লেখযোগ্যভাবে কমাতে সাহায্য করেছে।

PubConsent CMP ব্যবহার করার সময় INP পাস করা উৎপত্তির সংখ্যা 400% এর বেশি, মোবাইলে 13% থেকে 55% বেড়েছে। কিছু গ্রাহকের জন্য, PubTech SDK অপ্টিমাইজেশনের কারণে পেজ INP অর্ধেকের বেশি কমে গেছে—470 মিলিসেকেন্ড থেকে 230 মিলিসেকেন্ডে।

PubTech CMP ব্যবহার করে সাইটগুলির জন্য মূল INP পাস রেটগুলির একটি স্ক্রিনশট৷ ডেস্কটপে, পাসের হার প্রায় 84% থেকে বেড়ে 99.12% হয়েছে। মোবাইলে, পাসের হার প্রায় 22% থেকে বেড়ে 55.46% হয়েছে।
HTTP আর্কাইভ এবং Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট (CrUX) দ্বারা রিপোর্ট করা PubTech CMP ব্যবহার করা সাইটগুলির জন্য Origin INP পাসের হার।
একটি ড্যাশবোর্ডের একটি স্ক্রিনশট 75 তম পার্সেন্টাইলে RUM ডেটা থেকে INP দেখাচ্ছে৷ 2023 সালের জুলাই/আগস্ট থেকে, INP মাত্র 500 মিলিসেকেন্ডের নিচে, কিন্তু 2024 সালের ফেব্রুয়ারির মাঝামাঝি, INP 200 মিলিসেকেন্ডের ঠিক নিচে, যা এটিকে 'ভাল' থ্রেশহোল্ডে রাখে।
PubConsent গ্রাহকের মোবাইল INP ডেটা উন্নতির প্রবণতা, এই কেস স্টাডিতে বর্ণিত SDK পরিবর্তনগুলির সাথে সম্পর্কযুক্ত।

উপসংহার

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

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

এই উদ্ভাবনের কাজকে সমর্থন করার জন্য লুকা কপোলা, পাবটেক সিটিও এবং Google-এর জেরেমি ওয়াগনার, মিকাল মোকনি এবং রিক ভিসকোমিকে বিশেষ ধন্যবাদ৷