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.

Stopwatch


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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments