PageSpeed untuk mempercepat loading website anda

Sunday, February 13, 2011


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...

SHARE THIS POST:
FB Share Twitter Share
Untuk langsung menjalankan kode-kode HTML atau javascript, anda bisa menggunakan TryIt editor.

Click to open

Kunjungi juga blog saya yang lain di Online tutorial

1 comments:

Klik Sekali said...

Wah saya baru ngerti optimasi gambar, yang lainnya belum.. masih harus banyak belajar nih, terimakasih.

Post a Comment