আপনার ওয়েবসাইটের পারফরম্যান্স সম্পর্কে কার্যকর এবং ব্যবহার-কেস-চালিত অন্তর্দৃষ্টি পেতে পারফরম্যান্স ইনসাইট প্যানেলটি ব্যবহার করুন।
সংক্ষিপ্ত বিবরণ
পারফরম্যান্স ইনসাইট প্যানেল আপনাকে নিম্নলিখিত কাজগুলি করতে দেয়:
- পৃষ্ঠা লোড কর্মক্ষমতা রেকর্ড এবং পরিমাপ করুন ।
- ওয়েব ভাইটালসের পারফর্ম্যান্স মেট্রিক্স দেখুন ।
- নেটওয়ার্ক কার্যকলাপ দেখুন ।
- ধীর CPU এবং নেটওয়ার্ক গতি অনুকরণ করুন।
- রেকর্ডিং আমদানি এবং রপ্তানি করুন।
নতুন প্যানেল কেন?
নতুন পারফরম্যান্স ইনসাইট প্যানেলটি বিদ্যমান পারফরম্যান্স প্যানেলের সাথে কাজ করার সময় এই 3টি ডেভেলপারের সমস্যা সমাধানের জন্য একটি পরীক্ষা:
- অনেক বেশি তথ্য । পুনঃডিজাইন করা UI এর মাধ্যমে, পারফরম্যান্স ইনসাইট প্যানেল ডেটা স্ট্রিমলাইন করে এবং শুধুমাত্র প্রাসঙ্গিক তথ্য প্রদর্শন করে।
- ব্যবহারের ক্ষেত্রে পার্থক্য করা কঠিন । পারফরম্যান্স ইনসাইট প্যানেল ব্যবহার-কেস-চালিত বিশ্লেষণ সমর্থন করে। এটি বর্তমানে শুধুমাত্র পৃষ্ঠা লোড ব্যবহার-কেস সমর্থন করে, ভবিষ্যতে আপনার প্রতিক্রিয়ার উপর ভিত্তি করে আরও কিছু আসবে, উদাহরণস্বরূপ, ইন্টারঅ্যাক্টিভিটি ।
- ব্রাউজারগুলি কীভাবে কার্যকরভাবে ব্যবহার করা যায় সে সম্পর্কে গভীর দক্ষতার প্রয়োজন । পারফরম্যান্স ইনসাইট প্যানেল ইনসাইটস প্যানে মূল অন্তর্দৃষ্টিগুলি হাইলাইট করে, সমস্যাগুলি কীভাবে সমাধান করা যায় সে সম্পর্কে কার্যকর প্রতিক্রিয়া সহ।
ভূমিকা
এই টিউটোরিয়ালটি আপনাকে শেখাবে কিভাবে পারফরম্যান্স ইনসাইট প্যানেলের সাহায্যে আপনার পৃষ্ঠা লোডের কর্মক্ষমতা পরিমাপ করতে এবং বুঝতে হয়। উপরে দেওয়া এই টিউটোরিয়ালের ভিডিও ভার্সনটি পড়তে থাকুন অথবা দেখুন।
পারফর্ম্যান্স ইনসাইট প্যানেল খুলুন
- DevTools খুলুন ।
More options > More tools > Performance insights এ ক্লিক করুন।
বিকল্পভাবে, পারফরম্যান্স ইনসাইট প্যানেল খুলতে কমান্ড মেনু ব্যবহার করুন।
রেকর্ড পারফর্ম্যান্স
পারফরম্যান্স ইনসাইট প্যানেল সাধারণ এবং ব্যবহার-কেস-চালিত (উদাহরণস্বরূপ, পৃষ্ঠা লোড) কর্মক্ষমতা রেকর্ড করতে পারে।
- এই ডেমো পৃষ্ঠাটি একটি নতুন ট্যাবে খুলুন এবং পৃষ্ঠায়, পারফরম্যান্স ইনসাইট প্যানেলটি খুলুন ।
রেকর্ডিং করার সময় আপনি নেটওয়ার্ক এবং সিপিইউ থ্রোটল করতে পারেন। এই টিউটোরিয়ালের জন্য, ড্রপ-ডাউন মেনুতে "ক্যাশে অক্ষম করুন এবং সিপিইউকে 4x স্লোডাউনে সেট করুন" চেক করুন:
ক্লিক করুন পৃষ্ঠা লোড পরিমাপ করুন । DevTools পৃষ্ঠাটি পুনরায় লোড হওয়ার সময় কর্মক্ষমতা মেট্রিক্স রেকর্ড করে এবং তারপর পৃষ্ঠা লোড শেষ হওয়ার কয়েক সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রেকর্ডিং বন্ধ করে দেয়।
একটি পারফর্ম্যান্স রেকর্ডিং পুনরায় চালান
আপনার রেকর্ডিংয়ের রিপ্লে নিয়ন্ত্রণ করতে নীচের নিয়ন্ত্রণগুলি ব্যবহার করুন।
এটি কীভাবে করবেন তার একটি উদাহরণ এখানে দেওয়া হল।
- রেকর্ডিংটি চালাতে Play এ ক্লিক করুন।
- রিপ্লে থামাতে pause এ ক্লিক করুন।
- ড্রপ-ডাউন দিয়ে প্লেব্যাকের গতি সামঞ্জস্য করুন।
- ক্লিক করুন ভিজ্যুয়াল প্রিভিউ দেখাতে বা লুকাতে ভিজ্যুয়াল প্রিভিউ টগল করুন ।
একটি পারফর্ম্যান্স রেকর্ডিং নেভিগেট করুন
DevTools স্বয়ংক্রিয়ভাবে জুম আউট করে সম্পূর্ণ রেকর্ডিং টাইমলাইন দেখায়। আপনি জুম ব্যবহার করে রেকর্ডিং নেভিগেট করতে পারেন এবং টাইমলাইনটি সরাতে পারেন।
টাইমলাইন জুম করতে এবং ডানে এবং বামে সরাতে, সংশ্লিষ্ট নেভিগেশন বোতামগুলি ব্যবহার করুন:
- একটি নির্দিষ্ট ফ্রেম দেখতে প্লেহেডটি সরাতে টাইমলাইনে ক্লিক করুন।
- জুম করার জন্য নীচের দিকে জুম ইন এবং জুম আউট কন্ট্রোলগুলিতে ক্লিক করুন। এই ক্ষেত্রে, আপনাকে প্লেহেডের উপর ভিত্তি করে জুম করতে হবে।
- টাইমলাইনটি বাম এবং ডানে সরাতে নীচের অনুভূমিক স্ক্রোল বারটি টেনে আনুন।
বিকল্পভাবে, আপনি কীবোর্ড শর্টকাট ব্যবহার করতে পারেন। শর্টকাটগুলি দেখতে বোতামে ক্লিক করুন। 
শর্টকাট ব্যবহার করার সময়, আপনি আপনার মাউস কার্সারের উপর ভিত্তি করে জুম করেন।
কর্মক্ষমতা অন্তর্দৃষ্টি দেখুন
ইনসাইটস ফলকে পারফর্ম্যান্স ইনসাইটগুলির একটি তালিকা পান। সম্ভাব্য পারফর্ম্যান্স সমস্যাগুলি সনাক্ত করুন এবং সমাধান করুন।
মূল ট্র্যাকগুলিতে সেগুলি তুলে ধরার জন্য প্রতিটি অন্তর্দৃষ্টির উপর কার্সার রাখুন।
একটি অন্তর্দৃষ্টিতে ক্লিক করুন, উদাহরণস্বরূপ, রেন্ডার-ব্লকিং অনুরোধ, এটিকে বিশদ ফলকে খুলতে। সমস্যাটি আরও বুঝতে, এর ফাইল , সমস্যা , বিভাগগুলি কীভাবে ঠিক করবেন এবং আরও অনেক কিছু পরীক্ষা করুন।
ওয়েব ভাইটালসের পারফর্ম্যান্স মেট্রিক্স দেখুন
ওয়েব ভাইটালস হল গুগলের একটি উদ্যোগ যা ওয়েবে দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য প্রয়োজনীয় মানসম্পন্ন সিগন্যালের জন্য একীভূত নির্দেশিকা প্রদান করে।
আপনি টাইমলাইন এবং ইনসাইটস ফলকে এই মেট্রিক্সগুলি দেখতে পারেন।
মেট্রিক্স সম্পর্কে আরও জানতে টাইমলাইনের অন্তর্দৃষ্টিগুলির উপর কার্সার রাখুন।
সবচেয়ে বড় কন্টেন্টফুল পেইন্টের বিলম্ব আবিষ্কার করুন
লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) হল কোর ওয়েব ভাইটালস মেট্রিক্সের মধ্যে একটি। এটি ভিউপোর্টের মধ্যে দৃশ্যমান সবচেয়ে বড় ছবি বা টেক্সট ব্লকের রেন্ডার সময় রিপোর্ট করে, যা পৃষ্ঠাটি প্রথম লোড হওয়া শুরু হওয়ার সময় অনুসারে।
একটি ভালো LCP স্কোর হল 2.5 সেকেন্ড বা তার কম।
যদি আপনার পৃষ্ঠার সবচেয়ে বড় কন্টেন্টফুল পেইন্টটি রেন্ডার হতে বেশি সময় নেয়, তাহলে টাইমলাইনে, আপনি হলুদ বর্গক্ষেত্র বা লাল ত্রিভুজ সহ LCP ব্যাজ দেখতে পাবেন।
বিস্তারিত ফলকটি খুলতে, টাইমলাইনে LCP ব্যাজ অথবা ডানদিকের ইনসাইটস ফলকে ক্লিক করুন। ফলকে, আপনি বিলম্বের সম্ভাব্য কারণগুলি এবং সেগুলি কীভাবে সমাধান করবেন সে সম্পর্কে পরামর্শগুলি আবিষ্কার করতে পারেন।
এই উদাহরণে, একটি অনুরোধ রেন্ডারিং ব্লক করে এবং আপনি এটি ঠিক করার জন্য ইনলাইনে গুরুত্বপূর্ণ স্টাইল প্রয়োগ করতে পারেন। আরও জানতে, রেন্ডার-ব্লকিং রিসোর্সগুলি বাদ দিন দেখুন।
LCP রেন্ডার টাইমের সাবপার্টগুলি দেখতে, বিস্তারিত > সময় ভাঙ্গন বিভাগে স্ক্রোল করুন।
LCP রেন্ডার টাইম নিম্নলিখিত উপ-অংশগুলি নিয়ে গঠিত:
| LCP উপ-অংশ | বিবরণ |
|---|---|
| প্রথম বাইট করার সময় (TTFB) | ব্যবহারকারী যখন পৃষ্ঠাটি লোড করা শুরু করে তখন থেকে ব্রাউজারটি HTML ডকুমেন্টের প্রতিক্রিয়ার প্রথম বাইট গ্রহণ না করা পর্যন্ত সময়। |
| রিসোর্স লোড বিলম্ব | TTFB এবং ব্রাউজার যখন LCP রিসোর্স লোড করা শুরু করে তার মধ্যে ডেল্টা। |
| রিসোর্স লোড সময় | LCP রিসোর্স লোড করতে যে সময় লাগে। |
| এলিমেন্ট রেন্ডারে বিলম্ব | LCP রিসোর্স লোডিং শেষ হওয়ার পর থেকে LCP উপাদান সম্পূর্ণরূপে রেন্ডার না হওয়া পর্যন্ত এর মধ্যে ডেল্টা। |
যদি একটি LCP উপাদানকে রেন্ডার করার জন্য রিসোর্স লোডের প্রয়োজন না হয়, তাহলে রিসোর্স লোড বিলম্ব এবং সময় বাদ দেওয়া হয়। উদাহরণস্বরূপ, যদি উপাদানটি একটি সিস্টেম ফন্ট সহ রেন্ডার করা একটি টেক্সট নোড হয়।
লেআউট শিফট কার্যকলাপ দেখুন
লেআউট শিফট ট্র্যাকে লেআউট শিফটের কার্যকলাপ দেখুন।
লেআউট শিফটগুলি একটি সেশন উইন্ডোতে গ্রুপ করা হয়েছে। উদাহরণে, দুটি সেশন উইন্ডো রয়েছে। সেশন উইন্ডোগুলির মধ্যে ফাঁক রয়েছে।
ক্রমযোজিত লেআউট শিফট (CLS) হল ওয়েবের মূল গুরুত্বপূর্ণ মেট্রিক্সগুলির মধ্যে একটি। লেআউট শিফটের সম্ভাব্য সমস্যা এবং কারণগুলি সনাক্ত করতে লেআউট শিফট ট্র্যাকটি ব্যবহার করুন।
CLS মেট্রিক উন্নত করার সময় সর্বদা বৃহত্তম সেশন উইন্ডো দিয়ে শুরু করুন। আমাদের উদাহরণে, ব্যাকগ্রাউন্ডের রঙ এবং স্তরের উপর ভিত্তি করে সেশন উইন্ডো 1 হল বৃহত্তম উইন্ডো।
লেআউট পরিবর্তনের বিশদ বিবরণ দেখতে, সম্ভাব্য মূল কারণগুলি এবং প্রভাবিত উপাদানগুলি সনাক্ত করতে একটি স্ক্রিনশটে ক্লিক করুন।
আমাদের উদাহরণে, সম্ভাব্য মূল কারণ হল আনসাইজড মিডিয়া । এটি কীভাবে ঠিক করবেন তা জানতে, অপ্টিমাইজ কিউমুলেটিভ লেআউট শিফট দেখুন।
লেআউট শিফট স্কোর বুঝুন
স্কোর কীভাবে গণনা করা হয় তা বুঝতে, বিশদ ফলকের উইন্ডো বিভাগটি ব্যবহার করুন। উইন্ডোটি দেখায় যে বর্তমান লেআউট শিফটটি কোন সেশন উইন্ডোর অন্তর্গত।
যদি পুরো পৃষ্ঠাটি স্থানান্তরিত হয়, তাহলে প্রতিটি লেআউট শিফটের সর্বোচ্চ স্কোর হবে 1 আমাদের উদাহরণে, প্রথম লেআউট শিফট স্কোর করেছে 0.15 । দ্বিতীয় লেআউট শিফট স্কোর করেছে 0.041 ।
এই সেশন উইন্ডোর মোট স্কোর 0.19 । CLS থ্রেশহোল্ডের উপর ভিত্তি করে, এটির উন্নতি প্রয়োজন। সেশন উইন্ডোর পটভূমির রঙও একই প্রতিফলিত করে।
সময়ের সাথে সাথে সেশন উইন্ডোর ব্যাকগ্রাউন্ড গ্রাফ বৃদ্ধি পায়। লেআউট শিফটের ক্রমবর্ধমান স্কোর সেই সময়ে বৃদ্ধিকে প্রতিফলিত করে।
নেটওয়ার্ক কার্যকলাপ দেখুন
নেটওয়ার্ক ট্র্যাকে নেটওয়ার্ক কার্যকলাপ দেখুন। আপনি সমস্ত নেটওয়ার্ক কার্যকলাপ দেখতে নেটওয়ার্ক ট্র্যাকটি প্রসারিত করতে পারেন এবং বিশদ দেখতে প্রতিটি আইটেমে ক্লিক করতে পারেন।
রেন্ডারারের কার্যকলাপ দেখুন
রেন্ডারার ট্র্যাকে রেন্ডার অ্যাক্টিভিটি দেখুন। আপনি অ্যাক্টিভিটি দেখতে প্রতিটি রেন্ডারার প্রসারিত করতে পারেন এবং বিশদ দেখতে প্রতিটি আইটেমে ক্লিক করতে পারেন।
GPU কার্যকলাপ দেখুন
GPU ট্র্যাকে GPU অ্যাক্টিভিটি দেখুন। GPU ট্র্যাকটি ডিফল্টরূপে লুকানো থাকে। এটি সক্ষম করতে, সেটিংসে GPU চেক করুন।
ব্যবহারকারীর সময় দেখুন
কাস্টম পারফরম্যান্স পরিমাপ পেতে, আপনি ইউজার টাইমিং ব্যবহার করতে পারেন এবং টাইমিং ট্র্যাক দিয়ে আপনার সময় কল্পনা করতে পারেন। আরও তথ্যের জন্য, ইউজার টাইমিং API দেখুন।
এই ডেমো পৃষ্ঠাটি দেখুন যা টেক্সট লোড করার সময় গণনা করে।
ব্যবহারকারীর সময় দেখতে:
-
performance.mark()দিয়ে আপনার অ্যাপ্লিকেশনের স্থানগুলি চিহ্নিত করুন। -
performance.measure()ব্যবহার করে চিহ্নের মধ্যে অতিবাহিত সময় পরিমাপ করুন। - রেকর্ড পারফর্মেন্স ।
- টাইমিং ট্র্যাকে পরিমাপ দেখুন। যদি আপনি ট্র্যাকটি দেখতে না পান, তাহলে সেটিংসে ব্যবহারকারীর সময় পরীক্ষা করুন।
- বিস্তারিত দেখতে, ট্র্যাকের সময়সূচীতে ক্লিক করুন।
UI কাস্টমাইজ করুন
টাইমলাইন এবং ট্র্যাক কাস্টমাইজ করতে, প্যানেলের সেটিংস আইকনে ক্লিক করুন এবং আপনার পছন্দের বিকল্পগুলি পরীক্ষা করুন।
একটি রেকর্ডিং রপ্তানি করুন
রেকর্ডিং সংরক্ষণ করতে, রপ্তানি করুন এ ক্লিক করুন।
একটি রেকর্ডিং আমদানি করুন
একটি রেকর্ডিং লোড করতে, আমদানি করুন নির্বাচন করুন।
একটি রেকর্ডিং মুছুন
একটি রেকর্ডিং মুছে ফেলতে:
- ক্লিক করুন। একটি নিশ্চিতকরণ ডায়ালগ খোলে।
- ডায়ালগে, মুছে ফেলা নিশ্চিত করতে মুছে ফেলুন ক্লিক করুন।