কিভাবে QuintoAndar INP 80% কমিয়েছে, রূপান্তর 36% বাড়িয়েছে

Mari Viana

Daniel Ericeira

Luciano Holanda

প্রকাশিত: 22 জানুয়ারী, 2025

QuintoAndar এর ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) 80% কমিয়ে তার ওয়েব পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করেছে, যার ফলে বছরের পর বছর রূপান্তর 36% বৃদ্ধি পেয়েছে। ব্যবহারকারীর সম্পৃক্ততার জন্য দ্রুত, প্রতিক্রিয়াশীল সাইটগুলির গুরুত্ব স্বীকার করে, আমরা সমস্ত দল জুড়ে কর্মক্ষমতাকে অগ্রাধিকার দেওয়ার জন্য একটি " কোড ইয়েলো " প্রয়োগ করেছি৷

রিয়েল ইউজার মনিটরিং (RUM) এর মতো টুল এবং দীর্ঘ টাস্ক অপ্টিমাইজেশান এবং রিঅ্যাক্ট ট্রানজিশনের জন্য async / await মতো কৌশল ব্যবহার করে, QuintoAndar সফলভাবে ইন্টারঅ্যাকশন সময় কমিয়েছে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করেছে। পরিবর্তনগুলি—তৃতীয়-পক্ষের পিক্সেলগুলি সরানো এবং অপ্টিমাইজেশানগুলিকে রেন্ডার করা সহ,-এর ফলে আরও ভাল পারফরম্যান্স মেট্রিক্স হয়েছে, 42% থেকে 78% পৃষ্ঠাগুলি এখন 200 মিলিসেকেন্ড বা তার কম INP-এর "ভাল" থ্রেশহোল্ড পূরণ করছে, এবং শুধুমাত্র 6.9% পৃষ্ঠাগুলি যখন আমরা শুরু করেছি 3% এর বিপরীতে একটি খারাপ অভিজ্ঞতা প্রদান করে৷

সমস্যা

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

2024-এর শুরুতে, QuintoAndar বুঝতে পেরেছিল যে, তাদের কাছে সম্ভবত বাজারের সেরা প্ল্যাটফর্ম ছিল, তারা আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারে যার ফলে রূপান্তর হার বেশি হয়। এটি একটি কোর ওয়েব ভাইটাল হিসেবে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) প্রবর্তনের মাধ্যমে স্পষ্ট হয়ে ওঠে, এবং প্রকৃতপক্ষে, আমাদের প্রতিযোগীদের তুলনায় QuintoAndar-এর সবচেয়ে খারাপ INP ছিল।

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

QuintoAndar কীভাবে 80% দ্বারা INP কমাতে পরিচালিত হয়েছে তার গল্প, যার ফলে রূপান্তর এবং ব্যবহারকারীর অভিজ্ঞতার উন্নতিতে উল্লেখযোগ্য বৃদ্ধি পেয়েছে। এই ক্ষেত্রে অধ্যয়ন, বাস্তবায়িত কৌশল, সম্মুখীন চ্যালেঞ্জ, এবং অর্জিত ফলাফল অন্বেষণ করা হবে.

কোড হলুদ: ওয়েব কর্মক্ষমতা অগ্রাধিকার

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

"কোড ইয়েলো" ধারণাটি উন্নত গতির প্রয়োজনের প্রতিক্রিয়া হিসাবে Google-এ উদ্ভূত হয়েছিল, একজন মনোনীত নেতাকে তাদের বর্তমান প্রকল্প নির্বিশেষে সহায়তা করার জন্য কোম্পানির মধ্যে যে কাউকে নিয়োগ করার ক্ষমতা প্রদান করে।

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

কিভাবে QuintoAndar প্রধান সুযোগ চিহ্নিত করেছে এবং অপ্টিমাইজেশন প্রয়োগ করেছে

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

