Mengukur Load Page Time dengan PhantomJS

Sebelum membaca sebuah artikel yang berjudul   “What is Headless Browser?”   saya sedikit  bingung apa sih sebenarnya headless browser itu. Kemudian saya coba baca berulang kali dan saya dapat menangkap sebuah intisari bahwa headless browser adalah browser yang tak berwujud alias tidak mempunyai tampilan tapi dapat memanipulasi isi dari halaman web. Dengan headless browser Anda dapat melakukan berbagai pengujian terhadap halaman web yang terdiri dari DOM.

Salah satu headless browser yang ada saat ini adalah PhantomJS. Sebuah tools yang dibuat oleh Ariya Hidayat. Seorang ilmuwan di bidang telekomunikasi dan penggiat open source yang menurut kabar kini tinggal di Amerika Serikat. PhantomJS ini merupakan scriptable headless browser. Dibangun diatas WebKit, PhantomJS banyak digunakan oleh banyak vendor untuk menguji produk web mereka. Misalnya Twitter Bootstrap.

Dengan merujuk ke PhantomJS Quickstart, saya mencoba untuk mempelajari PhantomJS dengan cara menyalin ulang dan sedikit memodifikasi source code untuk mengukur load page time menggunakan PhantomJS (padahal mah cuma nambahin console.log 😀 haha). Berikut adalah source code untuk mengukur load page time menggunakan PhantomJS:

var page = require('webpage').create(),
    system = require('system'),
    t, address;

if (system.args.length === 1){
    console.log('Usage: loadspeed.js <some URL>');
    phantom.exit();
}

t = Date.now();
address = system.args[1];
console.log('Start calculating...');
page.open(address, function(status){
    if (status !== 'success'){
        console.log('FAIL to load the address');
    }
    else{
        t = Date.now() - t;
        console.log('Loading time ' + t + " msec");
        console.log(address + " was succesfully loaded..");
    }
    phantom.exit();
});

Pada kode diatas, digunakan modul webpage dan system. Kemudian dari modul webpage dibuatlah sebuah objek webpage dengan memanggil method create(). Tak lupa ada dua buah variabel yang dibutuhkan yaitu address yang digunakan untuk menangkap URL yang diterima saat menjalankan script ini, dan ada variabel t yang digunakan untuk menghitung selisih waktu sesaat setelah proses load page selesai.

Setelah memanggil beberapa modul dan mendefinisikan variabel, selanjutnya ada kode yang digunakan untuk menangkap parameter URL dari konsol saat menjalankan script ini. Dilanjutkan dengan menangkap waktu awal ke variabel t dan menangkap  URL yang akan diukur ke variabel address.

Nah bagian ini yang paling PhantomJS banget, kita memulai mengakses halaman web dengan menggunakan page.open(). Method open() tersebut memerlukan sebuah alamat web yang tentunya akan dibuka untuk pengukuran atau manipulasi dan sebuah callback yang akan menjalankan proses lain saat halaman web dibuka. Di dalam callback tersebut terdapat pengecekan status ketika halaman web dibuka menggunakan PhantomJS. Jika status tidak sama dengan sukses maka script tersebut akan melaporkan bahwa halaman web gagal dibuka. Jika status adalah sukses, maka akan dilakukan proses penghitungan selisih waktu antara selesainya halaman web sudah dimuat dengan waktu sebelum halaman web dimuat. Kemudian selisih waktu tersebut ditampilkan.

Kemudian jalankan kode dengan menggunakan PhantomJS yang sudah terpasang di komputer. Misal perintahnya (kebetulan saya menggunakan Ubuntu Linux dimana PhantomJS  sudah saya install) adalah sebagai berikut: phantomjs loadspeed.js https://ridwanbejo.wordpress.com , Jika berhasil maka akan muncul hasil seperti pada gambar berikut:

 

pengujian load page time menggunakan PhantomJS

pengujian load page time menggunakan PhantomJS

Untuk cara install PhantomJS, silahkan disimak di PhantomJS Build karena disana terdapat panduan untuk instalasi di Mac, Linux, dan Windows. Semoga bermanfaat :D.

Iklan

Satu pemikiran pada “Mengukur Load Page Time dengan PhantomJS

  1. Ping balik: Membuat Statistik Repo Github Sederhana dengan PhantomJS | Ridwanbejo's Blog

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s