PageSpeed untuk mempercepat loading website anda

---

PageSpeed bukanlah plug-in atau widget untuk website anda, melainkan hanyalah sebuah add-on firefox yang akan menganalisa kecepatan loading suatu web. PageSpeed menilai dari segala elemen web yang kemudian hasil akhirnya ditampilkan dalam bentuk score (maksimal 100). Makin tinggi score suatu web, makin bagus pula performanya.
PageSpeed merupakan proyek dari google dan untuk menjalankannya terlebih dulu harus ada firebug di mozilla firefox anda.

Langsung aja kita ke cara membaca analisa dari pagespeed, karena info-info dasar telah bisa anda simak sendiri pada link-link diatas.
Setelah semuanya di install, buka firebug dan pilih pagespeed pada tab (hotkey F12). Tapi sebelumnya, buka dulu website yang ingin anda analisa. Biarkan sampai loading finish. Pada PageSpeed, klik tombol analyze performance.



PageSpeed akan mulai menganalisa dan memberi anda score. Makin tinggi, makin bagus performa website. Nah, bagaimana cara mengoptimalkan website anda?



Inilah beberapa saran dari pagespeed supaya website anda bisa lebih baik lagi. klik panah kecil untuk membaca secara detil saran tersebut. Klik pada teks akan membawa anda ke halaman google PageSpeed suggestion.

Umumnya saya menemukan beberapa masalah yang kerap disinggung PageSpeed, sperti:
1. Image yang tidak di kompres.
Solusi: Kompres sampai ukuran sekecil mungkin setiap gambar yang ada pada website anda. Namun tetap menjaga kualitas gambar.

2. Beberapa javascript dari situs yang sama.
Solusi: Hal ini bisa menurunkan performa website karena memperbanyak request DNS. Akali dengan menggabungkan js-js tersebut menjadi 1 file javascript. Baca postingan saya tentang mengkompress javascript

3. Seputar Async javascript
Solusi: cobalah loading javascript secara asynchronous (non-blocking). Untuk info yang ini bisa anda cari di google.. :D

4. Stylesheet dan javascript loading
Solusi: Usahakan menempatkan tag STYLE (CSS) diatas kemudian menyusul tag SCRIPT. meloading javascript duluan tidak bagus untuk website.

5. Gunakan selektor CSS yang efisien
Solusi: Kurangi mendeklarasikan fungsi yang sama berulang kali, ada baiknya digabung jadi satu baru di deklarasikan.

Sekedar tambahan info, widget-widget yang kerap menurunkan performa suatu website adalah facebook like box dan google follower.

Semoga berguna.. :D
Ditunggu komentarnya...

Blog tutorial menarik kini dilengkapi dengan Try it editor!!

---

Sekedar pengumuman untuk anda semua, kini blog tutorial menarik sudah menyediakan sebuah widget HTML editor REAL-TIME yang bisa digunakan untuk menjalankan kode-kode HTML layaknya di web browser. Temukan widgetnya dibawah postingan... :D

Cara pakainya mudah saja, tinggal anda ketikkan kode-kode HTML disana maka akan langsung di preview di kotak bawah. Support HTML, javascript, CSS dan bahasa web dasar lainnya.
Area widget sempit? Maklum, ukuran widget harus disesuaikan dengan template agar lebih rapi. Namun jangan kecewa, anda bisa meng-klik link POP-OUT dan editor pun bisa anda maximize full screen.

Selamat mencoba, ditunggu komentarnya.. :D

Melakukan aksi show/hide pada sidebar blog

---

Kali ini saya akan membagikan sebuah tips yang lumayan unik, yaitu membuat sidebar anda bisa dihilangkan maupun ditampilkan. Tidak hilang secara total sih, cuma menyembunyikan sidebar dari pandangan... :D
Jadi widget-widget yang ada didalam sidebar tetap diloading.

Mengapa ini perlu dilakukan? Saya lihat kebanyakan blogger memposting foto-foto yang resolusinya sangat besar sehingga foto tersebut melewati main-wrapper (tempat postingan) kemudian masuk ke sidebar-wrapper (sidebar blog). Jadi dengan tips ini kita bisa menghilangkan sidebarnya sejenak untuk melihat foto.. :D

Walau masalah ini bisa diatasi dengan mengubah ukuran gambar, namun saya kira banyak blogger yang malas melakukannya, apalagi jika gambarnya banyak... :D
Nah, berikut tipsnya... :D

Sisipkan dulu script ini di bagian HEAD pada template:

<script>
function hide(){
document.getElementById("sidebar-wrapper").style.display="none";
}

function show(){
document.getElementById("sidebar-wrapper").style.display="block";
}
</script>

Kemudian di edit layput, tambahkan widget HTML/javascript lalu isi dengan script semacam ini:

<a href='#' onclick='hide();'>HIDE</a> the sidebar or <a href='#' onclick='show();'>SHOW</a> the sidebar

Kalimatnya bisa anda ubah sesuai keinginan
Pastikan bahwa anda tidak meletakkan widget ini di sidebar karena akan ikut hilang bersama sidebar.... :D

Perlu diperhatikan bahwa anda harus menyesuaikan nama sidebar-wrapper dengan div id sidebar di template anda.
Demonya ada di blog teman saya, blogger iseng. Silakan klik.. :D

Selamat mencoba. Kalau ada pertanyaan silakan kasih komentarnya..

Javascript untuk menghitung jumlah karakter

---

Sekedar sharing mengenai script untuk menghitung berapa banyak karakter yang kita input. Cara kerjanya mudah, ketika anda memasukkan karakter pada box yang disediakan, maka fungsi char counter akan dijalankan ketika anda melepas ketikan keyboard (onkeyup) dan kemudian menampilkan jumlah karakter yang telah anda ketik.. :D

Selamat mencoba, berikut kode HTML-nya. Tinggal di paste ke notepad lalu simpan dengan ekstension *.htm atau *.html
Bisa juga anda modif dan sisipkan fungsi caharacter counter ini di proyek-proyek web anda.. :D

<title>Character counter</title>
<form method="POST">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<textarea rows="30" name="charcount" cols="160" wrap="virtual" onkeyup="countit(this)"></textarea>
</td>
</tr>
<tr>
<td width="100%"><div align="right"><p>Jumlah karakter: <input type="text" name="displaycount" size="20" readonly="readonly"></p>
</td>
</tr>
</table>
</form>
<script language="JavaScript">
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
</script>

Tips MENGHAPUS blogger navbar dari blog anda

---

Blogger navbar umumnya tidak dikehendaki kemunculannya oleh kebanyakan blogger. Tapi bagaimana lagi, itu sudah termasuk "paket" dari empunya blogspot, blogger.com... :D
Kalau anda search di google cara menghilangkan navbar blogger, mungkin anda akan menemukannya. Namun saya yakin kalau kebanyakan tips yang anda temui tidak MENGHAPUS navbar blogger, melainkan hanya MENYEMBUNYIKANNYA.
Mari kita HAPUS blogger navbar itu...

Walau sama-sama membuat navbar tidak kelihatan, namun trik kali ini akan ampuh membasmi blogger navbar sampai ke sourcecodenya. Jadi navbar tidak akan diloading sama sekali. Beda dengan menyembunyikan navbar yang hanya membuatnya tidak kelihatan.

- temukan dulu tag <body> pada template anda.
- sisipkan koda <--body--> tepat DIATAS tag body tadi
- save template dan lihat source codenya.. :D

script blogger navbar akan berubah menjadi comment dan tidak akan diloading lagi ke blog. Selamat mencoba...