Optimasi Blog dengan Google Page Speed dan Yahoo! YSlow

Postingan kali ini merupakan kelanjutan dari tulisan saya sebelumnya mengenai bahasan 15 Cara Optimasi Blog Agar Tampil Lebih Cepat, buat yang sudah baca silahkan lanjutkan baca artikel ini, kalau belum..silahan baca dulu, karena untuk bahasan kali ini kita langsung praktek menganalisa menggunakan tools, dan artikel yang saya tulis sebelumnya itu sebagai pegangan saja biar nanti gak bingun memilah apa saja halaman yang sekiranya wajib dioptimasi.

Optimasi kali ini sebenarnya bertujuan untuk mengurangi pesan kesalahan ketika browser melakukan rendering pada suatu halaman. Logikanya yaitu semakin sedikit kesalahan tentu akan semakin baik karena ini akan mengurangi kerja berat dari Browser atau paling tidak kita berusaha menghemat pemakain Bandwith.

Google Page Speed
Untuk Tools Optimasi yang pertama, saya biasanya menggunakan Google Page Speed, selain karena tools ini besutan langsung dari Google, tools ini juga memberikan informasi cukup lengkap mengenai laporan kesalahan pada halaman. Setiap halaman blog yang kita analisa secara otomatis akan dilaporkan kedalam tabel list. Page Speed akan memilah dan menginformasikan secara rinci apa saja kesalahan yang ditemukan, selain pesan kesalahan, disitu juga di-informasikan pesan kebenaran, yang berarti ditemukan sebagian element halaman yang tidak perlu lagi diperbaiki karena dianggap sudah benar.


Halaman yang selesai dianalisa Google Page Speed biasanya akan diberi nilai (score). Nilai score terbaik adalah 100, ingat! tidak mudah untuk bisa mencapai nilai 100,  saran saya cukuplah mencapai score antara 80-90/100, inipun sudah terbilang angka yang lumayan bagus. 

Lalu bagaimana memperbaiki kesalahan?
Setiap pesan error yang ditampilkan dalam list semuanya tentu sudah ada solusinya, misalkan pesan tersebut menampilkan "Remove unused CSS" yang berati kita diminta untuk membuang kode CSS yang tidak digunakan. Silahkan klik link yang  menampilkan kesalahan, secara otomatis Google akan memberikan solusi terbaik untuk mengatasi masalah tersebut. Nah, tugas kita tinggal pelajari saja intruksi dan tips optimasi dari Google.

Yahoo! YSlow
Selain Google Page Speed ada satu lagi tools yang biasanya saya gunakan yaitu Yahoo! YSlow. Pilihan pada YSlow karena saya menyadari tools ini dikembangkan langsung oleh Yahoo, tentu saja keakuratannya gak perlu diragunakan lagi. Sebenarnya cara kerja YSlow mulai dari informasi laporan kesalahan dan tetek bengeknya hampir sama saja dengan Google Page Speed, keduanya sama-sama memberikan informasi perbaikan dan tentu saja cara menangani kesalahan. Perbedaan yang mecolok terletak pada pemberian Nilai halaman, jika Google Page Speed berdasarkan pada Score, Yahoo YSlow sendiri berdasarkan pada Grade A-F dimana nilai Grade A adalah nilai terbaik dan Grade F adalah nilai yang terjelek. Seperti saya bilang diatas tentu sulit sekali untuk mencapai nilai sempurna, saran saya cukup diantara Grade B-C saja.


Nah, sekarang terserah rekan saja memilih dari kedua tools diatas, keduanya sama bagusnya. Hemat saya pilih salah satu saja, karena kedua tools diatas sudah pasti memberikan nilai score yang berbeda.

Cara Installasi:
Sebelum mencoba kedua Tools diatas pastikan rekan sudah menginstall firefox plugin untuk Firebug, ok! kalau sudah, silahkan install plugin untuk Google Page Speed dan Yahoo! YSlow. trus ngapain....apa ya?....ya tinggal langsung dicoba aja bro hehehe

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

Need for speed up your blog? Yups, siapa yang tidak ingin halaman blog-nya tampil lebih cepat, pada kenyataannya selain kualitas konten, faktor kecepatan loading page lah yang sangat besar pengaruhnya buat kenyamanan pengunjung. Sudah menjadi sifat dasar manusia dimana menunggu adalah pekerjaan yang sangat membosankan, ini yang harus kita cermati bersama, jangan sampai pengunjung kabur dan pindah ke situs lain hanya karena blog kita sangat lambat ketika dibuka..walaupun itu hanya telat beberapa detik saja. Faktor kecepatan koneksi juga bisa dikatakan sebagai salah satu biang kerok, meskipun kita berpikir halaman blog kita tampil secepat kilat ketika dibuka pada komputer kita sendiri, tapi tidak begitu khan dengan koneksi pengunjung :)

Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat, tentunya cepat dalam batas wajar :)

