কিভাবে Disney+ Hotstar লিভিং রুম ডিভাইসে INP 61% কমিয়ে সাপ্তাহিক কার্ডের ভিউ 100% বাড়িয়েছে

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

Bhuvaneswaran Mohan

Saurabh Rajpal

লিভিং রুম ডিভাইসগুলির বর্ধিত গ্রহণের সাথে, Disney+ Hotstar স্বীকার করেছে যে স্মার্ট টিভি এবং সেট-টপ বক্সের জন্য তাদের অ্যাপে একটি নিরবচ্ছিন্ন ব্রাউজিং অভিজ্ঞতা প্রদান করা একটি গুরুত্বপূর্ণ ব্যবসায়িক প্রয়োজনীয়তা। এই ধরনের ডিভাইসের জন্য INP ঠিক করা যেটা কঠিন করে তোলে, তা হল যে কোনও প্রদত্ত টিভি মডেল খুব পুরানো ব্রাউজার সংস্করণ ব্যবহার করতে পারে—উদাহরণস্বরূপ, একটি 2020 LG TV 2018 সালে প্রকাশিত Chrome 68 ব্যবহার করে । এই ডিভাইসগুলির মধ্যে কিছুকে লো-এন্ড-ডিভাইস হিসাবেও শ্রেণীবদ্ধ করা যেতে পারে, যার অর্থ তারা ফ্ল্যাগশিপ ট্যাবলেট এবং ল্যাপটপ ডিভাইসগুলির মতো দ্রুত মিথস্ক্রিয়াগুলিতে প্রতিক্রিয়া জানাতে পারে না।

নিচের চিত্রে একটি পৃষ্ঠা লোড হতে কত সময় লাগে তার তুলনা করা হয়েছে, একটি ল্যাপটপের মধ্যে তার CPU সহ Chrome DevTools এবং একটি স্মার্ট টিভিতে প্রয়োগ করা ছয় গুণ কমে গেছে। দেখা যায়, ল্যাপটপটি এখনও একটি সম্প্রতি তৈরি স্মার্ট টিভির তুলনায় অনেক দ্রুত।

যখন এই পরীক্ষাগুলি ল্যাব ডেটা দেয়, Disney+ Hotstar তাদের অ্যাপের প্রকৃত ব্যবহারকারীদের কাছ থেকে ওয়েব-ভাইটাল লাইব্রেরি ব্যবহার করে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) এর জন্য ফিল্ড ডেটা সংগ্রহ করা শুরু করে এবং দেখেছে যে অ্যাপের 75% ব্যবহারকারী 675 মিলিসেকেন্ডের INP-এর অভিজ্ঞতা পেয়েছেন ক্ষেত্র, যা INP থ্রেশহোল্ড অনুসারে একটি "দরিদ্র" ব্যবহারকারীর অভিজ্ঞতা হিসাবে বিবেচিত হয়৷

এই কেস স্টাডিটি কভার করে যে কীভাবে ডিজনি + হটস্টার তাদের স্ট্রিমিং অ্যাপ্লিকেশনগুলিতে প্রতিক্রিয়াশীলতা উন্নত করেছে, বিশেষত নিম্ন-সম্পন্ন ডিভাইসগুলিতে। তারা INP মানকে 272 মিলিসেকেন্ডে নামিয়ে এনে একটি 61% উন্নতি অর্জন করেছে—এখনও 200 মিলিসেকেন্ডের প্রস্তাবিত "ভাল" থ্রেশহোল্ডের উপরে, কিন্তু এর দিকে যথেষ্ট উন্নতি হয়েছে৷

ঘসেরস

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

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

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

1. অনুভূমিক ক্যারোজেল ট্রে নেভিগেশন।
2. উল্লম্ব ক্যারোজেল ট্রে নেভিগেশন।
3. প্রাথমিক পৃষ্ঠা লোডের সময় মিথস্ক্রিয়া।

