Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

পৃষ্ঠা লোডিং পারফরম্যান্স ডেটা (ওয়েব অ্যাপ্লিকেশন) সম্পর্কে জানুন

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

ওয়েব অ্যাপসের জন্য, পারফরমেন্স স্বয়ংক্রিয়ভাবে মনিটরিং আপনার অ্যাপ পৃষ্ঠা লোড ট্রেস নামক প্রতিটি পৃষ্ঠার জন্য একটি ট্রেস সংগ্রহ। প্রতিটি পৃষ্ঠা লোড ট্রেস নিম্নলিখিত ডিফল্ট মেট্রিক্স সংগ্রহ করে:

  • প্রথম পেইন্টের - যে ব্যবস্থা একটি মেট্রিক যখন একটি পৃষ্ঠাতে ব্যবহারকারী নেভিগেট করে এবং কখন কোন চাক্ষুষ পরিবর্তন ঘটবে মধ্যে সময়

  • প্রথম contentful পেইন্ট - একটি মেট্রিক ব্যবস্থা একটি পৃষ্ঠাতে যখন একজন ব্যবহারকারী নেভিগেট করে এবং যখন অর্থপূর্ণ কন্টেন্ট প্রদর্শন একটি চিত্র বা পাঠ্য মত মধ্যে সময়

  • domInteractive - একটি মেট্রিক ব্যবস্থা যখন পৃষ্ঠা ব্যবহারকারীর জন্য ইন্টারেক্টিভ বিবেচনা করা হয় একটি পৃষ্ঠায় এবং ব্যবহারকারীর নেভিগেট করে মধ্যে সময়

  • domContentLoadedEventEnd - একটি মেট্রিক ব্যবস্থা একটি পৃষ্ঠাতে তখন ব্যবহারকারী নেভিগেট করে এবং তাদের মধ্যে যখন প্রাথমিক HTML ডকুমেন্ট সম্পূর্ণরূপে লোড এবং পার্স করা হয়

  • loadEventEnd - একটি মেট্রিক ব্যবস্থা পৃষ্ঠায় তখন ব্যবহারকারী নেভিগেট করে এবং যখন বর্তমান দস্তাবেজের লোড ঘটনা সম্পন্ন হয়ে মধ্যে সময়

  • প্রথম ইনপুট বিলম্ব - যে ব্যবস্থা একটি মেট্রিক যখন একটি পৃষ্ঠায় ব্যবহারকারীর মিথস্ক্রিয়া এবং যখন ব্রাউজার যা ইনপুট সাড়া সক্ষম হয় মধ্যে সময়

আপনি ট্রেস টেবিলের পৃষ্ঠা লোড সাব-ট্যাব, যার ফলে কর্মক্ষমতা ড্যাশবোর্ডের নীচে হয় এই ট্রেস থেকে ডেটা দেখতে পারেন (সম্পর্কে আরো জানতে কনসোল ব্যবহার এই পৃষ্ঠাতে পরে)।

একটি পৃষ্ঠা লোড ট্রেস সংজ্ঞা

এই ট্রেসটি আপনার অ্যাপের পৃষ্ঠাগুলি কীভাবে লোড হয়, বিশেষ করে প্রতিক্রিয়াশীল অ্যাপের মতো সাধারণ লোডিং পয়েন্টগুলিতে পৌঁছাতে কত সময় লাগে সে সম্পর্কে বেশ কয়েকটি মেট্রিক পরিমাপ করে।

পৃষ্ঠা লোড ট্রেস আপনি আপনার অ্যাপ্লিকেশনের ট্র্যাক সাহায্য কোর ওয়েব মর্মস্থল , প্রথম contentful পেইন্ট মত।

পৃষ্ঠা লোড ট্রেস জন্য সংগৃহীত মেট্রিক্স

এই ট্রেসগুলি বক্সের বাইরে ট্রেস, তাই আপনি তাদের সাথে কাস্টম মেট্রিক্স বা কাস্টম অ্যাট্রিবিউট যোগ করতে পারবেন না।

প্রথম পেইন্ট

এই মেট্রিক পরিমাপ করে ব্যবহারকারী একটি পৃষ্ঠা নেভিগেট করে এবং কখন যখন কোন চাক্ষুষ পরিবর্তন ঘটবে মধ্যে সময়।

এই মেট্রিক যেহেতু আপনার ব্যবহারকারীদের কাছে প্রথম পেইন্টের সংকেত দেয় যে পৃষ্ঠাটি লোড করা শুরু হয় দরকারী।

  • শুরু হয় যখন ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করে।

  • থামে যখন কোন চাক্ষুষ পরিবর্তন একটি পটভূমির রঙ পরিবর্তন অথবা একটি শিরোলেখ লোড সহ ঘটবে।

