Performance Reports তৈরি করা

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

198

PhantomJS একটি হেডলেস ব্রাউজার যা WebKit-এ ভিত্তি করে তৈরি এবং এটি স্ক্রিপ্টিং করার জন্য JavaScript ব্যবহার করে। এটি সাধারণত ওয়েব স্ক্র্যাপিং, ওয়েব অটোমেশন, টেস্টিং, এবং পারফরম্যান্স রিপোর্ট তৈরির জন্য ব্যবহৃত হয়। PhantomJS আপনার ওয়েব পেজের বিভিন্ন পারফরম্যান্স মেট্রিক্স বিশ্লেষণ করতে সহায়তা করে, এবং এই তথ্যগুলি performance reports আকারে তৈরি করতে পারে।

PhantomJS দিয়ে Performance Reports তৈরি করা

PhantomJS তে পারফরম্যান্স রিপোর্ট তৈরি করতে, আপনি JavaScript কোড ব্যবহার করে পেজ লোড, রেন্ডারিং, এবং অন্যান্য পারফরম্যান্স মেট্রিক্স ট্র্যাক করতে পারেন। এখানে কিভাবে PhantomJS ব্যবহার করে পারফরম্যান্স রিপোর্ট তৈরি করা যায়, তা নিয়ে বিস্তারিত আলোচনা করা হবে।

Step 1: PhantomJS ইনস্টল করা

প্রথমে, PhantomJS ইনস্টল করা প্রয়োজন। এটি Node.js এর সাথে কাজ করে, তাই আপনাকে PhantomJS এর npm প্যাকেজ ইনস্টল করতে হবে।

npm install -g phantomjs

Step 2: PhantomJS স্ক্রিপ্ট তৈরি করা

এখন আপনি একটি PhantomJS স্ক্রিপ্ট তৈরি করতে পারেন, যা ওয়েব পেজ লোড এবং পারফরম্যান্সের জন্য বিভিন্ন মেট্রিক্স সংগ্রহ করবে। নিচে একটি উদাহরণ দেয়া হলো:

var page = require('webpage').create();  // Create a new PhantomJS page
var system = require('system');
var t = Date.now();  // Capture the start time

page.open('http://example.com', function(status) {
    var loadTime = Date.now() - t;  // Calculate the load time

    if (status === 'success') {
        console.log('Page loaded successfully.');
    } else {
        console.log('Failed to load the page.');
    }

    // Performance metrics
    var performanceData = page.evaluate(function() {
        return {
            'DOMContentLoaded': window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart,
            'loadEvent': window.performance.timing.loadEventEnd - window.performance.timing.navigationStart,
            'pageLoadTime': window.performance.timing.loadEventEnd - window.performance.timing.navigationStart
        };
    });

    // Output performance data
    console.log('Performance Report:');
    console.log('Page Load Time: ' + performanceData.pageLoadTime + ' ms');
    console.log('DOMContent Loaded: ' + performanceData.DOMContentLoaded + ' ms');
    console.log('Load Event: ' + performanceData.loadEvent + ' ms');

    phantom.exit();
});

Explanation:

  • webpage.create(): এটি PhantomJS এর মাধ্যমে একটি নতুন পেজ তৈরি করে।
  • page.open(): এটি পেজটি খুলে এবং লোডিং অবস্থা চেক করে।
  • performance.timing: ব্রাউজার পারফরম্যান্স ডেটা, যেমন DOMContentLoaded এবং loadEvent এর সময় স্ট্যাম্প বিশ্লেষণ করতে window.performance.timing ব্যবহার করা হয়েছে।
  • performanceData: এটি evaluate() মেথডের মাধ্যমে পেজের পারফরম্যান্স তথ্য সংগ্রহ করে।
  • console.log: বিভিন্ন পারফরম্যান্স মেট্রিক্স কনসোলে আউটপুট হিসেবে প্রদর্শন করা হয়েছে।

Step 3: PhantomJS স্ক্রিপ্ট চালানো

আপনার PhantomJS স্ক্রিপ্টটি চালানোর জন্য, কমান্ড লাইনে এটি রান করুন:

phantomjs performanceReport.js

এটি আপনাকে ওয়েব পেজের পারফরম্যান্স রিপোর্ট প্রদর্শন করবে, যেমন পেজ লোডের সময়, DOMContentLoaded এবং load event সময়ের ডেটা।

Step 4: Additional Performance Metrics

আপনি আরও বিভিন্ন পারফরম্যান্স মেট্রিক্স সংগ্রহ করতে পারেন, যেমন:

  1. Time to First Byte (TTFB): এটি একটি গুরুত্বপূর্ণ মেট্রিক যা সার্ভার রেসপন্স টাইম পরিমাপ করে। এটি HTTP রেসপন্সের প্রথম বাইট থেকে পেজের সম্পূর্ণ লোড হওয়া পর্যন্ত সময়কে পরিমাপ করে।
  2. Render Time: পেজের ভিজ্যুয়াল রেন্ডারিং প্রক্রিয়া কত দ্রুত চলছে, তা ট্র্যাক করতে পারেন।
  3. Request/Response Times: ওয়েব পেজে প্রেরিত এবং প্রাপ্ত HTTP রিকোয়েস্ট এবং রেসপন্সের সময় ট্র্যাক করতে পারেন।

Example - Additional Metrics Collection:

page.onResourceRequested = function(requestData, networkRequest) {
    console.log('Requesting: ' + requestData.url);
};

page.onResourceReceived = function(response) {
    console.log('Received response: ' + response.url);
};

page.onLoadFinished = function(status) {
    console.log('Load Finished');
    phantom.exit();
};

Step 5: Saving Reports to File

ফাইল আউটপুট হিসেবে রিপোর্ট সংরক্ষণ করতে, আপনি PhantomJS স্ক্রিপ্টের মধ্যে fs (File System) মডিউল ব্যবহার করতে পারেন।

var fs = require('fs');

// Save the performance data to a file
fs.write('performanceReport.txt', 'Page Load Time: ' + performanceData.pageLoadTime + ' ms\n', 'w');

এটি পারফরম্যান্স রিপোর্টকে performanceReport.txt ফাইলে সংরক্ষণ করবে।


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

Content added By
Promotion

Are you sure to start over?

Loading...