যাইহোক, এই মেট্রিক উন্নত করার জন্য বিশদ বিবরণে গভীরভাবে ডুব দিতে হবে। QuintoAndar-এর জন্য, প্রথম ধাপটি চিহ্নিত করা ছিল ব্যবহারকারীর অভিজ্ঞতার কোন ধাপ এবং উপাদানগুলি ধীর মিথস্ক্রিয়াগুলির জন্য দায়ী। এটি রিয়েল ইউজার মনিটরিং (RUM) কৌশল ব্যবহার করে করা যেতে পারে, যা ধীর মিথস্ক্রিয়াগুলির বিস্তারিত ট্র্যাকিংয়ের অনুমতি দেয়। এর মধ্যে INP-কে সাব-অংশে বিভক্ত করা যেমন ইনপুট বিলম্ব, প্রক্রিয়াকরণের সময় এবং উপস্থাপনা বিলম্ব , সেইসাথে লং অ্যানিমেশন ফ্রেম (LoAF) বিশ্লেষণ করা অন্তর্ভুক্ত।

এই প্রক্রিয়ার মাধ্যমে, এটি সনাক্ত করা সম্ভব হয়েছিল, উদাহরণস্বরূপ, সম্পত্তি অনুসন্ধানের অভিজ্ঞতার কিছু উপাদান 75 তম শতাংশে 4 সেকেন্ডের মিথস্ক্রিয়া সময় ঘটাচ্ছে (25% ব্যবহারকারীকে প্রভাবিত করে)। দীর্ঘ কাজগুলি অপ্টিমাইজ করার মাধ্যমে, INP-কে প্রভাবিত করে এমন অনেক ধীর মিথস্ক্রিয়াতে উল্লেখযোগ্য উন্নতি সাধিত হয়েছে। QuintoAndar এর জাভাস্ক্রিপ্ট কোডে ফলন পয়েন্ট তৈরি করার জন্য async / await নিয়োগ করে এটি করা হয়েছিল:

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

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

async function handleFilterClick () {
  showLoadingSpinner();
  await yieldToMain(); // Yield point
  await loadFilterData();
  showModal();
}

দ্রষ্টব্য: এটি উল্লেখ করা গুরুত্বপূর্ণ যে QuintoAndar শীঘ্রই এই ধরনের প্রভাবের জন্য ডিজাইন করা আরও উপযুক্ত পদ্ধতিতে রূপান্তরিত হবে, যেমন scheduler.yield ব্যবহার করে।

আরেকটি ব্যাপকভাবে ব্যবহৃত কৌশল-যা রিঅ্যাক্টের সাথে তৈরি করা অ্যাপ্লিকেশনের জন্য অপরিহার্য-হল ট্রানজিশনের ব্যবহার। যেহেতু React এখন ট্রানজিশন সমর্থন করে, QuintoAndar ইউজার ইন্টারফেস ব্লক না করেই অ্যাপ্লিকেশন স্টেট আপডেট করার জন্য useTransition হুক ব্যবহার করতে পারে।

import React, { useState, useTransition } from 'react';

function App() {
    const [isPending, startTransition] = useTransition();
    const [value, setValue] = useState('');

    const onInputChange = event => {
      setValue(event.target.value) // high-priority

      startTransition(() => {
          // Time-consuming task—for example, filter and update the list...
      });
    }

    return (
      <div className="App">
        <input
          value={value}
          onChange={onInputChange}
          placeholder='Start typing...'
        />
      </div>
    );
}

export default App;

উল্লিখিত কৌশলগুলির সাথে, QuintoAndar অন্যান্য উন্নতি যেমন মেমোাইজেশন ব্যবহার, ডিবাউন্সিং , অ্যাবর্ট কন্ট্রোলার , সাসপেন্স প্রয়োগ করেছে, যার ফলে INP-তে উন্নতি হয়েছে।

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

useEffect(() => {
  const handler = setTimeout(() => {
    setDebouncedValue(value);
  }, 300); // Adjust debounce delay as needed

  return () => clearTimeout(handler);
}, [value]);

