Technology

10 Tips Optimasi Performa Website

 

Loading...

Nah para pemilik website. Sambil menikmati kopi siang, tugas anda hari ini adalah meningkatkan kecepatan website anda. Sebab kecepatan website bisa dibilang sangat berpengaruh pada tingkat Bounce Rate pengunjung terhadap website anda. Kali ini, tim developer JagoanWeb.com telah menyusun 10 poin yang dapat anda lakukan sendiri (bersama developer anda).

Minimalkan HTTP Requests

80% waktu respon sebuah website dihabiskan pada front-end. Kebanyakan untuk mendownload semua komponen yang akan ditampilkan di halaman anda, misalnya gambar, Flash, Javascript, CSS, PHP, HTML, dsb. Dengan mengurangi jumlah komponen yang harus didownload, anda mengurangi jumlah HTTP Request yang diperlukan oleh website anda. Salah satunya dengan menyederhanakan desain halaman anda. Selain itu, anda juga bisa mencoba metode berikut:

1. Menggabungkan file. Misalnya dengan menyatukan semua CSS anda ke dalam sebuah single stylesheet. Dengan demikian setiap proses HTTP, browser hanya perlu merequest 1 CSS saja.
2. Teknik CSS sprites. Yaitu menggabungkan semua background image anda ke dalam sebuah single image yang penggunaannya didefinisikan melalui property CSS background-image dan background-position.

Optimasi CSS Sprites

CSS Sprite adalah gambar gabungan dari semua icon anda (lihat keterangan di atas). Anda bisa optimasi CSS Sprite agar ukurannya lebih kecil. Salah satunya dengan menyusun image di dalamnya secara horizontal. Kemudian anda bisa juga menggabungkan warna-warna yang sama dalam satu CSS sprite untuk menjaga perhitungan warna tetap rendah. Idealnya di bawah 256 warna agar bisa pas dengan format PNG8. Terakhir jangan tinggalkan gap yang terlalu lebar antara image-image di CSS sprite anda agar bisa lebih mobile friendly. Hal ini akan mengurangi memory yang diperlukan sebuah user-agent untuk melakukan dekompresi gambar ke dalam pixel. Bayangkan jika gambar 100×100 sama dengan 10 ribu pixel, maka 1000×1000 sama dengan 1 juta pixel.

Optimasi Gambar

Setelah desainer selesai membuat gambar untuk halaman anda, ada beberapa hal yang bisa anda lakukan sebelum mengirim gambar tersebut ke server melalui FTP. Di antaranya:

