Ukur Kecepatan Blog Anda Dengan Stopwatch

Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Untuk mengukur kecepatan loading halaman blog, Blogger merekomendasikan untuk menggunakan sebuah tool untuk mengukur atau mencatat waktu yang diperlukan ketika browser membuka sebuah halaman web sampai halaman web tersebut berhasil dimuat sepenuhnya yaitu Stopwatch.

Stopwatch mencatat waktu saat browser mulai memuat URL web sampai browser berhasil memuat seluruh halaman URL tersebut. Dan seperti kita ketahui bahwa kecepatan loading sebuah halaman website dipengaruhi oleh gambar, video, widget, javascript, dan lain-lain. Untuk itu, dengan mengetahui waktu loading blog, maka kita bisa menentukan gambar, widget, atau javascript yang benar-benar sangat dibutuhkan. Jika waktu yang dibutuhkan untuk membuka halaman web terasa cukup lama, maka kita bisa mulai mengoptimasi elemen-elemen blog yang berat atau mungkin menghapusnya jika itu tidak benar-benar dibutuhkan.

Setelah mencoba menggunakan Stopwatch ini, saya tertarik untuk mencoba memodifikasi tampilan form-nya dan memungkinkan untuk bisa disimpan di blog. Silahkan coba demonya dengan memasukan URL blog Anda (homepage atau postingan) pada kolom form-nya.

DEMO

Bagi yang ingin menyimpannya di blog, silahkan simpan kode CSS dan HTML di bawah ini.

Kode CSS

Simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.stopwatch{
    background:#ddd;
    padding:6px 10px 10px;
    margin:0 auto;
    width:400px;
}
.title-widget{
    font-size:14px;
    color:#555;
    padding:0;
    margin:0 0 5px;
    text-align:center;
}
.input-box{
    background: #fff !important;
    border:none;
    padding: 0px 8px;
    color: #555;
    font-size: 12px;
    height: 25px;
    width: 265px;
    margin-right:5px;
}
.input-box:focus,.submit-button:focus{
    outline:none;
}
.submit-button{
    background: #333 !important;
    border:none;
    padding:0;
    color: #efefef;
    font-size: 12px;
    height: 25px;
    width:110px;
    margin:0 auto;
    text-align:center;
    cursor:pointer;
}
.submit-button:hover{
    background: #555 !important;
}

Kode HTML

Saran saya silahkan simpan tool ini di halaman statis blog pada post editor HTML.

<div class="stopwatch">
    <div class="title-widget">Enter the URL to be measured:</div>
<form action="http://www.numion.com/Stopwatch/Start.html" method="get" target="_blank">
   <input class="input-box" type="text" name="Url" onblur='if (this.value == &quot;&quot;) {this.value = &quot;http://&quot;;}' onfocus='if (this.value == &quot;http://&quot;) {this.value = &quot;&quot;;}' value='http://'/>
   <input class="submit-button" type="submit" value="Start StopWatch"/>
</form>
      </div>

Dan jangan kuatir, widget atau tool ini sudah valid HTML5. Untuk tampilannya bisa Anda modif pada kode CSS-nya.