Mail.ru হোম পেজে মূল ওয়েব ভাইটাল উন্নত করার ফলে রূপান্তর হার গড়ে 10% বৃদ্ধি পেয়েছে

Mail.ru-এর হোম পেজে কোর ওয়েব ভাইটালগুলিকে উন্নত করার জন্য বেশ কয়েক মাস কাজ করার ফলে ক্রমবর্ধমান লেআউট শিফটে (CLS) 75 তম শতাংশে 60% বৃদ্ধি পেয়েছে, গড় সেশনের সময় 2.7% বৃদ্ধি পেয়েছে এবং মূল বিভাগগুলির রূপান্তর হার আরও বেশি হয়েছে 10% এর বেশি।

Denis Stasyev

Sven May

যেখানে আমরা শুরু করেছি

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

Mail.ru এর দর্শকদের একটি উচ্চ মানের ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে চেয়েছিল, তাই কোর ওয়েব ভাইটালগুলিকে উন্নত করার জন্য কাজ শুরু হয়েছে৷ আমাদের অপ্টিমাইজেশন কৌশল নিয়ে আলোচনা করার আগে, Mail.ru হোম পেজের কয়েকটি প্রযুক্তিগত বিবরণ প্রথমে উল্লেখ করা উচিত।

যদিও আমাদের ইন-হাউস টেমপ্লেটিং ইঞ্জিন ফেস্ট ব্যবহার করে প্রকল্পটি দীর্ঘদিন ধরে তৈরি করা হয়েছিল, আমরা 2019 সালে Svelte 3- এ স্থানান্তরিত হতে শুরু করি।

Svelte এমনভাবে প্রতিক্রিয়াশীলতা প্রয়োগ করে যা ভার্চুয়াল DOM ব্যবহার করে না , যা এটিকে কম সম্পদ-নিবিড় করে তোলে। Svelte এর পদ্ধতিটি উত্পাদন বান্ডিল থেকে অব্যবহৃত ফাংশনগুলিকে সরিয়ে দেয় কারণ ফাংশনগুলি ব্যবহার না করা হলে তাদের বাস্তবায়নকারী কোড কম্পাইলার দ্বারা তৈরি হয় না। অব্যবহৃত কোড সংকলনের সময় সরানো হয়, যার ফলে ছোট বান্ডিল হয়। এটি পৃষ্ঠা শুরু করার সময় মোট ব্লকিং টাইম (TBT) কমাতে সাহায্য করতে পারে।

কর্মক্ষমতা মেট্রিক্স ট্র্যাকিং

কোর ওয়েব ভাইটাল অপ্টিমাইজ করার আগে, ক্ষেত্রের কর্মক্ষমতা মূল্যায়ন করা সহায়ক। Core Web Vitals এর আগে, আমরা আমাদের অভ্যন্তরীণ পারফরম্যান্স ড্যাশবোর্ডে ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এর মতো অন্যান্য মেট্রিক্স ট্র্যাক করেছি।

আমাদের মেট্রিক্স সংগ্রহের স্ক্রিপ্টটি কোর ওয়েব ভাইটালগুলি সংগ্রহ করতে এবং সেগুলিকে ভিজ্যুয়ালাইজেশনের জন্য আমাদের পারফরম্যান্স ড্যাশবোর্ডে প্রেরণ করার জন্য সংশোধন করা হয়েছিল। Google-এর সুপারিশ অনুসারে, আমাদের স্ক্রিপ্ট মেট্রিক্স পেতে PerformanceObserver API ব্যবহার করে, যা Mail.ru-এর মধ্যে সার্বজনীন ফ্রন্টএন্ড "প্ল্যাটফর্ম" এর অংশ।

ড্যাশবোর্ড ব্যবহারকারীদের জন্য নিম্নলিখিত মেট্রিক্স প্রদর্শন করেছে (15-21 মার্চ 2021 সপ্তাহের গড় মান):

কোর ওয়েব ভাইটাল উন্নত করা

যদিও কোর ওয়েব ভাইটালগুলিকে উন্নত করার জন্য প্রচুর নির্দেশিকা বিদ্যমান, প্রতিটি প্রকল্পের অনন্য চ্যালেঞ্জ রয়েছে। Mail.ru হোম পেজের জন্য, নিম্নলিখিত সুযোগগুলি চিহ্নিত করা হয়েছিল:

