কর্মক্ষমতা প্যানেল: আপনার ওয়েবসাইটের কর্মক্ষমতা বিশ্লেষণ করুন

Dale St. Marthe

Sofia Emelianova

আপনার ওয়েবসাইটের পারফরম্যান্স বিশ্লেষণ করতে পারফরম্যান্স প্যানেলটি ব্যবহার করুন।

সংক্ষিপ্ত বিবরণ

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

পারফরম্যান্স প্যানেল ব্যবহার করে নিম্নলিখিত কাজগুলো করুন:

• একটি পারফরম্যান্স প্রোফাইল রেকর্ড করুন।
• ক্যাপচার সেটিংস পরিবর্তন করুন।
• একটি কর্মক্ষমতা প্রতিবেদন বিশ্লেষণ করুন।

আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করার বিষয়ে বিস্তারিত নির্দেশিকার জন্য, ‘রানটাইম পারফরম্যান্স বিশ্লেষণ’ দেখুন।

পারফরম্যান্স প্যানেলটি খুলুন

পারফরম্যান্স প্যানেলটি খুলতে, DevTools খুলুন এবং উপরের ট্যাবগুলো থেকে পারফরম্যান্স নির্বাচন করুন।

বিকল্পভাবে, কমান্ড মেনু ব্যবহার করে পারফরম্যান্স প্যানেলটি খুলতে এই ধাপগুলো অনুসরণ করুন:

1. ডেভটুলস খুলুন ।
2. নিম্নলিখিত বোতাম টিপে কমান্ড মেনু খুলুন:
3. ম্যাকওএস: কমান্ড + শিফট + পি
4. উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
5. Performance panel টাইপ করা শুরু করুন, Show Performance panel নির্বাচন করুন এবং এন্টার চাপুন।

কোর ওয়েব ভাইটালস সরাসরি পর্যবেক্ষণ করুন

আপনি যখন পারফরম্যান্স প্যানেলটি খুলবেন, তখন এটি তাৎক্ষণিকভাবে আপনার স্থানীয় লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এবং কিউমুলেটিভ লেআউট শিফট (CLS) মেট্রিকগুলো ধারণ করে দেখায় এবং সেগুলোর স্কোর (ভালো, উন্নতির প্রয়োজন, বা খারাপ) জানিয়ে দেয়।

আপনি যখন আপনার পেজের সাথে ইন্টারঅ্যাক্ট করেন, তখন পারফরম্যান্স প্যানেলটি আপনার লোকাল ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) এবং এর স্কোরও ক্যাপচার করে, যা LCP এবং CLS-এর পাশাপাশি আপনার নেটওয়ার্ক কানেকশন ও ডিভাইস ব্যবহার করে আপনার পেজের কোর ওয়েব ভাইটালস -এর একটি সম্পূর্ণ ওভারভিউ প্রদান করে।

ইন্টারঅ্যাকশন এবং লেআউট শিফট ট্যাবের তিনটি মেট্রিক কার্ডের নিচে আপনি ক্যাপচার করা ইন্টারঅ্যাকশন এবং লেআউট শিফট সম্পর্কিত তথ্যসহ টেবিল খুঁজে পাবেন, যার মধ্যে রয়েছে এলিমেন্ট, টাইমিং, ফেজ (ইন্টারঅ্যাকশনের জন্য), এবং স্কোর (লেআউট শিফটের জন্য)। উভয় তালিকা খালি করতে, ক্লিয়ার ব্লকে ক্লিক করুন।

কোনো মেট্রিক স্কোরের বিস্তারিত বিবরণ পেতে, মেট্রিক মানটির উপর মাউস রাখলে একটি টুলটিপ দেখা যাবে।

আপনার অভিজ্ঞতাকে আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে তুলনা করুন

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

ফিল্ড ডেটা যোগ করতে:

1. পারফরম্যান্স > পরবর্তী পদক্ষেপ > ফিল্ড ডেটা-তে , সেট আপ-এ ক্লিক করুন।

   

