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

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-এর সম্পূর্ণ ওভারভিউ দেয়। এছাড়াও, এটি সিঙ্গেল-পেজ অ্যাপ্লিকেশনে ক্লায়েন্ট-সাইড সফ্ট নেভিগেশনের জন্য 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 এবং সিপিইউ, যেমন ২০ গুণ স্লোডাউন হিসেবে সেট করুন। এছাড়াও, আপনি একই বিভাগে নেটওয়ার্ক ক্যাশে বন্ধ করুন বিকল্পে দিতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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