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

ডেল সেন্ট মার্থে
Dale St. Marthe
LinkedIn

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

ওভারভিউ

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

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

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

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

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

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

বিকল্পভাবে, কমান্ড মেনু দিয়ে পারফরম্যান্স প্যানেল খুলতে এই পদক্ষেপগুলি অনুসরণ করুন:

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

Core Web Vitals লাইভ পর্যবেক্ষণ করুন

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

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

পারফরম্যান্স প্যানেল তিনটি মেট্রিক কার্ডের অধীনে ক্যাপচার করা ইন্টারঅ্যাকশনের একটি তালিকা প্রদান করে। তালিকা সাফ করতে, সাফ ক্লিক করুন।

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

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

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

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

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

    পরবর্তী পদক্ষেপ বিভাগে 'সেট আপ' বোতামটি।

  2. কনফিগার ফিল্ড ডেটা আনয়ন ডায়ালগে, গোপনীয়তা প্রকাশ নোট করুন এবং ঠিক আছে ক্লিক করুন।

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

    ঐচ্ছিকভাবে, স্বয়ংক্রিয়ভাবে সর্বাধিক প্রাসঙ্গিক ক্ষেত্রের ডেটা পেতে, আপনি আপনার বিকাশ এবং উত্পাদনের উত্সগুলির মধ্যে (একাধিক) ম্যাপিং সেট আপ করতে পারেন:

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

    2. ম্যাপিং টেবিলে, আপনার ডেভেলপমেন্ট এবং প্রোডাকশন URL লিখুন এবং + ক্লিক করুন।

      উন্নত বিভাগে একটি উন্নয়ন এবং উত্পাদন উত্স মধ্যে ম্যাপিং.

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

      অতিরিক্তভাবে, যদি কোনো কারণে আপনি স্বয়ংক্রিয়ভাবে ফিল্ড ডেটা পেতে না পারেন, তাহলে আপনি চালু করতে পারেন নিচের URL-এর জন্য সর্বদা ফিল্ড ডেটা দেখান এবং একটি URL প্রদান করুন৷ পারফরম্যান্স প্যানেল প্রথমে এই URL এর জন্য ফিল্ড ডেটা আনার চেষ্টা করবে এবং তারপরে আপনি যে পৃষ্ঠায় নেভিগেট করুন না কেন আপনাকে এই ফিল্ড ডেটা দেখাবে৷

      সেটআপের পরে আপনার ফিল্ড ডেটা আনয়ন সেটিংস পরিবর্তন করতে, ফিল্ড ডেটা > কনফিগার ক্লিক করুন৷

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

    ফিল্ড ডেটা আনার পরে সংগ্রহটি বন্ধ হয়ে গেছে।

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

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

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

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

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

    প্রতিটি মেট্রিক কার্ডে 'আপনার স্থানীয় পরীক্ষার শর্ত বিবেচনা করুন' বিভাগগুলি প্রসারিত করা হয়েছে।

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

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

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

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

    পরিবেশ বাস্তব-বিশ্ব ব্যবহারকারীর অভিজ্ঞতার সাথে মেলে কনফিগার করা হয়েছে।

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

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

একটি কর্মক্ষমতা রিপোর্ট ক্যাপচার এবং বিশ্লেষণ

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

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

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

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

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

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

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

পারফরম্যান্স প্যানেল কীভাবে ব্যবহার করবেন তার সম্পূর্ণ গাইডের জন্য একটি কর্মক্ষমতা রেকর্ডিং বিশ্লেষণ দেখুন।

নিম্নলিখিতটি গাইড থেকে বিষয়গুলির একটি গ্রুপিং এবং অন্যান্য সহায়ক ডকুমেন্টেশন উপস্থাপন করে:

প্রতিবেদনটি কীভাবে নেভিগেট করবেন তা শিখতে:

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

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

প্রতিবেদনটি কীভাবে বিশ্লেষণ করবেন তা শিখতে:

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

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