Page Performance যেকোনো ওয়েবপেজের তাৎক্ষণিক পারফরম্যান্স সারসংক্ষেপ প্রদান করে — লোড টাইমিং মেট্রিক্স (FCP, DOMContentLoaded, full load, TTI), DOM পরিসংখ্যান (এলিমেন্ট সংখ্যা, নেস্টিং ডেপথ, ইভেন্ট লিসেনার) এবং জাভাস্ক্রিপ্ট, CSS, ইমেজ, ফন্ট ও অন্যান্য অ্যাসেটের সংখ্যা ও সাইজসহ একটি রিসোর্স ব্রেকডাউন। একটি কালার-কোডেড পারফরম্যান্স স্কোর দ্রুত হেলথ ইন্ডিকেটর হিসেবে কাজ করে।
Lighthouse বা WebPageTest-এর সাহায্যে পারফরম্যান্স প্রোফাইলিং বিস্তারিত তথ্য প্রদান করে কিন্তু এটি রান করতে সময় লাগে এবং অনেক সময় রিপোর্টটি সাধারণ ব্যবহারকারীর কাছে জটিল মনে হতে পারে। কখনো কখনো আপনার শুধু একটি দ্রুত উত্তরের প্রয়োজন হয়: "এই পেজটি কি ফাস্ট নাকি স্লো? সবচেয়ে বড় সমস্যাটি কোথায়?" Page Performance আপনাকে সেই তাৎক্ষণিক ধারণা দেয়। এটি ব্রাউজারের Performance API এবং Navigation Timing API থেকে টাইমিং ডেটা সংগ্রহ করে (যে ডেটাগুলো ইতিমধ্যেই সংগৃহীত থাকে — কোনো বাড়তি পেজ লোডের প্রয়োজন নেই) এবং একটি পরিষ্কার ও ভিজ্যুয়াল ড্যাশবোর্ডে তা উপস্থাপন করে। উপরের অংশে মূল টাইমিং মেট্রিক্সগুলো দেখানো হয়: First Contentful Paint (যখন প্রথম কন্টেন্ট দৃশ্যমান হয়), DOMContentLoaded (যখন HTML পুরোপুরি পার্স হয়), Full Load (যখন সব রিসোর্স লোড শেষ হয়) এবং Time to Interactive (যখন পেজটি ব্যবহারযোগ্য হয়)। প্রতিটি মেট্রিক Web Vitals থ্রেশহোল্ড-এর ভিত্তিতে কালার-কোডেড থাকে — সবুজের অর্থ ফাস্ট, হলুদ মানে মডারেট এবং লাল মানে স্লো। নিচে রিসোর্স ব্রেকডাউন সেকশনটি দেখায় জাভাস্ক্রিপ্ট, CSS, ইমেজ, ফন্ট এবং অন্যান্য রিসোর্স টাইপগুলো ঠিক কতটা ব্যান্ডউইথ ব্যবহার করছে, যা সহজে তুলনার জন্য ভিজ্যুয়াল বার চার্টের মাধ্যমে রেন্ডার করা হয়। DOM পরিসংখ্যান সেকশনে মোট এলিমেন্ট সংখ্যা, সর্বোচ্চ নেস্টিং ডেপথ এবং ইভেন্ট লিসেনারের সংখ্যা দেখা যায় — যা রেন্ডারিং পারফরম্যান্সকে প্রভাবিত করে এমন DOM জটিলতার সংকেত দেয়।
First Contentful Paint (FCP), DOMContentLoaded, Full Page Load এবং Time to Interactive (TTI) — এই চারটি গুরুত্বপূর্ণ পারফরম্যান্স মেট্রিক দেখায়। প্রতিটি প্রতিষ্ঠিত Web Vitals থ্রেশহোল্ড অনুযায়ী কালার-কোডেড: সবুজ (ফাস্ট), হলুদ (মডারেট) এবং লাল (স্লো)।
ভিজ্যুয়াল বার চার্ট প্রতিটি রিসোর্স টাইপের (জাভাস্ক্রিপ্ট ফাইল, CSS স্টাইলশীট, ইমেজ, ফন্ট এবং অন্যান্য অ্যাসেট) সংখ্যা এবং মোট সাইজ দেখায়। কোন ধরণের রিসোর্স পেজের সাইজ বাড়াতে সবচেয়ে বেশি ভূমিকা রাখছে তা তাৎক্ষণিকভাবে দেখুন।
মোট DOM এলিমেন্ট সংখ্যা, সর্বোচ্চ নেস্টিং ডেপথ এবং মোট ইভেন্ট লিসেনার সংখ্যা দেখায়। বড় DOM সাইজ (২০০০+ এলিমেন্ট) এবং গভীর নেস্টিং (১৫+ লেভেল) সম্ভাব্য পারফরম্যান্স বাধা (bottleneck) হিসেবে চিহ্নিত করা হয়।
০-১০০ এর মধ্যে একটি একক স্কোর পেজের পারফরম্যান্স হেলথকে সংক্ষিপ্তভাবে উপস্থাপন করে, যা কালার-কোডেড: সবুজ (৮৫+), হলুদ (৫০-৮৪), অথবা লাল (০-৪৯)। এটি টাইমিং মেট্রিক্স এবং রিসোর্স ইফিসিয়েন্সির একটি সম্মিলিত ও ওয়েটেড রেজাল্ট।
ডাউনলোড করা সমস্ত রিসোর্সের সম্মিলিত সাইজ MB-তে দেখায়। ক্যাটাগরি অনুযায়ী ভাগ করে দেখানো হয় যাতে আপনি দেখতে পারেন কতটুকু জাভাস্ক্রিপ্ট (যেমন ৮৪২ KB), কতটুকু ইমেজ (যেমন ২৪৫ KB) এবং কতটুকু CSS (যেমন ১২৮ KB) — সবচেয়ে ভারী অংশটি সহজেই শনাক্ত করা যায়।
ব্রাউজারের Performance API থেকে পারফরম্যান্স ডেটা পড়ে — যা সাধারণ পেজ লোডের সময় ইতিমধ্যেই সংগৃহীত থাকে। কোনো কৃত্রিম রি-টেস্টিং, বাড়তি নেটওয়ার্ক রিকোয়েস্ট বা টুলটি চালানোর ফলে পারফরম্যান্সে কোনো প্রভাব পড়ে না।
যেকোনো পেজ ওপেন করুন এবং তাৎক্ষণিক পারফরম্যান্স সারসংক্ষেপ পান। এটি কি ফাস্ট (সবুজ স্কোর), মডারেট (হলুদ), নাকি স্লো (লাল)? ড্যাশবোর্ডটি এক সেকেন্ডের কম সময়ে এর উত্তর দেয় — Lighthouse রান করার জন্য অপেক্ষা করতে হয় না।
যদি পেজটি স্লো হয়, তবে রিসোর্স ব্রেকডাউন এর কারণ দেখায়। ১.২ MB জাভাস্ক্রিপ্ট? এটাই মূল বাধা। ৮০০ KB আন-অপ্টিমাইজড ইমেজ? এটিই ফিক্স করতে হবে। ভিজ্যুয়াল ব্রেকডাউন সবচেয়ে ভারী অংশগুলোকে সুস্পষ্ট করে তোলে।
অপ্টিমাইজ করার আগে Page Performance রান করুন এবং মেট্রিক্সগুলো নোট করুন। পরিবর্তনগুলো করার পর পেজ রিলোড করে আবার রান করুন। আপনার অপ্টিমাইজেশন প্রত্যাশিত প্রভাব ফেলেছে কিনা তা যাচাই করতে FCP, লোড টাইম এবং পেজের মোট ওজন তুলনা করুন।
আপনার এবং আপনার প্রতিযোগীদের সাইটে Page Performance রান করুন। লোড টাইম, পেজ ওয়েট এবং রিসোর্স ডিস্ট্রিবিউশন তুলনা করুন। প্রতিযোগীরা কি কম জাভাস্ক্রিপ্ট ব্যবহার করছে? তাদের ইমেজগুলো কি আরও ভালোভাবে অপ্টিমাইজ করা?
ডেভেলপমেন্টের সময় নিয়মিত প্রধান পেজগুলোতে টুলটি ব্যবহার করুন। যদি পারফরম্যান্স স্কোর কমে যায় বা পেজের ওয়েট হঠাৎ বেড়ে যায়, তবে বুঝবেন আপনি কোনো রিগ্রেশন ঘটিয়েছেন — প্রোডাকশনে পৌঁছানোর আগেই এটি শনাক্ত করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Page Performance আইকনে ক্লিক করুন। বর্তমান পেজ লোডের পারফরম্যান্স ডেটাসহ ড্যাশবোর্ডটি তাৎক্ষণিকভাবে দৃশ্যমান হবে।
উপরে থাকা চারটি মূল টাইমিং মেট্রিক চেক করুন: FCP, DOMContentLoaded, Full Load এবং TTI। সবুজ ভ্যালু মানে ফাস্ট, হলুদ মানে মডারেট এবং লাল মানে উন্নতির প্রয়োজন।
কোন অ্যাসেট টাইপটি সবচেয়ে ভারী তা দেখতে রিসোর্স বার চার্টটি দেখুন। জাভাস্ক্রিপ্ট প্রায়ই সবচেয়ে বড় কারণ হয়ে থাকে — যদি JS ৫০০ KB-এর বেশি হয়, তবে কোড-স্প্লিটিং বা লেজি-লোডিং করার কথা বিবেচনা করুন।
DOM পরিসংখ্যান রিভিউ করুন। যদি এলিমেন্ট সংখ্যা ১৫০০ অতিক্রম করে অথবা নেস্টিং ডেপথ ১৫-এর বেশি হয়, তবে রেন্ডারিং পারফরম্যান্স উন্নত করতে মার্কআপ সহজ করার কথা ভাবুন।
সামগ্রিক স্কোরটি একটি দ্রুত বেঞ্চমার্ক হিসেবে কাজ করে। উন্নতির মাত্রা পরিমাপ করতে অপ্টিমাইজেশনের আগে এবং পরে টুলটি ব্যবহার করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
