প্রকাশিত: এপ্রিল 04, 2025
বাস্তব জগতে পারফরম্যান্সের সমস্যাগুলি সমাধান করার অর্থ হল আপনার বিকাশের পরিবেশ এবং আপনার ব্যবহারকারীদের বিভিন্ন পারফরম্যান্স অভিজ্ঞতার মধ্যে ব্যবধান পূরণ করা। এই পোস্টে, আমরা Chrome DevTools-এ নতুন বৈশিষ্ট্যগুলি দেখব যা আপনাকে অনুমানের পরিবর্তে বাস্তব ডেটার উপর আপনার কার্যক্ষমতা ডিবাগিং সিদ্ধান্তের উপর ভিত্তি করে আরও বেশি সাহায্য করে।
প্রত্যাশা ক্রমাঙ্কন
Chrome 134 থেকে শুরু করে, DevTools-এ CPU থ্রটলিং ক্যালিব্রেশন অন্তর্ভুক্ত রয়েছে, যা সঠিক CPU থ্রটলিং স্তর বাছাই করার অনিশ্চয়তা দূর করার জন্য একটি নতুন টুল। একবার ক্রমাঙ্কনটি চালান, এবং DevTools আপনার জন্য "নিম্ন-স্তরের মোবাইল" এবং "মধ্য-স্তরের মোবাইল" থ্রটলিং প্রিসেট তৈরি করবে, আপনার ডেভেলপমেন্ট মেশিনের জন্য নির্দিষ্ট।
ওয়েব পারফরম্যান্সের কাজের একটি সাধারণ অমিল হল যে, ডেভেলপার হিসাবে, আমরা প্রায়ই দ্রুত ডেস্কটপ ডিভাইসে সাইট তৈরি করি যখন আমাদের অনেক ব্যবহারকারী আরও শালীন মোবাইল ডিভাইসে থাকে। কর্মক্ষমতা সমস্যা ট্র্যাক করা কঠিন হতে পারে যখন এটি শুধুমাত্র অনেক ধীর CPU সহ একটি ডিভাইসে ঘটে।
গোল্ড স্ট্যান্ডার্ড হল একটি বাস্তব মোবাইল ডিভাইসে রিমোট ডিবাগিং , কিন্তু প্রায় এক দশক ধরে ক্রোম বিকাশের সময় দ্রুত এবং হালকা ওজনের পুনরাবৃত্তি চক্রের জন্য CPU থ্রটলিংকেও সমর্থন করেছে।
কিন্তু কোন সিপিইউ থ্রটলিং লেভেলটি বেছে নেওয়া উচিত? 4x? 20x ? আপনি কিভাবে জানেন যে আপনার সাইট পরিদর্শন করা ডিভাইসের প্রকারের সাথে কোনটি সেরা মেলে? এবং কীভাবে আপনার নিজের মেশিনের গতি সেই সিদ্ধান্তকে পরিবর্তন করে, আপনি একটি উচ্চ-সম্পদ ওয়ার্কস্টেশনে আছেন বা যেতে যেতে একটি 8-বছর বয়সী Chromebook ব্যবহার করছেন?
থ্রটলিং ক্রমাঙ্কন প্রক্রিয়া
যখন পারফরম্যান্স প্যানেল খোলা হয়, তখন পরিবেশ সেটিংসে CPU থ্রটলিং স্তর সেট করার জন্য একটি ড্রপ-ডাউন থাকে। আপনি যদি আগে ক্রমাঙ্কনটি না চালিয়ে থাকেন তবে আপনি ড্রপ-ডাউনে "ক্যালিব্রেটেড প্রিসেট" এর অধীনে দুটি নিষ্ক্রিয় বিকল্প এবং একেবারে নীচে একটি ক্যালিব্রেট… বিকল্প দেখতে পাবেন।
এটি নির্বাচন করা আপনাকে সেটিংসে CPU থ্রোটলিং প্রিসেটগুলিতে নিয়ে আসবে (আপনি সরাসরি সেখানেও যেতে পারেন)।
- ক্যালিব্রেট বোতামে ক্লিক করুন
- অবিরত ক্লিক করুন যখন এটি আপনাকে সতর্ক করে যে এটি বর্তমান পৃষ্ঠা থেকে সংক্ষিপ্তভাবে নেভিগেট করবে
- আপনার বর্তমান মেশিনের গতি পরিমাপ করতে একটি দ্রুত বেঞ্চমার্ক চালানো হবে এবং ক্রমাঙ্কন সম্পূর্ণ হয়েছে
থ্রোটলিং বিকল্পগুলি এখন নিম্ন-স্তরের এবং মধ্য-স্তরের ডিভাইসগুলির জন্য ক্যালিব্রেটেড প্রিসেটগুলির সাথে পপুলেট করা হবে।
এই দুটি প্রিসেট বেশিরভাগ ডেভেলপমেন্ট ব্যবহারের ক্ষেত্রে যথেষ্ট হওয়া উচিত এবং আমরা সাধারণত ওয়েবে দেখা একটি "সাধারণ" মোবাইল ডিভাইসের সাথে মিলে যাওয়া হিসাবে "মধ্য-স্তরের" প্রিসেটের সুপারিশ করি৷ আপনি যদি জানেন যে আপনার অনেক ব্যবহারকারীর ডিভাইসগুলি এমনকি ধীরগতির রয়েছে বা শুধুমাত্র সেই ব্যবহারকারীদের জন্য কার্যক্ষমতার সমস্যা দেখা দেয়, তাহলে "নিম্ন-স্তর" বিকল্পটি এমনকি নিম্ন-সম্পন্ন ডিভাইসগুলির দীর্ঘ লেজটি ক্যাপচার করার জন্য যথেষ্ট ধীর হওয়া উচিত।
পরিশেষে, আপনি যদি মনে করেন ক্রমাঙ্কনের সাথে কিছু ভুল হয়েছে বা আপনার স্থানীয় মেশিনটি কোনওভাবে পরিবর্তিত হয়েছে, আপনি সর্বদা থ্রটলিং ড্রপ-ডাউন বা সেটিংসের মাধ্যমে পুনরায় ক্যালিব্রেট করতে পারেন, যা বেঞ্চমার্ক পুনরায় চালাবে এবং প্রিসেটগুলি আপডেট করবে।
DevTools-এ CPU থ্রটলিং কীভাবে কাজ করে
DevTools-এ CPU থ্রটলিং কীভাবে কাজ করে সে সম্পর্কে আপনি যদি কখনও কৌতূহলী হয়ে থাকেন, ধারণাটি তুলনামূলকভাবে সহজবোধ্য। আপনি যখন একটি ট্যাবের জন্য থ্রটলিং চালু করেন, Chrome একটি পৃথক থ্রটলিং থ্রেড চালু করে যা ঘন ঘন ছোট বিস্ফোরণের জন্য ট্যাবের প্রধান থ্রেডটিকে বাধা দেয় এবং স্থগিত করে। লক্ষ্য হল মূল থ্রেডটিকে যথেষ্ট দীর্ঘ স্থগিত করা যাতে প্রদত্ত কাজের সময়কাল থ্রটলিং ফ্যাক্টর দ্বারা বৃদ্ধি পায়।
উদাহরণস্বরূপ, 4x CPU থ্রটলিং-এ, প্রধান থ্রেডটি প্রায় 75% সময় সাসপেন্ড হয়ে যাবে, যার ফলে যেকোন প্রধান-থ্রেডের কাজ সম্পূর্ণ হতে চারগুণ সময় নেয়।
এই পদ্ধতির সুবিধা হল যে এটি বেশিরভাগই ক্রোমের বাকি অংশে স্বচ্ছ; জাভাস্ক্রিপ্ট, বা লেআউট, বা ব্রাউজারকে যে কাজগুলি করতে হবে তার প্রত্যেকটিকে ধীর করার জন্য কোনও বিশেষ কোডের প্রয়োজন নেই৷ মূল থ্রেডের সমস্ত কাজ বেশি সময় নেয় কারণ থ্রেডটি শুধুমাত্র সময়ের একটি ভগ্নাংশের জন্য কার্যকর করার অনুমতি দেয়।
যখন CPU থ্রটলিং একটি বাস্তব মোবাইল ডিভাইসের মত কাজ করে
ফলস্বরূপ, সিপিইউ থ্রটলিং দ্বারা অনেক ধরনের মোবাইল সিপিইউ-বাউন্ড কাজ ভালভাবে সিমুলেট করা হয়। যদি একটি ইন্টারঅ্যাকশন জাভাস্ক্রিপ্ট এবং লেআউটকে ট্রিগার করে, উদাহরণস্বরূপ, এটি একটি মোবাইল ডিভাইসে যেভাবে চালানো হত তার সাথে একইভাবে কার্যকর হওয়ার একটি ভাল সুযোগ রয়েছে।
DOM-এ নতুন উপাদান যোগ করার জন্য জাভাস্ক্রিপ্ট চালানোর জন্য একটি বোতামের ক্লিকের দ্বারা ট্রিগার হওয়া একটি টাস্ক বিবেচনা করুন, যার জন্য ব্রাউজারকে নতুন সামগ্রীর অবস্থানের জন্য স্টাইল এবং লেআউট গণনা চালানোর প্রয়োজন হয়:
ক্যালিব্রেটেড "মিড-টায়ার মোবাইল" সিপিইউ থ্রোটলিং প্রিসেট (এই ডেভেলপমেন্ট মেশিনে 3.7x), মিথস্ক্রিয়াটি খুব একই রকম দেখায়, তবে সময়কাল উল্লেখযোগ্যভাবে বৃদ্ধি পায়, একটি দীর্ঘ কাজ হয়ে ওঠে:
রিমোট ডিবাগিং ব্যবহার করে একটি বাস্তব মধ্য-স্তরের ডিভাইসে একই মিথস্ক্রিয়া পরীক্ষা করা ইন্টারঅ্যাকশনের ট্রেসের আকার এবং সময়কাল উভয় ক্ষেত্রেই একটি উল্লেখযোগ্যভাবে অনুরূপ ফলাফল দেয়। যেহেতু এই কাজটি বেশিরভাগ CPU প্রধান থ্রেডে আবদ্ধ থাকে (পৃষ্ঠার জাভাস্ক্রিপ্ট কোড এবং ক্রোমের স্টাইল এবং লেআউট কোড কার্যকর করা), ক্যালিব্রেটেড থ্রটলিং সঠিকভাবে আসল মোবাইল কার্যকারিতা পুনরায় তৈরি করে:
যখন আপনি এখনও একটি বাস্তব মোবাইল ডিভাইসে পরীক্ষা করতে চান
যদিও খুব দরকারী, CPU থ্রটলিং মোবাইল হার্ডওয়্যারের সমস্ত দিক অনুকরণ করতে পারে না। একটি ফোনে, ডিস্কের গতি ধীর, মেমরি ব্যান্ডউইথ আরও সীমিত, এবং থার্মাল থ্রটলিং যেকোন সময় এক্সিকিউশনের গতি কমাতে পারে।
একটি সাধারণ থ্রটলিং সীমাবদ্ধতার মধ্যে GPU- নিবিড় কাজ জড়িত। মোবাইল এবং ডেস্কটপ GPU গুলি স্থাপত্যগতভাবে আলাদা, এবং Chrome পৃষ্ঠার মূল থ্রেড থেকে একটি পৃথক প্রক্রিয়ায় GPU অপারেশন চালায়। ফলস্বরূপ, DevTools CPU থ্রটলিং GPU প্রক্রিয়াকে স্পর্শ করে না (যা সর্বোত্তম জন্য, কারণ এটি DevTools নিজেই এবং বাকি ব্রাউজারগুলির প্রতিক্রিয়াশীলতাকে প্রভাবিত করবে)।
জটিল পেইন্টিং, কম্পোজিটিং এবং প্রভাব-ভারী স্টাইলিং হল সাধারণ পারফরম্যান্স সমস্যা যা একটি ডেভেলপমেন্ট মেশিনে সূক্ষ্ম মনে হতে পারে, কিন্তু মোবাইলে অপ্রত্যাশিতভাবে ধীর। এবং আপনার ডেভেলপমেন্ট মেশিনে সমস্যাটি পুনরায় তৈরি করার চেষ্টা করার সময় একটি সমস্যা আছে তা উপলব্ধি করা কঠিন হতে পারে।
আগের মতই একই মিথস্ক্রিয়া বিবেচনা করুন (ক্লিক করুন এবং DOM-এ অনেক উপাদান যোগ করুন), শুধুমাত্র এই সময়ে নতুন উপাদানগুলিকে অতিরিক্ত সংখ্যক GPU-ভারী বক্স-শ্যাডো এবং ব্লার ফিল্টার দিয়ে স্টাইল করা হয়েছে।
মিথস্ক্রিয়াটির শুরুর আকৃতি এবং সময়কাল একই রকম দেখায়, তবে অতিরিক্ত প্রভাবগুলির জন্য এর শেষে একটি দীর্ঘ নতুন প্রধান-থ্রেড পেইন্ট রয়েছে:
একটি সত্যিকারের মধ্য-স্তরের ফোনে, ইন্টারঅ্যাকশনের প্রধান-থ্রেড অংশটি অতিরিক্ত পেইন্ট সহ সিমুলেটেডের মতো দেখায়, কিন্তু তারপরে মিথস্ক্রিয়াটির ফলাফল স্ক্রিনে উপস্থিত হওয়ার আগে একটি বন্য GPU প্রক্রিয়াটি প্রচুর পরিমাণে কাজ করে বলে মনে হয়:
GPU কাজটি মিথস্ক্রিয়াকে আরও 300 মিলিসেকেন্ড করে দীর্ঘায়িত করে, এবং এমন কাজ যা ল্যাপটপ GPU-এর জন্য একেবারেই বিদ্যমান, এমনকি (প্রধান-থ্রেড) CPU থ্রটলিং সক্ষম থাকা সত্ত্বেও।
আরও কয়েকটি ক্ষেত্রে উল্লেখযোগ্য ইমুলেশন ত্রুটি রয়েছে, যেমন গভীর-নির্ভরতা পৃষ্ঠা লোড, যেখানে সিমুলেটেড নেটওয়ার্ক থ্রটলিং, আন্তঃ-প্রক্রিয়া যোগাযোগ এবং ডিস্ক এবং মেমরি ক্যাশে অ্যাক্সেস করার মধ্যে একটি ইন্টারপ্লে রয়েছে।
সর্বদা কিছু সময়ে বাস্তব মোবাইল ডিভাইসে পরীক্ষা নিশ্চিত করুন. এবং যদি আপনি আপনার ডেস্কটপ মেশিনে ল্যাবে এমন একটি সমস্যা পুনরায় তৈরি করতে না পারেন যা আপনার ফিল্ড ডেটা দেখায় যে মোবাইল ব্যবহারকারীদের প্রভাবিত করছে, অবশ্যই একটি বাস্তব ডিভাইসের সাথে রিমোট ডিবাগিং চেষ্টা করে দেখুন যে কোনও পার্থক্য আপনি হারিয়েছেন কিনা।
আরও ডেটা-চালিত ডিবাগিং উন্নতি
আপনার প্রকৃত ব্যবহারকারীদের উপর ভিত্তি করে ডিবাগিং সেটিংস এবং সিদ্ধান্তগুলিকে আরও সহজ করতে সাহায্য করার জন্য কিছু অন্যান্য নতুন বৈশিষ্ট্য সম্প্রতি এসেছে৷
আপনি যদি ফিল্ড ডেটা সক্ষম করে থাকেন, তাহলে পারফরম্যান্স প্যানেল আপনার 75 তম পার্সেন্টাইল ব্যবহারকারীদের উপর ভিত্তি করে থ্রোটলিং সম্পর্কে পরামর্শ দেবে যা Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন (CrUX) দ্বারা পরিমাপ করা হয়েছে এবং আপনার স্থানীয়ভাবে পরিমাপ করা মেট্রিকগুলি ফিল্ড ডেটা থেকে বিচ্ছিন্ন হলে রিয়েল-টাইম মেট্রিক ভিউ আপনাকে সতর্ক করবে৷ এটি DevTools-এ বাস্তব-বিশ্বের কোর ওয়েব ভাইটাল ডেটা আনার বিষয়ে একটি পূর্ববর্তী পোস্টে বিস্তারিতভাবে কভার করা হয়েছে।
একটি নতুন সংযোজন হল যে সাইডবারে পারফরম্যান্স প্যানেলের অন্তর্দৃষ্টিগুলি এখন আপনাকে সতর্ক করবে যদি একটি ট্রেসে পরিমাপ করা মেট্রিক্স আপনার ব্যবহারকারীরা বাস্তব জগতে যা অনুভব করছেন তার সাথে মেলে না।
ফিল্ড ডেটা সক্ষম করা থাকলে সাইডবারে অন্তর্দৃষ্টিগুলি দেখানো হয়েছে এমন ক্রম র্যাঙ্ক করতে সাহায্য করার জন্য আপনার 75 তম পার্সেন্টাইল কোর ওয়েব ভাইটালগুলি ব্যবহার করে আনলক করা হবে। যদি, উদাহরণস্বরূপ, আপনার ব্যবহারকারীদের সাধারণত দুর্দান্ত লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) থাকে কিন্তু নেক্সট পেইন্টের সাথে খারাপ ইন্টারঅ্যাকশন (INP) , তাহলে অন্তর্দৃষ্টি যা INP উন্নত করতে সাহায্য করে তা তালিকার শীর্ষে থাকবে।
এবং পরিশেষে, আপনি যদি কখনও একাধিক ট্রেসের মধ্যে বারবার ফ্লিপ করে থাকেন, বা ডিস্ক থেকে ট্রেস লোড করছেন, তাহলে প্রতিটি ট্রেসে আপনি কোন মোবাইল ইমুলেশন এবং থ্রোটলিং সেটিংস ব্যবহার করেছেন তা মনে রাখা কঠিন হতে পারে। পারফরম্যান্স প্যানেলের শীর্ষে ট্রেস নির্বাচন ড্রপ-ডাউন এখন প্রতিটি ট্রেসের জন্য ইমুলেশন তথ্য দেখায়।
থামুন, ক্যালিব্রেট করুন এবং শুনুন
শেষ পর্যন্ত আমাদের ডিবাগিং সিদ্ধান্তগুলিকে বাস্তব জগতের উপর ভিত্তি করে তৈরি করতে হবে: সমস্যাগুলি খুঁজে পেতে বিশ্লেষণ এবং ব্যবহারকারীর প্রতিবেদন থেকে ফিল্ড ডেটা দিয়ে শুরু করে, তারপর নির্ণয়ের জন্য ল্যাবে সেই ব্যবহারকারীর অভিজ্ঞতাগুলি পুনরায় তৈরি করা। এই নতুন DevTools সংযোজনগুলি সেই প্রক্রিয়াটিকে একটু সহজ করতে সাহায্য করবে৷
সিপিইউ থ্রোটলিং ক্রমাঙ্কন এবং ডাইভারজিং ফিল্ড এবং ল্যাব অভিজ্ঞতার বিষয়ে সতর্কতাগুলি আপনি সঠিক পথে আছেন কিনা তা অনিশ্চয়তা কমাতে সাহায্য করে এবং বাস্তব-বিশ্বের কর্মক্ষমতার আরও সামঞ্জস্যপূর্ণ আনুমানিকতা সক্ষম করে। কনফিগারেশন থেকে অনুমান করা এবং সম্ভাব্য অসঙ্গতিগুলি হাইলাইট করার মাধ্যমে, DevTools এর লক্ষ্য হল আপনার ব্যবহারকারীদের প্রভাবিত করে এমন প্রকৃত পারফরম্যান্স সমস্যাগুলি সমাধান করার জন্য আপনাকে আরও বেশি সময় ব্যয় করতে সহায়তা করা।
নতুন বৈশিষ্ট্যগুলির জন্য আরও উন্নতি বা পরামর্শের জন্য ধারণা আছে? আমাদের জানতে দিন!