রেন্ডারিং ট্যাবে কর্মক্ষমতা-সম্পর্কিত বিকল্পগুলির এই রেফারেন্সের সাথে রেন্ডারিং পারফরম্যান্স সমস্যাগুলি আবিষ্কার করুন।
পেইন্ট ফ্ল্যাশিং সঙ্গে repainted এলাকা হাইলাইট
এই বিকল্পটি চালু হলে, যখনই পুনরায় রং করা হয় তখনই ক্রোম স্ক্রীনকে সবুজ করে দেয়।
যে অঞ্চলগুলি পুনরায় রঙ করা হচ্ছে তা দেখতে:
- এই ডেমোতে রেন্ডারিং ট্যাব খুলুন এবং পেইন্ট ফ্ল্যাশিং পরীক্ষা করুন।
- সবুজ রঙে হাইলাইট করা পুনরায় পেইন্টিং পর্যবেক্ষণ করুন।
যদি, অন্য পৃষ্ঠায়, আপনি পুরো স্ক্রীন ফ্ল্যাশ সবুজ বা স্ক্রীনের এমন জায়গাগুলি দেখতে পান যেগুলি আঁকা উচিত বলে মনে করেননি, আরও তদন্ত করার কথা বিবেচনা করুন৷
লেআউট স্থানান্তর অঞ্চলগুলি হাইলাইট করুন
লেআউট পরিবর্তনের ফলে অপ্রত্যাশিত পুনরায় রং করা হয় এবং এটি শুধুমাত্র বিরক্তিকর নয় ক্ষতিকারক হতে পারে।
একটি পৃষ্ঠায় লেআউট শিফটের অবস্থান এবং সময় দেখতে:
রেন্ডারিং ট্যাবটি খুলুন এবং লেআউট শিফট অঞ্চলগুলি পরীক্ষা করুন।
রিফ্রেশ পৃষ্ঠা রিফ্রেশ । লেআউট স্থানান্তরের ক্ষেত্রগুলি সংক্ষিপ্তভাবে বেগুনি রঙে হাইলাইট করা হয়েছে।
স্তর সীমানা সহ স্তর এবং টাইলস দেখুন
পৃষ্ঠার উপরে স্তরের সীমানা এবং টাইলগুলির একটি ওভারলে দেখতে লেয়ার বর্ডার ব্যবহার করুন।
স্তর সীমানা সক্ষম করতে:
- রেন্ডারিং ট্যাব খুলুন এবং লেয়ার বর্ডার চেক করুন।
- কমলা এবং জলপাইয়ের স্তরের সীমানা এবং সায়ানে টাইলস পর্যবেক্ষণ করুন।
রঙ-কোডিংয়ের ব্যাখ্যার জন্য debug_colors.cc এ মন্তব্যগুলি দেখুন।
ফ্রেম রেন্ডারিং পরিসংখ্যান সহ রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেম দেখুন
ফ্রেম রেন্ডারিং পরিসংখ্যান হল একটি ওভারলে যা আপনার ভিউপোর্টের উপরের-ডানদিকে প্রদর্শিত হয়।
ফ্রেম রেন্ডারিং পরিসংখ্যান খুলতে:
- রেন্ডারিং ট্যাবটি খুলুন এবং ফ্রেম রেন্ডারিং পরিসংখ্যান চেকবক্স সক্ষম করুন৷
- পৃষ্ঠার উপরের ডানদিকের কোণায় পরিসংখ্যান পর্যবেক্ষণ করুন।
ফ্রেম রেন্ডারিং পরিসংখ্যান ওভারলে দেখায়:
- পৃষ্ঠা চলার সাথে সাথে প্রতি সেকেন্ডে ফ্রেমের রিয়েল টাইম অনুমান।
- তিনটি ফ্রেমের ধরন সহ একটি প্লট হিসাবে ফ্রেম টাইমলাইন:
- ফ্রেমগুলি সফলভাবে রেন্ডার করা হয়েছে (নীল লাইন)
- আংশিকভাবে উপস্থাপিত ফ্রেম (হলুদ লাইন)
- ড্রপ করা ফ্রেম (লাল লাইন)।
- GPU রাস্টারের অবস্থা: চালু বা বন্ধ। আরও তথ্যের জন্য, দেখুন কিভাবে GPU রাস্টারাইজেশন পাবেন ।
- GPU মেমরি ব্যবহার: ব্যবহৃত সংখ্যা এবং সর্বোচ্চ MB মেমরি।
স্ক্রলিং কর্মক্ষমতা সমস্যা চিহ্নিত করুন
পৃষ্ঠার এমন উপাদানগুলি সনাক্ত করতে স্ক্রলিং পারফরম্যান্স ইস্যুগুলি ব্যবহার করুন যেখানে স্ক্রলিং সম্পর্কিত ইভেন্ট শ্রোতা রয়েছে যা পৃষ্ঠার কার্যক্ষমতার ক্ষতি করতে পারে৷
সম্ভাব্য সমস্যাযুক্ত উপাদানগুলি দেখতে:
- রেন্ডারিং ট্যাবটি খুলুন এবং স্ক্রোলিং পারফরম্যান্স সমস্যাগুলি পরীক্ষা করুন।
- হাইলাইট করা সম্ভাব্য সমস্যাযুক্ত উপাদানগুলি পর্যবেক্ষণ করুন।
কোর ওয়েব ভাইটাল দেখুন
Web Vitals হল Google-এর একটি উদ্যোগ যা ওয়েবে একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য প্রয়োজনীয় গুণমানের সংকেতের জন্য একীভূত নির্দেশিকা প্রদান করে।
কোর ওয়েব ভাইটাল হল ওয়েব ভাইটালগুলির উপসেট যা সমস্ত ওয়েব পৃষ্ঠাগুলিতে প্রযোজ্য। প্রতিটি মূল ওয়েব ভাইটাল ব্যবহারকারীর অভিজ্ঞতার একটি স্বতন্ত্র দিক উপস্থাপন করে, ক্ষেত্রে পরিমাপযোগ্য, এবং একটি সমালোচনামূলক ব্যবহারকারী-কেন্দ্রিক ফলাফলের বাস্তব-বিশ্বের অভিজ্ঞতাকে প্রতিফলিত করে। মূল ওয়েব ভাইটাল হল:
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) : লোডিং কর্মক্ষমতা পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করার জন্য, পৃষ্ঠাটি প্রথম লোড হওয়া শুরু হওয়ার 2.5 সেকেন্ডের মধ্যে LCP হওয়া উচিত।
- নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া (আইএনপি) : ইন্টারঅ্যাকটিভিটি পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, পৃষ্ঠাগুলির একটি INP 200 মিলিসেকেন্ড বা তার কম হওয়া উচিত৷
- Cumulative Layout Shift (CLS) : চাক্ষুষ স্থিতিশীলতা পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, পৃষ্ঠাগুলির একটি CLS 0.1 বজায় রাখা উচিত। বা কম.
আপনার পৃষ্ঠার মূল ওয়েব ভাইটাল মানগুলি দেখতে ওয়েব ভাইটাল ক্রোম এক্সটেনশন ব্যবহার করুন৷