eBay.com এ গতির জন্য কেনাকাটা

দ্রুত ব্যবহারকারীর অভিজ্ঞতার জন্য ইবে-এর সাইট এবং অ্যাপের কার্যক্ষমতা অপ্টিমাইজ করা।

আদ্দি ওসমানী
Addy Osmani

স্পিড ছিল 2019 সালে eBay-এর জন্য একটি কোম্পানি-ব্যাপী উদ্যোগ , অনেক দল ব্যবহারকারীদের জন্য সাইট এবং অ্যাপগুলিকে যত দ্রুত সম্ভব করতে দৃঢ়প্রতিজ্ঞ। প্রকৃতপক্ষে, সার্চ পৃষ্ঠা লোডিং সময়ের প্রতি 100 মিলিসেকেন্ডের উন্নতির জন্য, ইবে "কার্টে যোগ করুন" সংখ্যায় 0.5% বৃদ্ধি পেয়েছে।

100 ms

লোড সময়ের উন্নতি

0.5 %

"কার্টে যোগ করুন" সংখ্যা বৃদ্ধি

পারফরম্যান্স বাজেট গ্রহণের মাধ্যমে ( Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনের সাথে একটি প্রতিযোগিতামূলক অধ্যয়ন করার পরে প্রাপ্ত) এবং মূল ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক্সের উপর ফোকাস করার মাধ্যমে, eBay সাইটের গতিতে উল্লেখযোগ্য উন্নতি করতে সক্ষম হয়েছিল।

অপ্টিমাইজেশন প্রচেষ্টা হোমপেজে 10% উন্নতি, অনুসন্ধান পৃষ্ঠায় 13% উন্নতি এবং আইটেম পৃষ্ঠাগুলিতে 3% উন্নতির দিকে পরিচালিত করে৷
ইবে এর গতির উন্নতি।

…এবং তাদের ক্রোম ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ডেটা এই উন্নতিগুলিকেও হাইলাইট করে৷

ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনের পেজস্পিড ইনসাইট ভিউ-এর স্ক্রিনশটগুলি eBay.com-এর জন্য 70% দ্রুত FCP এবং 88% দ্রুত FID হাইলাইট করে
প্রথম কন্টেন্টফুল পেইন্টের জন্য Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ডেটা এবং eBay.com উৎপত্তির জন্য প্রথম ইনপুট বিলম্ব

সামনে এখনও আরও কাজ আছে কিন্তু এখন পর্যন্ত ইবে-এর শিক্ষা এখানে।

ওয়েব পারফরম্যান্স "কাট"

ব্যবহারকারীর যাত্রায় অংশ নেওয়া বিভিন্ন সত্তার হ্রাস বা "কাট" (আকার এবং সময়) এর কারণে ইবে যে উন্নতি করেছে তা সম্ভব হয়েছে। এই পোস্টটি ইবে-নির্দিষ্ট বিষয়গুলির পরিবর্তে ওয়েব ডেভেলপার সম্প্রদায়ের সাথে প্রাসঙ্গিক বিষয়গুলিকে কভার করে৷

সমস্ত পাঠ্য সংস্থান জুড়ে পেলোড হ্রাস করুন

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

এখানে "কাট" হল রেসপন্স পেলোডে নষ্ট বাইট।

ভাঁজের ওপরের বিষয়বস্তুর জন্য জটিল পথ অপ্টিমাইজেশান

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

এখানে "কাট" হল প্রাসঙ্গিক বিষয়বস্তু প্রদর্শনের জন্য পরিষেবার দ্বারা ব্যয় করা সময়।

ইমেজ অপ্টিমাইজেশান

ছবিগুলি পেজ ব্লট করার জন্য সবচেয়ে বড় অবদানকারী । এমনকি ছোট অপ্টিমাইজেশন একটি দীর্ঘ পথ যেতে. ইবে ইমেজ জন্য দুটি অপ্টিমাইজেশান করেছে.

প্রথমত, iOS, Android, এবং সমর্থিত ব্রাউজার সহ সমস্ত প্ল্যাটফর্ম জুড়ে অনুসন্ধান ফলাফলের জন্য WebP চিত্র বিন্যাসে ইবে প্রমিত। অনুসন্ধান ফলাফল পৃষ্ঠাটি ইবেতে সবচেয়ে চিত্র-ভারী পৃষ্ঠা, এবং তারা ইতিমধ্যেই WebP ব্যবহার করছিল, কিন্তু একটি সামঞ্জস্যপূর্ণ প্যাটার্নে নয়৷

DevTools নেটওয়ার্ক প্যানেলের স্ক্রিনশটগুলি eBay.com থেকে WebP ছবির অনুরোধগুলি দেখানোর জন্য ফিল্টার করা হয়েছে
WebP চিত্রগুলি eBay.com-এ সমর্থিত ব্রাউজারগুলিতে পরিবেশন করা হচ্ছে৷

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

এখানে "কাট" হল ব্যবহারকারীদের পাঠানো নষ্ট ইমেজ বাইট।

স্ট্যাটিক সম্পদের পূর্বাভাসমূলক প্রিফেচ

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

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

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

এখানে "কাট" হল প্রথম নেভিগেশনে CSS এবং JavaScript স্ট্যাটিক সম্পদের নেটওয়ার্ক সময়।

শীর্ষ অনুসন্ধান ফলাফল প্রিফেচ করা হচ্ছে

যখন একজন ব্যবহারকারী ইবে অনুসন্ধান করে, তখন ইবে-এর বিশ্লেষণ তথ্য থেকে বোঝা যায় যে ব্যবহারকারীর অনুসন্ধান ফলাফলের শীর্ষ 10-এর একটি আইটেমে নেভিগেট করার সম্ভাবনা খুব বেশি। তাই ইবে এখন অনুসন্ধান থেকে আইটেমগুলিকে প্রিফেট করে এবং ব্যবহারকারী যখন নেভিগেট করে তখন সেগুলি প্রস্তুত রাখে৷ প্রিফেচিং দুটি স্তরে ঘটে।

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

অন্য স্তরটি ব্রাউজার ক্যাশে ঘটে, যা অস্ট্রেলিয়ায় পাওয়া যায়। আইটেম প্রিফেচ আইটেমগুলির গতিশীল প্রকৃতির কারণে একটি উন্নত অপ্টিমাইজেশান ছিল। এটিতে অনেক সূক্ষ্মতা রয়েছে: পৃষ্ঠার ছাপ, ক্ষমতা, নিলাম আইটেম এবং আরও অনেক কিছু। আপনি LinkedIn এর পারফরম্যান্স ইঞ্জিনিয়ারিং মিটআপ উপস্থাপনায় এটি সম্পর্কে আরও জানতে পারেন, অথবা ইবে-এর প্রকৌশলীদের কাছ থেকে এই বিষয়ে বিস্তারিত ব্লগ পোস্টের জন্য সাথে থাকুন।

eBay দ্রুত পরবর্তী লোডের জন্য অনুসন্ধান ফলাফল পৃষ্ঠাগুলিতে শীর্ষ 5টি আইটেম প্রিফেট করে৷ এটি requestIdleCallback() এর সাথে নিষ্ক্রিয় সময়ে ঘটে। এর ফলে ভাঁজের উপরে 759ms দ্রুত মাঝামাঝি হয়েছে, একটি কাস্টম মেট্রিক যা ফার্স্ট মিনিংফুল পেইন্টের মতো। ইবে প্রিফেচিং থেকে রূপান্তরগুলিতে একটি ইতিবাচক প্রভাব দেখেছে৷

আইটেমটি কোথায় ক্যাশে করা হয়েছে তার উপর নির্ভর করে এখানে "কাট" হয় সার্ভার প্রক্রিয়াকরণ সময় বা নেটওয়ার্ক সময় হতে পারে।