প্রথম কন্টেন্টফুল পেইন্ট

এই মেট্রিকটি কোন ব্যবহারকারী যখন একটি পৃষ্ঠায় নেভিগেট করে এবং যখন অর্থপূর্ণ সামগ্রী প্রদর্শন করে, যেমন একটি ছবি বা পাঠ্যের মধ্যবর্তী সময় পরিমাপ করে।

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

  • শুরু হয় যখন ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করে।

  • ব্রাউজারটি DOM থেকে প্রথম বিষয়বস্তু রেন্ডার করার সাথে সাথেই বন্ধ হয়ে যায়, যার মধ্যে কোন টেক্সট, ইমেজ (ব্যাকগ্রাউন্ড ইমেজ সহ), নন-হোয়াইট ক্যানভাস, বা SVG।

ডোম ইন্টারঅ্যাক্টিভ

এই মেট্রিকটি ব্যবহারকারী কখন একটি পৃষ্ঠায় নেভিগেট করে এবং যখন পৃষ্ঠাটি ব্যবহারকারীর জন্য ইন্টারেক্টিভ বলে বিবেচিত হয় তার মধ্যে সময় পরিমাপ করে।

এই মেট্রিকটি কত তাড়াতাড়ি আপনার ব্যবহারকারীরা স্ক্রিনে দেখার পরিবর্তে বোতাম এবং হাইপারলিংকের মতো আপনার অ্যাপের উপাদানগুলির সাথে কত দ্রুত যোগাযোগ করতে পারে তার অন্তর্দৃষ্টিগুলির জন্য দরকারী। লক্ষ্য করুন তার মানে এই নয় যে ব্রাউজার মিথষ্ক্রিয়া সাড়া দেবেন (এই মেট্রিক জন্য, পড়ুন প্রথম ইনপুট বিলম্ব ট্রেস )।

  • শুরু হয় যখন ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করে।

  • ব্যবহারকারী এজেন্ট বর্তমান HTML ডকুমেন্টের প্রস্তুতি "ইন্টারেক্টিভ" করার আগে অবিলম্বে বন্ধ হয়ে যায়।

domContentLoadedEventEnd

এই মেট্রিকটি ব্যবহারকারী কখন একটি পৃষ্ঠায় নেভিগেট করে এবং যখন প্রাথমিক HTML নথি সম্পূর্ণভাবে লোড এবং পার্স করা হয় তার মধ্যে সময় পরিমাপ করে।

  • শুরু হয় যখন ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করে।

  • থামে অবিলম্বে পরে প্রাথমিক HTML ডকুমেন্ট সম্পূর্ণরূপে লোড এবং পার্স (হয় DOMContentLoaded ), কিন্তু তার মানে এই নয় যে স্টাইলশীট, চিত্র এবং subframes সমাপ্ত লোড করা হচ্ছে।

loadEventEnd

এই মেট্রিক পরিমাপ করে ব্যবহারকারী পাতায় যখন বর্তমান দস্তাবেজের লোড ঘটনা সম্পন্ন হয়ে নেভিগেট করে যখন মধ্যে সময়।

স্টাইলশীট এবং ছবি সহ আপনার সমস্ত সামগ্রী লোড হতে কতক্ষণ লাগে তার অন্তর্দৃষ্টিগুলির জন্য এই মেট্রিকটি কার্যকর।

  • শুরু হয় যখন ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করে।

  • বর্তমান এইচটিএমএল ডকুমেন্টের লোড ইভেন্ট শেষ হওয়ার সাথে সাথেই বন্ধ হয়ে যায়।

প্রথম ইনপুট বিলম্ব

এই মেট্রিকটি ব্যবহারকারী যখন একটি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে এবং যখন ব্রাউজার সেই ইনপুটে সাড়া দিতে সক্ষম হয় তার মধ্যে সময় পরিমাপ করে।

এই মেট্রিকটি দরকারী কারণ ব্রাউজার ব্যবহারকারীর মিথস্ক্রিয়াতে সাড়া দিচ্ছে আপনার ব্যবহারকারীদের আপনার অ্যাপের প্রতিক্রিয়া সম্পর্কে তাদের প্রথম ধারণা দেয়।

  • , পৃষ্ঠাতে একটি উপাদান দিয়ে শুরু হয় যখন ব্যবহারকারী প্রথম মিথস্ক্রিয়া একটি বোতাম বা হাইপারলিঙ্ক ক্লিক মত।

  • ব্রাউজার ইনপুটে সাড়া দিতে সক্ষম হওয়ার পরপরই থেমে যায়, অর্থাৎ ব্রাউজার আপনার বিষয়বস্তু লোড বা বিশ্লেষণে ব্যস্ত নয়।

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