15 Cara Optimasi Halaman Blog Agar tampil lebih cepat:

1. Aktifkan Kompresi dengan GZIP
Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. Untuk teknik dan tutorial Gzip silahkan disearch aja ya..sudah banyak sekali yang membahasnya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin WP Super Cache.

2. Buang Spasi kosong pada kode HTML
Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya  termasuk juga dalam Inline untuk kode Javascript dan CSS. Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editor seperti Notepat++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atau Delete Surplus Blank Lines.

3. Lakukan Kompresi CSS (Stylesheet)
Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js.

4. Letakan CSS (Stylesheet) di Atas
Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header.

5. Buang CSS (Stylesheet) yang tidak perlu
Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun  tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat!

6. Periksa Validasi CSS (Stylesheet)
Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations

7. Kombinasi CSS (Stylesheet) dalam file External
Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja.  (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal)

8. Lakukan Kompresi Javascript
Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor, Closure Compiler dan JSMin

9. Buang Javascript yang tidak Perlu
Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja!

10. Kombinasi Javascript dalam file External
Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja.  (untuk pengguna blogger jika memungkinkan sebaiknya panggil melalui file internal saja, silahkan baca kembali solusi hosting javasript internal)

11. Lakukan Optimasi Gambar
Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it

12. Jangan Paksa Skala Gambar dalam HTML
Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSS atau dalam tag <Img> seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah 200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya.

13. Hindari Gambar SRC kosong
Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML <img scr=""> atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja.

14. Periksa Kembali Broken link
Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dari W3C Checklink

15. Buang Widget atau plugin yang tidak Perlu
Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender. Tanyakan pada diri kita sendiri apa gunanya memasang jam di blog, jika hanya sebagai penunjuk waktu..trus apa gunanya jam pada taksbar windows? untuk lebih jelas mengenai bahasan ini coba buka kembali catatan lama saya dilink ini 17 tips agar halaman blog tampil profesional

Meningkatkan Traffic Blog Melalui Tweetmeme

Banyak sekali usaha untuk meningkatkan trafik, salah satunya mungkin membagikannya melalui jejaringan sosial twitter. Namun sekedar hanya berbagi artikel melalui twitter sendiri saja tidak cukup lho, tidak masalah kalo list friend di Twitter kita sudah mencapai ribuan follower, tapi kalo cuman 50-100 sepertinya tidak terlalu efektif. Nah, dari pada pusing tiap hari mem-follow orang2 yang gak jelas, apalagi tujuan utama hanya kesedar memperbanyak teman, alangkah baiknya kita meminta bantuan pembaca sendiri untuk membagikan link artikel kita di twitter mereka masing2. Cara yang paling mudah salah satunya bisa dengan memasang button dari Tweetmeme atau Retweet.

Untuk memasang button Tweetmeme ini sangat mudah, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget. Kalo sudah, cari kode yang warna merah dan letakan kode button warna hijau tepat dibawahnya.

<div class='post-header-line-1'/>

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

 
Hampir sama dengan cara diatas, memasang button Retweet ini juga sangat mudah, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget. Kalo sudah, cari kode yang warna merah dan letakan kode button warna hijau tepat dibawahnya.

<div class='post-header-line-1'/>

<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>


Jika ingin ukuran kecil:


<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

Sedikit informasi, Tweetmeme atau Retweet memiliki nilai counter tersendiri untuk menilai seberapa banyak link kita yang telah dibagikan oleh pembaca. kita dapat melihat nilai tersebut langsung pada buttonnya.

Memasang Widget Recent Posts dengan Thumbnail

Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari Bloggertriks.com. Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar. Silahkan lihat samplenya di zoomtemplate.com


Ok tanpa banyak omonk langsung ke tutorial saja yoooo.

Untuk memasang widget ini caranya sangat mudah, kita tinggal copy-paste aja semua kode dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://schemar-mag.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


Apa saja yang perlu diedit?

boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NAMABLOGKAMU.com/ (Ubah sesuai URL blog masing2)

Rekor Mobil Terpanjang di Dunia



Limousine 26 Roda

Mobil terpanjang yang pernah dibuat dengan panjang 30,5 m (100 kaki), limusin 26-roda , dirancang oleh Jay Ohrberg dari Burbank, California, Amerika Serikat. Mobil terpanjang terutama digunakan dalam film dan pameran. Mobil bisa DiKendarai meski agak kaku tapi bagian tengah mobil bisa dibengkokkan.