Semuanya dimulai dari ketika saya membuka analisa kecepatan dari keseluruhan halaman blog. Cek hasilnya:

Seluruh waktu rata-rata di bawah 1 detik, kecuali avg. page load time!

Rata-rata waktu page load mencapai 47.54 detik! Bagi saya, waktu penampilan halaman yang sebesar itu adalah sebuah dosa besar. Bayangkan, orang-orang perlu menunggu hampir 1 menit hanya untuk membaca tulisan pada blog ini!

Karena saya sendiri tidak ingin menunggu lama untuk membaca satu tulisan dalam website, maka saya pun segera melakukan optimasi untuk meningkatkan kecepatan blog. Apa saja yang saya lakukan untuk meningkatkan page load? Mari kita lihat.

Profile, Profile, Profile!

Sesuai dengan kata Donald Knuth mengenai optimasi:

Premature optimization is the root of all evil.

Donald Knuth

Melakukan optimasi tanpa adanya pengukuran adalah hal yang tidak baik. Idealnya, kita harus melakukan pengukuran terlebih dahulu agar kita dapat mengetahui bagian mana dari website atau aplikasi yang memakan paling banyak waktu.

Karena waktu penampilan yang sangat ekstrim, insting saya berkata bahwa permasalahan ini akan dapat dilihat dengan mudah. “Pasti terdapat banyak tempat yang lambat dan perlu dioptimasi kalau sampai selambat ini.” katanya.

Dan saya pun mendengarkan kata-kata si insting. Langkah pertama yang saya lakukan adalah menggunakan Chrome Developer Tools untuk melihat performa jaringan. Karena tidak berpikir untuk menulis pada awalnya, maka saya tidak menyimpan profil optimasi awal yang didapatkan. Maaf :(

Catatan: Tools lain yang cukup populer untuk melakukan hal ini misalnya YSlow dari Yahoo. YSlow melakukan analisa kecepatan halaman dan juga memberikan saran apa yang harus dilakukan untuk meningkatkan kecepatan.

Kesimpulan yang saya dapatkan dari melihat profil ini adalah sebagai berikut:

  1. Mayoritas waktu dihabiskan untuk melakukan download halaman utama. Waktu load tidak terlalu tinggi jika halaman yang dibuka adalah langsung pada halmaan tulisan.
  2. Waktu yang cukup banyak juga dihabiskan untuk melakukan download berbagai kode javascript eksternal seperti analytics, iklan, ataupun prettify.
  3. Terlalu banyak http request harus dibuat karena terdapat banyak (total 9) file CSS dan Javascript yang saya gunakan untuk berbagai fitur blog.

Berbagai kesimpulan ini dapat dilihat dengan membaca dokumentasi yang telah saya link-kan di atas. Untuk detil penggunaan, mungkin akan dituliskan pada postingan berikutnya. Untuk sekarang, dengan mengidentifikasikan tiga masalah tersebut maka kita dapat segera melihat apa yang harus dipotong untuk meningkatkan waktu load halaman.

Optimasi 1: Ukuran Halaman

Yang pertama kali harus dikecilkan tentunya adalah ukuran halaman. Pada versi blog sebelumnya, halaman utama menampilkan 5 buah tulisan terakhir. Seluruh isi 5 tulisan terakhir. Saya tidak ingat lagi apa yang membuat hal tersebut terasa sebagai ide baik, tapi pastinya ini adalah ide yang sangat, sangat buruk.

Sebagai pembanding, versi pertama dari blog menampilkan hanya paragraf pertama dari 5 post terakhir. Mengingat tulisan saya yang umumnya panjang, menampilkan seluruh tulisan sudah pasti bukan ide baik. Solusi yang saya terapkan untuk hal ini adalah dengan hanya menampilkan satu tulisan terakhir. Jika ingin mencari daftar tulisan lama, pembaca dapat menggunakan fitur pencarian ataupun filter yang ada. Toh saya belum tidak terlalu banyak menulis.

Menampilkan hanya satu tulisan utama juga memiliki keuntungan, yaitu secara tidak langsung hal ini akan memaksa saya untuk meningkatkan kualitas tulisan. Jika satu-satunya tulisan yang nampak tidak berkualitas, tentunya pembaca akan malas datang lagi.

Optimasi 2: Jumlah HTTP Request

Setelah mengecilkan ukuran halaman awal, tentunya saya juga harus melakukan optimasi terhadap jumlah HTTP Request yang diperlukan untuk menampilkan satu halaman. 9 file javascript dan 4 file CSS terlalu banyak, belum lagi ditambahkan dengan berbagai file lain dari luar domain.

Untuk memotong jumlah request ini, saya hanya melakukan satu hal sederhana: menggabungkan seluruh file Javascript menjadi satu, dan file CSS menjadi satu. Dengan melakukan hal ini, otomatis jumlah request menjadi hanya dua saja, satu untuk CSS dan satu untuk Javascript.

Penggabungan ini saya lakukan dengan menambahkan satu langkah pada proses build saya. GruntJS saya gunakan untuk melakukan minifikasi kode dan penggabungan berbagai kode tersebut, sehingga sekarang hanya dibutuhkan dua request untuk mengambil seluruh Javascript dan CSS yang dibutuhkan.

Sampai titik ini, load time dari blog ini telah berkurang dari 47 detik menjadi 2 detik. Amazing! Saya benar-benar tercengang melihat hasil optimasi sederhana ini. Melihat peningkatan ini, semangat untuk sedikit mengoptimasi lagi menjadi bertambah, sehingga melahirkan tahap optimasi ketiga :D

Optimasi 3: Kompresi Gzip

Teknik ini telah lama saya dengar, tetapi belum sempat mencoba implementasinya. Karena sudah terlanjur melakukan optimasi, maka sekaligus saya lakukan optimasi ini. Kompresi GZip sendiri merupakan teknik optimasi di mana kita menyuruh web server untuk melakukan kompresi terhadap data yang dikirimkan menjadi lebih kecil, dan tentunya lebih cepat. Cara implementasinya berbeda-beda tergantung dengan web server yang digunakan. Berikut adalah tutorial implementasi dengan nginx.

Akhir Kata

Hanya dengan tiga tahap optimasi ini saja, saya berhasil menurunkan page load dari ~47 detik menjadi ~900ms. Jika memiliki masalah performa dengan web anda, silahkan coba terapkan tiga langkah optimasi sederhana ini sebelum mulai mencoba optimasi lain-lain (contoh: optimasi kode backend). Kalau ada yang simple dan efektif, kenapa harus cari yang ribet?

comments powered by Disqus

Daftar Isi