উপরন্তু, INP-এর জন্য প্রক্সি হিসাবে টোটাল ব্লকিং টাইম (TBT) ব্যবহার কুইন্টোঅ্যান্ডারকে বড় কাঠামোগত পরিবর্তনের প্রভাব অনুমান করতে সক্ষম করেছে, যেমন:

• ক্লায়েন্ট থেকে তৃতীয় পক্ষের পিক্সেল সরানো হচ্ছে।
• CSS-in-JS নির্মূল করা।
• রেন্ডারিং অপ্টিমাইজেশান।

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

রিগ্রেশন প্রতিরোধ করতে ওয়েব কর্মক্ষমতা শাসন

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

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

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

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

অবশেষে, INP সমস্যাগুলিকে উৎপাদনে প্রবেশ করা থেকে রোধ করতে, QuintoAndar একটি ক্যানারি রিলিজ সিস্টেম প্রয়োগ করেছে যা ব্যবহারকারীদের কাছে পর্যায়ক্রমে একটি নতুন রিলিজ সরবরাহ করে (উদাহরণস্বরূপ, 1%, 10%, 65% এবং অবশেষে 100% থেকে ক্রমবর্ধমানভাবে)। প্রতিটি পুনঃব্যালেন্সিং পর্যায়ে, ক্যানারি সংস্করণটি ব্যবহারকারীর জন্য খারাপ কর্মক্ষমতার ফলাফল কিনা তা দেখতে পরীক্ষা করা হয়। যদি তাই হয়, একটি রোলব্যাক স্বয়ংক্রিয়ভাবে ঘটে, অঅপ্টিমাইজ করা বৈশিষ্ট্যগুলিকে সম্পূর্ণরূপে উৎপাদনে যেতে বাধা দেয়।

পর্যালোচনা করার জন্য, নেওয়া প্রধান পদক্ষেপগুলি ছিল:

• থ্রেশহোল্ড পরিমার্জনের জন্য দ্বি-সাপ্তাহিক কমিটি সহ সু-সংজ্ঞায়িত সতর্কতা (স্থির এবং পরিবর্তনশীল)।
• বিস্তারিত রানবুক সহ ঘটনা পদ্ধতি।
• সম্ভাব্য কর্মক্ষমতা রিগ্রেশনের প্রভাব সীমিত করতে পারফরম্যান্স বৈধতা সহ ক্যানারি প্রকাশ করে।

ফলাফল

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

এই উন্নতিগুলি CrUX ড্যাশবোর্ডেও প্রতিফলিত হয়েছে, যেখানে QuintoAndar এখন 75 তম পার্সেন্টাইলে 200 মিলিসেকেন্ডের নিচে একটি INP রয়েছে, যার 78% পৃষ্ঠা এই থ্রেশহোল্ডের নীচে পারফর্ম করছে , এবং মাত্র 6.9% পৃষ্ঠাগুলি একটি খারাপ অভিজ্ঞতা প্রদান করছে - একটি সংখ্যা যা মাসের পর মাস ক্রমাগতভাবে কমছে৷

QuintoAndar এর ব্যবসায় সরাসরি প্রভাব ফেলার জন্য এই ফলাফলটি গুরুত্বপূর্ণ ছিল। QuintoAndar পর্যবেক্ষণ করেছেন যে রূপান্তর ভলিউম বছরে 36% বৃদ্ধি পেয়েছে (নতুন সম্ভাবনা, যা QuintoAndar এর ক্ষেত্রে এমন লোকেরা যারা সম্পত্তি পরিদর্শনের সময় নির্ধারণ করেছেন)। এই ফলাফলটি দৃঢ়ভাবে-কিন্তু এককভাবে নয়-একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদানের মাধ্যমে তারা যে উন্নত ব্যস্ততা অর্জন করেছে তার সাথে যুক্ত।

উপসংহার

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