অনুসন্ধান ইমেজ ডাউনলোড করতে আগ্রহী

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

এখানে "কাট" হল অনুসন্ধান ফলাফলের ছবিগুলির ডাউনলোড শুরুর সময়৷

অটোসাজেশন ডেটার জন্য এজ ক্যাশিং

ব্যবহারকারীরা সার্চ বক্সে অক্ষর টাইপ করলে, পরামর্শ পপ-আপ হয়। এই পরামর্শগুলি অন্তত একদিনের জন্য অক্ষর সংমিশ্রণের জন্য পরিবর্তিত হয় না। তারা একটি ডেটা সেন্টারে যাওয়ার অনুরোধের পরিবর্তে একটি CDN (সর্বাধিক 24 ঘন্টার জন্য) থেকে ক্যাশে করা এবং পরিবেশন করার জন্য আদর্শ প্রার্থী। আন্তর্জাতিক বাজার বিশেষ করে CDN ক্যাশিং থেকে উপকৃত হয়।

ইবে-এর অনুসন্ধান বাক্সের একটি স্ক্রিনশট যা একটি অনুসন্ধান প্রশ্নের জন্য স্বয়ংসম্পূর্ণ পরামর্শগুলি প্রদর্শন করে৷

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

এখানে "কাট" হল নেটওয়ার্ক লেটেন্সি এবং স্বয়ংক্রিয় পরামর্শের জন্য সার্ভার প্রক্রিয়াকরণের সময়৷

অচেনা হোমপেজ ব্যবহারকারীদের জন্য এজ ক্যাশিং

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

eBay তাদের প্রান্ত নেটওয়ার্কে ( PoPs ) স্বল্প সময়ের জন্য অচেনা ব্যবহারকারী সামগ্রী (HTML) ক্যাশে করার সিদ্ধান্ত নিয়েছে৷ প্রথম-বারের ব্যবহারকারীরা এখন দূরবর্তী ডেটা সেন্টারের পরিবর্তে তাদের কাছাকাছি একটি সার্ভার থেকে হোমপেজ সামগ্রী পেতে পারেন৷ eBay এখনও আন্তর্জাতিক বাজারে এটি নিয়ে পরীক্ষা-নিরীক্ষা করছে, যেখানে এটি একটি বড় প্রভাব ফেলবে।

এখানে "কাট" আবার অচেনা ব্যবহারকারীদের জন্য নেটওয়ার্ক লেটেন্সি এবং সার্ভার প্রক্রিয়াকরণ সময় উভয়ই।

অন্যান্য প্ল্যাটফর্মের জন্য অপ্টিমাইজেশান

iOS/Android অ্যাপ পার্সিং উন্নতি

iOS/Android অ্যাপগুলি ব্যাকএন্ড পরিষেবাগুলির সাথে কথা বলে যার প্রতিক্রিয়া বিন্যাস সাধারণত JSON হয়৷ এই JSON পেলোডগুলি বড় হতে পারে৷ স্ক্রিনে কিছু রেন্ডার করার জন্য পুরো JSON পার্স করার পরিবর্তে, eBay একটি দক্ষ পার্সিং অ্যালগরিদম চালু করেছে যা অবিলম্বে প্রদর্শিত হওয়া দরকার এমন সামগ্রীর জন্য অপ্টিমাইজ করে৷

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

অ্যান্ড্রয়েড অ্যাপ স্টার্টআপ সময়ের উন্নতি

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

আরও গুরুত্বপূর্ণভাবে, ইবে পর্যবেক্ষণ করেছে যে একটি ব্লকিং তৃতীয় পক্ষের বিশ্লেষণ কল ছিল যা স্ক্রিনে রেন্ডারিং বিলম্বিত করেছে। ব্লকিং কল সরানো এবং এটিকে অ্যাসিঙ্ক করা আরও ঠান্ডা শুরুর সময়গুলিকে সাহায্য করেছে৷ এখানে "কাট" হল Android অ্যাপের জন্য অপ্রয়োজনীয় স্টার্টআপ সময়।