2. ফিল্ড ডেটা ফেচিং কনফিগার করার ডায়ালগ বক্সে, গোপনীয়তা সংক্রান্ত তথ্যটি নোট করুন এবং Ok-তে ক্লিক করুন।

   উন্নত: ডেভেলপমেন্ট এবং প্রোডাকশন এনভায়রনমেন্টের মধ্যে একটি ম্যাপিং সেট আপ করুন...

   ঐচ্ছিকভাবে, সবচেয়ে প্রাসঙ্গিক ফিল্ড ডেটা স্বয়ংক্রিয়ভাবে পাওয়ার জন্য, আপনি আপনার ডেভেলপমেন্ট এবং প্রোডাকশন অরিজিনের মধ্যে (একাধিক) ম্যাপিং সেট আপ করতে পারেন:

   1. ডায়ালগ উইন্ডোতে, অ্যাডভান্সড সেকশনটি প্রসারিত করুন এবং + নিউ-তে ক্লিক করুন।

   2. ম্যাপিং টেবিলে আপনার ডেভেলপমেন্ট এবং প্রোডাকশন ইউআরএলগুলো প্রবেশ করান এবং + চিহ্নে ক্লিক করুন।

      

      উদাহরণস্বরূপ, http://localhost:8080 থেকে https://example.com এর একটি ম্যাপিং-এর ফলে, আপনি যখন localhost:8080/page1 এ নেভিগেট করবেন, তখন example.com/page1 এর ফিল্ড ডেটা প্রদর্শিত হবে।

      এছাড়াও, যদি কোনো কারণে আপনি স্বয়ংক্রিয়ভাবে ফিল্ড ডেটা পেতে না পারেন, তাহলে আপনি 'Always show field data for the below URL' চেকবক্সটি চালু করে একটি URL প্রদান করতে পারেন। পারফরম্যান্স প্যানেলটি প্রথমে এই URL-এর জন্য ফিল্ড ডেটা আনার চেষ্টা করবে এবং তারপরে আপনি যে পৃষ্ঠাতেই যান না কেন, আপনাকে সেই ফিল্ড ডেটা দেখাবে।

      সেটআপের পরে আপনার ফিল্ড ডেটা আনার সেটিংস পরিবর্তন করতে, ফিল্ড ডেটা > কনফিগার-এ ক্লিক করুন।

   ফিল্ড ডেটা ফেচ সেট আপ করা হয়ে গেলে, পারফরম্যান্স প্যানেলটি এখন আপনার স্থানীয় মেট্রিক স্কোর এবং আপনার ব্যবহারকারীদের প্রাপ্ত স্কোরের মধ্যে একটি তুলনা দেখাবে। আপনি ডানদিকের ফিল্ড ডেটা বিভাগে ডেটা সংগ্রহের সময়কাল দেখতে পারেন।

   

   কোনো মেট্রিক স্কোরের বিস্তারিত বিবরণ পেতে, মেট্রিক মানটির উপর মাউস রাখলে একটি টুলটিপ দেখা যাবে।

আপনার পরিবেশকে ব্যবহারকারীদের প্রয়োজনের সাথে আরও ভালোভাবে মেলানোর জন্য কনফিগার করুন।

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

আপনার পরিবেশ কনফিগার করতে:

1. প্রতিটি মেট্রিক কার্ডে, যদি থাকে, ‘আপনার স্থানীয় পরীক্ষার শর্তাবলী বিবেচনা করুন’ অংশটি প্রসারিত করুন এবং সুপারিশগুলি পড়ুন।

   

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

2. এই উদাহরণের জন্য পরিবেশ কনফিগারেশন মেলাতে:

   1. আপনার ভিউপোর্টকে প্রচলিত স্ক্রিন সাইজগুলোর (যেমন, 720p বা 1080p) একটিতে সেট করুন। নির্দিষ্ট ডিভাইস ও স্ক্রিন সাইজ অনুকরণ করতে, আপনি এলিমেন্টস প্যানেলে থাকা ডিভাইস মোড ব্যবহার করতে পারেন।
   2. এই উদাহরণে ওয়েবসাইটটির ৮২% ব্যবহারকারী ব্রাউজ করার জন্য ডেস্কটপ ব্যবহার করেন। আপনার স্থানীয় মেট্রিক স্কোরগুলোকে সঠিক ফিল্ড ডেটার সাথে তুলনা করা নিশ্চিত করতে, আপনি ফিল্ড ডেটা > ডিভাইস ড্রপ-ডাউন তালিকা থেকে ডেস্কটপ নির্বাচন করতে পারেন।
   3. এনভায়রনমেন্ট সেটিংস সেকশনে, নেটওয়ার্ক ড্রপ-ডাউন লিস্টটি, উদাহরণস্বরূপ, ফাস্ট 4G-তে এবং সিপিইউ , উদাহরণস্বরূপ, 20x স্লোডাউন- এ সেট করুন। এছাড়াও আপনি একই সেকশনে ‘Disable network cache’ চেকবক্সটি চেক করতে পারেন।

3. আপনার পরিবেশ কনফিগার করা হয়ে গেলে, পৃষ্ঠাটি রিলোড করুন, আপনার স্থানীয় INP ক্যাপচার করতে এটির সাথে ইন্টারঅ্যাক্ট করুন এবং মেট্রিক স্কোরগুলো আবার তুলনা করুন।

   

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

এর মাধ্যমে, আপনি এখন আপনার ওয়েবসাইটের কোর ওয়েব ভাইটালস উন্নত করা শুরু করতে পারেন:

• এলসিপি অপ্টিমাইজ করুন
• INP অপ্টিমাইজ করুন
• CLS অপ্টিমাইজ করুন

একটি কর্মক্ষমতা প্রতিবেদন সংগ্রহ ও বিশ্লেষণ করুন

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

