কর্মক্ষমতা উন্নত করতে, তাদের কোর ওয়েব ভাইটাল পাস রেট বাড়াতে এবং মূল ব্যবসায়িক মেট্রিক্স উত্তোলনের জন্য YouTube ওয়েব টিমের পরিবর্তনগুলির একটি কেস স্টাডি৷
Chrome টিম প্রায়ই "একটি ভাল ওয়েব তৈরি" সম্পর্কে কথা বলে, কিন্তু এর অর্থ কী? ওয়েব অভিজ্ঞতা দ্রুত , অ্যাক্সেসযোগ্য হওয়া উচিত এবং ব্যবহারকারীদের সবচেয়ে বেশি প্রয়োজন হলে ডিভাইসের ক্ষমতা ব্যবহার করা উচিত। ডগফুডিং হল Google-এর সংস্কৃতির অংশ, তাই Chrome টিম "Building a better web" নামের একটি নতুন সিরিজে শেখা পাঠগুলি ভাগ করে নিতে YouTube-এর সাথে অংশীদারিত্ব করেছে৷ সিরিজের প্রথম অংশটি কীভাবে YouTube একটি দ্রুততর ওয়েব অভিজ্ঞতা তৈরি করে তা নিয়ে আলোচনা করবে।
একটি দ্রুত ওয়েব তৈরি করা হচ্ছে
YouTube-এ, পারফরম্যান্স কত দ্রুত ভিডিও এবং অন্যান্য বিষয়বস্তু—যেমন সুপারিশ এবং মন্তব্য—ওয়েব পৃষ্ঠাগুলিতে লোড হয় তার সাথে সম্পর্কিত। সার্চ, প্লেয়ার কন্ট্রোল, লাইক এবং শেয়ারের মতো ব্যবহারকারীর ইন্টারঅ্যাকশনে YouTube কত দ্রুত সাড়া দেয় তার দ্বারাও পারফরম্যান্স পরিমাপ করা হয়।
ক্রমবর্ধমান উন্নয়নশীল বাজার, যেমন ব্রাজিল, ভারত এবং ইন্দোনেশিয়া YouTube মোবাইল ওয়েবের জন্য গুরুত্বপূর্ণ। কারণ এই অঞ্চলের অনেক ব্যবহারকারীর ধীরগতির ডিভাইস এবং সীমিত নেটওয়ার্ক ব্যান্ডউইথ রয়েছে, একটি দ্রুত এবং নির্বিঘ্ন অভিজ্ঞতা নিশ্চিত করা একটি গুরুত্বপূর্ণ লক্ষ্য।
সমস্ত ব্যবহারকারীদের জন্য একটি অন্তর্ভুক্তিমূলক অভিজ্ঞতা প্রদানের জন্য, YouTube অলস-লোডিং এবং কোড আধুনিকীকরণের মাধ্যমে কোর ওয়েব ভাইটালগুলির মতো পারফরম্যান্স মেট্রিক্স উন্নত করার জন্য প্রস্তুত৷
কোর ওয়েব ভাইটাল উন্নত করা
উন্নতির ক্ষেত্রগুলি শনাক্ত করতে, YouTube টিম ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX) ব্যবহার করেছে যাতে বাস্তব ব্যবহারকারীরা মোবাইলে ভিডিও দেখার এবং সার্চের ফলাফলের পৃষ্ঠাগুলি কীভাবে অনুভব করছেন তা দেখতে৷ তারা বুঝতে পেরেছিল যে তাদের Core Web Vitals মেট্রিক্সে উন্নতির জন্য অনেক জায়গা রয়েছে, কিছু ক্ষেত্রে তাদের Largest Contentful Paint (LCP) মেট্রিক ক্লকিং 4-6 সেকেন্ডে। এটি তাদের লক্ষ্যমাত্রা 2.5 সেকেন্ডের চেয়ে যথেষ্ট বেশি ছিল।
উন্নতির জন্য ক্ষেত্রগুলি চিহ্নিত করতে, তারা YouTube দেখার পৃষ্ঠাগুলি অডিট করতে লাইটহাউসের দিকে ফিরেছে, 3.5 সেকেন্ডের একটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং 8.5 সেকেন্ডের একটি LCP সহ একটি কম লাইটহাউস ( ল্যাব ) স্কোর প্রকাশ করেছে৷
FCP এবং LCP অপ্টিমাইজ করতে, YouTube টিম বেশ কিছু পরীক্ষা-নিরীক্ষা করেছে, যার ফলে দুটি বড় আবিষ্কার হয়েছে।
প্রথম আবিষ্কারটি হল যে তারা ভিডিও প্লেয়ারের জন্য এইচটিএমএল স্ক্রিপ্টের উপরে সরানোর মাধ্যমে কর্মক্ষমতা উন্নত করতে পারে যা ভিডিও প্লেয়ারকে ইন্টারেক্টিভ করে তোলে। ল্যাব পরীক্ষাগুলি নির্দেশ করে যে এটি FCP এবং LCP উভয়ের উন্নতি করতে পারে 4.4 সেকেন্ড থেকে 1.1 সেকেন্ডে।
দ্বিতীয় আবিষ্কার হল যে LCP শুধুমাত্র
<video>উপাদান পোস্টার ইমেজ বিবেচনা করে এবং ভিডিও স্ট্রিম থেকে ফ্রেম নয়। ইউটিউব ঐতিহ্যগতভাবে ভিডিওটি চালানো শুরু না হওয়া পর্যন্ত দ্রুততম সময়ের জন্য অপ্টিমাইজ করেছে, তাই এলসিপি উন্নত করার জন্য দলটি কত দ্রুত তাদের পোস্টার ইমেজ সরবরাহ করতে পারে তাও অপ্টিমাইজ করা শুরু করেছে। তারা পোস্টার ইমেজের কয়েকটি বৈচিত্র নিয়ে পরীক্ষা-নিরীক্ষা করেছে এবং ব্যবহারকারীর পরীক্ষায় সেরা স্কোর করেছে এমন একটি বেছে নিয়েছে। এই কাজের ফলস্বরূপ, FCP এবং LCP উভয়ই উল্লেখযোগ্য উন্নতি দেখিয়েছে, ফিল্ড LCP 4.6 সেকেন্ড থেকে 2.0 সেকেন্ডে উন্নতি করেছে।
যদিও এই অপ্টিমাইজেশনগুলি LCP-কে উন্নত করেছে, দলটি অনুভব করেছে যে LCP মেট্রিকের বর্তমান সংজ্ঞা সম্পূর্ণরূপে ক্যাপচার করছে না, ব্যবহারকারীর দৃষ্টিকোণ থেকে, যখন পৃষ্ঠার "প্রধান বিষয়বস্তু" লোড হয়েছিল—যা LCP-এর লক্ষ্য।
এই উদ্বেগগুলি মোকাবেলা করার জন্য, YouTube টিমের সদস্যরা Chrome টিমের সদস্যদের সাথে অংশীদারিত্ব করেছে যাতে তাদের ব্যবহারের ক্ষেত্রে LCP মেট্রিক উন্নত করা যায়। কয়েকটি বিকল্পের সম্ভাব্যতা এবং প্রভাব বিবেচনা করার পরে, দলগুলি LCP প্রার্থী হিসাবে একটি ভিডিও উপাদানের প্রথম ফ্রেমের পেইন্ট সময় বিবেচনা করার প্রস্তাবে অবতরণ করে।
একবার এই পরিবর্তনটি Chrome-এ অবতরণ করলে, YouTube টিম LCP-এর জন্য অপ্টিমাইজ করে তাদের কাজ চালিয়ে যেতে উত্তেজিত৷ এবং মেট্রিকের আপডেট হওয়া সংস্করণের অর্থ এই অপ্টিমাইজেশনগুলি বাস্তব-ব্যবহারকারীর অভিজ্ঞতার উপর আরও সরাসরি প্রভাব ফেলবে।
অলস লোডিং সঙ্গে মডুলারাইজেশন
YouTube পৃষ্ঠাগুলিতে অনেকগুলি মডিউল রয়েছে যা আগ্রহের সাথে লোড করা হয়েছিল৷ কিভাবে 50+ উপাদান রেন্ডার করা হয়েছে তা অপ্টিমাইজ করতে, দলটি JS মডিউল মানচিত্রে একটি উপাদান তৈরি করেছে যা ক্লায়েন্টকে কোন মডিউল লোড করতে হবে তা বলে দেবে। উপাদানগুলিকে অলস হিসাবে চিহ্নিত করার মাধ্যমে, JS মডিউলগুলি পরে লোড হবে, পৃষ্ঠার প্রাথমিক লোডের সময় এবং ক্লায়েন্টকে পাঠানো অব্যবহৃত জাভাস্ক্রিপ্টের পরিমাণ হ্রাস করবে।
যাইহোক, অলস লোডিং বাস্তবায়িত হওয়ার পরে, দলটি একটি জলপ্রপাতের প্রভাব লক্ষ্য করেছে যে অলস লোড হওয়া উপাদান এবং তাদের নির্ভরতাগুলি সাবঅপ্টিমাল সময়ে লোড হবে।
এই সমস্যাটি সমাধান করার জন্য, দলটি একটি দৃশ্যে প্রয়োজনীয় উপাদানগুলির ন্যূনতম সেট নির্ধারণ করেছে এবং সেগুলিকে একটি একক নেটওয়ার্ক অনুরোধে ব্যাচ করেছে৷ ফলাফলগুলি ছিল পৃষ্ঠার গতি উন্নত, জাভাস্ক্রিপ্ট পার্স টাইম হ্রাস করা এবং শেষ পর্যন্ত, প্রাথমিক রেন্ডারিং সময় আরও ভাল।
উপাদান জুড়ে রাষ্ট্র ব্যবস্থাপনা
ইউটিউব তার প্লেয়ার কন্ট্রোলের কারণে পারফরম্যান্স সমস্যার সম্মুখীন হচ্ছিল, বিশেষ করে পুরানো ডিভাইসে। কোড বিশ্লেষণে দেখা গেছে যে প্লেয়ার, যা ব্যবহারকারীদের প্লেব্যাকের গতি এবং অগ্রগতির মতো বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে দেয়, সময়ের সাথে সাথে অতিরিক্ত উপাদান হয়ে গেছে।
প্রতিটি প্রগ্রেস বার টাচ-মুভ ইভেন্ট দুটি অতিরিক্ত শৈলী পুনঃগণনা শুরু করেছে এবং ল্যাবে পারফরম্যান্স টেস্ট রানের সময় 21.17 ms নিয়েছে। সময়ের সাথে সাথে নতুন নিয়ন্ত্রণ যোগ করা হয়েছে, বিকেন্দ্রীভূত নিয়ন্ত্রণের প্যাটার্ন প্রায়ই বৃত্তাকার নির্ভরতা এবং মেমরি ফাঁসের কারণ হবে, যা ঘড়ির পৃষ্ঠার কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করবে।
বিকেন্দ্রীভূত নিয়ন্ত্রণের কারণে সমস্যাগুলি সমাধান করার জন্য, দলটি প্লেয়ার UI আপডেট করেছে সমস্ত আপডেট সিঙ্ক্রোনাইজ করতে, মূলত প্লেয়ারকে একটি শীর্ষ-স্তরের উপাদানে রিফ্যাক্টর করে যা তার বাচ্চাদের কাছে ডেটা পাঠাবে। এটি যেকোনো অবস্থার পরিবর্তনের জন্য শুধুমাত্র একটি UI আপডেট (রেন্ডার) চক্র নিশ্চিত করেছে, শৃঙ্খলিত আপডেটগুলিকে দূর করে। নতুন প্লেয়ার প্রগ্রেস বার টাচ-মুভ ইভেন্টের জাভাস্ক্রিপ্ট এক্সিকিউশনের সময় কোনও স্টাইল পুনঃগণনা নেই এবং এখন শুধুমাত্র 25% পুরানো প্লেয়ারের সময় প্রয়োজন।
এই কোড আধুনিকীকরণের ফলে অতিরিক্ত কার্যক্ষমতার উন্নতি হয়েছে যেমন পুরানো ডিভাইসগুলিতে উন্নত ঘড়ি লোডের সময়, কম পরিত্যক্ত প্লেব্যাক, এবং অ-মারাত্মক ত্রুটির সংখ্যা হ্রাস পেয়েছে।
উপসংহার
পারফরম্যান্সে YouTube-এর বিনিয়োগের ফলস্বরূপ, YouTube-এর মোবাইল ওয়েবসাইটের ইউআরএলগুলির 76% এখন কোর ওয়েব ভাইটাল মেট্রিক থ্রেশহোল্ডগুলিকে অতিক্রম করে দেখার পৃষ্ঠাগুলি আরও দ্রুত লোড হয়৷ ডেস্কটপে, ওয়াচ পৃষ্ঠার জন্য ল্যাব এলসিপি প্রায় 4.6 সেকেন্ড থেকে কমিয়ে 1.6 সেকেন্ড করা হয়েছে। সাইটের ইন্টারঅ্যাকশন এবং রেন্ডারিং পারফরম্যান্স, বিশেষ করে YouTube ভিডিও প্লেয়ারে, আগের তুলনায় জাভাস্ক্রিপ্ট এক্সিকিউশনে 75% কম সময় ব্যয় করা হচ্ছে।
গত বছরে YouTube ওয়েবের কর্মক্ষমতার উন্নতির ফলে দেখার সময় এবং দৈনিক সক্রিয় ব্যবহারকারীদের সহ ব্যবসায়িক মেট্রিক্সও উন্নত হয়েছে। এই প্রচেষ্টার সাফল্যের উপর ভিত্তি করে, আমরা ভবিষ্যতে অপ্টিমাইজ করার আরও উপায় অন্বেষণ চালিয়ে যাওয়ার পরিকল্পনা করছি৷
এই সিরিজের দ্বিতীয় অংশে, "একটি অ্যাক্সেসযোগ্য ওয়েব তৈরি করা", আপনি পড়বেন কীভাবে YouTube তাদের ওয়েবসাইটকে স্ক্রিন-রিডার ব্যবহারকারীদের জন্য আরও অ্যাক্সেসযোগ্য করে তুলেছে।
Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra এবং YouTube এবং Chrome উভয় দলকে তাদের অবদানের জন্য বিশেষ ধন্যবাদ সহ এই কাজ.