কিভাবে QuintoAndar পৃষ্ঠা কার্যক্ষমতা উন্নত করে প্রতি সেশনে রূপান্তর হার এবং পৃষ্ঠাগুলিকে বাড়িয়েছে৷

কোর ওয়েব ভাইটাল অপ্টিমাইজ করা এবং Next.js-এ স্থানান্তরিত করার উপর দৃষ্টি নিবদ্ধ করা একটি প্রকল্প রূপান্তর হারে 5% বৃদ্ধি এবং প্রতি সেশনে পৃষ্ঠাগুলিতে 87% বৃদ্ধি পেয়েছে।

Daniela Sayuri Yassuda

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

চ্যালেঞ্জ

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

• তারা জৈব ট্রাফিকের একটি গুরুত্বপূর্ণ উৎস, সার্চ ইঞ্জিনের ফলাফল থেকে ক্রমাগত ক্রমবর্ধমান ব্যবহারকারীর সংখ্যা।
• অন্যান্য পৃষ্ঠার তুলনায় মাঝারি থেকে দীর্ঘমেয়াদে তাদের উচ্চ রূপান্তর হার রয়েছে।

যাইহোক, এই পৃষ্ঠাগুলিতে কর্মক্ষমতা এবং ব্যবহারকারীর অভিজ্ঞতার ক্ষেত্রে চ্যালেঞ্জ ছিল:

• কোর ওয়েব ভাইটালস দ্বারা পরিমাপ করা তাদের কর্মক্ষমতা অপ্টিমাইজ করা হয়নি, এবং ধীর পৃষ্ঠা লোড, ব্যবহারকারীর ইনপুটে ধীর প্রতিক্রিয়াশীলতা এবং লেআউট অস্থিরতার বিষয়ে পরিচিত সমস্যা ছিল।
• তাদের বাউন্স রেট বেশি ছিল, এমনকি যদি আমরা আশা করি সেগুলি অ্যাপের অন্যান্য অংশের তুলনায় বেশি হবে।
• Google অনুসন্ধানে পৃষ্ঠার অভিজ্ঞতার আপডেট — যা সেই সময়ে, এখনও প্রকাশিত হয়নি — কোর ওয়েব ভাইটালগুলিকে র‌্যাঙ্কিং অ্যালগরিদমে অন্তর্ভুক্ত করবে, যার অর্থ পৃষ্ঠার কার্যকারিতা কীভাবে অনুসন্ধান ফলাফলগুলি প্রদর্শিত হবে তা প্রভাবিত করতে পারে৷

একই সময়ে, আমরা কিছু বিকাশকারীর অভিজ্ঞতার সুযোগ চিহ্নিত করেছি যা কোম্পানি জুড়ে অন্যান্য প্রকল্পে লাভ আনলক করতে পারে:

• আমাদের সার্ভার-সাইড রেন্ডারিং লজিক—যা কনডোমিনিয়াম পৃষ্ঠাগুলি সহ সমস্ত উচ্চ-ট্র্যাফিক পৃষ্ঠাগুলিকে রেন্ডার করে—আভ্যন্তরীণভাবে তৈরি করা হয়েছিল, এবং নতুন নিয়োগের জন্য এবং রক্ষণাবেক্ষণের জন্য খুব জটিল হয়ে উঠেছে৷
• ভাল অ্যাপ পারফরম্যান্স অর্জনের জন্য প্রয়োজনীয় বৈশিষ্ট্যগুলি, যেমন কোড বিভাজন , এছাড়াও ডেভেলপারদের কাছ থেকে একটি কাস্টম সেটআপ এবং ম্যানুয়াল কাজ প্রয়োজন৷
• QuintoAndar এর 30 টিরও বেশি প্রতিক্রিয়া ওয়েব অ্যাপ্লিকেশন রয়েছে। এই অ্যাপ্লিকেশনগুলির আপডেটগুলি সরবরাহ করা এবং সর্বোত্তম অনুশীলন অনুসারে তাদের বজায় রাখা একটি কঠিন কাজ।

এপ্রোচ

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

Next.js-এ স্থানান্তরিত হচ্ছে

