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

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

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

এক নজরে

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

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

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

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

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

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

অথবা, কমান্ড মেনু থেকে পারফর্ম্যান্স প্যানেল খুলতে এইসব ধাপ অনুসরণ করুন:

  1. DevTools খুলুন।
  2. এগুলি প্রেস করে কমান্ড মেনু খুলুন:
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Control+Shift+P কমান্ড মেনু
  5. টাইপ করা শুরু করুন Performance panel, পারফর্ম্যান্স প্যানেল দেখুন বিকল্প বেছে নিন এবং Enter টিপুন।

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

আপনি পারফর্ম্যান্স প্যানেল খুললে, এটি সঙ্গে সঙ্গে আপনার লোকাল লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এবং Cumulative Layout Shift (CLS) মেট্রিক ক্যাপচার করে দেখায় এবং আপনাকে সেগুলির স্কোর (ভাল, উন্নতি করতে হবে বা খারাপ) জানায়।

আপনি নিজের পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করলে, পারফর্ম্যান্স প্যানেল আপনার লোকাল Interaction to Next Paint (INP) ও এর স্কোরও ক্যাপচার করে, যা LCP ও CLS ছাড়াও, আপনার নেটওয়ার্ক কানেকশন ও ডিভাইস ব্যবহার করে আপনার পৃষ্ঠার Core Web Vitals-এর সম্পূর্ণ ওভারভিউ দেয়।

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

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

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

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

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

  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. এই উদাহরণের ওয়েবসাইটের ৮২% ব্যবহারকারী ব্রাউজ করার জন্য ডেস্কটপ ব্যবহার করেন। আপনি সঠিক ফিল্ড ডেটার সাথে নিজের লোকাল মেট্রিক স্কোর তুলনা করছেন কিনা তা নিশ্চিত করতে, ফিল্ড ডেটা > ডিভাইস ড্রপ-ডাউন তালিকা থেকে ডেস্কটপ বেছে নিতে পারেন।
    3. এনভায়রনমেন্ট সেটিংস বিভাগে, নেটওয়ার্ক ড্রপ-ডাউন তালিকাকে, যেমন, দ্রুত 4G এবং সিপিইউ-কে, যেমন, 20x স্লোডাউন হিসেবে সেট করুন। এছাড়াও, একই বিভাগে নেটওয়ার্ক ক্যাশে বন্ধ করুন বিকল্পে টিকচিহ্ন দিতে ভুলবেন না।

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

    ব্যবহারকারীর আসল অভিজ্ঞতার সাথে ম্যাচ করার জন্য এনভায়রনমেন্ট কনফিগার করা হয়।

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

এর মাধ্যমে, আপনি এখন নিজের ওয়েবসাইটের Core Web Vitals উন্নত করা শুরু করতে পারবেন:

পারফর্ম্যান্স রিপোর্ট ক্যাপচার ও বিশ্লেষণ করা

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

পারফর্ম্যান্স প্রোফাইল রেকর্ড করা

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

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

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

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

পারফর্ম্যান্স রিপোর্ট বিশ্লেষণ করা

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

নিচে নির্দেশিকা থেকে নেওয়া বিষয়গুলির একটি গ্রুপ এবং অন্যান্য সহায়ক ডকুমেন্টেশন দেওয়া হল:

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

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

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

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

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

এইসব প্যানেলের সাহায্যে পারফর্ম্যান্স উন্নত করা

আপনার ওয়েবসাইটের পারফর্ম্যান্স উন্নত করতে সাহায্য করতে পারে এমন অন্যান্য প্যানেল খুঁজে দেখুন:

অতিরিক্ত রিসোর্স