কিভাবে redBus তাদের ওয়েবসাইটের ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) উন্নত করেছে এবং বিক্রয় বৃদ্ধি করেছে 7%

INP অপ্টিমাইজেশন রেডবাসকে প্রায় 7% বিক্রয় বৃদ্ধিতে সহায়তা করেছে

Amit Kumar

Saurabh Rajpal

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

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

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

redBus , ভারত ভিত্তিক একটি বাস বুকিং এবং টিকিটিং ওয়েবসাইট, তাদের ওয়েবসাইটের INP উন্নত করার জন্য যথেষ্ট প্রচেষ্টা চালিয়েছিল, এমনকি সেই সময়েও যখন এটি একটি পরীক্ষামূলক মেট্রিক হিসাবে বিবেচিত হয়েছিল। তাদের প্রচেষ্টার ফলস্বরূপ, তারা 7% দ্বারা বিক্রয় বৃদ্ধি করতে সক্ষম হয়েছিল, আবার ওয়েব পারফরম্যান্স এবং ব্যবসায়িক স্বাস্থ্যের মধ্যে সম্পর্ককে চিত্রিত করে। redBus তাদের ওয়েবসাইটের INP উন্নত করতে কী করেছে তা এখানে।

সর্বোচ্চ গোল

যখন redBus তাদের ওয়েবসাইটের INP অপ্টিমাইজ করার জন্য যাত্রা করেছিল, তখন তাদের মাথায় তিনটি লক্ষ্য ছিল:

1. নেটওয়ার্ক গতি এবং ডিভাইসের ক্ষমতা নির্বিশেষে মিথস্ক্রিয়া বিলম্বের উপর ফোকাস করে ব্যবহারকারীদের জন্য একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করুন।
2. যত দ্রুত সম্ভব মিথস্ক্রিয়া রাখতে তাদের ওয়েবসাইট অপ্টিমাইজ করুন।
3. সামনের প্রান্তে দ্রুত ডেটা স্থানান্তর নিশ্চিত করতে তাদের API থেকে প্রতিক্রিয়াগুলি যতটা সম্ভব হালকা ছিল তা নিশ্চিত করুন।

ভ্রমণ

redBus দুটি উপায়ে মিথস্ক্রিয়া বিলম্বকে শ্রেণীবদ্ধ করেছে:

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

redBus প্রাথমিকভাবে বেশ আত্মবিশ্বাসী ছিল যে তাদের ওয়েবসাইটের জন্য INP ভাল হবে, কিন্তু 95 তম শতাংশে এই মেট্রিকের জন্য বাস্তব ব্যবহারকারী মনিটরিং (RUM) ডেটা একটি ভিন্ন গল্প বলেছে।

কিভাবে redBus INP পরিমাপ করে

redBus শুধুমাত্র INP নয়, তাদের ওয়েবসাইট জুড়ে সমস্ত পৃষ্ঠার জন্য সমস্ত গুরুত্বপূর্ণ ব্যবহারকারীর অভিজ্ঞতা মেট্রিক্স ট্র্যাক করার জন্য Google দ্বারা নির্মিত web-vitals জাভাস্ক্রিপ্ট লাইব্রেরির উপর নির্ভর করে। web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ছাড়াও, রেডবাস সামনের প্রান্তে সংগৃহীত INP ডেটা বিশ্লেষণ করতে ELK ব্যবহার করেছে।

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

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

ব্যবহারের ক্ষেত্রে

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

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

কিভাবে redBus সার্চ পৃষ্ঠার জন্য INP অপ্টিমাইজ করে

অনুসন্ধান পৃষ্ঠার INP উন্নত করতে, redBus বেশ কয়েকটি অপ্টিমাইজেশান করেছে:

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

উপরন্তু, অনুসন্ধান ফলাফল পৃষ্ঠায় নিম্নলিখিত আরও অপ্টিমাইজেশান করা হয়েছে:

• আগে অলস লোডিং ট্রিগার করে ব্যবহারকারীর অভিজ্ঞতা এবং ভিজ্যুয়াল কর্মক্ষমতা উন্নত করার জন্য অনুসন্ধান ফলাফল পৃষ্ঠায় দ্বিতীয় থেকে শেষ কার্ডে ফলাফলের নতুন ব্যাচগুলি আনা হয়েছিল৷
• অলস লোডিংয়ের সময় প্রতিটি নেটওয়ার্ক কলে কম ফলাফল পাওয়া গেছে। 30 থেকে 10 ফলাফলের মধ্যে আনয়ন কমিয়ে, 870 থেকে 900 পর্যন্ত 350 থেকে 370 পর্যন্ত INP রেঞ্জে একটি হ্রাস লক্ষ্য করা গেছে।

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

এই মিথস্ক্রিয়াটি অপ্টিমাইজ করার জন্য, redBus স্থানীয়ভাবে ইনপুট উপাদানগুলির অবস্থা পরিচালনা করে এবং যখন একটি ইনপুটের blur ইভেন্ট ফায়ার করা হয় তখনই এটি Redux স্টোরের সাথে সিঙ্ক করে৷ এই পরিবর্তনটি পুনরায় রেন্ডারের সংখ্যা কমিয়েছে এবং কম ঘন ঘন রিডুসারকে কল করার মাধ্যমে ব্যবহারকারী ইন্টারফেসের অবাঞ্ছিত পুনঃরেন্ডারিং বাদ দিয়েছে।

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

ব্যবসা প্রভাব

ব্যবসার স্বাস্থ্য এবং পৃষ্ঠার পারফরম্যান্সের মধ্যে সম্পর্ক সুপরিচিত। যদিও অন্যান্য কোর ওয়েব ভাইটালগুলির তুলনায় INP একটি অপেক্ষাকৃত নতুন মেট্রিক, redBus এই গুরুত্বপূর্ণ ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক উন্নত করার উপর ফোকাস করে আরও ভাল ব্যবসায়িক ফলাফল পর্যবেক্ষণ করেছে। ফলাফল একটি 7% বিক্রয় সামগ্রিক বৃদ্ধি ছিল.

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