ট্র্যাক, দেখুন, এবং পারফরম্যান্স ডেটা ফিল্টার করুন

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

আপনার ড্যাশবোর্ডে কী মেট্রিকগুলি ট্র্যাক করুন

তা শিখতে আপনার কী বৈশিষ্ট্যের মান প্রবণতা চলছে, পারফরমেন্স ড্যাশবোর্ড উপরের অংশে আপনার মেট্রিক্স বোর্ড তাদের যোগ করুন। আপনি সপ্তাহ-সপ্তাহের পরিবর্তনগুলি দেখে দ্রুত প্রতিক্রিয়াগুলি সনাক্ত করতে পারেন বা যাচাই করতে পারেন যে আপনার কোডে সাম্প্রতিক পরিবর্তনগুলি কর্মক্ষমতা উন্নত করছে।

ফায়ারবেস পারফরমেন্স মনিটরিং ড্যাশবোর্ডে মেট্রিক্স বোর্ডের একটি ছবি

আপনার মেট্রিক্স বোর্ড একটি মেট্রিক যোগ করার জন্য এখানে যান পারফরমেন্স ড্যাশবোর্ড Firebase কনসোলে, তারপর ড্যাশবোর্ড ট্যাবটি ক্লিক করুন। একটি খালি মেট্রিক কার্ডে ক্লিক করুন, তারপর আপনার বোর্ডে যোগ করার জন্য একটি বিদ্যমান মেট্রিক নির্বাচন করুন। ক্লিক করুন প্রতিস্থাপন বা মেট্রিক সরিয়ে দিতে, আরো বিকল্পের জন্য একটি জনবহুল মেট্রিক কার্ডে।

মেট্রিক্স বোর্ড সময়ের সাথে সংগৃহীত মেট্রিক ডেটা দেখায়, উভয় গ্রাফিকাল আকারে এবং সংখ্যাসূচক শতাংশ পরিবর্তন হিসাবে।

সম্পর্কে আরও জানুন ড্যাশবোর্ড ব্যবহার

ট্রেস এবং তাদের ডেটা দেখুন

আপনার ট্রেস দেখতে, এখানে যান পারফরমেন্স ড্যাশবোর্ড , Firebase কনসোলে ট্রেস টেবিল স্ক্রোল ডাউন, তারপর উপযুক্ত সাব-ট্যাব ক্লিক করুন। টেবিল প্রতিটি ট্রেস জন্য কিছু শীর্ষ মেট্রিক প্রদর্শন করে, এবং আপনি একটি নির্দিষ্ট মেট্রিক জন্য শতাংশ পরিবর্তন দ্বারা তালিকা বাছাই করতে পারেন।

আপনি যদি ট্রেস টেবিলে একটি ট্রেস নাম ক্লিক করেন, তাহলে আপনি বিভিন্ন স্ক্রিনের মাধ্যমে ট্রেসটি অন্বেষণ করতে এবং আগ্রহের মেট্রিকগুলিতে ড্রিল করতে পারেন। অধিকাংশ পৃষ্ঠাতে, আপনি ফিল্টার ব্যবহার করতে পারেন অ্যাট্রিবিউট দ্বারা ডেটা ফিল্টার করতে, উদাহরণস্বরূপ বোতাম (পর্দার উপরের-বাম):

ফায়ারবেস পারফরমেন্স মনিটরিং ডেটার একটি ছবি বৈশিষ্ট্য দ্বারা ফিল্টার করা হচ্ছে
  • দ্বারা ফিল্টার পৃষ্ঠা URL আপনার সাইটের একটি নির্দিষ্ট পৃষ্ঠার জন্য ডেটা দেখতে
  • ফিল্টার কার্যকর সংযোগ টাইপ দ্বারা কীভাবে একটি 3G সংযোগ প্রভাব আপনার অ্যাপ
  • ফিল্টার দেশ অনুযায়ী নিশ্চিত করুন যে আপনার ডাটাবেসের অবস্থান একটি নির্দিষ্ট অঞ্চল প্রভাবিত হয় না করতে

সম্পর্কে আরো জানুন আপনার ট্রেস ডেটা দেখার

পরবর্তী পদক্ষেপ