Chrome Dev Tools-এ পারফরম্যান্স প্যানেলের সাথে এই মিথস্ক্রিয়াগুলি প্রোফাইল করার পরে, এটি উপলব্ধি করা হয়েছিল যে স্থানিক নেভিগেশন লাইব্রেরি সমস্ত ফোকাসযোগ্য উপাদানগুলির অবস্থান পড়ে এবং একটি নতুন গাছ তৈরি করেছে৷ এটি একটি ব্যয়বহুল অপারেশন যা প্রতিটি মিথস্ক্রিয়ায় লেআউট থ্র্যাশিং ট্রিগার করে, যেমন একটি উপাদান থেকে অন্য উপাদানে চলে যাওয়া।

হোম পেজের জন্য, স্থানিক নেভিগেশন লাইব্রেরি দ্বারা নিম্নরূপ একটি গাছ তৈরি করা হয়েছে:

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

সমস্যাগুলো ঠিক করা

সামগ্রিক অ্যাপের প্রতিক্রিয়াশীলতার সমস্যাগুলি সমাধান করার জন্য বেশ কয়েকটি ভিন্ন সমস্যা ছিল যা সবাইকে আলাদাভাবে মোকাবেলা করতে হয়েছিল।

অনুভূমিক ট্রে নেভিগেশন উন্নতি

Disney+ Hotstar তাদের নিজস্ব ইন-হাউস ক্যারোজেল লাইব্রেরি তৈরি করেছে যা কম্পোজিট অ্যানিমেশন ব্যবহার করে লেআউট থ্র্যাশিং ট্রিগার করে না এবং কার্ড প্রতি একবারের পরিবর্তে ট্রে প্রতি একবার মাত্রা পড়ে।

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

এইভাবে স্থানিক নেভিগেশন ট্রি এই অপ্টিমাইজেশনের দেখাশোনা করে।

নিম্নলিখিত চিত্রগুলি আমাদের ক্যারোজেল বাস্তবায়নের আগে এবং পরে Chrome DevTools-এর পারফরম্যান্স প্যানেলে পরিমাপ করা পারফরম্যান্সের তুলনা।

এই কাজের ফলস্বরূপ, Disney+ Hotstar ক্ষেত্রে তাদের অ্যাপের INP উল্লেখযোগ্যভাবে হ্রাস পেয়েছে। তারা তৃতীয় পক্ষের লাইব্রেরি সরিয়ে প্রায় 35 KB (সংকুচিত) সংরক্ষণ করতেও সক্ষম হয়েছে। বোনাস হিসাবে, এই উন্নতিগুলি ডিজনি+ হটস্টারকে তাদের কাস্টম মেট্রিকের সময়কাল হ্রাস করার অনুমতি দেয় যা তারা হোম পেজের জন্য মোট রেন্ডারিং সময় পরিমাপ করতে ব্যবহার করে, কারণ স্থানিক নেভিগেশন নোডগুলি হ্রাস করার কারণে লেআউটগুলি প্রায়ই কম ট্রিগার হয়।

উল্লম্ব ট্রে নেভিগেশন উন্নতি

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

প্রাথমিক পৃষ্ঠা লোডের সময় মিথস্ক্রিয়া

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

Disney+ Hotstar বুঝতে পেরেছে যে তারা ভবিষ্যৎ পৃষ্ঠা দ্রুত লোড করার জন্য অ্যাপ্লিকেশন শুরুর সময় (স্প্ল্যাশ স্ক্রিন টাইম) প্রয়োজনীয়তার চেয়ে বেশি স্ক্রিপ্ট প্রক্রিয়া করছে। এটি অতিরিক্ত স্ক্রিপ্ট মূল্যায়নের কাজ করেছে, যা INP-কে নেতিবাচকভাবে প্রভাবিত করার সম্ভাবনাও ছিল।

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

• যখন একজন ব্যবহারকারী লগইন পৃষ্ঠায় থাকে, তখন সম্পত্তি প্রিলোডার লাইব্রেরি প্রোফাইল নির্বাচন পৃষ্ঠার জন্য সম্পদগুলিকে প্রিলোড করবে।
• প্রোফাইল নির্বাচন পৃষ্ঠায়, হোম পেজ সম্পদ লোড করা হয়.
• হোম পেজে, বিশদ পৃষ্ঠার সম্পদ লোড করা হয়।
• অবশেষে, দেখার পৃষ্ঠার সম্পদ বিবরণ পৃষ্ঠায় লোড করা হয়।