উপসংহার

সমস্ত পারফরম্যান্স "কাট" ইবে সম্মিলিতভাবে সুই সরানোর জন্য অবদান রেখেছিল এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে ঘটেছিল। রিলিজগুলি সারা বছর ধরে পর্যায়ক্রমে ছিল, প্রতিটি রিলিজ দশ মিলিসেকেন্ড শেভ করে, শেষ পর্যন্ত ইবে যেখানে এখন আছে সেখানে পৌঁছেছে:

ক্রোম ইউএক্স রিপোর্টের স্ক্রিনশটগুলি eBay.com-এর জন্য ফিল্ড ডেটা উন্নতি দেখাচ্ছে৷
সময়ের সাথে সাথে তাদের ফিল্ড মেট্রিক্সে eBay-এর গতির প্রচেষ্টার প্রভাব, যেমনটি Chrome UX রিপোর্ট ড্যাশবোর্ড দ্বারা চিত্রিত হয়েছে৷

কর্মক্ষমতা একটি বৈশিষ্ট্য এবং একটি প্রতিযোগিতামূলক সুবিধা । অপ্টিমাইজ করা অভিজ্ঞতাগুলি উচ্চতর ব্যবহারকারীর ব্যস্ততা, রূপান্তর এবং ROI নিয়ে যায়৷ ইবে-এর ক্ষেত্রে, এই অপ্টিমাইজেশানগুলি স্বল্প-প্রচেষ্টার থেকে উন্নত কিছুতে পরিবর্তিত হয়।

আরও জানতে এবং অদূর ভবিষ্যতে তাদের পারফরম্যান্স কাজের উপর eBay ইঞ্জিনিয়ারদের আরও বিস্তারিত নিবন্ধের সন্ধানে থাকুন।

,

দ্রুত ব্যবহারকারীর অভিজ্ঞতার জন্য ইবে-এর সাইট এবং অ্যাপের কার্যক্ষমতা অপ্টিমাইজ করা।

আদ্দি ওসমানী
Addy Osmani

স্পিড ছিল 2019 সালে eBay-এর জন্য একটি কোম্পানি-ব্যাপী উদ্যোগ , অনেক দল ব্যবহারকারীদের জন্য সাইট এবং অ্যাপগুলিকে যত দ্রুত সম্ভব করতে দৃঢ়প্রতিজ্ঞ। প্রকৃতপক্ষে, সার্চ পৃষ্ঠা লোডিং সময়ের প্রতি 100 মিলিসেকেন্ডের উন্নতির জন্য, ইবে "কার্টে যোগ করুন" সংখ্যায় 0.5% বৃদ্ধি পেয়েছে।

100 ms

লোড সময়ের উন্নতি

0.5 %

"কার্টে যোগ করুন" সংখ্যা বৃদ্ধি

পারফরম্যান্স বাজেট গ্রহণের মাধ্যমে ( Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনের সাথে একটি প্রতিযোগিতামূলক অধ্যয়ন করার পরে প্রাপ্ত) এবং মূল ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক্সের উপর ফোকাস করার মাধ্যমে, eBay সাইটের গতিতে উল্লেখযোগ্য উন্নতি করতে সক্ষম হয়েছিল।

অপ্টিমাইজেশন প্রচেষ্টা হোমপেজে 10% উন্নতি, অনুসন্ধান পৃষ্ঠায় 13% উন্নতি এবং আইটেম পৃষ্ঠাগুলিতে 3% উন্নতির দিকে পরিচালিত করে৷
ইবে এর গতির উন্নতি।

