আপনার ব্রাউজারের DevTools-এর নেটওয়ার্ক প্যানেল কোন রিসোর্স লোড হয় এবং কখন লোড হয় তা শনাক্ত করতে সাহায্য করে। নেটওয়ার্ক প্যানেলের প্রতিটি সারি আপনার ওয়েব অ্যাপ লোড করা একটি নির্দিষ্ট URL এর সাথে মিলে যায়।
আপনি কি লোড জানেন
আপনার ওয়েব অ্যাপ্লিকেশনের জন্য সঠিক ক্যাশিং কৌশলগুলি নিয়ে আসার জন্য আপনি ঠিক কী লোড করছেন তার একটি হ্যান্ডেল পেতে হবে৷ একটি নির্ভরযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, নেটওয়ার্ক সব ধরনের অন্ধকার শক্তির অধীন হতে পারে। আপনি যদি আপনার অ্যাপে সেগুলি মোকাবেলা করার আশা করেন তবে আপনাকে নেটওয়ার্কের দুর্বলতাগুলি বুঝতে হবে৷
আপনি ভাবতে পারেন যে আপনার ওয়েব অ্যাপ্লিকেশনটি কী লোড হয় সে সম্পর্কে আপনার কাছে ইতিমধ্যেই বেশ ভাল ধারণা রয়েছে। আপনি যদি স্ট্যাটিক এইচটিএমএল, জাভাস্ক্রিপ্ট, সিএসএস এবং ইমেজ ফাইলগুলির একটি ছোট বিচ্ছুরণ ব্যবহার করেন তবে এটি সত্য হতে পারে। কিন্তু যত তাড়াতাড়ি আপনি কন্টেন্ট ডেলিভারি নেটওয়ার্কগুলিতে হোস্ট করা তৃতীয়-পক্ষের সংস্থানগুলিতে মেশানো শুরু করেন, ডায়নামিক API অনুরোধ এবং সার্ভার-উত্পাদিত প্রতিক্রিয়াগুলি ব্যবহার করে, ছবিটি দ্রুত ঘোলাটে হয়ে যায়।
একটি ক্যাশিং কৌশল যা কয়েকটি ছোট সিএসএস ফাইলের জন্য অর্থবোধক করে তোলে সম্ভবত শত শত বড় চিত্রের জন্য অর্থপূর্ণ হবে না, উদাহরণস্বরূপ।
আপনি লোড যখন জানুন
সামগ্রিক লোডিং ছবির আরেকটি অংশ হল যখন সবকিছু লোড হয়ে যায়।
নেটওয়ার্কে কিছু অনুরোধ, যেমন আপনার প্রাথমিক HTML-এর জন্য নেভিগেশন অনুরোধ , কোনো ব্যবহারকারী একটি প্রদত্ত URL পরিদর্শন করার সাথে সাথে নিঃশর্তভাবে করা হয়। সেই HTML-এ গুরুত্বপূর্ণ CSS বা JavaScript ফাইলগুলির হার্ডকোড করা রেফারেন্স থাকতে পারে যেগুলি আপনার ইন্টারেক্টিভ পৃষ্ঠাটি প্রদর্শন করার জন্যও লোড করতে হবে। এই অনুরোধগুলি সমস্ত আপনার সমালোচনামূলক লোডিং পাথে বসে। নির্ভরযোগ্যভাবে দ্রুত হওয়ার জন্য আপনাকে আক্রমনাত্মকভাবে ক্যাশে করতে হবে।
অন্যান্য সংস্থান, যেমন API অনুরোধ বা অলস-লোড করা সম্পদ, সমস্ত প্রাথমিক লোডিং সম্পূর্ণ না হওয়া পর্যন্ত লোড করা শুরু নাও হতে পারে। যদি এই অনুরোধগুলি শুধুমাত্র ব্যবহারকারীর ইন্টারঅ্যাকশনের একটি নির্দিষ্ট ক্রম অনুসরণ করে হয়, তাহলে একই পৃষ্ঠায় একাধিক ভিজিট জুড়ে একটি সম্পূর্ণ ভিন্ন সংকলনের অনুরোধ করা হতে পারে। একটি কম আক্রমনাত্মক ক্যাশিং কৌশল প্রায়ই এমন সামগ্রীর জন্য উপযুক্ত যা আপনি সমালোচনামূলক লোডিং পথের বাইরে বলে চিহ্নিত করেছেন৷
নাম এবং প্রকার কলাম কি সাহায্য করে
নাম এবং প্রকার কলামগুলি কী লোড হচ্ছে তার একটি অর্থপূর্ণ ছবি প্রদান করতে সহায়তা করে৷ উত্তর " কি লোড হচ্ছে?" উপরের উদাহরণে মোট চারটি ইউআরএল রয়েছে, প্রতিটি একটি অনন্য ধরনের বিষয়বস্তুর প্রতিনিধিত্ব করে।
নামটি আপনার ব্রাউজার দ্বারা অনুরোধ করা URLটিকে প্রতিনিধিত্ব করে—যদিও আপনি তালিকাভুক্ত URL এর পাথের শুধুমাত্র শেষ অংশটি দেখতে পাবেন৷ উদাহরণস্বরূপ, যদি https://example.com/main.css লোড করা হয়, তাহলে আপনি শুধুমাত্র নামের অধীনে তালিকাভুক্ত main.css দেখতে পাবেন।
ইউআরএলের পাথের শেষ কয়েকটি অক্ষর, সময়কাল অনুসরণ করে (যেমন "css"), ইউআরএলের এক্সটেনশন হিসাবে পরিচিত। ইউআরএল-এর এক্সটেনশন সাধারণত আপনাকে বলে যে কোন ধরনের রিসোর্স অনুরোধ করা হচ্ছে এবং টাইপ কলামে দেখানো তথ্যের সাথে সরাসরি ম্যাপ করে। উদাহরণস্বরূপ, v2.html একটি নথি এবং main.css একটি স্টাইলশীট।
জলপ্রপাত কলাম যখন সাহায্য করে
জলপ্রপাত কলাম পরীক্ষা করুন, শীর্ষ থেকে শুরু করে এবং নিচের দিকে কাজ করুন। প্রতিটি বারের দৈর্ঘ্য প্রতিটি সম্পদ লোড করার জন্য ব্যয় করা মোট সময়ের প্রতিনিধিত্ব করে। আপনি কীভাবে একটি অনুরোধের মধ্যে পার্থক্য বলতে পারেন যা সমালোচনামূলক লোডিং পথের অংশ হিসাবে করা হয়েছে এবং একটি অনুরোধ যা গতিশীলভাবে বন্ধ হয়ে গেছে, পৃষ্ঠার প্রাথমিক লোড সম্পূর্ণ হওয়ার অনেক পরে?
জলপ্রপাতের প্রথম অনুরোধটি সর্বদা HTML নথির জন্য হতে চলেছে, উদাহরণস্বরূপ, v2.html । এইচটিএমএল ডকুমেন্টের রেফারেন্স কোন চিত্র, স্ক্রিপ্ট এবং শৈলীর উপর ভিত্তি করে এই প্রাথমিক নেভিগেশন অনুরোধ থেকে পরবর্তী সমস্ত অনুরোধ প্রবাহিত হবে (একটি জলপ্রপাতের মতো!)।
জলপ্রপাতটি দেখায় যে v2.html লোড হওয়া শেষ হওয়ার সাথে সাথে এটির উল্লেখ করা সম্পদগুলির জন্য অনুরোধগুলি শুরু হয় (এটিকে সাবরিসোর্স হিসাবেও উল্লেখ করা হয়)। ব্রাউজার একই সময়ে একাধিক সাবরিসোর্স অনুরোধ করতে পারে, এবং এটি main.css এবং logo.svg এর জন্য জলপ্রপাত কলামের ওভারল্যাপিং বার দ্বারা প্রতিনিধিত্ব করে। অবশেষে, আপনি স্ক্রিনশট থেকে দেখতে পাচ্ছেন যে main.js শেষবার লোড হতে শুরু করে এবং অন্য তিনটি ইউআরএলও শেষ হওয়ার পরে এটি লোড হওয়া শেষ করে।