একটি পারফরম্যান্স প্রোফাইল রেকর্ড করুন

যখন আপনি রেকর্ড করার জন্য প্রস্তুত হবেন, পারফরম্যান্স প্যানেলটি আপনাকে নিম্নলিখিত বিকল্পগুলি দেখাবে:

• রেকর্ড রানটাইম পারফরম্যান্স
• রেকর্ড লোড পারফরম্যান্স
• রেকর্ডিং করার সময় স্ক্রিনশট নিন।
• রেকর্ডিং করার সময় জোরপূর্বক গার্বেজ কালেকশন করা হচ্ছে।
• একটি রেকর্ডিং সংরক্ষণ করুন
• একটি রেকর্ডিং লোড করুন
• একটি রেকর্ডিং পরিষ্কার করুন

ক্যাপচার সেটিংস পরিবর্তন করুন

ক্যাপচার সেটিংস আপনাকে ডেভটুলস কীভাবে পারফরম্যান্স রেকর্ডিং ক্যাপচার করবে তা পরিবর্তন করার সুযোগ দেয় এবং রিপোর্টে অতিরিক্ত তথ্য প্রদান করতে পারে। ক্যাপচার সেটিংস মেনুতে যেতে ‘ক্যাপচার সেটিংস’- এ ক্লিক করুন।

ক্যাপচার সেটিংস মেনু থেকে নিম্নলিখিত বিকল্পগুলি নির্বাচন করুন:

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

একটি কর্মক্ষমতা প্রতিবেদন বিশ্লেষণ করুন

পারফরম্যান্স প্যানেল কীভাবে ব্যবহার করতে হয়, তার সম্পূর্ণ নির্দেশিকার জন্য ‘পারফরম্যান্স রেকর্ডিং বিশ্লেষণ করুন’ দেখুন।

নিচে নির্দেশিকা থেকে কয়েকটি বিষয় এবং অন্যান্য সহায়ক নথি উপস্থাপন করা হলো:

রিপোর্টটি কীভাবে ব্যবহার করতে হয় তা জানতে:

• রেকর্ডিংটি নেভিগেট করুন
• অনুসন্ধান কার্যক্রম
• ইভেন্টের সূচনাকারীদের ট্র্যাক করুন

আপনার ওয়েবসাইটের পারফরম্যান্স সম্পর্কে কার্যকরী তথ্য পেতে পারফরম্যান্স ইনসাইটস ব্যবহার করুন:

• কর্মক্ষমতা অন্তর্দৃষ্টি

আপনার কর্মপ্রবাহের জন্য গুরুত্বপূর্ণ বিষয়গুলিতে কীভাবে মনোযোগ দিতে হয় তা শিখতে:

• ট্র্যাকগুলির ক্রম পরিবর্তন করুন এবং সেগুলিকে লুকান
• ফ্লেম চার্টে ফাংশন এবং তাদের চাইল্ড ফাংশনগুলো লুকান।
• ব্রেডক্রাম্ব তৈরি করুন এবং জুম লেভেলগুলির মধ্যে যাতায়াত করুন

বটম-আপ, কল ট্রি, এবং ইভেন্ট লগ ট্যাবগুলো সম্পর্কে জানতে:

• একটি টেবিলে কার্যকলাপগুলি দেখুন

রিপোর্টটি কীভাবে বিশ্লেষণ করতে হয় তা জানতে:

• প্রধান থ্রেডের কার্যকলাপ দেখুন
• শিখা তালিকাটি পড়ুন
• একটি স্ক্রিনশট দেখুন
• মেমরি মেট্রিক্স দেখুন
• রেকর্ডিংয়ের একটি অংশের সময়কাল দেখুন
• Recalculate Style ইভেন্ট চলাকালীন CSS সিলেক্টরের পারফরম্যান্স বিশ্লেষণ করুন
• পারফরম্যান্স প্যানেলের মাধ্যমে Node.js-এর পারফরম্যান্স প্রোফাইল করুন।
• ফ্রেম প্রতি সেকেন্ড (FPS) বিশ্লেষণ করুন
• টাইমলাইন ইভেন্ট রেফারেন্স

এই প্যানেলগুলির সাহায্যে কর্মক্ষমতা উন্নত করুন

অন্যান্য প্যানেলগুলো আবিষ্কার করুন যা আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করতে সাহায্য করতে পারে:

• লাইটহাউস: ওয়েবসাইটের গতি অপ্টিমাইজ করুন
• মেমরি: মেমরি প্যানেলের সংক্ষিপ্ত বিবরণ
• রেন্ডারিং: রেন্ডারিং পারফরম্যান্সের সমস্যাগুলো খুঁজে বের করুন।
• সমস্যাসমূহ: সমস্যা খুঁজে বের করুন এবং সমাধান করুন
• পারফরম্যান্স: লেয়ারের তথ্য দেখুন