views


Kali ini, nak kongsikan bersama sedikit tutorial untuk mempamerkan 'Page Load Time' (widget kecil yang mempamerkan jumlah masa yang diambil untuk memaparkan blog dalam browser sepenuhnya '100%', err korang paham kan?) dengan meletakkan sedikit javascript code dalam blog Blogger korang. Script ini tidak dihoskan di mana² web (third party) pun, jadi ianya dijamin langsung tak akan memberatkan blog. Tak susah pun nak pahamkan code ini, tapi tak semudah yang disangkakan kalau korang tak ikut langkah² di bawah satu persatu dengan betul.

Javascript code ini akan mempamerkan jumlah masa loading yang sebenar bagi blog Blogger korang. Secara automatik, perakam masa (timer) akan memulakan rakaman masa loading apabila suatu muka pada halaman blog bermula untuk dihuraikan (page began to parse) dan rakaman masa tadi akan diberhentikan bila halaman blog tadi telah selesai memuatkan semua isi kandungan dalam blog (gambar di bawah hanya sekadar ilustrasi sahaja).


Ikuti langkah² pemasangan code di bawah:

1. Login akaun Blogger korang, pergi ke Dashboard Blogger > Design > tab Edit HTML > tekan Expand Widget Templates.

2. Copy dan paste code di bawah selepas code <head> (pastikan letak sebelum </head>) dalam template blog:

<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime(); //Get the start time
</script>

3. Selepas itu, cari dan paste kan code di bawah sebelum code </body> dalam template blog:

<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime(); //Get the end time
//Find the difference between the start and end times
var totaltime = (endtime - starttime)/1000;
//Round 2 decimal places
var result = Math.round(totaltime*100)/100;
//Output results to a "P" element
document.getElementById("loadtime").innerHTML = "Page load time: "+ result +" seconds";
</script>

4. Akhir sekali, korang boleh letak code di bawah ini dalam Gadget HTML/Javascript (dalam Page Element > Add a Gadget) ATAU letak di ruang Footer / Sidebar ATAU pun kat mana² saja korang suka (yang korang rasakan sesuai dalam template blog):

<span id="loadtime">Loading....</span>

5. Sebelum korang tekan Save Template, korang boleh edit perkataan yang telah di bold dengan warna merah seperti code² di atas. Dah siap pun, tada~! Dan jangan lupa tekan Save Template ya. =)

Contoh demo/result yang telah dipasang dalam blog ini seperti gambar di bawah (dalam Footer blog):



Korang juga boleh mengubaisuai code dalam langkah ke #4, dengan meletakkan warna (font-color), style (bold, italic) dan bermacam² lagi.

Secara idealnya, suatu halaman blog perlu dimuatkan dalam masa 5 saat atau kurang (page load). Kalau blog korang mengambil masa lebih dari 20 saat, maka boleh dianggap sebagai 'lembap' (slow). Jadi korang kena periksa segala isi kandungan blog seperti Javascript codes, saiz gambar dan bermacam² lagi. Berkemungkinan korang kena buang mana² yang dirasakan amat berat dan tidak perlu diletakkan dalam blog.

Harap korang tak akan mengalami sebarang masalah ketika memasang code² di atas dalam blog Blogger korang. Jikalau terdapat masalah, boleh tinggalkan komen di bawah. Apa² pun terima kasih sebab sudi membaca blog kali ini. (^^)

RUJUKAN: Net Gator - Page loading time script for Blogger blogs.

P/S: Aku rasa aku masih gagal untuk menulis ayat tutorial aku dengan baik..tsk!