কন্ডোমিনিয়াম পৃষ্ঠার নতুন সংস্করণ Next.js এর সাথে প্রয়োগ করা হয়েছে। অ্যাপের অন্যান্য অংশ থেকে অনেকাংশে স্বাধীন হওয়ার কারণে, কনডমিনিয়াম কন্টেন্ট হাবটি একটি নতুন কাঠামো চেষ্টা করার জন্য একটি ভাল প্রার্থী বলে মনে হয়েছিল। আমরা মাইগ্রেশন প্রচেষ্টার মাত্রা বুঝতে এবং QuintoAndar-এর অন্যান্য রিঅ্যাক্ট অ্যাপগুলিকে প্রভাবিত না করে কীভাবে এর বৈশিষ্ট্যগুলি সাহায্য করতে পারে তা মূল্যায়ন করতে সক্ষম হব।

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

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

জাভাস্ক্রিপ্ট সম্পদ অপ্টিমাইজ করা

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

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

অন্যান্য JS অপ্টিমাইজেশন আগে থেকেই ছিল, যেমন Brotli এর সাথে স্ট্যাটিক কম্প্রেশন , যা BrotliWebpackPlugin ব্যবহার করে বিল্ড টাইমে করা হয়েছিল এবং অন্যান্য ধরনের স্ট্যাটিক রিসোর্সেও প্রয়োগ করা হয়েছিল। প্রথমে, আমরা CDN দ্বারা প্রদত্ত কম্প্রেশনের উপর নির্ভর করছিলাম এবং ব্রটলি জিজিপের তুলনায় JS আকার 18% কমিয়েছে। কিন্তু তারপরে, আমরা বিল্ড টাইমে ব্রটলি কম্প্রেশনে স্যুইচ করেছি, এবং 24% হ্রাস পেতে সক্ষম হয়েছি।

ইমেজ সম্পদ অপ্টিমাইজ করা

মোবাইল সংস্করণে ভাঁজের উপরে বেশিরভাগ এলাকা দখল করে আছে একটি নায়কের ছবি। এটি পৃষ্ঠার বৃহত্তম কন্টেন্টফুল পেইন্ট (LCP)ও হতে পারে।

পূর্বে, প্রতিক্রিয়াশীল চিত্রগুলি পরিবেশন করার জন্য সমস্ত ছবিতে ইতিমধ্যেই srcset এবং sizes বৈশিষ্ট্য ছিল। আমরা চাহিদা অনুযায়ী চিত্রের আকার পরিবর্তন করতে Thumbor ব্যবহার করেছি এবং দক্ষতার সাথে ক্যাশে করার জন্য আমাদের CDN কনফিগার করেছি।

আধুনিক মোবাইল ডিভাইসগুলিতে খুব উচ্চ পিক্সেল ঘনত্ব সহ ডিসপ্লে রয়েছে, যার অর্থ ব্রাউজারটি উপলব্ধ হলে ছবির 3x বা 4x সংস্করণ রেন্ডার করবে। রেজোলিউশন বাড়ার সাথে সাথে, মানুষের চোখের পক্ষে পার্থক্যগুলি উপলব্ধি করা কঠিন হয়ে যায়, তবে ফাইলের আকার নির্বিশেষে বৃদ্ধি পাবে। সর্বাধিক ইমেজ রেজোলিউশন ক্যাপিং ব্যবহারকারীর অভিজ্ঞতার সাথে আপস না করে ছবির আকার উন্নত করে। আমরা হিরো ইমেজটিকে সর্বাধিক 2x সংস্করণ পরিবেশন করার জন্য সীমিত করেছি, যা 3x সংস্করণের চেয়ে প্রায় 35% ছোট এবং 4x সংস্করণের চেয়ে 50% ছোট।

শেষ করার জন্য, আমরা LCP মেট্রিক উন্নত করার জন্য উন্মুখ হয়ে যত তাড়াতাড়ি সম্ভব ডাউনলোড এবং প্রদর্শন করার জন্য একটি প্রিলোডিং কৌশল ব্যবহার করেছি।

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

Next.js বিল্ট-ইন ইমেজ কম্পোনেন্টে এই অপ্টিমাইজেশানগুলির অনেকগুলি অন্তর্ভুক্ত রয়েছে যেমন রেসপন্সিভ রিসাইজিং এবং অগ্রাধিকার লোডিং। এই প্রকল্পের সময়, আমরা এই উপাদানটি ব্যবহার করার জন্য বিদ্যমান চিত্রগুলি স্থানান্তরিত করিনি, তবে আমরা এটিকে নতুন বৈশিষ্ট্যগুলিতে গ্রহণ করার পরিকল্পনা করছি৷

লেআউট শিফ্ট কমানো

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

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

ক্রমান্বয়ে পরিবর্তন ঘটাচ্ছে

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

1. প্রথম পর্যায়ে, নতুন সংস্করণটি কয়েকটি হাতে বাছাই করা URL-এর জন্য প্রকাশিত হয়েছিল, তাই প্রতিদিন মাত্র কয়েকশ ব্যবহারকারী সেগুলি দেখতে পাবে;
2. দ্বিতীয় পর্বে, এটি আরও পৃষ্ঠার জন্য প্রকাশিত হয়েছিল, প্রতিদিন কয়েক হাজার ব্যবহারকারীর জন্য অ্যাকাউন্টিং;
3. তৃতীয় এবং চূড়ান্ত পর্যায়ে, এটি সমস্ত পৃষ্ঠার জন্য প্রকাশিত হয়েছিল, এবং সমস্ত ব্যবহারকারীর জন্য রোল-আউট সম্পন্ন হয়েছিল৷

এই সময়ের মধ্যে, প্রকৌশল দল ক্রমাগত উৎপাদনে পৃষ্ঠার কর্মক্ষমতা পরিমাপ করে এবং উন্নতির জন্য কাজ করে। অতিরিক্তভাবে, দলটি নতুন এবং পূর্ববর্তী সংস্করণগুলির মধ্যে ব্যবসায়িক মেট্রিক্সের তুলনা করেছে। এই বৈধতা সময়ের মধ্যে ফলাফল প্রতিশ্রুতিশীল ছিল.

ফলাফল

দলটি কন্ডোমিনিয়াম পৃষ্ঠার বিরুদ্ধে ক্রমাগত ল্যাব পরীক্ষা চালানোর জন্য SpeedCurve ব্যবহার করেছে। এই মোবাইল সংস্করণের জন্য ফলাফল:

আমরা আমাদের প্রকৃত ব্যবহারকারীদের উপর প্রভাব পরীক্ষা করতে চেয়েছিলাম। Instana ওয়েবসাইট মনিটরিংয়ের মাধ্যমে সংগৃহীত ফিল্ড ডেটা ব্যবহার করে, আমরা রোল-আউটের আগে এবং পরে 1-মাসের সময়কাল দেখেছি। মোবাইল ব্যবহারকারীদের জন্য 75 তম পার্সেন্টাইল তুলনা করে, আমরা দেখেছি যে LCP 26% কমেছে, এবং FID 72% কমেছে।

PageSpeed ​​Insights গত 28 দিনের জন্য একটি ফিল্ড ডেটা রিপোর্ট প্রদান করে। মোবাইল ব্যবহারকারীদের জন্য একটি প্রতিবেদন তৈরি করার জন্য একা সর্বাধিক অ্যাক্সেস করা কনডোমিনিয়াম পৃষ্ঠায় যথেষ্ট ডেটা ছিল৷ নভেম্বর 2021 পর্যন্ত, সমস্ত কোর ওয়েব ভাইটাল "ভাল" বালতিতে রয়েছে।

প্রগতিশীল রোল-আউটের সময়, আমরা বাউন্স হারে একটি হ্রাস লক্ষ্য করেছি। যখন আমরা সমস্ত পৃষ্ঠার জন্য রিলিজ শেষ করেছি, গুগল অ্যানালিটিক্স বাউন্স হারে 46% হ্রাস, প্রতি সেশনে পৃষ্ঠাগুলিতে 87% বৃদ্ধি এবং গড় সেশনের সময়কাল 49% বৃদ্ধি দেখিয়েছে। অর্থপ্রদানের অনুসন্ধানের জন্য বাউন্স রেট হ্রাস আরও বড় ছিল, একটি 59% ড্রপ-এ পৌঁছেছে - এটি একটি ইতিবাচক লক্ষণ যখন এটি পে-পার ক্লিক (PPC) বিজ্ঞাপনগুলিতে বিনিয়োগের ক্ষেত্রে আসে৷

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

উপসংহার

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

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

এসইও টিমের প্রোডাক্ট ম্যানেজার পেড্রো কারমোকে বিশেষ ধন্যবাদ, ব্যবহারকারীর ডেটাতে ডাইভিং করার জন্য এবং এই কেস স্টাডিতে দেখা সমস্ত রূপান্তর বিশ্লেষণ তৈরি করার জন্য।