• CLS কমাতে বিজ্ঞাপন ব্যানারের জন্য স্থানধারক প্রয়োগ করা।
• সার্ভার-সাইড রেন্ডারিং (SSR) ব্যবহার করে লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) কমাতে।
• এলসিপি এবং ফার্স্ট ইনপুট বিলম্ব (এফআইডি) কমাতে কোড স্প্লিটিং।

CLS উন্নতির জন্য কঙ্কাল

CLS হল Mail.ru হোম পেজের জন্য সবচেয়ে খারাপ পারফরম্যান্সকারী ফিল্ড মেট্রিকগুলির মধ্যে একটি। Chrome-এর DevTools-এর পারফরম্যান্স প্যানেলে এই পৃষ্ঠার পরবর্তী প্রোফাইলিং প্রকাশ করেছে যে বিজ্ঞাপনগুলি সমস্যার উৎস। লেআউটের স্থিতিশীলতা উন্নত করতে, আমাদের দল লোড হওয়ার আগে বিজ্ঞাপনের জন্য স্থান সংরক্ষিত করতে স্থানধারকদের ব্যবহার করার সিদ্ধান্ত নিয়েছে।

স্থানধারক প্রয়োগ করার সময়, প্রথম ধাপ হল বিষয়বস্তুর মাত্রা নির্ধারণ করা যা তাদের প্রতিস্থাপন করবে। ভাগ্যক্রমে, Mail.ru হোম পেজের ডেস্কটপ সংস্করণে বিজ্ঞাপনের জন্য কঠোরভাবে নথিভুক্ত আকার রয়েছে। ডিজাইন টিমের সাথে কথা বলার পর, SVG-অ্যানিমেটেড UI কঙ্কালগুলিকে স্থানধারক হিসাবে ব্যবহার করা হয়েছিল কারণ তারা বিষয়বস্তুর অনুভূত লোডের সময় কমিয়ে দেয় ।

SSR এর প্রত্যাবর্তন

ফেস্ট থেকে স্বেল্টে রূপান্তর সহজ করতে, আমরা নতুন করে শুরু করার পরিবর্তে বিদ্যমান প্রকল্পটিকে ক্রমবর্ধমানভাবে লিখি। মার্চ 2021 নাগাদ, আমরা বেশিরভাগ ফ্রন্টএন্ড Svelte-এ স্থানান্তরিত করেছিলাম এবং ব্যাকএন্ড পারফরম্যান্স সমস্যাগুলি ট্রাইএজিং এবং ফিক্স করার পরে অবশেষে আমাদের উত্পাদন অ্যাপ্লিকেশনে SSR নিয়ে এসেছি।

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

যদিও Chrome এর DevTools লেআউট শিফট ইভেন্টগুলি দেখিয়েছিল, আমরা প্রথমে এর কারণ খুঁজে পাইনি। যদিও SSR নিজেই সমস্যা ছিল না, এটি পরবর্তীতে সমাধানটি আবিষ্কার করতে সাহায্য করেছিল। পেইন্টিং বিলম্বের জন্য দায়ী কোড ঠিক করা সংবাদ উপাদানের উন্নত লেআউট স্থিতিশীলতা।

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

কোড বিভাজন এবং অব্যবহৃত পলিফিল

অনুভূত পৃষ্ঠা লোড গতি উন্নত করতে, LCP এবং FID মান হ্রাস করার জন্য কাজ করা প্রয়োজন ছিল। এটি অর্জন করার একটি উপায় হল কোড বিভাজনের মাধ্যমে। Mail.ru হোম পেজ ছাড়াও, আমাদের দল পোর্টাল নেভিগেশনের জন্য একটি উইজেট তৈরি করছে। এটি বর্তমানে আমাদের কোম্পানির অনেক প্রকল্পে এমবেড করা আছে।

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

আমরা আধুনিক বা লিগ্যাসি ব্রাউজারগুলির জন্য জাভাস্ক্রিপ্ট বান্ডেল লোড করার জন্য module / nomodule প্যাটার্নের বিরুদ্ধে সিদ্ধান্ত নিয়েছি, কারণ <script> উপাদানের type="module" বৈশিষ্ট্য আমাদের প্রয়োজনের জন্য যথেষ্ট আধুনিক ব্রাউজারগুলিকে লক্ষ্য করেনি। এটি মোকাবেলা করার জন্য, Mail.ru ব্যাকএন্ডে আধুনিক ব্রাউজার সংস্করণ সনাক্ত করার জন্য একটি ইন-হাউস টুল ব্যবহার করে এবং সেই অনুযায়ী সেই ব্রাউজারগুলির সাথে মানিয়ে নিতে পারে।

ব্যাকএন্ডে ব্রাউজার শনাক্ত করা গেলে, আমরা আধুনিক এবং লিগ্যাসি ব্রাউজারগুলির জন্য কোড বিভাজন প্রয়োগ করেছি। ফলাফল আধুনিক ব্রাউজারগুলির জন্য সিঙ্ক্রোনাস-লোড করা জাভাস্ক্রিপ্ট উইজেটের আকারে 43.3% হ্রাস পেয়েছে। এই অনুশীলনটি অন্যান্য পোর্টাল স্ক্রিপ্টগুলিতেও প্রয়োগ করা হয়েছে।

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

ফলাফল

অপ্টিমাইজেশন প্রচেষ্টার পরে, আমরা আমাদের ফিল্ড ডেটাতে 24-30 মে 2021 সপ্তাহের গড় মানগুলি পর্যবেক্ষণ করেছি:

নীচের গ্রাফগুলি "প্ল্যাটফর্ম" অনুযায়ী ওয়েব পৃষ্ঠার কর্মক্ষমতা মেট্রিক্স মানগুলির পরিবর্তনগুলি দেখায়৷ গ্রাফে দুটি গুরুত্বপূর্ণ তারিখ নোট করুন:

• 23 মার্চ 2021: Svelte-এ স্থানান্তরিত শেষ পৃষ্ঠার বিভাগগুলির সাথে পুনরাবৃত্তির প্রকাশ;
• 19 এপ্রিল 2021: ফিরে আসা SSR সহ পুনরাবৃত্তির প্রকাশ এবং CLS রিগ্রেশন সংশোধন করার জন্য লেআউট পরিবর্তন করা হয়েছে।

1 মে থেকে 10 মে পর্যন্ত মান হ্রাস রাশিয়ায় মে ছুটির কারণে।

"প্ল্যাটফর্ম" ব্যবহার করে প্রাপ্ত ফলাফলগুলি Chrome UX রিপোর্টে (CrUX) মেট্রিক মানের বৃদ্ধির সাথে সামঞ্জস্যপূর্ণ।

প্রাথমিক উন্নতিগুলির রোল-আউটের এক সপ্তাহ আগে এবং রোল-আউটের এক সপ্তাহ পরে গড় ব্যবহারকারীর সেশনের সময়কালের মানগুলির একটি তুলনা 2.7% বৃদ্ধি দেখায়। তাছাড়া, পৃষ্ঠার বেশিরভাগ বিভাগে রূপান্তর একটি সামগ্রিক উল্লেখযোগ্য বৃদ্ধি আছে। বিশেষ করে, Mail.ru ইমেল অ্যাপে রূপান্তর 11.6% বৃদ্ধি পেয়েছে, সংবাদ বিভাগের রূপান্তর 13.5% বৃদ্ধি পেয়েছে।

আমরা যে সবচেয়ে অপ্রত্যাশিত ফলাফল পেয়েছি তা হল মার্কেটিং ব্যানারের ক্লিক-থ্রু রেট (CTR) 17.4% বৃদ্ধি (এর রেন্ডারিং সময় SSR এবং প্রিলোড ট্যাগ প্রবর্তনের দ্বারা উল্লেখযোগ্যভাবে হ্রাস পেয়েছে)।

পৃষ্ঠার বাকি বিভাগগুলি বিশ্লেষণ করার পরে, আমরা তাদের অধিকাংশের মধ্যে উল্লেখযোগ্য কর্মক্ষমতা উন্নতি লক্ষ্য করেছি৷ এমনকি আবহাওয়া এবং করোনাভাইরাস-এর মতো বিভাগগুলির জন্য যা আমাদের পৃষ্ঠায় গুরুত্বপূর্ণ নয়-আমরা যথাক্রমে 9.6% এবং 9.5% দ্বারা রূপান্তর বৃদ্ধি দেখতে পাই।

উপসংহার

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

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