…এবং তাদের ক্রোম ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ডেটা এই উন্নতিগুলিকেও হাইলাইট করে৷

ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনের পেজস্পিড ইনসাইট ভিউ-এর স্ক্রিনশটগুলি eBay.com-এর জন্য 70% দ্রুত FCP এবং 88% দ্রুত FID হাইলাইট করে
প্রথম কন্টেন্টফুল পেইন্টের জন্য Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ডেটা এবং eBay.com উৎপত্তির জন্য প্রথম ইনপুট বিলম্ব

সামনে এখনও আরও কাজ আছে কিন্তু এখন পর্যন্ত ইবে-এর শিক্ষা এখানে।

ওয়েব পারফরম্যান্স "কাট"

ব্যবহারকারীর যাত্রায় অংশ নেওয়া বিভিন্ন সত্তার হ্রাস বা "কাট" (আকার এবং সময়) এর কারণে ইবে যে উন্নতি করেছে তা সম্ভব হয়েছে। এই পোস্টটি ইবে-নির্দিষ্ট বিষয়গুলির পরিবর্তে ওয়েব ডেভেলপার সম্প্রদায়ের সাথে প্রাসঙ্গিক বিষয়গুলিকে কভার করে৷

সমস্ত পাঠ্য সংস্থান জুড়ে পেলোড হ্রাস করুন

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

এখানে "কাট" হল রেসপন্স পেলোডে নষ্ট বাইট।

ভাঁজের ওপরের বিষয়বস্তুর জন্য জটিল পথ অপ্টিমাইজেশান

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

এখানে "কাট" হল প্রাসঙ্গিক বিষয়বস্তু প্রদর্শনের জন্য পরিষেবার দ্বারা ব্যয় করা সময়।

ইমেজ অপ্টিমাইজেশান

ছবিগুলি পেজ ব্লট করার জন্য সবচেয়ে বড় অবদানকারী । এমনকি ছোট অপ্টিমাইজেশন একটি দীর্ঘ পথ যেতে. ইবে ইমেজ জন্য দুটি অপ্টিমাইজেশান করেছে.

প্রথমত, iOS, Android, এবং সমর্থিত ব্রাউজার সহ সমস্ত প্ল্যাটফর্ম জুড়ে অনুসন্ধান ফলাফলের জন্য WebP চিত্র বিন্যাসে ইবে প্রমিত। অনুসন্ধান ফলাফল পৃষ্ঠাটি ইবেতে সবচেয়ে চিত্র-ভারী পৃষ্ঠা, এবং তারা ইতিমধ্যেই WebP ব্যবহার করছিল, কিন্তু একটি সামঞ্জস্যপূর্ণ প্যাটার্নে নয়৷

DevTools নেটওয়ার্ক প্যানেলের স্ক্রিনশটগুলি eBay.com থেকে WebP ছবির অনুরোধগুলি দেখানোর জন্য ফিল্টার করা হয়েছে
WebP চিত্রগুলি eBay.com-এ সমর্থিত ব্রাউজারগুলিতে পরিবেশন করা হচ্ছে৷

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

এখানে "কাট" হল ব্যবহারকারীদের পাঠানো নষ্ট ইমেজ বাইট।

স্ট্যাটিক সম্পদের পূর্বাভাসমূলক প্রিফেচ

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

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

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

এখানে "কাট" হল প্রথম নেভিগেশনে CSS এবং JavaScript স্ট্যাটিক সম্পদের নেটওয়ার্ক সময়।

শীর্ষ অনুসন্ধান ফলাফল প্রিফেচ করা হচ্ছে

যখন একজন ব্যবহারকারী ইবে অনুসন্ধান করে, তখন ইবে-এর বিশ্লেষণ তথ্য থেকে বোঝা যায় যে ব্যবহারকারীর অনুসন্ধান ফলাফলের শীর্ষ 10-এর একটি আইটেমে নেভিগেট করার সম্ভাবনা খুব বেশি। তাই ইবে এখন অনুসন্ধান থেকে আইটেমগুলিকে প্রিফেট করে এবং ব্যবহারকারী যখন নেভিগেট করে তখন সেগুলি প্রস্তুত রাখে৷ প্রিফেচিং দুটি স্তরে ঘটে।

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

অন্য স্তরটি ব্রাউজার ক্যাশে ঘটে, যা অস্ট্রেলিয়ায় পাওয়া যায়। আইটেম প্রিফেচ আইটেমগুলির গতিশীল প্রকৃতির কারণে একটি উন্নত অপ্টিমাইজেশান ছিল। এটিতে অনেক সূক্ষ্মতা রয়েছে: পৃষ্ঠার ছাপ, ক্ষমতা, নিলাম আইটেম এবং আরও অনেক কিছু। আপনি LinkedIn এর পারফরম্যান্স ইঞ্জিনিয়ারিং মিটআপ উপস্থাপনায় এটি সম্পর্কে আরও জানতে পারেন, অথবা ইবে-এর প্রকৌশলীদের কাছ থেকে এই বিষয়ে বিস্তারিত ব্লগ পোস্টের জন্য সাথে থাকুন।

eBay দ্রুত পরবর্তী লোডের জন্য অনুসন্ধান ফলাফল পৃষ্ঠাগুলিতে শীর্ষ 5টি আইটেম প্রিফেট করে৷ এটি requestIdleCallback() এর সাথে নিষ্ক্রিয় সময়ে ঘটে। এর ফলে ভাঁজের উপরে 759ms দ্রুত মাঝামাঝি হয়েছে, একটি কাস্টম মেট্রিক যা ফার্স্ট মিনিংফুল পেইন্টের মতো। ইবে প্রিফেচিং থেকে রূপান্তরগুলিতে একটি ইতিবাচক প্রভাব দেখেছে৷

আইটেমটি কোথায় ক্যাশে করা হয়েছে তার উপর নির্ভর করে এখানে "কাট" হয় সার্ভার প্রক্রিয়াকরণ সময় বা নেটওয়ার্ক সময় হতে পারে।

অনুসন্ধান ইমেজ ডাউনলোড করতে আগ্রহী

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

এখানে "কাট" হল অনুসন্ধান ফলাফলের ছবিগুলির ডাউনলোড শুরুর সময়৷

অটোসাজেশন ডেটার জন্য এজ ক্যাশিং

ব্যবহারকারীরা সার্চ বক্সে অক্ষর টাইপ করলে, পরামর্শ পপ-আপ হয়। এই পরামর্শগুলি অন্তত একদিনের জন্য অক্ষর সংমিশ্রণের জন্য পরিবর্তিত হয় না। তারা একটি ডেটা সেন্টারে যাওয়ার অনুরোধের পরিবর্তে একটি CDN (সর্বাধিক 24 ঘন্টার জন্য) থেকে ক্যাশে করা এবং পরিবেশন করার জন্য আদর্শ প্রার্থী। আন্তর্জাতিক বাজার বিশেষ করে CDN ক্যাশিং থেকে উপকৃত হয়।

ইবে-এর অনুসন্ধান বাক্সের একটি স্ক্রিনশট যা একটি অনুসন্ধান প্রশ্নের জন্য স্বয়ংসম্পূর্ণ পরামর্শগুলি প্রদর্শন করে৷

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

এখানে "কাট" হল নেটওয়ার্ক লেটেন্সি এবং স্বয়ংক্রিয় পরামর্শের জন্য সার্ভার প্রক্রিয়াকরণের সময়৷

অচেনা হোমপেজ ব্যবহারকারীদের জন্য এজ ক্যাশিং

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

eBay তাদের প্রান্ত নেটওয়ার্কে ( PoPs ) স্বল্প সময়ের জন্য অচেনা ব্যবহারকারী সামগ্রী (HTML) ক্যাশে করার সিদ্ধান্ত নিয়েছে৷ প্রথম-বারের ব্যবহারকারীরা এখন দূরবর্তী ডেটা সেন্টারের পরিবর্তে তাদের কাছাকাছি একটি সার্ভার থেকে হোমপেজ সামগ্রী পেতে পারেন৷ eBay এখনও আন্তর্জাতিক বাজারে এটি নিয়ে পরীক্ষা-নিরীক্ষা করছে, যেখানে এটি একটি বড় প্রভাব ফেলবে।

এখানে "কাট" আবার অচেনা ব্যবহারকারীদের জন্য নেটওয়ার্ক লেটেন্সি এবং সার্ভার প্রক্রিয়াকরণ সময় উভয়ই।

অন্যান্য প্ল্যাটফর্মের জন্য অপ্টিমাইজেশান

iOS/Android অ্যাপ পার্সিং উন্নতি

iOS/Android অ্যাপগুলি ব্যাকএন্ড পরিষেবাগুলির সাথে কথা বলে যার প্রতিক্রিয়া বিন্যাস সাধারণত JSON হয়৷ এই JSON পেলোডগুলি বড় হতে পারে৷ স্ক্রিনে কিছু রেন্ডার করার জন্য পুরো JSON পার্স করার পরিবর্তে, eBay একটি দক্ষ পার্সিং অ্যালগরিদম চালু করেছে যা অবিলম্বে প্রদর্শিত হওয়া দরকার এমন সামগ্রীর জন্য অপ্টিমাইজ করে৷

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

অ্যান্ড্রয়েড অ্যাপ স্টার্টআপ সময়ের উন্নতি

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

আরও গুরুত্বপূর্ণভাবে, ইবে পর্যবেক্ষণ করেছে যে একটি ব্লকিং তৃতীয় পক্ষের বিশ্লেষণ কল ছিল যা স্ক্রিনে রেন্ডারিং বিলম্বিত করেছে। ব্লকিং কল সরানো এবং এটিকে অ্যাসিঙ্ক করা আরও ঠান্ডা শুরুর সময়গুলিকে সাহায্য করেছে৷ এখানে "কাট" হল Android অ্যাপের জন্য অপ্রয়োজনীয় স্টার্টআপ সময়।

উপসংহার

সমস্ত পারফরম্যান্স "কাট" ইবে সম্মিলিতভাবে সুই সরানোর জন্য অবদান রেখেছিল এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে ঘটেছিল। রিলিজগুলি সারা বছর ধরে পর্যায়ক্রমে ছিল, প্রতিটি রিলিজ দশ মিলিসেকেন্ড শেভ করে, শেষ পর্যন্ত ইবে যেখানে এখন আছে সেখানে পৌঁছেছে:

ক্রোম ইউএক্স রিপোর্টের স্ক্রিনশটগুলি eBay.com-এর জন্য ফিল্ড ডেটা উন্নতি দেখাচ্ছে৷
সময়ের সাথে সাথে তাদের ফিল্ড মেট্রিক্সে eBay-এর গতির প্রচেষ্টার প্রভাব, যেমনটি Chrome UX রিপোর্ট ড্যাশবোর্ড দ্বারা চিত্রিত হয়েছে৷

কর্মক্ষমতা একটি বৈশিষ্ট্য এবং একটি প্রতিযোগিতামূলক সুবিধা । অপ্টিমাইজ করা অভিজ্ঞতাগুলি উচ্চতর ব্যবহারকারীর ব্যস্ততা, রূপান্তর এবং ROI নিয়ে যায়৷ ইবে-এর ক্ষেত্রে, এই অপ্টিমাইজেশানগুলি স্বল্প-প্রচেষ্টার থেকে উন্নত কিছুতে পরিবর্তিত হয়।

আরও জানতে এবং অদূর ভবিষ্যতে তাদের পারফরম্যান্স কাজের উপর eBay ইঞ্জিনিয়ারদের আরও বিস্তারিত নিবন্ধের সন্ধানে থাকুন।