আপনার ওয়েবসাইটের কর্মক্ষমতা বিশ্লেষণ করতে পারফরম্যান্স প্যানেল ব্যবহার করুন।
ওভারভিউ
পারফরম্যান্স প্যানেল আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনের CPU পারফরম্যান্স প্রোফাইল রেকর্ড করতে দেয়। সম্ভাব্য পারফরম্যান্সের বাধা খুঁজে পেতে প্রোফাইলগুলি বিশ্লেষণ করুন এবং আপনি সম্পদের ব্যবহারকে অপ্টিমাইজ করতে পারেন।
নিম্নলিখিত কাজ করতে পারফরম্যান্স প্যানেল ব্যবহার করুন:
- একটি কর্মক্ষমতা প্রোফাইল রেকর্ড করুন.
- ক্যাপচার সেটিংস পরিবর্তন করুন।
- একটি কর্মক্ষমতা রিপোর্ট বিশ্লেষণ.
আপনার ওয়েবসাইটের কর্মক্ষমতা উন্নত করার জন্য একটি বিস্তৃত গাইডের জন্য, রানটাইম কর্মক্ষমতা বিশ্লেষণ দেখুন।
পারফরম্যান্স প্যানেল খুলুন
পারফরম্যান্স প্যানেল খুলতে, DevTools খুলুন এবং উপরের ট্যাবগুলির একটি সেট থেকে পারফরম্যান্স নির্বাচন করুন৷
বিকল্পভাবে, কমান্ড মেনু দিয়ে পারফরম্যান্স প্যানেল খুলতে এই পদক্ষেপগুলি অনুসরণ করুন:
- DevTools খুলুন ।
- টিপে কমান্ড মেনু খুলুন:
- macOS: কমান্ড + শিফট + পি
- উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
-
Performance panelটাইপ করা শুরু করুন, পারফরম্যান্স প্যানেল দেখান নির্বাচন করুন এবং এন্টার টিপুন।
Core Web Vitals লাইভ পর্যবেক্ষণ করুন
আপনি যখন পারফরম্যান্স প্যানেলটি খুলবেন, এটি অবিলম্বে ক্যাপচার করে এবং আপনাকে দেখায় আপনার স্থানীয় সবচেয়ে বড় বিষয়বস্তুর পেইন্ট (LCP) এবং ক্রমবর্ধমান লেআউট শিফট (CLS) মেট্রিক্স আপনাকে তাদের স্কোর (ভাল, উন্নতির প্রয়োজন বা খারাপ) বলে।
আপনি যদি আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন, তাহলে পারফরম্যান্স প্যানেল আপনার স্থানীয় ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) এবং এর স্কোরও ক্যাপচার করে, যা LCP এবং CLS ছাড়াও, আপনার নেটওয়ার্ক সংযোগ ব্যবহার করে আপনার পৃষ্ঠার মূল ওয়েব ভাইটালগুলির সম্পূর্ণ ওভারভিউ দেয়। এবং ডিভাইস।
ইন্টারঅ্যাকশন এবং লেআউট শিফ্ট ট্যাবে তিনটি মেট্রিক কার্ডের অধীনে, আপনি ক্যাপচার করা ইন্টারঅ্যাকশন এবং লেআউট শিফটের তথ্য সহ সারণী খুঁজে পেতে পারেন, যার মধ্যে উপাদান, সময়, পর্যায় (অন্তর্ক্রিয়ার জন্য) এবং স্কোর (লেআউট শিফটের জন্য) অন্তর্ভুক্ত রয়েছে। উভয় তালিকা সাফ করতে, সাফ ক্লিক করুন।
একটি মেট্রিক স্কোরের ব্রেকডাউন পেতে, একটি টুলটিপ দেখতে মেট্রিক মানের উপর হোভার করুন।
আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে আপনার অভিজ্ঞতার তুলনা করুন
এছাড়াও আপনি Chrome UX রিপোর্ট থেকে ফিল্ড ডেটা আনতে পারেন এবং আপনার স্থানীয় মেট্রিক্সের সাথে আপনার সাইটের ব্যবহারকারীদের অভিজ্ঞতার তুলনা করতে পারেন।
ফিল্ড ডেটা যোগ করতে:
পারফরম্যান্স > পরবর্তী পদক্ষেপ > ফিল্ড ডেটাতে , সেট আপ ক্লিক করুন।
কনফিগার ফিল্ড ডেটা আনয়ন ডায়ালগে, গোপনীয়তা প্রকাশ নোট করুন এবং ঠিক আছে ক্লিক করুন।
উন্নত: উন্নয়ন এবং উৎপাদন পরিবেশের মধ্যে একটি ম্যাপিং সেট আপ করুন...
ঐচ্ছিকভাবে, স্বয়ংক্রিয়ভাবে সর্বাধিক প্রাসঙ্গিক ক্ষেত্রের ডেটা পেতে, আপনি আপনার বিকাশ এবং উত্পাদনের উত্সগুলির মধ্যে (একাধিক) ম্যাপিং সেট আপ করতে পারেন:
- ডায়ালগ উইন্ডোতে, উন্নত বিভাগটি প্রসারিত করুন এবং + নতুন ক্লিক করুন।
ম্যাপিং টেবিলে, আপনার ডেভেলপমেন্ট এবং প্রোডাকশন URL লিখুন এবং + ক্লিক করুন।
উদাহরণস্বরূপ,
http://localhost:8080থেকেhttps://example.comএর ম্যাপিং যখন আপনিlocalhost:8080/page1এ নেভিগেট করবেন তখনexample.com/page1এর জন্য ফিল্ড ডেটা নিয়ে আসবে।অতিরিক্তভাবে, যদি কোনো কারণে আপনি স্বয়ংক্রিয়ভাবে ফিল্ড ডেটা পেতে না পারেন, তাহলে আপনি চালু করতে পারেন নিচের URL-এর জন্য সর্বদা ফিল্ড ডেটা দেখান এবং একটি URL প্রদান করুন৷ পারফরম্যান্স প্যানেল প্রথমে এই URL এর জন্য ফিল্ড ডেটা আনার চেষ্টা করবে এবং তারপরে আপনি যে পৃষ্ঠায় নেভিগেট করুন না কেন আপনাকে এই ফিল্ড ডেটা দেখাবে৷
সেটআপের পরে আপনার ফিল্ড ডেটা আনয়ন সেটিংস পরিবর্তন করতে, ফিল্ড ডেটা > কনফিগার ক্লিক করুন৷
ফিল্ড ডেটা আনয়ন সেট আপ করার সাথে, পারফরম্যান্স প্যানেল এখন আপনাকে আপনার স্থানীয় মেট্রিক স্কোর এবং আপনার ব্যবহারকারীদের অভিজ্ঞতার মধ্যে একটি তুলনা দেখায়। আপনি ডানদিকে ফিল্ড ডেটা বিভাগে সংগ্রহের সময় দেখতে পারেন।
একটি মেট্রিক স্কোরের ব্রেকডাউন পেতে, একটি টুলটিপ দেখতে মেট্রিক মানের উপর হোভার করুন।
আপনার ব্যবহারকারীদের সাথে আরও ভালোভাবে মেলে আপনার পরিবেশ কনফিগার করুন
পূর্ববর্তী বিভাগে বর্ণিত হিসাবে ফিল্ড ডেটা আনয়ন সেট আপ করার সাথে, পারফরম্যান্স প্যানেল আপনাকে আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে আরও ভালভাবে মেলে আপনার পরিবেশ কীভাবে কনফিগার করতে হয় সে সম্পর্কে সুপারিশ সরবরাহ করে।
আপনার পরিবেশ কনফিগার করতে:
প্রতিটি মেট্রিক কার্ডে, আপনার স্থানীয় পরীক্ষার শর্ত বিবেচনা করুন বিভাগটি প্রসারিত করুন, যদি থাকে, এবং সুপারিশগুলি পড়ুন।
এই উদাহরণে দেখে মনে হচ্ছে, আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে আরও ভালভাবে মেলে, আপনি একটি সাধারণ ডেস্কটপ স্ক্রীন আকার ব্যবহার করতে এবং CPU এবং নেটওয়ার্ককে থ্রোটল ডাউন করতে চাইতে পারেন।
এই উদাহরণের জন্য পরিবেশ কনফিগারেশন মেলে:
- আপনার ভিউপোর্টকে সাধারণ স্ক্রীন সাইজের একটিতে সেট করুন (উদাহরণস্বরূপ, 720p বা 1080p)। নির্দিষ্ট ডিভাইস এবং পর্দার আকার অনুকরণ করতে, আপনি উপাদান প্যানেলে ডিভাইস মোড ব্যবহার করতে পারেন।
- এই উদাহরণে ওয়েবসাইটের 82% ব্যবহারকারী ব্রাউজ করার জন্য ডেস্কটপ ব্যবহার করেন। আপনি সঠিক ফিল্ড ডেটার সাথে আপনার স্থানীয় মেট্রিক স্কোর তুলনা করছেন তা নিশ্চিত করতে, আপনি ফিল্ড ডেটা > ডিভাইস ড্রপ-ডাউন তালিকা থেকে ডেস্কটপ নির্বাচন করতে পারেন।
- এনভায়রনমেন্ট সেটিংস বিভাগে, নেটওয়ার্ক ড্রপ-ডাউন তালিকা সেট করুন, উদাহরণস্বরূপ, দ্রুত 4G , এবং CPU , উদাহরণস্বরূপ, 20x স্লোডাউন । আপনি একই বিভাগে নেটওয়ার্ক ক্যাশে নিষ্ক্রিয় করার বিষয়টি নিশ্চিত করতে পারেন।
আপনার পরিবেশ কনফিগার করে, পৃষ্ঠাটি পুনরায় লোড করুন, আপনার স্থানীয় INP ক্যাপচার করতে এটির সাথে ইন্টারঅ্যাক্ট করুন এবং আবার মেট্রিক স্কোর তুলনা করুন।
দেখে মনে হচ্ছে মেট্রিক স্কোর এখন আপনার ব্যবহারকারীদের অভিজ্ঞতার মতোই। তদনুসারে, আপনার স্থানীয় পরীক্ষার শর্ত বিবেচনা করুন বিভাগগুলি মেট্রিক কার্ডগুলি থেকে অদৃশ্য হয়ে গেছে।
এটি দিয়ে, আপনি এখন আপনার ওয়েবসাইটের মূল ওয়েব ভাইটালগুলি উন্নত করা শুরু করতে পারেন:
একটি কর্মক্ষমতা রিপোর্ট ক্যাপচার এবং বিশ্লেষণ
পরবর্তী বিভাগগুলিতে, কীভাবে একটি প্রোফাইল রেকর্ড করতে হয়, ক্যাপচার সেটিংস পরিবর্তন করতে হয় এবং প্রতিবেদনটি বিশ্লেষণ করতে হয় তার নির্দেশিকা অনুসরণ করুন৷
একটি কর্মক্ষমতা প্রোফাইল রেকর্ড করুন
আপনি যখন রেকর্ড করতে প্রস্তুত হন, তখন পারফরম্যান্স প্যানেল আপনাকে নিম্নলিখিত বিকল্পগুলি দেয়:
- রেকর্ড রানটাইম কর্মক্ষমতা
- রেকর্ড লোড কর্মক্ষমতা
- রেকর্ড করার সময় স্ক্রিনশট ক্যাপচার করুন
- রেকর্ড করার সময় জোর করে আবর্জনা সংগ্রহ করুন
- একটি রেকর্ডিং সংরক্ষণ করুন
- একটি রেকর্ডিং লোড করুন
- একটি রেকর্ডিং সাফ করুন
ক্যাপচার সেটিংস পরিবর্তন করুন
ক্যাপচার সেটিংস আপনাকে পরিবর্তন করতে দেয় যে কীভাবে DevTools পারফরম্যান্স রেকর্ডিং ক্যাপচার করে এবং প্রতিবেদনে আপনাকে অতিরিক্ত তথ্য দিতে পারে। ক্যাপচার সেটিংস মেনু অ্যাক্সেস করতে ক্যাপচার সেটিংস ক্লিক করুন।
ক্যাপচার সেটিংস মেনু থেকে নিম্নলিখিত বিকল্পগুলি নির্বাচন করুন:
- জাভাস্ক্রিপ্ট নমুনাগুলি নিষ্ক্রিয় করুন : রেকর্ডিংয়ের সময় কল করা প্রধান ট্র্যাকে প্রদর্শিত জাভাস্ক্রিপ্ট কল স্ট্যাকের রেকর্ডিং অক্ষম করে৷ ওভারহেড কর্মক্ষমতা কমিয়ে দেবে।
- উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন (ধীরে) : উন্নত পেইন্ট ইন্সট্রুমেন্টেশন ক্যাপচার করে। উল্লেখযোগ্যভাবে কর্মক্ষমতা বাধা.
- CSS নির্বাচক পরিসংখ্যান সক্ষম করুন (ধীরে) : CSS নির্বাচক পরিসংখ্যান ক্যাপচার করে। উল্লেখযোগ্যভাবে কর্মক্ষমতা বাধা.
- CPU থ্রটলিং : ধীর CPU গতি অনুকরণ করুন।
- নেটওয়ার্ক থ্রটলিং : ধীর নেটওয়ার্ক গতি অনুকরণ করুন।
একটি কর্মক্ষমতা রিপোর্ট বিশ্লেষণ
পারফরম্যান্স প্যানেল কীভাবে ব্যবহার করবেন তার সম্পূর্ণ গাইডের জন্য একটি কর্মক্ষমতা রেকর্ডিং বিশ্লেষণ দেখুন।
নিম্নলিখিতটি গাইড থেকে বিষয়গুলির একটি গ্রুপিং এবং অন্যান্য সহায়ক ডকুমেন্টেশন উপস্থাপন করে:
প্রতিবেদনটি কীভাবে নেভিগেট করবেন তা শিখতে:
আপনার কর্মপ্রবাহের জন্য গুরুত্বপূর্ণ বিষয়গুলিতে কীভাবে ফোকাস করবেন তা শিখতে:
- ট্র্যাকগুলির ক্রম পরিবর্তন করুন এবং তাদের লুকান৷
- শিখা চার্টে ফাংশন এবং তাদের সন্তানদের লুকান
- ব্রেডক্রাম্ব তৈরি করুন এবং জুম লেভেলের মধ্যে লাফ দিন
বটম-আপ, কল ট্রি এবং ইভেন্ট লগ ট্যাব সম্পর্কে জানতে:
প্রতিবেদনটি কীভাবে বিশ্লেষণ করবেন তা শিখতে:
- প্রধান থ্রেড কার্যকলাপ দেখুন
- শিখা চার্ট পড়ুন
- একটি স্ক্রিনশট দেখুন
- মেমরি মেট্রিক্স দেখুন
- রেকর্ডিংয়ের একটি অংশের সময়কাল দেখুন
- স্টাইল ইভেন্টগুলি পুনরায় গণনা করার সময় সিএসএস নির্বাচক কর্মক্ষমতা বিশ্লেষণ করুন
- পারফরম্যান্স প্যানেলের সাথে প্রোফাইল Node.js পারফরম্যান্স
- প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করুন (FPS)
- টাইমলাইন ইভেন্ট রেফারেন্স
এই প্যানেলগুলির সাথে কর্মক্ষমতা উন্নত করুন
আপনার ওয়েবসাইটের কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে এমন অন্যান্য প্যানেল আবিষ্কার করুন: