পেজ লোডিং টাইম এবং পেজ পারফরমেন্স মনিটর করা

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

281

PhantomJS হল একটি হেডলেস ব্রাউজার, যা WebKit এর উপর ভিত্তি করে তৈরি এবং এটি কমান্ড লাইনের মাধ্যমে কাজ করে। এটি মূলত JavaScript API ব্যবহার করে ব্রাউজার রেন্ডারিং এবং স্ক্রিপ্টিংয়ের কাজ সম্পাদন করতে পারে। PhantomJS ব্যবহার করে আপনি web page লোডিং, স্ক্রিনশট গ্রহণ, এবং পারফরম্যান্স মেট্রিকস মনিটর করতে পারবেন, এবং এটি বেশ কার্যকরী একটি টুল ওয়েব স্ক্র্যাপিং, অটোমেশন এবং টেস্টিংয়ের জন্য।

PhantomJS দিয়ে পেজ লোডিং টাইম এবং পারফরম্যান্স মনিটর করা

PhantomJS এর মাধ্যমে আপনি web page লোডিং টাইম এবং পারফরম্যান্স ট্র্যাক করতে পারেন, যা ওয়েবসাইটের স্পিড এবং পারফরম্যান্স বিশ্লেষণের জন্য ব্যবহৃত হয়। এতে JavaScript API ব্যবহার করে পেজ লোড হওয়ার সময় মাপা সম্ভব, এছাড়া রিসোর্স লোডিংও ট্র্যাক করা যেতে পারে।

PhantomJS এর মাধ্যমে পেজ লোডিং টাইম এবং পারফরম্যান্স মনিটর করা:

1. PhantomJS স্ক্রিপ্টে পেজ লোডিং টাইম ট্র্যাক করা:

প্রথমে, PhantomJS ইনস্টল করুন যদি আপনার সিস্টেমে এটি ইনস্টল না থাকে:

npm install -g phantomjs

এরপর, আপনি PhantomJS এর সাহায্যে পেজ লোডিং টাইম ট্র্যাক করার জন্য একটি স্ক্রিপ্ট তৈরি করতে পারেন।

Example Script: Track Page Load Time

var page = require('webpage').create();
var startTime = Date.now(); // Track the start time

page.open('http://example.com', function(status) {
    var endTime = Date.now(); // Track the end time
    var loadTime = endTime - startTime; // Calculate load time
    console.log('Page loaded in: ' + loadTime + ' ms'); // Log the load time
    phantom.exit();
});

Explanation:

  • startTime: পেজ লোড করার শুরু সময়।
  • endTime: পেজ লোড করার পর সময়।
  • loadTime: পেজ লোড হওয়ার সময়ের পার্থক্য (মিলিসেকেন্ডে)।
  • page.open: পেজটি লোড করতে ব্যবহৃত হয় এবং এটি লোড হওয়া শেষ হলে একটি callback ফাংশন রান হয়।

Run the Script:

এই স্ক্রিপ্টটিকে PhantomJS দিয়ে রান করতে পারেন:

phantomjs loadtime.js

এটি কনসোলে পেজ লোড টাইম প্রদর্শন করবে।

2. PhantomJS দিয়ে সম্পূর্ণ ওয়েবপেজের পারফরম্যান্স ট্র্যাক করা:

আপনি PhantomJS ব্যবহার করে ওয়েবপেজের সম্পূর্ণ পারফরম্যান্স যেমন HTTP requests, resource loading, JavaScript execution time, ইত্যাদি ট্র্যাক করতে পারেন।

Example Script: Performance Monitoring

var page = require('webpage').create();
var performanceMetrics = [];

page.onResourceRequested = function(request) {
    performanceMetrics.push({
        url: request.url,
        startTime: Date.now(),
    });
};

page.onResourceReceived = function(response) {
    var endTime = Date.now();
    var metrics = performanceMetrics.find(function(item) {
        return item.url === response.url;
    });
    if (metrics) {
        metrics.endTime = endTime;
        metrics.loadTime = endTime - metrics.startTime;
        console.log('Resource: ' + response.url + ' loaded in ' + metrics.loadTime + ' ms');
    }
};

