Resource Usage এবং Timing Information সংগ্রহ করা

PhantomJS দিয়ে পেজ পারফরমেন্স অপ্টিমাইজেশন - ফ্যান্টমজেএস (PhantomJS) - Web Development

208

PhantomJS হল একটি headless browser (একটি ব্রাউজার যা UI ছাড়া রান করে) যা JavaScript চালানোর জন্য ব্যবহৃত হয়, এবং এটি সাধারণত ওয়েব পেজের স্ক্রিনশট নেওয়া, পেজ লোডিংয়ের সময় ট্র্যাক করা, সাইটের পারফরম্যান্স বিশ্লেষণ, ওয়েব স্ক্র্যাপিং, এবং অন্যান্য অটোমেশন কাজের জন্য ব্যবহৃত হয়। PhantomJS ব্যবহার করে আপনি ওয়েব পেজের রিসোর্স ব্যবহার এবং টাইমিং সম্পর্কিত তথ্য সংগ্রহ করতে পারেন।

PhantomJS দিয়ে Resource Usage এবং Timing Information সংগ্রহ করা

PhantomJS দিয়ে resource usage এবং timing information সংগ্রহ করার জন্য network, resource, এবং performance সম্পর্কিত বিভিন্ন তথ্য সংগ্রহের জন্য JavaScript কোড ব্যবহার করা হয়। আপনি ওয়েব পেজের লোডিং টাইম, রিসোর্সের সাইজ, এবং লোডিংয়ের স্ট্যাটাস জানতে পারবেন।

Steps to Collect Resource Usage and Timing Information in PhantomJS:

  1. PhantomJS ইনস্টলেশন:
    • প্রথমে PhantomJS ইনস্টল করতে হবে। এটি আপনার কম্পিউটারে ইনস্টল করা না থাকলে, আপনি PhantomJS Official Website থেকে ডাউনলোড করে ইনস্টল করতে পারেন।
  2. PhantomJS স্ক্রিপ্ট লেখার জন্য Example:
    • নীচে একটি উদাহরণ দেওয়া হয়েছে যেখানে PhantomJS ব্যবহার করে resource usage এবং timing information সংগ্রহ করা হয়েছে।
var page = require('webpage').create();  // Create a webpage object

// Set up a listener to collect resource usage data
page.onResourceReceived = function (response) {
    if (response.status >= 400) {
        console.log('Resource failed to load: ' + response.url + ' Status: ' + response.status);
    }
    else {
        console.log('Resource loaded: ' + response.url + ' Status: ' + response.status);
        console.log('Size of resource: ' + response.bodySize + ' bytes');
    }
};

// Set up a listener to capture performance data (timing)
page.onLoadFinished = function(status) {
    if (status === "success") {
        page.evaluate(function() {
            var timing = window.performance.timing;
            console.log('Page load time (in ms): ' + (timing.loadEventEnd - timing.navigationStart));
            console.log('DNS Lookup time (in ms): ' + (timing.domainLookupEnd - timing.domainLookupStart));
            console.log('TCP Connection time (in ms): ' + (timing.connectEnd - timing.connectStart));
            console.log('Page Rendering time (in ms): ' + (timing.loadEventEnd - timing.responseEnd));
        });
    }
    else {
        console.log("Page failed to load.");
    }
    phantom.exit();
};

// Open a webpage and gather timing and resource usage info
page.open('https://example.com', function(status) {
    if (status === "success") {
        console.log('Page loaded successfully!');
    } else {
        console.log('Page failed to load');
    }
});

Explanation:

  • page.onResourceReceived: এটি ফাংশনটি ওয়েবপেজের বিভিন্ন রিসোর্স (যেমন স্ক্রিপ্ট, ইমেজ, স্টাইলশিট) লোড হওয়ার পর তা মনিটর করে। এই ফাংশনটি লোড হওয়া রিসোর্সের ইউআরএল, স্ট্যাটাস কোড, এবং সাইজ প্রদর্শন করে।
  • page.onLoadFinished: এই ফাংশনটি পেজ লোড হওয়া শেষ হওয়ার পর performance timing (যেমন লোডিং টাইম, DNS lookup টাইম, TCP connection টাইম) সংগ্রহ করে এবং প্রদর্শন করে।
  • Performance Timing:
    • window.performance.timing API ব্যবহার করে পেজ লোডিংয়ের সময় এবং বিভিন্ন স্টেপের জন্য টাইমিং সংগ্রহ করা হয়। এতে আপনি page load time, DNS lookup time, TCP connection time, এবং rendering time সম্পর্কিত তথ্য পেতে পারেন।

Output Example:

Resource loaded: https://example.com/styles.css Status: 200
Size of resource: 3564 bytes
Resource loaded: https://example.com/script.js Status: 200
Size of resource: 1420 bytes
Page load time (in ms): 2100
DNS Lookup time (in ms): 20
TCP Connection time (in ms): 150
Page Rendering time (in ms): 950

PhantomJS কমান্ড রান করা:

  • উপরের স্ক্রিপ্টটিকে page.js নাম দিয়ে সেভ করুন এবং PhantomJS দিয়ে এটি চালান:
phantomjs page.js

Key Data Collected:

  1. Resource Status: পেজ লোডিংয়ের সময় বিভিন্ন রিসোর্স (যেমন CSS, JS, ইমেজ) লোড হওয়ার স্ট্যাটাস এবং সাইজ জানানো হয়।
  2. Page Load Time: পুরো পেজ লোড হতে যে সময় প্রয়োজন হয়েছে তা (মিলিসেকেন্ডে) প্রদান করা হয়।
  3. DNS Lookup Time: DNS রেজোলিউশনের জন্য ব্যবহৃত সময়।
  4. TCP Connection Time: সার্ভারের সাথে TCP কানেকশন স্থাপনের জন্য ব্যবহৃত সময়।
  5. Rendering Time: পেজের উপাদান রেন্ডার করার জন্য সময়।

Additional Performance Metrics:

  • আপনি আরও গভীরভাবে রিসোর্স টাইমিং এবং পারফরম্যান্স ডেটা সংগ্রহ করতে পারেন। এর জন্য Performance API অথবা resource timing API ব্যবহার করতে হবে। PhantomJS এই ডেটা সংগ্রহে সহায়তা করে।

PhantomJS হল একটি শক্তিশালী টুল যা আপনাকে resource usage এবং timing information সংগ্রহ করতে সাহায্য করে। এটি ওয়েবপেজের পারফরম্যান্স বিশ্লেষণ, স্ক্রিপ্টের সমস্যা চিহ্নিতকরণ, ওয়েব স্ক্র্যাপিং, এবং headless browsing এর জন্য একটি শক্তিশালী সমাধান প্রদান করে। PhantomJS-এ network requests এবং performance timing সম্পর্কিত তথ্য সংগ্রহ করার মাধ্যমে আপনি ওয়েব পেজের লোডিং পারফরম্যান্স বিশ্লেষণ করতে পারেন এবং অপ্টিমাইজেশন প্রয়োগ করতে পারেন।

Content added By
Promotion

Are you sure to start over?

Loading...