Performance Monitoring আপনার অ্যাপের পর্যবেক্ষণাধীন প্রসেসগুলো সম্পর্কে ডেটা সংগ্রহ করতে ট্রেস ব্যবহার করে। ট্রেস হলো একটি রিপোর্ট, যাতে আপনার অ্যাপের দুটি নির্দিষ্ট সময়ের মধ্যবর্তী সময়ে সংগৃহীত ডেটা থাকে।
ওয়েব অ্যাপের ক্ষেত্রে, Performance Monitoring স্বয়ংক্রিয়ভাবে আপনার অ্যাপের প্রতিটি পেজের জন্য একটি ট্রেস সংগ্রহ করে, যাকে পেজ লোড ট্রেস বলা হয়। প্রতিটি পেজ লোড ট্রেস নিম্নলিখিত ডিফল্ট মেট্রিকগুলো সংগ্রহ করে:
লার্জেস্ট কনটেন্টফুল পেইন্ট - একটি মেট্রিক যা ব্যবহারকারী কোনো পৃষ্ঠায় নেভিগেট করার সময় এবং সবচেয়ে বড় দৃশ্যমান পরিবর্তনটি ঘটার মধ্যবর্তী সময় পরিমাপ করে।
ব্যবহারকারীর পেজের সাথে মিথস্ক্রিয়া থেকে পরবর্তী পেইন্ট পর্যন্ত সময় - একটি মেট্রিক যা ব্যবহারকারীর পেজের সাথে মিথস্ক্রিয়া করার মুহূর্ত থেকে পরবর্তী পেইন্ট সংঘটিত হওয়ার মুহূর্ত পর্যন্ত দীর্ঘতম সময় পরিমাপ করে।
ক্রমবর্ধমান লেআউট পরিবর্তন - একটি মেট্রিক যা একটি পৃষ্ঠার অপ্রত্যাশিত লেআউট পরিবর্তন পরিমাপ করে এবং তার স্কোর নির্ধারণ করে।
ফার্স্ট পেইন্ট — একটি মেট্রিক যা ব্যবহারকারী কোনো পৃষ্ঠায় নেভিগেট করার সময় এবং তাতে কোনো দৃশ্যমান পরিবর্তন ঘটার মধ্যবর্তী সময় পরিমাপ করে।
ফার্স্ট কনটেন্টফুল পেইন্ট — একটি মেট্রিক যা পরিমাপ করে, একজন ব্যবহারকারী কোনো পৃষ্ঠায় নেভিগেট করার পর থেকে ছবি বা টেক্সটের মতো অর্থপূর্ণ কনটেন্ট প্রদর্শিত হওয়ার মধ্যবর্তী সময়।
domInteractive — একটি মেট্রিক যা পরিমাপ করে, ব্যবহারকারী কখন একটি পৃষ্ঠায় প্রবেশ করে এবং কখন পৃষ্ঠাটি ব্যবহারকারীর জন্য ইন্টারেক্টিভ বলে বিবেচিত হয়, তার মধ্যবর্তী সময়।
domContentLoadedEventEnd — একটি মেট্রিক যা ব্যবহারকারী কোনো পৃষ্ঠায় নেভিগেট করার সময় থেকে প্রাথমিক HTML ডকুমেন্টটি সম্পূর্ণরূপে লোড ও পার্স হওয়ার সময় পর্যন্ত সময়কাল পরিমাপ করে।
loadEventEnd — একটি মেট্রিক যা ব্যবহারকারী যখন পেজটিতে নেভিগেট করেন এবং যখন বর্তমান ডকুমেন্টের লোড ইভেন্টটি সম্পূর্ণ হয়, তার মধ্যবর্তী সময় পরিমাপ করে।
প্রথম ইনপুট বিলম্ব — একটি মেট্রিক যা পরিমাপ করে, ব্যবহারকারী যখন কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে এবং ব্রাউজার যখন সেই ইনপুটে সাড়া দিতে সক্ষম হয়, তার মধ্যবর্তী সময়।
আপনি পারফরম্যান্স ড্যাশবোর্ডের একেবারে নিচে থাকা ট্রেস টেবিলের 'পেজ লোড ' সাবট্যাবে এই ট্রেসগুলোর ডেটা দেখতে পারেন (এই পৃষ্ঠার পরবর্তী অংশে কনসোল ব্যবহার সম্পর্কে আরও জানুন)।
পেজ লোড ট্রেসের সংজ্ঞা
এই ট্রেসটি আপনার অ্যাপের পেজগুলো কীভাবে লোড হয়, সে সম্পর্কে বিভিন্ন মেট্রিক পরিমাপ করে; বিশেষ করে, একটি রেসপন্সিভ অ্যাপের মতো সাধারণ লোডিং পয়েন্টগুলোতে পৌঁছাতে কতক্ষণ সময় লাগে।
পেজ লোড ট্রেস আপনাকে আপনার অ্যাপের মূল ওয়েব বিষয়গুলো , যেমন ফার্স্ট কনটেন্টফুল পেইন্ট, ট্র্যাক করতে সাহায্য করে।
পৃষ্ঠা লোড ট্রেসের জন্য সংগৃহীত মেট্রিক্স
এই ট্রেসগুলো ডিফল্ট ট্রেস, তাই আপনি এগুলোতে অতিরিক্ত কাস্টম মেট্রিক বা কাস্টম অ্যাট্রিবিউট যোগ করতে পারবেন না।
বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট
এই মেট্রিকটি পরিমাপ করে যে, ব্যবহারকারী কখন একটি পৃষ্ঠায় প্রবেশ করেন এবং কখন সবচেয়ে বড় ছবি, লেখা বা ভিডিও কন্টেন্টটি প্রদর্শিত হয়, তার মধ্যবর্তী সময় কত।
ওয়েব পেজের মূল বিষয়বস্তু ব্যবহারকারীর কাছে কত দ্রুত দৃশ্যমান হয়, তা বুঝতে এই মেট্রিকটি সহায়ক।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
ছবি, লেখা বা ভিডিও উপাদান সহ সবচেয়ে বড় দৃশ্যমান পরিবর্তন ঘটলে এটি থেমে যায়। আরও বিস্তারিত জানতে কোর ওয়েব ভাইটালস দেখুন।
" Largest contentful paint element " হলো একটি কাস্টম অ্যাট্রিবিউট যা বৃহত্তম কন্টেন্টফুল পেইন্টের সাথে সম্পর্কিত এলিমেন্টটিকে শনাক্ত করে। বৃহত্তম কন্টেন্টফুল পেইন্টের টাইমিংয়ের পাশাপাশি এটিও ধারণ করা হয়।
পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া
এই মেট্রিকটি পরিমাপ করে, একজন ব্যবহারকারী কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার মুহূর্ত থেকে পরবর্তী পেইন্ট সংঘটিত হওয়ার মুহূর্ত পর্যন্ত সময়কাল।
এই মেট্রিকটি উপকারী, কারণ এটি পরিমাপ করে যে একটি পৃষ্ঠা ব্যবহারকারীর ইনপুটের প্রতি কতটা সাড়া দেয়।
ব্যবহারকারী যখন পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করেন (মাউস ক্লিক, ডিভাইসে ট্যাপ করা বা কীবোর্ড ইনপুট), তখন এটি শুরু হয়।
পরবর্তী পেইন্ট ঘটলে এটি থেমে যায়। আরও বিস্তারিত তথ্যের জন্য কোর ওয়েব ভাইটালস দেখুন।
" Longest interaction to next paint " হলো একটি কাস্টম অ্যাট্রিবিউট যা সেই এলিমেন্টটিকে শনাক্ত করে, যেটির সাথে ব্যবহারকারী ইন্টারঅ্যাকশন করার সময় "interaction to next paint" ইভেন্টটি ঘটেছিল। "interaction to next paint"-এর সময়কালের পাশাপাশি এটিও ধারণ করা হয়।
ক্রমবর্ধমান বিন্যাস পরিবর্তন
এই মেট্রিকটি একটি পৃষ্ঠার সম্পূর্ণ জীবনচক্রের মধ্যে ঘটা প্রতিটি অপ্রত্যাশিত লেআউট পরিবর্তনের জন্য লেআউট পরিবর্তন স্কোরের বৃহত্তম আকস্মিক বৃদ্ধি পরিমাপ করে।
এই মেট্রিকটি দরকারি, কারণ অপ্রত্যাশিত লেআউট পরিবর্তন ব্যবহারকারীর অভিজ্ঞতাকে ব্যাহত করতে পারে। এই মেট্রিকটি লেআউট ইনস্টেবিলিটি এপিআই (Layout Instability API)- এর উপর ভিত্তি করে একটি স্কোর প্রদান করে। স্কোরটি কীভাবে গণনা করা হয় সে সম্পর্কে আরও বিস্তারিত জানতে কোর ওয়েব ভাইটালস (core web vitals) দেখুন।
" Largest layout shift target " হলো একটি কাস্টম অ্যাট্রিবিউট যা সেই এলিমেন্টটিকে শনাক্ত করে যেটি বৃহত্তম কন্টেন্টফুল শিফট ঘটার সময় স্থানান্তরিত হয়েছিল। এটি ক্রমবর্ধমান লেআউট শিফট স্কোরের পাশাপাশি ধারণ করা হয়।
প্রথম রঙ
এই মেট্রিকটি ব্যবহারকারী কোনো পৃষ্ঠায় যাওয়ার সময় এবং তাতে কোনো দৃশ্যমান পরিবর্তন ঘটার মধ্যবর্তী সময় পরিমাপ করে।
এই মেট্রিকটি উপকারী, কারণ প্রথম পেইন্ট আপনার ব্যবহারকারীদেরকে সংকেত দেয় যে পৃষ্ঠাটি লোড হতে শুরু করেছে ।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
যেকোনো দৃশ্যমান পরিবর্তন ঘটলে, যেমন ব্যাকগ্রাউন্ডের রঙ পরিবর্তন বা হেডার লোড হলে, এটি থেমে যায়।
প্রথম বিষয়বস্তুপূর্ণ পেইন্ট
এই মেট্রিকটি পরিমাপ করে যে, একজন ব্যবহারকারী কোনো পৃষ্ঠায় যাওয়ার পর থেকে ছবি বা লেখার মতো অর্থপূর্ণ বিষয়বস্তু প্রদর্শিত হওয়া পর্যন্ত কত সময় লাগে।
এই মেট্রিকটি থেকে বোঝা যায়, আপনার ব্যবহারকারীরা কত দ্রুত শুধু একটি নতুন ব্যাকগ্রাউন্ড কালার বা হেডার না দেখে, আপনার অ্যাপের আসল কন্টেন্ট দেখতে পান।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
ব্রাউজার DOM থেকে প্রথম কন্টেন্ট রেন্ডার করার সাথে সাথেই এটি থেমে যায়, যার মধ্যে যেকোনো টেক্সট, ছবি (ব্যাকগ্রাউন্ড ছবি সহ), সাদা নয় এমন ক্যানভাস বা SVG অন্তর্ভুক্ত।
ডোমইন্টারেক্টিভ
এই মেট্রিকটি পরিমাপ করে যে, ব্যবহারকারী কখন একটি পৃষ্ঠায় প্রবেশ করেন এবং কখন পৃষ্ঠাটি ব্যবহারকারীর জন্য ইন্টারেক্টিভ বা মিথস্ক্রিয়ামূলক বলে বিবেচিত হয়, তার মধ্যবর্তী সময় কত।
এই মেট্রিকটি থেকে বোঝা যায় যে, আপনার ব্যবহারকারীরা স্ক্রিনে বাটন এবং হাইপারলিংকের মতো উপাদানগুলো শুধু দেখার পরিবর্তে, ঠিক কত দ্রুত সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারে। মনে রাখবেন, এর মানে এই নয় যে ব্রাউজারটি সেই ইন্টারঅ্যাকশনে সাড়া দেবে (এই মেট্রিকের জন্য, ‘ফার্স্ট ইনপুট ডিলে ট্রেস ’ দেখুন)।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
ইউজার এজেন্ট বর্তমান HTML ডকুমেন্টের প্রস্তুতিকে "ইন্টারেক্টিভ" হিসেবে সেট করার ঠিক আগে থেমে যায়।
domContentLoadedEventEnd
এই মেট্রিকটি ব্যবহারকারী কোনো পৃষ্ঠায় যাওয়ার সময় থেকে প্রাথমিক HTML ডকুমেন্টটি সম্পূর্ণরূপে লোড ও পার্স হওয়ার মধ্যবর্তী সময় পরিমাপ করে।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
প্রাথমিক HTML ডকুমেন্টটি সম্পূর্ণরূপে লোড এবং পার্স হওয়ার (
DOMContentLoaded) পরেই এটি থেমে যায়, কিন্তু এর মানে এই নয় যে স্টাইলশিট, ছবি এবং সাবফ্রেমগুলোর লোডিং শেষ হয়ে গেছে।
লোডইভেন্টএন্ড
এই মেট্রিকটি ব্যবহারকারী যখন পৃষ্ঠাটিতে নেভিগেট করেন এবং যখন বর্তমান ডকুমেন্টের লোড ইভেন্টটি সম্পূর্ণ হয়, তার মধ্যবর্তী সময় পরিমাপ করে।
আপনার স্টাইলশিট এবং ছবি সহ সমস্ত কন্টেন্ট লোড হতে কতক্ষণ সময় লাগে, সে সম্পর্কে ধারণা পেতে এই মেট্রিকটি সহায়ক।
ব্যবহারকারী যখন কোনো পৃষ্ঠায় যান তখন এটি শুরু হয়।
বর্তমান HTML ডকুমেন্টের লোড ইভেন্ট সম্পন্ন হওয়ার সাথে সাথেই থেমে যায়।
প্রথম ইনপুট বিলম্ব
এই মেট্রিকটি পরিমাপ করে যে, ব্যবহারকারী যখন কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন এবং ব্রাউজার যখন সেই ইনপুটের প্রতিক্রিয়া জানাতে সক্ষম হয়, তার মধ্যবর্তী সময় কত।
এই মেট্রিকটি উপকারী, কারণ ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতি ব্রাউজারের প্রতিক্রিয়া আপনার অ্যাপের রেসপন্সিভনেস সম্পর্কে ব্যবহারকারীদের প্রথম ধারণা দেয়।
ব্যবহারকারী যখন প্রথমবার পেজের কোনো উপাদানের সাথে ইন্টারঅ্যাক্ট করেন, যেমন কোনো বাটন বা হাইপারলিঙ্কে ক্লিক করেন, তখন এটি শুরু হয়।
ব্রাউজার ইনপুটে সাড়া দিতে পারার সাথে সাথেই এটি থেমে যায়, যার অর্থ হলো ব্রাউজারটি তখন আপনার কন্টেন্ট লোড বা পার্স করতে ব্যস্ত থাকে না।
উল্লেখ্য যে, প্রথম ইনপুট ডিলে মেট্রিকটি পরিমাপ করার জন্য, আপনাকে এই মেট্রিকের জন্য পলিফিল লাইব্রেরিটি যোগ করতে হবে। ইনস্টলেশন নির্দেশাবলীর জন্য, লাইব্রেরির ডকুমেন্টেশন দেখুন।
পারফরম্যান্স ডেটা ট্র্যাক করুন, দেখুন এবং ফিল্টার করুন
রিয়েল-টাইম পারফরম্যান্স ডেটা দেখতে, নিশ্চিত করুন যে আপনার অ্যাপটি রিয়েল-টাইম ডেটা প্রসেসিংয়ের সাথে সামঞ্জস্যপূর্ণ একটি পারফরম্যান্স মনিটরিং SDK সংস্করণ ব্যবহার করছে। রিয়েল-টাইম পারফরম্যান্স ডেটা সম্পর্কে আরও জানুন ।
আপনার ড্যাশবোর্ডে গুরুত্বপূর্ণ মেট্রিকগুলো ট্র্যাক করুন
আপনার মূল মেট্রিকগুলোর প্রবণতা কেমন তা জানতে, সেগুলোকে পারফরম্যান্স ড্যাশবোর্ডের শীর্ষে থাকা মেট্রিক্স বোর্ডে যোগ করুন। সপ্তাহ-ভিত্তিক পরিবর্তন দেখে আপনি দ্রুত অবনতি শনাক্ত করতে পারবেন অথবা আপনার কোডের সাম্প্রতিক পরিবর্তনগুলো পারফরম্যান্স উন্নত করছে কিনা তা যাচাই করতে পারবেন।
ফায়ারবেস পারফরম্যান্স মনিটরিং ড্যাশবোর্ডআপনার মেট্রিক্স বোর্ডে একটি মেট্রিক যোগ করতে, এই ধাপগুলো অনুসরণ করুন:
- Firebase কনসোলে পারফরম্যান্স ড্যাশবোর্ডে যান।
- একটি খালি মেট্রিক কার্ডে ক্লিক করুন, তারপর আপনার বোর্ডে যোগ করার জন্য একটি বিদ্যমান মেট্রিক নির্বাচন করুন।
- আরও বিকল্পের জন্য, যেমন কোনো মেট্রিক প্রতিস্থাপন বা অপসারণ করতে, ডেটাযুক্ত মেট্রিক কার্ডে ক্লিক করুন।
মেট্রিক্স বোর্ডটি সময়ের সাথে সাথে সংগৃহীত মেট্রিক ডেটা গ্রাফিক্যাল আকারে এবং সংখ্যাসূচক শতাংশ পরিবর্তন হিসেবে প্রদর্শন করে।
ড্যাশবোর্ড ব্যবহার সম্পর্কে আরও জানুন।
চিহ্ন এবং তাদের ডেটা দেখুন
আপনার ট্রেসগুলো দেখতে, Firebase কনসোলের পারফরম্যান্স ড্যাশবোর্ডে যান, ট্রেস টেবিল পর্যন্ত স্ক্রল করুন, তারপর উপযুক্ত সাবট্যাবে ক্লিক করুন। টেবিলটি প্রতিটি ট্রেসের জন্য কিছু শীর্ষ মেট্রিক প্রদর্শন করে, এবং আপনি এমনকি একটি নির্দিষ্ট মেট্রিকের শতাংশ পরিবর্তন অনুসারে তালিকাটি সাজাতেও পারেন।
Performance Monitoring Firebase কনসোলে একটি ট্রাবলশুটিং পেজ প্রদান করে, যা মেট্রিকের পরিবর্তনগুলো তুলে ধরে। এর ফলে আপনার অ্যাপ এবং ব্যবহারকারীদের উপর পারফরম্যান্স সংক্রান্ত সমস্যার প্রভাব দ্রুত সমাধান করা ও কমানো সহজ হয়। সম্ভাব্য পারফরম্যান্স সমস্যা সম্পর্কে জানতে পারলে আপনি এই ট্রাবলশুটিং পেজটি ব্যবহার করতে পারেন, যেমন— নিম্নলিখিত পরিস্থিতিগুলোতে:
- আপনি ড্যাশবোর্ডে প্রাসঙ্গিক মেট্রিকগুলো নির্বাচন করেন এবং একটি বড় পার্থক্য লক্ষ্য করেন।
- ট্রেসেস টেবিলে আপনি সবচেয়ে বড় ডেল্টাগুলোকে উপরে দেখানোর জন্য সর্ট করেন, এবং আপনি একটি উল্লেখযোগ্য শতাংশ পরিবর্তন দেখতে পান।
- আপনি একটি পারফরম্যান্স সমস্যা সম্পর্কে অবহিত করে একটি ইমেল সতর্কতা পেয়েছেন।
আপনি নিম্নলিখিত উপায়ে সমস্যা সমাধান পৃষ্ঠায় প্রবেশ করতে পারেন:
- মেট্রিক ড্যাশবোর্ডে, 'মেট্রিকের বিবরণ দেখুন' বোতামটিতে ক্লিক করুন।
- যেকোনো মেট্রিক কার্ডে, নির্বাচন করুন
=> বিস্তারিত দেখুন । সমস্যা সমাধান পৃষ্ঠাটি আপনার নির্বাচিত মেট্রিক সম্পর্কে তথ্য প্রদর্শন করে। - ট্রেস টেবিলে, একটি ট্রেসের নামে অথবা সেই ট্রেসের সাথে যুক্ত সারিতে থাকা যেকোনো মেট্রিক মানে ক্লিক করুন।
- ইমেল সতর্কবার্তায়, ‘এখনই তদন্ত করুন’ এ ক্লিক করুন।
ট্রেস টেবিলে কোনো ট্রেসের নামে ক্লিক করলে, আপনি আপনার আগ্রহের মেট্রিকগুলো আরও বিস্তারিতভাবে দেখতে পারবেন। ক্লিক করুন
অ্যাট্রিবিউট দ্বারা ফিল্টার করা ফায়ারবেস পারফরম্যান্স মনিটরিং ডেটা- আপনার সাইটের কোনো নির্দিষ্ট পৃষ্ঠার ডেটা দেখতে পৃষ্ঠার URL দ্বারা ফিল্টার করুন।
- একটি 3G সংযোগ আপনার অ্যাপকে কীভাবে প্রভাবিত করে তা জানতে কার্যকরী সংযোগের ধরণ অনুসারে ফিল্টার করুন।
- আপনার ডেটাবেসের অবস্থান কোনো নির্দিষ্ট অঞ্চলকে প্রভাবিত করছে না তা নিশ্চিত করতে দেশ অনুযায়ী ফিল্টার করুন।
আপনার ট্রেসগুলির ডেটা দেখার বিষয়ে আরও জানুন।
পরবর্তী পদক্ষেপ
পারফরম্যান্স ডেটা পরীক্ষা করতে অ্যাট্রিবিউট ব্যবহারের বিষয়ে আরও জানুন।
Firebase কনসোলে পারফরম্যান্স সংক্রান্ত সমস্যাগুলো কীভাবে ট্র্যাক করবেন সে সম্পর্কে আরও জানুন।
যেসব পেজ লোড আপনার অ্যাপের পারফরম্যান্স কমিয়ে দিচ্ছে, সেগুলোর জন্য অ্যালার্ট সেট করুন । উদাহরণস্বরূপ, কোনো নির্দিষ্ট পেজের প্রথম ইনপুট ডিলে আপনার সেট করা থ্রেশহোল্ড অতিক্রম করলে, আপনি আপনার টিমের জন্য একটি ইমেল অ্যালার্ট কনফিগার করতে পারেন।