কিভাবে Trendyol INP 50% কমিয়েছে, যার ফলে ক্লিক-থ্রু রেট 1% বেড়েছে

এই কেস স্টাডিটি পেজস্পিড ইনসাইটস (PSI) , Chrome DevTools , এবং scheduler.yield API-এর মতো Google টুলগুলি ব্যবহার করে Trendyol- এর দ্বারা ব্যবহৃত React-এ ডিবাগিং এবং INP উন্নত করার ধাপে ধাপে ওয়ার্কফ্লো বর্ণনা করে।

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

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

Trendyol হল একটি ইকমার্স প্ল্যাটফর্ম যার প্রায় 30 মিলিয়ন গ্রাহক এবং 240,000 বিক্রেতা রয়েছে, যা আমাদেরকে তুরস্কের প্রথম ব্যবসায় পরিণত করেছে যার মূল্য $10 বিলিয়নেরও বেশি, এবং বিশ্বের শীর্ষ ইকমার্স প্ল্যাটফর্মগুলির মধ্যে একটি৷

বিষয়বস্তুর নমনীয়তা বজায় রেখে এবং রিঅ্যাক্টের একটি পুরানো সংস্করণের সাথে কাজ করার সময় স্কেলে সর্বোত্তম সম্ভাব্য ব্যবহারকারীর অভিজ্ঞতা প্রদানের লক্ষ্য অর্জনের জন্য, Trendyol উন্নতির জন্য একটি মূল মেট্রিক হিসাবে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) এর উপর দৃষ্টি নিবদ্ধ করেছে। এই কেস স্টাডিটি তার PLP-তে INP-এর উন্নতির জন্য Trendyol-এর যাত্রা বর্ণনা করে, যার ফলে INP-এর 50% হ্রাস এবং অনুসন্ধান ফলাফলের ব্যবসায়িক মেট্রিকে 1% উন্নতি হয়েছে ৷

Trendyol এর INP তদন্ত প্রক্রিয়া

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

PLP-তে INP-কে উন্নত করার জন্য Trendyol-এর যাত্রা শুরু হয়েছিল কোনও উন্নতি করার আগে ব্যবহারকারীর অভিজ্ঞতার পুঙ্খানুপুঙ্খ বিশ্লেষণের মাধ্যমে। একটি PSI রিপোর্টের উপর ভিত্তি করে, PLP-এর প্রকৃত ব্যবহারকারীর অভিজ্ঞতা মোবাইলে 963 মিলিসেকেন্ডের INP ছিল, যা পরবর্তী চিত্রে দেখানো হয়েছে।

PageSpeed Insights-এ CrUX রিডআউট অনুযায়ী Trendyol-এর INP। 5 ই সেপ্টেম্বর, 2023 পর্যন্ত Trendyol-এর INP ছিল 963 মিলিসেকেন্ড, যা 'দরিদ্র' পরিসরে। — PSI থেকে 5 ই সেপ্টেম্বর, 2023 পর্যন্ত ট্রেন্ডিওলের INP।

ভাল প্রতিক্রিয়া নিশ্চিত করতে, সাইটের মালিকদের 200 মিলিসেকেন্ডের নিচে বা INP-এর লক্ষ্য রাখতে হবে যার অর্থ হল, সেই সময়ে, Trendyol-এর INP "দরিদ্র" পরিসরে ছিল।

সৌভাগ্যবশত, PSI ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX) এবং বিস্তারিত ল্যাব ডায়াগনস্টিক ডেটাতে অন্তর্ভুক্ত পৃষ্ঠাগুলির জন্য উভয় ক্ষেত্রের ডেটা সরবরাহ করে। ল্যাব ডেটার দিকে তাকিয়ে, লাইটহাউসের জাভাস্ক্রিপ্ট এক্সিকিউশন টাইম অডিট পরামর্শ দিয়েছে যে search-result-v2 স্ক্রিপ্টটি পৃষ্ঠার অন্যান্য স্ক্রিপ্টের চেয়ে বেশি সময়ের জন্য প্রধান থ্রেড দখল করছে।

ট্রেন্ডিওল ওয়েবসাইটের জন্য লাইটহাউসের দীর্ঘ টাস্কগুলির উত্সগুলির একটি রিডআউট৷ দীর্ঘ কাজের একটি প্রধান উৎস হল একটি স্ক্রিপ্ট যা ট্রেন্ডিওলের পিএলপি-তে অনুসন্ধান ফলাফল পরিচালনা করে। — PSI থেকে 5 ই সেপ্টেম্বর, 2023 পর্যন্ত Lighthouse থেকে Trendyol-এর JavaScript এক্সিকিউশন টাইম অডিট।

বাস্তব-বিশ্বের প্রতিবন্ধকতা শনাক্ত করার জন্য, আমরা PLP অভিজ্ঞতার সমস্যা সমাধান করতে এবং সমস্যার উৎস শনাক্ত করতে Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করেছি। Chrome DevTools-এ 4X CPU স্লোডাউন সহ মোবাইল পারফরম্যান্সের অনুকরণ করা মূল থ্রেডে একটি 700-900 মিলিসেকেন্ড দীর্ঘ টাস্ক প্রকাশ করেছে৷ যদি মূল থ্রেডটি 50 মিলিসেকেন্ডের বেশি সময় ধরে অন্য কাজগুলির সাথে দখল করে থাকে, তাহলে এটি একটি সময়মত ব্যবহারকারীর ইনপুটকে সাড়া দিতে সক্ষম নাও হতে পারে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়৷