সম্পদ লোডিং অপ্টিমাইজ করা ডিজনি+ হটস্টারকে দুটি জিনিসের সাথে সাহায্য করেছে: অ্যাপের INP কমানো (যেহেতু মূল থ্রেডটি এখন ব্যবহারকারীর ইন্টারঅ্যাকশন চালানোর জন্য তুলনামূলকভাবে বিনামূল্যে ছিল), এবং নিম্ন-স্তরের ডিভাইসে মেমরির ব্যবহারও কমানো।

এই পরিবর্তনগুলি ক্ষেত্র থেকে রিপোর্ট করা INP নম্বরে 32% হ্রাসের দিকে পরিচালিত করে যা নিম্নলিখিত স্ক্রিনশটে দেখা যায়।

অন্যান্য উন্নতি

Disney+ Hotstar আরও বের করেছে যে কয়েকটি ব্যবহারকারীর ইভেন্টে দীর্ঘ টাস্ক রয়েছে যা প্রায়শই প্রধান থ্রেডের সাথে যুক্ত হয়ে বিভক্ত করা যেতে পারে, এবং আরও এক ধাপ এগিয়ে একটি টাস্ক জেনারেটর ইউটিলিটি তৈরি করেছে যা ব্যবহারকারীদের মাঝখানে কাজটি বাতিল করতে দেয়। মৃত্যুদন্ড

উদাহরণস্বরূপ, যখন ব্যবহারকারী ট্রেতে একাধিক কার্ডের মাধ্যমে নেভিগেট করে, নিম্নলিখিতগুলি ঘটে:

• পরবর্তী কার্ড ফোকাস করা হয়.
• প্রয়োজন হলে কার্ডটি অনুবাদ করা হয়।
• স্পটলাইট আপডেট করা হয়.
• ট্রেলার—যদি উপস্থিত থাকে—আনয়ন করা হয় এবং প্লেব্যাক শুরু হয়৷
• অ্যানালিটিক্স ইভেন্ট কর্মের জন্য বহিস্কার করা হয়.

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

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

ফলাফল

সামগ্রিকভাবে, ডিজনি+ হটস্টারের অ্যাপ্লিকেশন INP 675 মিলিসেকেন্ড থেকে 272 মিলিসেকেন্ডে নেমে এসেছে , যা প্রায় 60% উন্নতির প্রতিনিধিত্ব করে! উপরন্তু, বিশেষ করে ট্রে ইন্টারঅ্যাকশন লেটেন্সি প্রায় 400 মিলিসেকেন্ড থেকে প্রায় 100 মিলিসেকেন্ডে কমেছে।

ব্যবসায়িক প্রভাব: প্রতি ব্যবহারকারী প্রতি সপ্তাহে কার্ডের ভিউ 111 থেকে 226 বেড়েছে! এটি একটি 100% বৃদ্ধি, এটি প্রদর্শন করে যে একটি দ্রুত এবং আরও প্রতিক্রিয়াশীল ইন্টারফেস ব্যবহারকারীদের দীর্ঘ সময়ের জন্য জড়িত করার সম্ভাবনা বেশি।

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

আয়ুষ, অজয়, কিরণ, মিলন এবং রিচাকে ডিজনি+ হটস্টার থেকে তাদের প্রয়াসের জন্য ধন্যবাদ।

এই উদ্ভাবনের কাজে সহায়তা করার জন্য Ankeet Maini , Engineering Head Disney+ Hotstar, এবং রাহুল কৃষ্ণান P , গ্রাহক অভিজ্ঞতা ডিজনি+ Hotstar-এর প্রধান, এবং Google-এর জেরেমি ওয়াগনার, গিলবার্তো, ব্যারি পোলার্ড, এবং ব্রেন্ডন কেনি-কে এটি পর্যালোচনা ও প্রকাশে সাহায্য করার জন্য বিশেষ ধন্যবাদ। কেস স্টাডি.