প্রকাশিত: মার্চ 31, 2014
প্রতিটি কঠিন কর্মক্ষমতা কৌশলের ভিত্তি হল ভাল পরিমাপ এবং যন্ত্র। আপনি যা পরিমাপ করতে পারবেন না তা আপনি অপ্টিমাইজ করতে পারবেন না। এই নির্দেশিকা CRP কর্মক্ষমতা পরিমাপের জন্য বিভিন্ন পদ্ধতির ব্যাখ্যা করে।
- লাইটহাউস পদ্ধতি একটি পৃষ্ঠার বিরুদ্ধে স্বয়ংক্রিয় পরীক্ষার একটি সিরিজ চালায়, এবং তারপর পৃষ্ঠার CRP কর্মক্ষমতার উপর একটি প্রতিবেদন তৈরি করে। এই পদ্ধতিটি আপনার ব্রাউজারে লোড হওয়া একটি নির্দিষ্ট পৃষ্ঠার CRP কর্মক্ষমতার একটি দ্রুত এবং প্রাথমিক উচ্চ-স্তরের ওভারভিউ প্রদান করে, যা আপনাকে দ্রুত পরীক্ষা করতে, পুনরাবৃত্তি করতে এবং এর কর্মক্ষমতা উন্নত করতে দেয়।
- নেভিগেশন টাইমিং এপিআই পদ্ধতি রিয়েল ইউজার মনিটরিং (RUM) মেট্রিক্স ক্যাপচার করে। নাম থেকে বোঝা যায়, এই মেট্রিকগুলি আপনার সাইটের সাথে প্রকৃত ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে ক্যাপচার করা হয় এবং বাস্তব-বিশ্বের CRP পারফরম্যান্সের একটি সঠিক ভিউ প্রদান করে, যেমনটি আপনার ব্যবহারকারীরা বিভিন্ন ডিভাইস এবং নেটওয়ার্ক অবস্থার মধ্যে অনুভব করেছেন।
সাধারণভাবে, একটি ভাল পন্থা হল সুস্পষ্ট CRP অপ্টিমাইজেশানের সুযোগগুলি সনাক্ত করতে বাতিঘর ব্যবহার করা, এবং তারপরে আপনার অ্যাপটি বন্যের মধ্যে কীভাবে পারফর্ম করে তা নিরীক্ষণের জন্য নেভিগেশন টাইমিং API-এর সাথে আপনার কোডটি ব্যবহার করা।
লাইটহাউসের সাথে একটি পৃষ্ঠা নিরীক্ষণ করা হচ্ছে
Lighthouse হল একটি ওয়েব অ্যাপ অডিটিং টুল যা একটি প্রদত্ত পৃষ্ঠার বিরুদ্ধে একাধিক পরীক্ষা চালায় এবং তারপরে একটি সমন্বিত প্রতিবেদনে পৃষ্ঠার ফলাফল প্রদর্শন করে৷ আপনি ক্রোম এক্সটেনশন বা NPM মডিউল হিসাবে লাইটহাউস চালাতে পারেন, যা ক্রমাগত ইন্টিগ্রেশন সিস্টেমের সাথে লাইটহাউসকে একীভূত করার জন্য দরকারী।
শুরু করতে Lighthouse এর সাথে অডিটিং ওয়েব অ্যাপস পড়ুন।
আপনি যখন 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 পরিমাপের জন্য উপযুক্ত নয় কারণ এতে গুরুত্বপূর্ণ সংস্থানগুলিকে আলাদা করার জন্য একটি অন্তর্নির্মিত ব্যবস্থা নেই৷ এই ধরনের সম্পদ সনাক্ত করতে সাহায্য করার জন্য একটি বাতিঘর অডিট চালান।