Resource Waterfall একটি টাইমলাইনে করা পৃষ্ঠার প্রতিটি অনুরোধ আঁকে, প্রতিটি বার তার বাস্তব পর্যায়গুলিতে বিভক্ত — সারিবদ্ধ, DNS, TCP, TLS, অপেক্ষা এবং ডাউনলোড — FCP, LCP, DOMContentLoaded এবং লোডের জন্য মার্কার সহ।
যখন একটি পৃষ্ঠা ধীর বোধ করে, প্রশ্নটি সর্বদা একই থাকে: এটি কিসের জন্য অপেক্ষা করছে? ব্রাউজারের নিজস্ব উত্তর নেটওয়ার্ক প্যানেলে থাকে, যার অর্থ DevTools খোলা, আপনি যে পৃষ্ঠাটি পরিদর্শন করছেন তার উপর একটি ড্রয়ার ডক করা এবং লোডের শুরুটি ধরার জন্য পুনরায় লোড করা।
Resource Waterfall সেই টাইমলাইনটিকে পৃষ্ঠার পাশে একটি ভাসমান প্যানেলে রাখে। প্রতিটি অনুরোধ একটি বার হিসাবে প্রদর্শিত হয় যখন এটি শুরু হয়েছিল এবং এর সময়টি আসলে কোথায় গিয়েছিল তার দ্বারা বিভক্ত করা হয়েছে: সারিবদ্ধ বা স্থগিত, DNS লুকআপ, TCP সংযোগ, TLS হ্যান্ডশেক, সার্ভারের জন্য অপেক্ষা করা, তারপর ডাউনলোড করা। একটি দীর্ঘ নীল অংশ একটি ধীর সার্ভার; একটি দীর্ঘ সবুজ এক একটি চর্বি ফাইল; একটি দীর্ঘ ধূসর মানে অনুরোধ তার পালা অপেক্ষায় বসে আছে. পার্থক্য আপনার কি ঠিক করা উচিত তা নির্ধারণ করে।
টাইমলাইন জুড়ে ড্যাশযুক্ত মার্কারগুলি প্রথম বিষয়বস্তুপূর্ণ পেইন্ট, বৃহত্তম সামগ্রীপূর্ণ পেইন্ট, DOMContentLoaded এবং লোড দেখায়, যাতে আপনি দেখতে পারেন কোন অনুরোধগুলি ব্যবহারকারীর কিছু দেখার আগে শেষ হয়েছে এবং কোনটি এখনও পরে চলছে৷ রেন্ডার-ব্লকিং রিসোর্স এবং ক্যাশে হিটগুলি প্রতিটি সারিতে পতাকাঙ্কিত করা হয় এবং একটি একক ব্লকিং ফিল্টার তালিকাটিকে কমিয়ে দেয় যা আসলে প্রথম পেইন্টে বিলম্ব করছে।
ধরন অনুসারে ফিল্টার করুন, URL দ্বারা অনুসন্ধান করুন, বা সবচেয়ে ধীর বা সবচেয়ে বড় দ্বারা বাছাই করুন দ্রুততম অপরাধীকে দ্রুত খুঁজে পেতে। যেকোন সারিটির সম্পূর্ণ URL, প্রোটোকল, স্থানান্তর এবং ডিকোড করা মাপ, স্থিতি এবং সম্পূর্ণ ফেজ ব্রেকডাউনের জন্য ক্লিক করুন। প্যানেল সরাসরি খোলা স্ট্রীম থাকাকালীন যে অনুরোধগুলি আসে, এবং রপ্তানি JSON পুরো টাইমলাইন কপি করে, মাইলস্টোনগুলি অন্তর্ভুক্ত করে, তাই স্ক্রিনশট ছাড়াই পারফরম্যান্স ফাইন্ডিং অন্য কাউকে হস্তান্তর করা যেতে পারে।
প্রতিটি বার সারিবদ্ধ, DNS, TCP, TLS, অপেক্ষা এবং ডাউনলোডে বিভক্ত, তাই একটি ধীর সার্ভার, একটি মোটা ফাইল এবং একটি সারিবদ্ধ অনুরোধ অবিলম্বে আলাদা করা যায়।
FCP, LCP, DOMContentLoaded এবং লোডের জন্য ড্যাশ করা লাইনগুলি দেখায় কোন অনুরোধগুলি ব্যবহারকারীর বিষয়বস্তু দেখার আগে সম্পূর্ণ হয় এবং কোনটি এখনও এটির পরে চলছে৷
এক ক্লিকে সারাংশ বারে মোট ব্লকিং গণনা সহ প্রকৃতপক্ষে প্রথম পেইন্ট ধরে থাকা সংস্থানগুলির তালিকা কমিয়ে দেয়।
ক্যাশে থেকে পরিবেশিত সংস্থানগুলি রহস্যময় জিরো-বাইট সারি হিসাবে প্রদর্শিত হওয়ার পরিবর্তে চিহ্নিত এবং লেবেল করা হয়, যাতে আপনি যাচাই করতে পারেন যে আপনার ক্যাশে সত্যিই কাজ করে।
প্রকার অনুসারে সংকীর্ণ করুন — নথি, CSS, JS, ছবি, ফন্ট, XHR, মিডিয়া — URL দ্বারা অনুসন্ধান করুন, অথবা সেকেন্ডের মধ্যে সবচেয়ে খারাপ অপরাধীর কাছে পৌঁছানোর জন্য সবচেয়ে ধীর বা বৃহত্তম অনুসারে সাজান৷
একটি টিকিটের সাথে সংযুক্ত করতে বা পরবর্তী রানের সাথে তুলনা করতে মাইলস্টোন, মোট এবং প্রতি-অনুরোধের পর্যায় সহ JSON হিসাবে পুরো জলপ্রপাতটি অনুলিপি করুন।
রেন্ডার-ব্লকিং রিসোর্স ফিল্টার করুন এবং আপনার ভিজিটর এবং দৃশ্যমান সামগ্রীর মধ্যে দাঁড়িয়ে থাকা সঠিক স্টাইলশীট এবং স্ক্রিপ্টগুলি দেখুন।
ধীরে ধীরে বাছাই করুন এবং দেখুন একটি বিশ্লেষণ, ফন্ট বা চ্যাট প্রদানকারী একটি দীর্ঘ অপেক্ষার পর্বের সাথে শীর্ষে প্রদর্শিত হবে যার সাথে আপনার কোডের কোন সম্পর্ক নেই।
ফেজ রং পড়ুন: সময় ব্যয় করা একটি ব্যাকএন্ড বা CDN সমস্যা, ডাউনলোড করার সময় ব্যয় করা একটি ফাইল-আকার সমস্যা। ফিক্স প্রতিটি জন্য ভিন্ন.
পুনঃলোড করুন এবং নিশ্চিত করুন যে সম্পদগুলি ক্যাশে থেকে আসে এবং স্থানান্তরের আকারগুলি ডিকোড করা আকারের থেকে অনেক ছোট, প্রমাণ করে যে কম্প্রেশন আসলে চালু আছে৷
JSON হিসাবে টাইমলাইন রপ্তানি করুন এবং এটিকে একটি টিকিটের সাথে সংযুক্ত করুন যাতে পরবর্তী ব্যক্তি আপনার সেশনটি পুনরুত্পাদন করার চেষ্টা করার পরিবর্তে একই সংখ্যাগুলি দেখতে পান।
DevSuite Pro ডকে Resource Waterfall আইকনে ক্লিক করুন। পৃষ্ঠাটি এখন পর্যন্ত যা কিছু লোড করেছে তা অবিলম্বে টাইমলাইনে প্রদর্শিত হবে।
নথি এবং পেইন্ট মাইলস্টোনগুলি সহ, প্রথম অনুরোধ থেকে লোড ক্যাপচার করতে খোলা প্যানেলের সাথে পুনরায় লোড করুন।
শুধুমাত্র রেন্ডার-ব্লকিং রিসোর্স দেখতে ব্লকিং চিপ টিপুন, বা js বা img এর মত একটি ধরন বেছে নিন। সবচেয়ে ধীরগতিতে বাছাই করুন সবচেয়ে খারাপ অপরাধীকে শীর্ষে রাখতে।
যেকোন সারিটির সম্পূর্ণ ইউআরএল, প্রোটোকল, আকার, স্থিতি এবং মিলিসেকেন্ডে ফেজ-বাই-ফেজ ব্রেকডাউনের জন্য ক্লিক করুন — এবং আপনার প্রয়োজন হলে ইউআরএলটি অনুলিপি করুন।
রপ্তানি JSON মাইলস্টোন এবং টোটাল সহ সম্পূর্ণ টাইমলাইন কপি করে, একটি টিকিটে পেস্ট করতে বা আগে-পরে রেকর্ড হিসাবে রাখতে প্রস্তুত।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
