অপটিমাইজ করার আগে মাপুন: Paul Irish-এর গতি ওয়ার্কফ্লো

কেন আগে অপটিমাইজ করা সাধারণত সময় নষ্ট করে\n\nপারফরম্যান্স কাজটি এলোমেলো মনে হয় যখন আপনি ফিক্স দিয়ে শুরু করেন। একদিন ফাইল মিনিফাই করেন, পরের দিন ক্যাশিং টুইক করেন, তারপর একটি লাইব্রেরি সরিয়ে ফেলেন। কখনও কখনও এটি সাহায্য করে। অনেক সময় কিছুই বদলায় না, এবং আপনাকে বুঝতে অসুবিধা হয় কেন।\n\nসবচেয়ে বড় ঝুঁকি হলো ভুল জিনিস অপ্টিমাইজ করা। যদি পেজটি ধীর হয় কারণ মেইন থ্রেড JavaScript দ্বারা ব্লক হচ্ছে, তাহলে ছবি কমপ্রেস করতে ঘণ্টার পর ঘণ্টা ব্যয় করা প্রায় কোনো প্রভাব ফেলবে না। অথবা আপনি এমন কিছু দ্রুত করতে পারেন যা ব্যবহারকারী লক্ষ্যই করে না, যখন প্রকৃত বিলম্বটি একটি দীর্ঘ API কল, বারবার রিফ্লো করা লেআউট, বা একটি একক ব্লকিং স্ক্রিপ্ট।\n\nমনোদৈহিক বিচারেও একটি ফাঁদ আছে। “ফিলসে দ্রুত” প্লেসবো পরিবর্তন (যেমন spinner) থেকে আসতে পারে কিংবা ভিন্ন নেটওয়ার্ক, ডিভাইস বা সময়ে পরীক্ষা করার কারণে। “ইস্ দ্রুত” মানে একই কন্ডিশনে একই অ্যাকশনে ভাল সংখ্যাগুলো এসেছে।\n\nএকটি সরল প্রতিশ্রুতি এইগুলোর অনেকটা ঠিক করে: অপটিমাইজ করার আগে মাপুন, তারপর সিদ্ধান্ত নিন। যখন আপনি পারফরম্যান্সকে মাপার সমস্যা হিসেবে দেখেন, আপনি অনুমান করা বন্ধ করে শেখা শুরু করেন।\n\nএকটি ব্যবহারিক লুপ এরকম: একটি ব্যবহারকারী অ্যাকশন বাছুন, পুনরাবৃত্তিযোগ্য শর্তে একটি বেসলাইন নিন, একটিই পরিবর্তন করুন যেটা আপনি ব্যাখ্যা করতে পারবেন, তারপর পুনরায় মাপুন এবং সংখ্যাগুলো উন্নত হলে পরিবর্তন রাখুন।\n\n## Paul Irish এবং প্রথমে মাপার অভ্যাস\n\nPaul Irish ওয়েব পারফরম্যান্সের একজন পরিচিত কণ্ঠ। ব্রাউজার টুলিং ও পারফরম্যান্স নির্দেশনার মাধ্যমে তিনি একটি সরল ধারণাকে জনপ্রিয় করেছেন: আপনার প্রথম কাজ হচ্ছে অনুমান না করে প্রমাণ করা যে কী ধীর।\n\nএমন মানসিকতা টিমের গতিশীলতা বদলে ফেলে। “ছবিই সবসময় সমস্যা” বা “এটি অবশ্যই ফ্রেমওয়ার্ক” ধাঁচের অভ্যাস থেকে কাঁটাছেঁড়া করে আপনি প্রমাণ দিয়ে শুরু করেন। যখন আপনি একটি টাইমলাইন, একটি ধীর কুয়েরি, বা একটি বড় টাস্ক দেখাতে পারেন, তখন কথোপকথন দোষারোপ থেকে সমাধানের দিকে যায়।\n\n“অপটিমাইজ করার আগে মাপুন” বিতর্ক ঠান্ডা করে কারণ এটি সম্মিলিত নিয়ম তৈরি করে: কী মাপছেন ঐ নিয়ে সম্মতি, “ভাল” কী বলতে মানে কী তাও সম্মতি, এবং শুধুমাত্র সংখ্যাগুলো বদলে গেলে উদযাপন।\n\nএটি ছোট সাইট ও বড় অ্যাপে দুটো ক্ষেত্রেই কাজ করে। একটি বেসলাইন একটি মার্কেটিং পেজে এলোমেলো মাইক্রো-অপ্টিমাইজেশন বন্ধ করে দিতে পারে। বড় প্রোডাক্টে, সর্বজনীন মাপ নিয়মিত রাখলে পারফরম্যান্স কখনো অনন্ত টু-ডু তালিকায় পরিণত হয় না।\n\nএটি বাস্তব করার সহজ একটি উপায়: পারফরম্যান্সকে একটি বাগ রিপোর্টের মতো বিবেচনা করুন: স্পষ্ট পুনরুত্পাদনের ধাপ, আপনি যে মেট্রিক দেখলেন, এবং একটি পরিবর্তন যা একটি ফলাফলের সাথে জড়িত। যদি দুইজনের মতামত না মেলে, মাপ পুনরায় চালান এবং ডেটাকে সিদ্ধান্ত নিতে দিন।\n\n## পারফরম্যান্সকে প্রথমে ইনস্ট্রুমেন্টেশন সমস্যা হিসেবে দেখা\n\nপ্রথমে পারফরম্যান্সকে ইনস্ট্রুমেন্টেশন সমস্যা হিসেবে বিবেচনা করুন: ব্যবহারকারীরা প্রকৃতপক্ষে কী অভিজ্ঞতা করছে তা পর্যবেক্ষণের উপায় যোগ করুন। যদি আপনি এটি দেখতে না পান, আপনি মতামতের উপর বিতর্ক করবেন, প্রমাণের উপর নয়। এটাই “প্রথমে মাপুন” এর বাস্তব অর্থ।\n\nইনস্ট্রুমেন্টেশন জটিল হওয়ার দরকার নেই। এটি কয়েকটি সিগনাল ধারাবাহিকভাবে সংগ্রহ করা, একই জায়গায়, যাতে আপনি বেসিক প্রশ্নগুলোর উত্তর দিতে পারেন:\n\n- কী ধীর লাগে?\n- সময় কোথায় যায়?\n- আমাদের পরিবর্তন কি সাহায্য করেছে?\n\nসাধারণভাবে আপনি দুই ধরনের ডেটা চান।\n\nল্যাব ডেটা একটি কন্ট্রোলড সেটআপে ক্যাপচার হয়: একটি নির্দিষ্ট ল্যাপটপ বা টেস্ট ডিভাইস, একটি স্থিতিশীল নেটওয়ার্ক প্রোফাইল, প্রতিটি রানে একই ধাপ। ডিবাগিংয়ের জন্য এটা দারুণ কারণ আপনি প্রয়োজনে ধীরতা পুনরুত্পাদন করতে পারেন।\n\nরিয়েল ইউজার ডেটা হচ্ছে প্রকৃত পরিবেশে মানুষ যা অভিজ্ঞতা করে: ভিন্ন ডিভাইস, অবস্থান ও সংযোগের গুণগত পার্থক্য। প্রায়োরিটাইজ করার জন্য এটা ভাল কারণ এটি দেখায় কি প্রকৃত ব্যবহারকারীদের কষ্ট দেয়, কেবল একটি টেস্ট রান নয়।\n\nবিশেষজ্ঞ না হলেও আপনি পেজ লোড মাইলস্টোন (যেমন প্রথম কন্টেন্ট দেখা), লং টাস্ক ও মেইন-থ্রেড ব্লকিং, ধীর নেটওয়ার্ক রিকোয়েস্ট, ব্যয়বহুল রেন্ডারিং কাজ (লেআউট, স্টাইল, পেইন্ট), এবং সার্ভার রেসপন্স সময় মাপতে পারবেন।\n\nএগুলো সাধারণত কয়েকটি জায়গায় থাকে: ল্যাব প্রোফাইলিংয়ের জন্য ব্রাউজার ডেভটুলস, ব্যাকএন্ড টাইমিং-র জন্য সার্ভার লোগ ও ট্রেস, এবং রিয়েল ইউজার ডেটার জন্য অ্যানালিটিক্স বা RUM ড্যাশবোর্ড। উদাহরণ: যদি চেকআউট ধীর লাগে, DevTools দেখাতে পারে ব্রাউজার একটি বড় কার্ট UI রেন্ডার করছে যখন সার্ভার লোগ API-কে দ্রুত দেখায়। ইনস্ট্রুমেন্টেশন না থাকলে আপনি ব্যাকএন্ড অপ্টিমাইজ করতে পারেন এবং প্রকৃত সমস্যা ঠিক করবেন না।\n\n## ধাপ 1: একটি পুনরাবৃত্তিযোগ্য বেসলাইন সেট করুন\n\nঅপটিমাইজ করার আগে মাপার জন্য আপনাকে একটি বিশ্বাসযোগ্য আরম্ভ বিন্দু দরকার। একটি বেসলাইন মানে একই অ্যাকশন, একই উপায়ে, একই শর্তে মাপা।\n\nএকটি বাস্তব ব্যবহারকারী জার্নি দিয়ে শুরু করুন, না যে “সাইটটা সবই”। একটাকে বেছে নিন যা এক বাক্যে বর্ণনা করা যায়, যেমন “হোমপেজ খুলে প্রথম প্রোডাক্ট গ্রিড পর্যন্ত স্ক্রল করা” বা “লগইন করে ড্যাশবোর্ডে পৌঁছানো।” সংকীর্ণ রাখা সংখ্যাগুলো স্থিতিশীল রাখে এবং পরবর্তী ধাপগুলিকে স্পষ্ট করে।\n\nপরবর্তী, 1 থেকে 3 মেট্রিক বাছুন যা জার্নির সাথে মেলে। পেজ ভিউয়ের জন্য সাধারণ যুগল হল LCP (মূল কনটেন্ট কত দ্রুত দেখায়) এবং TTFB (সার্ভার কত দ্রুত উত্তর দেয়)। চেকআউটের মত ফ্লো হলে আপনি প্রথম স্টেপ কমপ্লিট করার সময় ও পেমেন্ট কলের API রেসপন্স টাইম ট্র্যাক করতে পারেন। বেশি মেট্রিক নেওয়া চেরি-পিকিংকে সহজ করে।\n\nপরীক্ষার সেটআপ লিখে রাখুন যাতে অন্য কেউ পরে এটি পুনরুত্পাদন করতে পারেন। ছোট পার্থক্য ফলাফল পাল্টাতে পারে:\n\n- ডিভাইস ও ব্রাউজার (ভার্সনসহ)\n- নেটওয়ার্ক (wifi বনাম 4G, থ্রটলিং অন/অফ)\n- ক্যাশ স্টেট (কোল্ড বনাম ওয়ার্ম)\n- লোকেশন ও টেস্ট ডেটা (রিজিয়ন, অ্যাকাউন্ট টাইপ, কার্ট সাইজ)\n- রান সংখ্যা (উদাহরণ: 5 রান এবং মিডিয়ান নিন)\n\nশেষে, আপনার দর্শকদের জন্য “ভাল পর্যাপ্ত” কী তা সংজ্ঞায়িত করুন। উদাহরণ: “মাঝারি-রেঞ্জ ফোনে 4G-এ LCP 2.5 সেকেন্ডের নিচে।” যদি আপনি Koder.ai ব্যবহার করেন, টেস্টের আগে একটি স্ন্যাপশট নিয়ে রাখা বেসলাইনকে একটি নির্দিষ্ট ভার্সনের সাথে যুক্ত রাখতে সাহায্য করে।\n\n## ধাপ 2: ইচ্ছাকৃতভাবে ধীরতা পুনরুত্পাদন করুন\n\nকোনো প্রোফাইলিং শুরু করার আগে সমস্যাটিকে আবার অনুরোধে ঘটান। যদি আপনি এটা পুনরায় করতে না পারেন, আপনি ফলাফল বিশ্বাস করতে পারবেন না।\n\nমানুষ যা অনুভব করে সেটি থেকেই শুরু করুন, আপনি যা অনুমান করেন তা থেকে নয়। এটা কি ধীর প্রথম রেন্ডার? একটি ক্লিক যা হ্যাং করে কিছুই পরিবর্তন দেখায় না? ফর্ম সাবমিট করার পরে দীর্ঘ প্রতীক্ষা? ব্যবহারকারীরা যেই মুহূর্তে অভিযোগ করে সেই মুহূর্তটাকে বেছে নিন।\n\nদ্রুত একটি রান করে নিশ্চিত করুন ধীরতা সত্য ও পুনরাবৃত্তযোগ্য। সবকিছু একই রাখুন: একই পেজ, একই ডিভাইস, সম্ভব হলে একই নেটওয়ার্ক। তারপর ট্রিগার এবং সঠিক মুহূর্তটি লিখে রাখুন যেমন “Pay ক্লিকের পরে বাটন এক সেকেন্ড ফ্রিজ করে” বা “স্ক্রল করার সময় পণ্য লিস্ট দেখা দিলে স্টাটার হয়।”\n\nপুনরাবৃত্তিযোগ্য রাখার সরল উপায় একটি ছোট স্ক্রিপ্ট: ফ্রেশ ট্যাব থেকে পেজ খুলুন, ওই ল্যাগি অ্যাকশনটি করে দেখুন, ঠিক কোন পয়েন্টে ধীরতা হয় তা নোট করুন, তারপর পুনরায় একবার চালিয়ে নিশ্চিত করুন।\n\nএক বা দুইটি বেসলাইন রেকর্ডিং নিন, ডজনগুলো নয়। আপনাকে ঠিক মাত্রই প্রমাণ নিতে হবে বলে বলতে যাতে পারেন, “হ্যাঁ, ধীরতা ঘটছে, এবং এটি ঠিক এখানে ঘটছে।”\n\n## ধাপ 3: প্রধান বটলনেক খুঁজতে প্রোফাইল করুন\n\nএকবার আপনি ধীরতা পুনরুত্পাদন করতে পারলে, অনুমান বন্ধ করুন। একটি প্রোফাইলার খুলুন (অধিকাংশের জন্য ব্রাউজারের Performance প্যানেল) এবং ধীর ইন্টারঅ্যাকশনের একটি রান রেকর্ড করুন। লক্ষ্য সব সমস্যার সমাধান খুঁজে বের করা নয়; লক্ষ্য হলো সময় কোথায় যাচ্ছে তা শেখা।\n\nবড় সময় ব্লকগুলো থেকেই শুরু করুন। ছোট স্পাইকগুলো বাস্তব হতে পারে, কিন্তু একা তারা সাধারণত একটি লক্ষণীয় বিলম্ব ব্যাখ্যা করে না।\n\nরেকর্ডিং পড়ার একটি ব্যবহারযোগ্য উপায় হলো সময়কে কয়েকটি বাকেট-এ ভাগ করা: নেটওয়ার্ক ও লোডিং (রিকোয়েস্ট অপেক্ষা), মেইন থ্রেড স্ক্রিপ্টিং (লম্বা JavaScript টাস্ক), রেন্ডারিং ও পেইন্ট (লেআউট ও স্টাইল কাজ), আইডল গ্যাপ (কিছু অন্যকিছুর অপেক্ষা), এবং পুনরাবৃত্ত কাজ (একই ব্যয়বহুল ধাপ বারবার)।\n\nএকটি সাধারণ ভুল হলো ধীর সার্ভার রেসপন্সকে ক্লায়েন্ট কাজের সাথে ভুলে ফেলা। যদি টাইমলাইনে রিকোয়েস্ট চলাকালীন দীর্ঘ গ্যাপ থাকে, আপনার বটলনেক নেটওয়ার্ক বা ব্যাকএন্ড হতে পারে। যদি লম্বা টাস্ক মেইন থ্রেডে থাকে, তাহলে এটা ফ্রন্টএন্ড সমস্যা, এমনকি নেটওয়ার্ক দ্রুত হলেও।\n\nকিছু বদলানোর আগে আপনি যা দেখেছেন তার উপর ভিত্তি করে একটি সংক্ষিপ্ত, টেস্টেবল হাইপোথিসিস লিখুন। উদাহরণ: “API রেসপন্স আসার পরে JSON পার্সিং মেইন থ্রেড ব্লক করছে, তাই পেজ ধীর লাগছে।” ওই বাক্যটি পরবর্তী ধাপ সাজায়।\n\n## ধাপ 4: উদ্দেশ্যপ্রসূতভাবে একটিই পরিবর্তন করুন\n\nসম্ভাব্য বটলনেক শনাক্ত করার পরে ‘সবকিছু ঠিক করে ফেলি’ এই লোভ সামলান। কারণ ও প্রভাব সংযুক্ত করার জন্য একটিই ভেরিয়েবল পরিবর্তন করুন।\n\nপরিবর্তনটি ছোট রাখুন এবং সহজে আনডু-able রাখুন। বড় রিরাইট ফলাফলকে ঝাপসা করে দেয়: পারফরম্যান্স ভালো হলে আপনি জানবেন না কেন, খারাপ হলে রোলব্যাক ঝুঁকিপূর্ণ।\n\nভালো এক-জিনিস পরিবর্তনের উদাহরণ: একটি থার্ড-পার্টি স্ক্রিপ্ট বিল্ডিং ব্লক করছে সেটি ডিফার করা বা সরানো, ধীর একটি বড় ইমেজ কমপ্রেস করা, একটি ব্যয়বহুল ডেটাবেস কুয়েরিতে ক্যাশ যোগ করা, একটি ভারী UI কম্পোনেন্ট ভাগ করে প্রারম্ভিক রেন্ডার কম করা, বা প্রোফাইলারে দেখা একটি হট লুপে কাজ কমানো।\n\nকোড স্পর্শ করার আগে আপনি কি পরিবর্তন করবেন, কেন বেছে নিলেন, এবং কোন মানটি উন্নত হতে আশা করছেন তা লিখে রাখুন (উদাহরণ: “মেইন-থ্রেড সময় কমানো” বা “DB সময় অর্ধেক করা”)।\n\nআপনার টিম যদি এমন প্ল্যাটফর্ম ব্যবহার করে যা স্ন্যাপশট ও রোলব্যাক সমর্থন করে (যেমন Koder.ai), পরিবর্তনের ঠিক আগে স্ন্যাপশট নিন যেন “ছোট ও রিভার্সিবল” হওয়ার কথা সত্যি হয়, কেবল আকাঙ্খা নয়।\n\n## ধাপ 5: প্রভাব যাচাই করুন এবং গোলমেলে সিদ্ধান্ত এড়ান\n\nআপনি একটিই পরিবর্তন করেছেন। এখন প্রমাণ করুন এটি সাহায্য করেছে।\n\nবেসলাইনের জন্য ব্যবহৃত একই সেটআপ পুনরায় চালান: একই ডিভাইস, একই ব্রাউজার ভার্সন, একই রুট ও ফ্লো, এবং একই রান সংখ্যা। একই মেট্রিক ব্যবহার করে আগে ও পরে তুলনা করুন। মাঝপথে নতুন মেট্রিক যোগ করবেন না কেবল কারণ সেগুলো ভাল দেখায়।\n\nশোর (noise) দলবিবাদ তৈরির সবচেয়ে সাধারণ কারণ। ওয়ার্ম বনাম কোল্ড ক্যাশ, এক্সটেনশন বা ব্যাকগ্রাউন্ড প্রসেস, ভিন্ন নেটওয়ার্ক কন্ডিশন বা VPN সেটিংস, সার্ভার বৈচিত্র্য (শান্ত মিনিট বনাম ব্যস্ত মিনিট), এবং ডিপ্লয়ের ঠিক পরে বনাম স্থিতিশীল অবস্থার পার্থক্য—এসব খেয়াল রাখুন।\n\nযদি মিডিয়ান উন্নত হয় কিন্তু খারাপতম কেস আরও খারাপ হয়, এটা একটি বাস্তব ট্রেডঅফ। আপনার ব্যবহারকারীদের জন্য কী গুরুত্বপূর্ণ তা ঠিক করুন: পরিবর্তন রাখবেন, রিভার্ট করবেন, অথবা নতুন হাইপোথিসিস লিখে আবার পরীক্ষা করবেন।\n\n## সাধারণ ফাঁদ যা পারফরম্যান্স কাজকে অসম্ভব মনে করায়\n\nপারফরম্যান্স কাজ বিভ্রান্তিকর হয়ে ওঠে যখন আপনি ভুল জিনিস মাপেন বা একযোগে অনেক কিছু বদলে ফেলেন। আপনি প্রচুর শ্রম ব্যয় করে স্পষ্ট জয়ে পৌঁছতে না পারলেও আপনার অ্যাপ উন্নত হতে পারে।\n\nএকটি সাধারণ ভুল হল একটি একক স্কোরকে লক্ষ্য করা। স্কোরগুলো কাজে লাগতে পারে, কিন্তু ব্যবহারকারী “একটা 92” অনুভব করে না। তারা অনুভব করে “পেজ 2 সেকেন্ডে কনটেন্ট দেখায়” বা “Buy ট্যাপ করলে সাথে সাড়া দেয়।” একটি ব্যবহারকারী-দৃশ্যমান আউটকাম বেছে নিয়ে তা নিয়মিত মাপুন।\n\nআরেকটি ফাঁদ হলো কেবল শক্তিশালী ল্যাপটপে টেস্ট করা। অনেক ধীরতা মাঝারি-রেঞ্জ ফোন, খারাপ নেটওয়ার্ক, বা CPU ব্যস্ত থাকার সময়ই দেখা যায়। আপনি যদি কেবল আপনার সেরা ডিভাইসে প্রোফাইল করেন, আপনি বটলনেক মিস করতে পারেন।\n\nঅবজ্ঞা সাধারণত এমন প্যাটার্ন থেকে আসে: সহজ যা অপটিমাইজ করা যায় সেটাই করা হচ্ছে, একাধিক টুইক একসাথে বান্ডল করা, প্রতিবার টেস্ট পথ বদলা, রি-টেস্ট না করে “ফিলসে দ্রুত” বলে বিজয় ঘোষণা, বা একই বেসলাইন ছাড়া সিদ্ধান্ত নেওয়া।\n\nআপনি যদি Koder.ai–এ অ্যাপ বানান, একই শৃঙ্খল প্রযোজ্য: এক পরিবর্তন করুন, তারপর একই ফ্লোতে যাচাই করুন যাতে ফলাফল বিশ্বাসযোগ্য হয়।\n\n## একটি দ্রুত চেকলিস্ট যা আপনি প্রতিবার পুনরায় ব্যবহার করতে পারেন\n\nযদি আপনি একটাই অভ্যাস রাখেন, এটি রাখুন: অপটিমাইজ করার আগে মাপুন। লক্ষ্য অনন্ত ডেটা নয়, একটি পুনরাবৃত্তিযোগ্য লুপ যা আপনি বিশ্বাস করতে পারেন।\n\nসঠিক ব্যবহারকারী জার্নি নাম দিন। “হোমপেজ ধীর” অস্পষ্ট। “প্রোডাক্ট পেজ থেকে Buy ক্লিক করে কনফার্মেশন দেখা” আপনাকে একটি পুনরাবৃত্তি করা ক্লিক-পথ দেয়।\n\nএই চেকলিস্টটি ব্যবহার করুন:\n\n- জার্নিটা একটি ছোট স্ক্রিপ্ট হিসেবে লিখে রাখুন যেন কেউ তা পুনরাবৃত্তি করতে পারে।\n- সেটআপ ফ্রিজ করুন (ডিভাইস, ব্রাউজার, নেটওয়ার্ক, সম্ভব হলে লোকেশন)।\n- একটি বেসলাইন সংখ্যা ও একটি বেসলাইন রেকর্ডিং নিন।\n- প্রোফাইল করুন, সবচেয়ে বড় বটলনেক বাছুন, এবং শুধু একটিই পরিবর্তন করুন।\n- পুনরায় টেস্ট করুন, নতুন সংখ্যা রেকর্ড করুন, এবং সিদ্ধান্ত লিখে রাখুন।\n\nপারফরম্যান্স কাজের শান্ত সংস্করণটি সোজা: এক পথ, এক সেটআপ, এক পরিবর্তন, এক যাচাই করা আউটকাম।\n\n## উদাহরণ: অনুমান না করে ধীর চেকআউট ঠিক করা\n\nএকটি সাধারণ অভিযোগ: কাস্টমার “Pay” ক্লিক করার পরে চেকআউট ধীর লাগে। লোকেরা অনুমান করতে শুরু করে (ছবি, ফন্ট, বাটন)। পরিবর্তে এটিকে একটি পরীক্ষা হিসেবে বিবেচনা করুন যেটি আপনি পুনরাবৃত্তি করতে পারবেন।\n\nএকটি বেসলাইন সেট করুন যা আপনি বারবার চালাতে পারেন। একটি ডিভাইস ও একটি পথ বেছে নিন (cart → checkout → Pay → confirmation)। নেটওয়ার্ক থ্রটলিং চালান (উদাহরণ: Fast 3G) এবং প্রতিটি রানেই একই রাখুন। একটি সহজ সংখ্যা মাপুন: Pay ক্লিক থেকে কনফার্মেশন স্ক্রিন দেখার সময়।\n\nতারপর সেই একই মুহূর্ত প্রোফাইল করুন এবং দেখুন সময় কোথায় যাচ্ছে। সাধারণত আপনাকে তিনটি বাকেটের মধ্যে সিদ্ধান্ত নিতে হবে: নেটওয়ার্ক (একটি দীর্ঘ রিকোয়েস্ট বা অনেক রিকোয়েস্ট), সার্ভার (পেমেন্ট কল ধীর, ব্রাউজার অনির্বাচিতভাবে_idle), বা মেইন থ্রেড (ব্রাউজার JavaScript চালাতে ব্যস্ত থাকায় UI আপডেট করতে পারে না)।\n\nকল্পনা করুন প্রোফাইল দেখায় Pay ক্লিকের পরে ব্রাউজার একটি অ্যানালিটিক্স রিকোয়েস্ট ও একটি ফ্রড-চেক স্ক্রিপ্ট কল পাঠাচ্ছে, এবং পেমেন্ট রিকোয়েস্ট তাদের পিছনে ওয়েট করছে। এটা “সবকিছু দ্রুত করুন” সমস্যা নয়—এটা একটি ব্লকিং স্টেপ।\n\nউদ্দেশ্যপ্রসূতভাবে একটিই পরিবর্তন করুন। উদাহরণ: পেমেন্ট রিকোয়েস্টটি অবিলম্বে শুরু করতে দিন, এবং কনফার্মেশন স্ক্রিন দেখানোর পরে অ্যানালিটিক্স পাঠান।\n\nসেম সেটআপ দিয়ে যাচাই করুন: একই থ্রটলিং, একই ধাপ, একাধিক রান। যদি কনফার্মেশন সময় কমে এবং এরর বাড়ে না, আপনি প্রকৃত জয় পেয়েছেন। এছাড়া দ্রুত চেক করুন যে আপনি রিফান্ড, রিট্রাই বা ডাবল-সাবমিট সুরক্ষা ভাঙেননি।\n\n## পরবর্তী ধাপ: এই ওয়ার্কফ্লোকে টিম অভ্যাস করুন\n\nপারফরম্যান্স তখনই নিয়ন্ত্রিত থাকে যখন এটা রুটিন ও পরিত্রাণের কাজ নয়। সবক্ষণ মাপা ডিফল্ট আচরণ করুন, এমনকি যখন সবকিছু ঠিকঠাক মনে হয়।\n\nকিছু ছোট মেট্রিক সেট বেছে নিন যেগুলো আপনার টিম সবসময় ট্র্যাক করবে। ধারাবাহিক রাখুন যাতে ট্রেন্ড সহজে ধরা যায়:\n\n- পেজ লোড: Largest Contentful Paint (LCP)\n- ইন্টারঅ্যাকটিভিটি: Interaction to Next Paint (INP)\n- স্থিতিশীলতা: Cumulative Layout Shift (CLS)\n- API স্পিড: কী এন্ডপয়েন্টের p95 রেসপন্স টাইম\n- এরর: ক্লায়েন্ট ও সার্ভার এরর রেট\n\nএই মেট্রিকগুলোর উপর ভিত্তি করে একটি লুপ তৈরি করুন। সাপ্তাহিক বেসলাইন চেক প্রায়ই যথেষ্ট। যখন কোন মেট্রিক ড্রিফট করে, সেটাই ট্রিগার হয়ে পুনরায় ধীরতা পুনরুত্পাদন করুন, প্রোফাইল করুন, একটিই পরিবর্তন করুন, এবং প্রভাব যাচাই করুন।\n\nআপনি যা মাপলেন (ডিভাইস, নেটওয়ার্ক, এবং বিল্ডসহ), আপনি কী পরিবর্তন করলেন, এবং সংখ্যাগুলো পরে কী করেছে—এসব সংরক্ষণ করার জন্য একটি সহজ পারফরম্যান্স লগ রাখুন যা আপনার টিম বাস্তবে ব্যবহার করে।\n\nযদি আপনি Koder.ai দিয়ে অ্যাপ বানান, Planning Mode আপনাকে পরিবর্তন করার আগে জার্নি ও মেট্রিক লিখতে সাহায্য করবে। তারপর স্ন্যাপশট ও রোলব্যাক ব্যবহার করে পরীক্ষা নিরাপদ রাখুন: স্ন্যাপশট নিন, এক পরিবর্তন প্রয়োগ করুন, পুনরায় টেস্ট করুন, এবং ফল গোলমেলে বা খারাপ হলে রোলব্যাক করুন।\n\nপরিকল্পনা বা রিভিউ-এ একটি প্রশ্ন সংস্কৃতি স্বাস্থ্য বজায় রাখে: “আমরা কী মাপলাম, এবং এটি কী পরিবর্তন করল?”