𝟳 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀
ধীরগতির ওয়েব অ্যাপগুলো খুব কমই খারাপ অ্যালগরিদমের কারণে ব্যর্থ হয়। এগুলো ব্যর্থ হয় কারণ আপনার কোড ব্রাউজারের সাথে কীভাবে যোগাযোগ করছে।
আমি ৩০০টিরও বেশি প্রোডাকশন অ্যাপ প্রোফাইল করেছি। আমি দেখেছি যে ৭৩% পারফরম্যান্স সমস্যা এই ৭টি উৎস থেকে আসে।
১. Layout thrashing
এটি তখন ঘটে যখন আপনি একটি লেআউট প্রপার্টি পড়েন এবং তারপরেই সরাসরি DOM-এ কিছু লেখেন। এটি ব্রাউজারকে বারবার লেআউট পুনরায় গণনা করতে বাধ্য করে।
• প্রভাব: ৪০-৬০% ধীর রেন্ডারিং।
• সমাধান: প্রথমে আপনার সমস্ত 'read' অপারেশন একসাথে করুন। তারপর requestAnimationFrame ব্যবহার করে সমস্ত 'write' অপারেশন একসাথে করুন।
২. Unbounded event listeners
একটি লিসেনার যোগ করার পর তা রিমুভ না করলে মেমরি লিক (memory leak) হতে পারে। সিঙ্গেল-পেজ অ্যাপের ক্ষেত্রে এটি একটি বড় সমস্যা।
• প্রভাব: প্রতি ঘণ্টায় ১৫-৩০% মেমরি বৃদ্ধি।
• সমাধান: একটি কম্পোনেন্ট আনমাউন্ট (unmount) হওয়ার সময় লিসেনারগুলো পরিষ্কার করতে AbortController ব্যবহার করুন।
৩. Synchronous DOM reads in loops
লুপের ভেতরে offsetWidth-এর মতো প্রপার্টি পড়া, যা একই সাথে DOM-এ কিছু লেখে, তা ক্রমাগত রিফ্লো (reflow) ঘটায়।
• প্রভাব: ২০-৪০% ফ্রেম ড্রপ।
• সমাধান: লুপ শুরু করার আগেই আপনার লেআউট ভ্যালুগুলো একটি ভেরিয়েবলে ক্যাশ (cache) করে রাখুন।
৪. Missing requestAnimationFrame batching
স্ক্রল বা রিসাইজ ইভেন্টের সময় সরাসরি DOM পরিবর্তন করলে তা খুব ঘনঘন ঘটে।
• প্রভাব: স্ক্রল করার সময় ১০-২৫% জ্যাঙ্ক (jank)।
• সমাধান: পেইন্ট সাইকেলের (paint cycle) সাথে সিঙ্ক করার জন্য আপনার স্ক্রল হ্যান্ডলারগুলোকে requestAnimationFrame-এর মধ্যে রাখুন।
৫. Large JSON.parse calls বিশাল JSON ফাইল পার্স (parse) করা মেইন থ্রেডকে ব্লক করে দেয়। এর ফলে ইনপুট ল্যাগ (input lag) তৈরি হয়। • প্রভাব: প্রতি কলে ৫০-২০০ms ফ্রিজ। • সমাধান: মেইন থ্রেডের বাইরে ডেটা পার্স করার জন্য Web Workers ব্যবহার করুন।
৬. Complex CSS selector matching গভীরভাবে নেস্টেড বা জটিল সিলেক্টর স্টাইল রিক্যালকুলেশনকে ধীর করে দেয়। • প্রভাব: ৫-১৫% অতিরিক্ত স্টাইল টাইম। • সমাধান: আপনার CSS স্ট্রাকচার সহজ করুন এবং ফ্ল্যাট (flatter) সিলেক্টর ব্যবহার করুন।
৭. Duplicate bundle chunks
অপ্টিমাইজ না করা বান্ডেল ব্যান্ডউইথ অপচয় করে।
• প্রভাব: ১০০-৫০০KB অতিরিক্ত ট্রান্সফার।
• সমাধান: ডুপ্লিকেট কোড খুঁজে বের করতে এবং সরিয়ে ফেলতে webpack-bundle-analyzer-এর মতো টুল ব্যবহার করুন।
আপনার অগ্রগতি কীভাবে পরিমাপ করবেন: • Chrome DevTools ওপেন করুন এবং Performance ট্যাবে যান। • ৫ সেকেন্ডের একটি সেশন রেকর্ড করুন। • Main flame চার্টে দীর্ঘ টাস্কগুলো (long tasks) খুঁজুন। • একটি সমাধান প্রয়োগ করুন এবং Rendering ও Painting টাইম তুলনা করুন।
আপনার Core Web Vitals স্কোর উন্নত করতে এই ক্ষেত্রগুলোতে মনোযোগ দিন।