Trendyol-এর PLP-এর জন্য Chrome DevTools-এ পারফরম্যান্স প্রোফাইলিং সেশনের একটি স্ক্রিনশট। চিত্রিত দীর্ঘ টাস্কটি 737.6 মিলিসেকেন্ডের জন্য চলে এবং এটি একটি ইন্টারসেকশন অবজারভার কলব্যাকের অংশ। — Chrome DevTools-এর পারফরম্যান্স প্যানেলে Trendyol-এর PLP-তে দীর্ঘ টাস্কগুলির একটি পারফরম্যান্স প্রোফাইলার৷

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

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

ডেভেলপাররা কাজগুলিকে ছোট করে ভাগ করার জন্য একটি পদ্ধতি ব্যবহার করেছেন যার মধ্যে setTimeout জড়িত। আমরা একটি পৃথক টাস্কে setState কলের সম্পাদন স্থগিত করতে এই কৌশলটি ব্যবহার করেছি। যদিও setTimeout জাভাস্ক্রিপ্ট এক্সিকিউশন স্থগিত করার অনুমতি দেয়, এটি অগ্রাধিকারের উপর কোন নিয়ন্ত্রণ প্রদান করে না। এটি মূল থ্রেডের সাথে যুক্ত হওয়ার পরে আমাদের স্ক্রিপ্ট সম্পাদনের ধারাবাহিকতা নিশ্চিত করার প্রয়াসে scheduler.yield অরিজিন ট্রায়ালে যোগদান করতে পরিচালিত করেছিল:

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

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

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });

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

Trendyol-এর PLP-এর জন্য Chrome DevTools-এ পারফরম্যান্স প্রোফাইলিং সেশনের একটি স্ক্রিনশট। যে দীর্ঘ টাস্কটি আগে 737.6 মিলিসেকেন্ডের জন্য চলছিল তা এখন বেশ কয়েকটি ছোট কাজগুলিতে বিভক্ত হয়ে গেছে। — টাস্ককে ছোট করে ভাগ করুন।

মনে রাখবেন যে Trendyol React v16.9.0 ব্যবহার করে একটি মাইক্রো-ফ্রন্টেন্ড আর্কিটেকচার বাস্তবায়ন করতে PuzzleJs ফ্রেমওয়ার্ক ব্যবহার করে। React 18 এর সাথে, একই পারফরম্যান্স অর্জন করা যেতে পারে, কিন্তু বিভিন্ন কারণে, Trendyol এই সময়ে আপগ্রেড করতে অক্ষম।

ব্যবসা ফলাফল

বাস্তবায়িত INP উন্নতির প্রভাব পরিমাপ করতে, ব্যবসার মেট্রিক্স কীভাবে প্রভাবিত হয়েছে তা দেখতে আমরা একটি A/B পরীক্ষা চালিয়েছি। সামগ্রিকভাবে, PLP-তে আমাদের পরিবর্তনের ফলে একটি উল্লেখযোগ্য উন্নতি হয়েছে, যার মধ্যে INP-এর 50% হ্রাসের পাশাপাশি তালিকা পৃষ্ঠা থেকে প্রতি ব্যবহারকারী সেশনে পণ্যের বিশদ পৃষ্ঠায় ক্লিক-থ্রু রেটগুলিতে 1% উত্থান সহ। নিম্নলিখিত চিত্রে, আপনি দেখতে পাচ্ছেন যে সময়ের সাথে সাথে পিএলপিতে আইএনপি কীভাবে উন্নত হয়েছে:

ছয় মাসের ব্যবধানে Trendyol-এর 75তম পার্সেন্টাইল INP-এর একটি স্ক্রিনশট। ছয় মাসের শেষে, ট্রেন্ডিওলের INP প্রায় 1,400 মিলিসেকেন্ড থেকে প্রায় 650 মিলিসেকেন্ডে নেমে এসেছে। — সময়ের সাথে সাথে 75তম পার্সেন্টাইল INP উন্নতি।

উপসংহার

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

ব্রাউজারকে জরুরী কাজ করার আরও সুযোগ দেওয়ার জন্য সময়ে সময়ে মূল থ্রেডের সাথে যুক্ত হওয়া আপনার ওয়েবসাইটকে আরও প্রতিক্রিয়াশীল করে তুলবে, আপনার গ্রাহকদের আরও ভাল ব্যবহারকারীর অভিজ্ঞতা রয়েছে তা নিশ্চিত করে৷ scheduler.yield() মতো নতুন শিডিউলিং API এই কাজটিকে সহজ করে তোলে।

এই কাজে অবদান রাখার জন্য Google-এর জেরেমি ওয়াগনার, ব্যারি পোলার্ড, এবং হোসেইন ডিজিরদেহ এবং ট্রেন্ডিওলের ইঞ্জিনিয়ারিং টিমকে বিশেষ ধন্যবাদ৷

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Trendyol এর INP তদন্ত প্রক্রিয়া

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

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

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });

ব্যবসা ফলাফল

উপসংহার

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Trendyol এর INP তদন্ত প্রক্রিয়া

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

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

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });