Mengurangi Overdraw di aplikasi KasKus

Di aplikasi Kaskus yang baru, saya berusaha lebih jauh untuk meningkatkan performa aplikasi dengan memastikan semua halaman tidak overdraw sampai dengan 3x. Hal ini berawal dari tulisan Romain Guy di sini yang membahas tentang overdraw di aplikasi Falcon Pro. Dan setelah saya mendapatkan rizki buat beli device baru (Nexus 5) saya akhirnya bisa melihat seberapa parah overdraw yang ada di aplikasi KasKus. Akhirnya dengan sedikit tweak di beberapa tempat saya berhasil membuat semua halaman di aplikasi KasKus tidak overdraw sampai 3x.

Kondisi awal aplikasi dan setelah diimprove dapat dilihat dari screenshot berikut:

overdraw parah sekali    overdraw sudah sangat minim

Mengutip tulisan Romain Guy, aturan dasar tentang overdraw ini bisa disimpulkan seperti berikut:

  • No color means there is no overdraw. The pixel was painted only once. In this example, you can see that the background is intact.

  • Blue indicates an overdraw of 1x. The pixel was painted twice. Large blue areas are acceptable (if the entire window is blue, you can get rid of one layer.)

  • Green indicates an overdraw of 2x. The pixel was painted three times. Medium-sized green areas are acceptable but you should try to optimize them away.

  • Light red indicates an overdraw of 3x. The pixel was painted four times. Small light red areas are acceptable.

  • Dark red indicates an overdraw of 4x or more. The pixel was painted 5 times or more. This is wrong. Fix it.

jadi, secara umum overdraw ~2x masih lumayan bagus. Apa saja yang saya lakukan untuk mengurangi overdraw ini:

  1. Menghapus semua background (drawable/color) yang redundant; misalnya, background selector sebuah view secara default selalu transparent/tidak ada background agar warna latar belakang yang tampak.
  2. Mengurangi jumlah view. Dalam pengerjaan layout aplikasi, setelah satau halaman selesai; saya di bantu oleh kolega kantor yang mendisain aplikasi untuk menentukan detail-detail di layout tersebut (misal color, padding, aksesoris lain); kadang ini menyebabkan hierarki view-nya jadi lebih dalam dan tidak flat lagi; maka setelah dia menyelesaikan detilnya, saya melakukan review ulang untuk membuat hierarki view-nya lebih flat. Di sini, Compound drawable sangat banyak membantu saya.
  3. Revisit beberapa view library; saya juga melihat dan mengubah view library yang saya gunakan agar tidak terjadi overdraw

Sebenarnya masih banyak yang harus di improve, disamping View/layout nya, masalah network adalah PR besar yang harus segera dikerjakan untuk meningkatkan performa aplikasi ini. Karena memang network ini seringkali yang jadi masalah di aplikasi ini. tapi ini benar-benar menarik sekali.

oh by the way, Kaskus baru redesign ui nih, sudah nyoba belum: http://kaskus.co.id/ aplikasi versi barunya segera akan live di Google Play

happy coding :)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s