প্রতিটি কঠিন কর্মক্ষমতা কৌশলের ভিত্তি হল ভাল পরিমাপ এবং যন্ত্র। আপনি যা পরিমাপ করতে পারবেন না তা আপনি অপ্টিমাইজ করতে পারবেন না। এই ডক CRP কর্মক্ষমতা পরিমাপের জন্য বিভিন্ন পদ্ধতির ব্যাখ্যা করে।
- লাইটহাউস পদ্ধতি একটি পৃষ্ঠার বিরুদ্ধে স্বয়ংক্রিয় পরীক্ষার একটি সিরিজ চালায়, এবং তারপর পৃষ্ঠার CRP কর্মক্ষমতার উপর একটি প্রতিবেদন তৈরি করে। এই পদ্ধতিটি আপনার ব্রাউজারে লোড হওয়া একটি নির্দিষ্ট পৃষ্ঠার CRP কর্মক্ষমতার একটি দ্রুত এবং সহজ উচ্চ-স্তরের ওভারভিউ প্রদান করে, যা আপনাকে দ্রুত পরীক্ষা করতে, পুনরাবৃত্তি করতে এবং এর কর্মক্ষমতা উন্নত করতে দেয়।
- নেভিগেশন টাইমিং এপিআই পদ্ধতি রিয়েল ইউজার মনিটরিং (RUM) মেট্রিক্স ক্যাপচার করে। নাম থেকে বোঝা যায়, এই মেট্রিকগুলি আপনার সাইটের সাথে প্রকৃত ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে ক্যাপচার করা হয় এবং বাস্তব-বিশ্বের CRP পারফরম্যান্সের একটি সঠিক ভিউ প্রদান করে, যেমনটি আপনার ব্যবহারকারীরা বিভিন্ন ডিভাইস এবং নেটওয়ার্ক অবস্থার মধ্যে অনুভব করেছেন।
সাধারণভাবে, একটি ভাল পন্থা হল সুস্পষ্ট CRP অপ্টিমাইজেশানের সুযোগগুলি সনাক্ত করতে বাতিঘর ব্যবহার করা, এবং তারপরে আপনার অ্যাপটি বন্যের মধ্যে কীভাবে পারফর্ম করে তা নিরীক্ষণের জন্য নেভিগেশন টাইমিং API-এর সাথে আপনার কোডটি ব্যবহার করা।
লাইটহাউসের সাথে একটি পৃষ্ঠা নিরীক্ষণ করা হচ্ছে
Lighthouse হল একটি ওয়েব অ্যাপ অডিটিং টুল যা একটি প্রদত্ত পৃষ্ঠার বিরুদ্ধে একাধিক পরীক্ষা চালায় এবং তারপরে একটি সমন্বিত প্রতিবেদনে পৃষ্ঠার ফলাফল প্রদর্শন করে৷ আপনি ক্রোম এক্সটেনশন বা NPM মডিউল হিসাবে লাইটহাউস চালাতে পারেন, যা ক্রমাগত ইন্টিগ্রেশন সিস্টেমের সাথে লাইটহাউসকে একীভূত করার জন্য দরকারী।
শুরু করতে লাইটহাউসের সাথে ওয়েব অ্যাপের অডিটিং দেখুন।
আপনি যখন Chrome এক্সটেনশন হিসাবে Lighthouse চালান, তখন আপনার পৃষ্ঠার CRP ফলাফল নীচের স্ক্রিনশটের মতো দেখায়৷
এই অডিটের ফলাফল সম্পর্কে আরও তথ্যের জন্য ক্রিটিকাল রিকোয়েস্ট চেইন দেখুন।
ন্যাভিগেশন টাইমিং এপিআই-এর সাথে আপনার কোডের ইন্সট্রুমেন্ট করা
নেভিগেশন টাইমিং এপিআই এবং পৃষ্ঠা লোড হওয়ার সাথে সাথে নির্গত অন্যান্য ব্রাউজার ইভেন্টের সংমিশ্রণ আপনাকে যেকোনো পৃষ্ঠার বাস্তব-বিশ্ব CRP কর্মক্ষমতা ক্যাপচার এবং রেকর্ড করতে দেয়।
উপরের ডায়াগ্রামের প্রতিটি লেবেল একটি উচ্চ রেজোলিউশন টাইমস্ট্যাম্পের সাথে মিলে যায় যা ব্রাউজার এটি লোড করা প্রতিটি পৃষ্ঠার জন্য ট্র্যাক করে। প্রকৃতপক্ষে, এই নির্দিষ্ট ক্ষেত্রে আমরা কেবলমাত্র সমস্ত বিভিন্ন টাইমস্ট্যাম্পের একটি ভগ্নাংশ দেখাচ্ছি — আপাতত আমরা সমস্ত নেটওয়ার্ক সম্পর্কিত টাইমস্ট্যাম্পগুলি এড়িয়ে চলেছি, তবে আমরা ভবিষ্যতের পাঠে তাদের কাছে ফিরে আসব।
সুতরাং, এই টাইমস্ট্যাম্প মানে কি?
-
domLoading: এটি পুরো প্রক্রিয়ার শুরুর টাইমস্ট্যাম্প, ব্রাউজারটি HTML নথির প্রথম প্রাপ্ত বাইটগুলিকে পার্স করা শুরু করতে চলেছে৷ -
domInteractive: ব্রাউজার যখন সমস্ত HTML পার্সিং শেষ করে এবং DOM নির্মাণ সম্পূর্ণ হয় তখন বিন্দু চিহ্নিত করে। -
domContentLoaded: বিন্দুটিকে চিহ্নিত করে যখন DOM উভয়ই প্রস্তুত থাকে এবং এমন কোনো স্টাইলশীট নেই যা জাভাস্ক্রিপ্ট এক্সিকিউশনকে ব্লক করছে - যার মানে আমরা এখন (সম্ভাব্যভাবে) রেন্ডার ট্রি তৈরি করতে পারি।- অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক তাদের নিজস্ব লজিক চালানো শুরু করার আগে এই ইভেন্টের জন্য অপেক্ষা করে। এই কারণে ব্রাউজারটি
EventStartএবংEventEndটাইমস্ট্যাম্পগুলিকে ক্যাপচার করে যাতে আমরা এই নির্বাহে কতক্ষণ সময় নেয় তা ট্র্যাক করতে পারি৷
- অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক তাদের নিজস্ব লজিক চালানো শুরু করার আগে এই ইভেন্টের জন্য অপেক্ষা করে। এই কারণে ব্রাউজারটি
-
domComplete: নাম থেকে বোঝা যায়, সমস্ত প্রক্রিয়াকরণ সম্পূর্ণ হয়েছে এবং পৃষ্ঠার সমস্ত সংস্থান (ছবি, ইত্যাদি) ডাউনলোড করা শেষ হয়েছে - অন্য কথায়, লোডিং স্পিনার স্পিনিং বন্ধ করে দিয়েছে। -
loadEvent: প্রতিটি পৃষ্ঠা লোডের চূড়ান্ত ধাপ হিসেবে ব্রাউজার একটিonloadইভেন্ট ফায়ার করে যা অতিরিক্ত অ্যাপ্লিকেশন লজিক ট্রিগার করতে পারে।
এইচটিএমএল স্পেসিফিকেশন প্রতিটি ইভেন্টের জন্য নির্দিষ্ট শর্তগুলি নির্দেশ করে: কখন এটি বরখাস্ত করা উচিত, কোন শর্তগুলি পূরণ করা উচিত ইত্যাদি। আমাদের উদ্দেশ্যে, আমরা সমালোচনামূলক রেন্ডারিং পাথের সাথে সম্পর্কিত কয়েকটি মূল মাইলফলকগুলিতে ফোকাস করব:
-
domInteractiveচিহ্নিত করে যখন DOM প্রস্তুত হয়। -
domContentLoadedসাধারণত চিহ্নিত করে যখন DOM এবং CSSOM উভয়ই প্রস্তুত থাকে ।- যদি জাভাস্ক্রিপ্ট ব্লক করার কোনো পার্সার না থাকে তাহলে
domInteractiveএর সাথে সাথেDOMContentLoadedফায়ার হবে।
- যদি জাভাস্ক্রিপ্ট ব্লক করার কোনো পার্সার না থাকে তাহলে
-
domCompleteচিহ্নিত করে যখন পৃষ্ঠা এবং এর সমস্ত উপ-সম্পদ প্রস্তুত থাকে।
<!DOCTYPE html>
<html>
<head>
<title>Critical Path: Measure</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<script>
function measureCRP() {
var t = window.performance.timing,
interactive = t.domInteractive - t.domLoading,
dcl = t.domContentLoadedEventStart - t.domLoading,
complete = t.domComplete - t.domLoading;
var stats = document.createElement('p');
stats.textContent =
'interactive: ' +
interactive +
'ms, ' +
'dcl: ' +
dcl +
'ms, complete: ' +
complete +
'ms';
document.body.appendChild(stats);
}
</script>
</head>
<body onload="measureCRP()">
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
উপরের উদাহরণটি প্রথম দর্শনে একটু ভয়ঙ্কর মনে হতে পারে, কিন্তু বাস্তবে এটি আসলে বেশ সহজ। নেভিগেশন টাইমিং এপিআই সমস্ত প্রাসঙ্গিক টাইমস্ট্যাম্প ক্যাপচার করে এবং আমাদের কোড onload ইভেন্ট ফায়ার হওয়ার জন্য অপেক্ষা করে — মনে করুন যে onload ইভেন্ট domInteractive , domContentLoaded এবং domComplete এর পরে ফায়ার হয় — এবং বিভিন্ন টাইমস্ট্যাম্পের মধ্যে পার্থক্য গণনা করে৷
সবই বলা হয়েছে এবং করা হয়েছে, আমাদের কাছে এখন ট্র্যাক করার জন্য কিছু নির্দিষ্ট মাইলফলক এবং এই পরিমাপগুলি আউটপুট করার জন্য একটি সাধারণ ফাংশন রয়েছে। মনে রাখবেন যে পৃষ্ঠায় এই মেট্রিকগুলি প্রিন্ট করার পরিবর্তে আপনি একটি বিশ্লেষণ সার্ভারে এই মেট্রিকগুলি পাঠানোর জন্য কোডটিও পরিবর্তন করতে পারেন ( Google Analytics স্বয়ংক্রিয়ভাবে এটি করে ), যা আপনার পৃষ্ঠাগুলির কার্যকারিতার উপর ট্যাব রাখার এবং প্রার্থী পৃষ্ঠাগুলি সনাক্ত করার একটি দুর্দান্ত উপায় কিছু অপ্টিমাইজেশন কাজ থেকে উপকৃত হতে পারে.
DevTools সম্পর্কে কি?
যদিও এই নথিগুলি মাঝে মাঝে CRP ধারণাগুলিকে চিত্রিত করার জন্য Chrome DevTools নেটওয়ার্ক প্যানেল ব্যবহার করে, DevTools বর্তমানে CRP পরিমাপের জন্য উপযুক্ত নয় কারণ এতে গুরুত্বপূর্ণ সংস্থানগুলিকে বিচ্ছিন্ন করার জন্য বিল্ট-ইন ব্যবস্থা নেই৷ এই ধরনের সম্পদ সনাক্ত করতে সাহায্য করার জন্য একটি বাতিঘর অডিট চালান।