1. Konversi GIF ke PNG (PNG8) dan lihatlah apakah ukuran file nya bisa dihemat. Biasanya bisa. Gunakan imagemagick (http://imagemagick.org) untuk optimasi.
2. Gunakan tools optimasi seperti pngcrush (http://pmt.sourceforge.net/pngcrush/) pada semua file PNG anda.
3. Jalankan jpegtran (perintah UNIX) pada semua JPEG anda. Perintah ini bisa melakukan optimasi ukuran JPEG anda dengan membuang semua atribut dan informasi yang tidak diperlukan.

Hindari Scale Gambar di HTML

Jangan upload gambar yang lebih besar dari yang anda butuhkan meskipun anda bisa mengatur atributnya lewat HTML. Jika anda butuh sebuah gambar dengan atribut <img width=”100″ height=”100″ src=”abc.jpg” alt=”ABC” /> maka lebih baik jadikan gambar anda (abc.jpg) berukuran 100×100 pixel dulu daripada memaksa user agent untuk melakukan scale down dari gambar yang berukuran 500×500 pixel.

Jadikan favicon.ico Anda Kecil

Gambar favicon.ico pasti letaknya di root server anda. Meskipun kecil dan seringkali diabaikan, favicon ternyata bisa mengganggu urutan download anda. Contohnya di IE. Ketika user-agent anda meminta komponen tambahan pada proses loading, favicon akan di-download dulu sebelum komponen tambahan tersebut. Untuk meredam efek negatif penggunakan favicon, pastikan favicon anda berukuran di bawah 1K. Gunakan imagemagick (http://imagemagick.org) untuk optimasi.

Definisikan Stylesheets di Bagian HEAD Script Anda

Memindahkan stylesheets agar didefinisikan pada bagian HEAD dari script anda bisa membuat halaman anda nampak lebih cepat ditampilkan. Sebab hal ini memungkinkan user-agent melakukan render halaman secara paralel. Ketika browser menampilkan halaman secara paralel, maka header, navigation bar, logo, dsb, semuanya akan berperan sebagai respon yang bisa menjaga agar user mau menunggu halaman anda tampil sepenuhnya. Strategi ini pas diterapkan untuk halaman dengan banyak konten, dan untuk user dengan koneksi Internet yang lambat.

Taruh Javascript di Bagian Bawah Script Anda

Problem yang disebabkan oleh Javascript adalah mereka memblok download secara paralel. Makanya ketika sebuah Javascript sedang didownload, browser tidak akan mulai mendownload konten yang lain. Maka pindahkan JavaScript anda ke bagian bawah halaman jika nyatanya Javascript anda kurang responsif.

Taruh Javascript dan CSS Terpisah dari Script Anda

Javascript dan CSS yang diletakkan jadi satu (inline) dengan script HTML akan didownload berulang kali setiap dokumen HTML akan ditampilkan. Dengan cara ini, jumlah HTTP requests memang bisa dikurangi. Namun ukuran dokumen HTML anda akan bertambah. Di lain pihak, jika Javascript dan CSS ditaruh pada file yang terpisah dari dokumen HTML, anda memang akan menambah jumlah HTTP request. Namun file eksternal yang berisi Javascript / CSS ini bisa di-cache oleh browser sehingga tidak perlu di-download untuk kedua kalinya jika halaman tersebut ingin ditampilkan.

Hindari Penggunaan CSS Expressions

CSS expressions adalah salah satu cara yang ampuh (dan berbahaya) agar property CSS bisa tampil dengan dinamis. Misalnya dengan CSS expressions berikut, warna background bisa diset berubah-ubah setiap jam:

background-color: expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );

Metode CSS expressions di atas memanfaatkan JavaScript. Property CSS diatur dengan mengevaluasi ekspresi JavaScript yang didefinisikan. Masalahnya adalah CSS expressions tersebut akan dievaluasi lebih sering daripada yang bisa dibayangkan. Bukan hanya ketika halaman di-render atau di-resize saja, tapi juga ketika halaman di-scroll dan ketika user menggeser mouse. Menggeser mouse di sekeliling halaman saja bisa menghasilkan lebih dari 10,000 kali evaluasi. Makanya, jika property CSS anda memang harus ditampilkan secara dinamis, daripada dengan CSS expressions, gunakan saja metode Event Handler.

Optimasi Javascript dan CSS

Proses optimasi Javascript dan CSS berhubungan dengan praktek penghapusan karakter, kode, comment, spasi, baris baru, tab margin, dsb yang tidak diperlukan oleh Javascript / CSS anda. Tujuannya agar ukuran file-nya bisa jadi lebih kecil. Hal ini bisa meningkatkan waktu respon sebab ukuran file yang harus di-download jadi berkurang. Untuk melakukan optimasi, anda bisa menggunakan software seperti JSMIN (http://crockford.com/javascript/jsmin) untuk menunjukkan letak-letak optimasi yang memungkinkan pada JavaScript anda, dan YUI Compressor (http://developer.yahoo.com/yui/compressor/) untuk CSS anda.

Mari belajar dari Amazon.com. Setiap paginya, Jeff Bezos – sang founder Amazon.com, rutin menggelar sesi coffee morning dengan tim IT untuk membandingkan kecepatan website mereka dengan kompetitor. Sebab dia sadar bahwa jika website merupakan senjata utama Amazon, maka kecepatan merupakan ujung tombaknya. Sepenting itulah kecepatan website sehingga anda pun tidak boleh serta merta mengabaikannya. [Taufik]

Loading...

3 komentar

  • 19 Mei 2013 - pukul 15:23

    kalo optimasi buat web joomla apa gan ?

  • 17 Desember 2014 - pukul 0:43

    Benar sekali. Website yang lambat akan membuat user bosan. Hanya buka 2 atau bahkan 1 halaman dan keluar. Akibatnya bounce rate bisa tinggi.

  • 24 Februari 2015 - pukul 9:24

    MAKASIH INFONYA GAN…

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *