কোর ওয়েব ভাইটালগুলিতে ফোকাস করে কীভাবে Swappi মোবাইলের আয় 42% বাড়িয়েছে৷

সাইটের পারফরম্যান্স এবং ব্যবসায়িক মেট্রিক্সের মধ্যে পারস্পরিক সম্পর্ক খুঁজে পাওয়া তাদের অপ্টিমাইজেশন প্রচেষ্টার সাফল্যের চাবিকাঠি ছিল।

Lina Hansson

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

সুযোগ তুলে ধরা

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

মার্কিন যুক্তরাষ্ট্রের দশটি বৃহত্তম ই-কমার্স সাইটের গড় হল একটি Rel mCvR 50% , কিন্তু Swappie ছিল 24%। এটি ইঙ্গিত দেয় যে মোবাইল সাইটের চ্যালেঞ্জ ছিল এবং কোম্পানিটি রাজস্ব থেকে বঞ্চিত ছিল, যার ফলে কর্মক্ষমতা উন্নতি প্রকল্প চালু করা হয়েছে।

কর্মক্ষমতা উন্নতির প্রভাব পরিমাপ

Swappi এই টেমপ্লেট স্প্রেডশীট ব্যবহার করে, Rel mCvR এবং মোবাইল গড় পৃষ্ঠা লোড সময়ের দৈনিক ট্র্যাকিং সেট আপ করতে Google Analytics ব্যবহার করেছে। ( কীভাবে স্প্রেডশীট ব্যবহার করবেন তার নির্দেশাবলী পড়ুন।) তারা Google Analytics এবং BigQuery-এর মাধ্যমে কোর ওয়েব ভাইটাল ট্র্যাক করা শুরু করেছে। স্থান ট্র্যাকিং সঙ্গে, ডেভেলপাররা সাইটের কর্মক্ষমতা কাজ শুরু.

মাত্র তিন মাস কাজ করার পরে, প্রভাব স্পষ্ট ছিল – Rel mCvR 24% থেকে 34% হয়েছে এবং মোবাইল আয় বেড়েছে 42%!

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

LCP এবং CLS-এর জন্য অপ্টিমাইজ করা

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

লেআউট শিফট শনাক্ত করা চ্যালেঞ্জিং ছিল, যেহেতু তারা ভিউপোর্ট এবং সংযোগের উপর ভিত্তি করে অনেক পরিবর্তিত হতে পারে। ব্যবহারকারীদের থেকে তাদের বিশ্লেষণে Core Web Vitals পাওয়ার পর, তারা জানত যে তারা সঠিক পথে রয়েছে কারণ CLS কমে গেছে।

ছবি

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

হরফ

সোয়াপি প্রদানকারী পরিবর্তন করে ফন্ট অপ্টিমাইজ করে। এটি একটি বড় প্রভাব ফেলেছে কারণ তাদের বিভিন্ন ভাষার জন্য প্রয়োজনীয় টাইপফেসগুলি পরিচালনা করার জন্য একটি সর্বোত্তম উপায় প্রয়োজন।

তৃতীয় পক্ষের স্ক্রিপ্ট

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

অব্যবহৃত কোড সরানো এবং বান্ডলিং অপ্টিমাইজ করা

আমদানি অপ্টিমাইজ করা এবং অব্যবহৃত JS এবং CSS অপসারণ Swappie-এর সাইটের কর্মক্ষমতাতে ছোট উন্নতি করেছে, তবে সেই ছোট উন্নতিগুলি সময়ের সাথে সাথে যুক্ত হয়। তারা তাদের বান্ডলিং সেটআপও অপ্টিমাইজ করেছে।

স্বাপ্পিতে একটি পারফরম্যান্স সংস্কৃতি তৈরি করা

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

ইঞ্জিনিয়ারিং লিড, টিমু হুওভিনেন ব্যাখ্যা করেছেন:

সত্যিকার অর্থে এর গুরুত্ব তুলে ধরতে আপনাকে ব্যবসার মেট্রিক্সের সাথে সাইটের গতি লিঙ্ক করতে হবে। যখন আপনি সময় এবং সম্পদের কম হন তখন এটি সব অগ্রাধিকারের উপর নির্ভর করে, যা সর্বদা হয়। গ্রাহকের মূল্যকে অগ্রাধিকার দেওয়াই হল পথ, কিন্তু আপনি যদি সাইটের গতি শুধুমাত্র সাইটের "অনুভূতি" উন্নত করতে দেখেন তবে নতুন বৈশিষ্ট্য এবং আরও সরাসরি রূপান্তর উন্নতিতে ফোকাস করা খুব সহজ৷ ব্যবসায়িক মেট্রিক্সের সাথে সাইটের গতি লিঙ্ক করা সবসময় সহজ নয়, এবং এখানেই Rel mCvR এর সাথে গণনা আমাদের অনেক সাহায্য করেছে।

তেমু হুওভিনেন

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

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

তেমু হুওভিনেন

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