page.open('http://example.com', function(status) {
    console.log('Page loaded: ' + status);
    phantom.exit();
});

Explanation:

  • onResourceRequested: প্রতিটি HTTP রিকোয়েস্ট ট্র্যাক করে।
  • onResourceReceived: প্রতিটি রেসপন্স গ্রহণ করার পর তার লোড টাইম নির্ধারণ করে।
  • performanceMetrics: একটি অ্যারে যা ওয়েবপেজের সকল রিসোর্সের লোড টাইম সংরক্ষণ করবে।

Run the Performance Script:

phantomjs performance.js

এটি প্রতিটি রিসোর্সের লোড টাইম কনসোলে দেখাবে।

3. PhantomJS দিয়ে ওয়েবপেজ লোডিং এবং রিসোর্স লগিং:

আপনি ওয়েবপেজের রিসোর্সের কার্যকারিতা যেমন images, scripts, এবং stylesheets লোডিং টাইমও ট্র্যাক করতে পারেন।

Example Script: Log Resources Load Time

var page = require('webpage').create();
var resources = [];

page.onResourceReceived = function(response) {
    if (response.stage === 'end') {
        resources.push({
            url: response.url,
            type: response.type,
            time: response.time
        });
    }
};

page.open('http://example.com', function(status) {
    console.log('Page loaded with status: ' + status);
    resources.forEach(function(resource) {
        console.log('Resource: ' + resource.url + ' | Type: ' + resource.type + ' | Time: ' + resource.time + ' ms');
    });
    phantom.exit();
});

Explanation:

  • onResourceReceived: রিসোর্সের শেষ স্টেজ (লোডিং সম্পন্ন) হওয়ার পরে রিসোর্সের URL, টাইপ এবং লোড টাইম লগ করা হয়।
  • resources: একটি অ্যারে, যেখানে প্রতিটি রিসোর্সের তথ্য রাখা হবে।

Run the Resource Tracking Script:

phantomjs resources.js

এটি কনসোলে সমস্ত রিসোর্সের লোড টাইম এবং অন্যান্য তথ্য দেখাবে।

4. PhantomJS দিয়ে পেজ লোডের বিস্তারিত তথ্য:

ফুল পেজ লোডিং টাইম, JavaScript execution time, এবং অন্যান্য ডায়নামিক ডেটা ট্র্যাক করার জন্য আপনি PhantomJS স্ক্রিপ্ট ব্যবহার করতে পারেন।

Example Script: Monitor JavaScript Load Time

var page = require('webpage').create();
var startTime = Date.now();

page.onLoadFinished = function(status) {
    var endTime = Date.now();
    var loadTime = endTime - startTime;
    console.log('Page fully loaded in: ' + loadTime + ' ms');
    phantom.exit();
};

page.open('http://example.com', function(status) {
    console.log('Page loading status: ' + status);
});

এটি পেজের পুরো লোড টাইম পরিমাপ করবে, যা JavaScript execution সহ সব কিছু অন্তর্ভুক্ত করবে।


PhantomJS একটি শক্তিশালী টুল যা ওয়েবপেজের performance, resource loading, এবং page load time মনিটর করতে ব্যবহার করা হয়। এর JavaScript API এর মাধ্যমে আপনি ওয়েবপেজের প্রতিটি রিসোর্স এবং তার লোড টাইম খুব সহজে ট্র্যাক করতে পারেন, যা আপনার ওয়েবসাইটের পারফরম্যান্স বিশ্লেষণের জন্য খুবই উপকারী। আপনি স্ক্রিপ্ট ব্যবহার করে ওয়েবপেজের লোডিং এবং পারফরম্যান্স সম্পর্কে বিস্তারিত তথ্য সংগ্রহ করতে পারেন এবং সেগুলি থেকে প্রয়োজনীয় সিদ্ধান্ত গ্রহণ করতে পারেন।

Content added By
Promotion

Are you sure to start over?

Loading...