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