Performance Profiling: Frontend and Backend
Web browser: Satu tempat untuk performance profiling frontend dan backend. — Yudhistira Erlandinata
Pertama-tami, izinkan saya untuk memanjatkan puji dan syukur kepada para pengembang Mozilla Firefox dan Chrome yang telah mengikutsertakan alat yang dapat digunakan untuk performance profiling frontend dan backend. Tanpa ide untuk mengikutsertakan profiling tools pada browser, mungkin kita para pengembang aplikasi web harus menggunakan command-line tools yang berbeda-beda untuk profiling masing-masing frontend dan backend.
Asset Loading Inspection
Dari sisi jaringan kita dapat melihat bahwa proses paling lama adalah proses pemuatan gambar yang dapat memakan waktu hingga 1 detik. Bahkan kami sudah menggunakan storage cepat dan mahal Google Cloud Storage, dapat dilihat sendiri domain name sumber gambar yang digunakan pada gambar 1. Ini artinya, memang ukuran gambar yang kami gunakan masih terlalu besar. Kami bisa optimalkan dengan kompresi gambar yang lebih baik lagi.
Script Loading Inspection
Proses pemuatan javascript pada umumnya waktu yang singkat, yaitu kurang dari 0.1 detik. Hanya ada satu script yang waktu pemuatannya butuh sampai 0.15 detik, ini disebabkan oleh ukuran script yang besar.
Proses pemuatan script javascript sangat penting kecepatannya karena semakin lama script dimuat, maka semakin lama pengguna aplikasi web melihat “halaman putih” atau “broken app”.
Backend Speed Inspection
Kecepatan backend kami masih agak disayangkan karena butuh waktu hingga 1 detik untuk memuat satu halaman job listing yang terdiri dari 10 data pekerjaan. Untuk sementara, kami masih bisa merasa tenang karena profiling tersebut dilakukan pada server staging yang disediakan oleh Fasilkom UI yang kebetulan digunakan beramai-ramai untuk mengembangkan banyak aplikasi lain. Kami punya dugaan bahwa apabila backend dideploy di tempat lain, kecepatannya akan lebih baik lagi.
Frontend Rendering Profiling
Gambar 4 menunjukkan performa rendering untuk halaman cari kerja. Sejauh ini, halaman cari kerja adalah satu-satunya halaman yang paling berat kerjanya karena butuh pemanggilan API, handing input form, dan rendering data pekerjaan secara asynchronous. Dilihat dari gambar 4, tidak ada proses rendering yang memakan waktu lama. Proses rendering yang memakan waktu lama ditandai dengan ‘progress bar’ yang panjang. Hal terpenting dari performa rendering adalah framerate.
Framerate optimum adalah 60 FPS, artinya dalam satu detik, layar menampilkan 60 gambar berbdea. 60 FPS juga merupakan batas atas kemampuan rendering yang bisa dilakukan oleh monitor pada umumnya, termasuk monitor laptop, komputer, dan smartphone. Framerate rendering halaman cari kerja yang kami buat adalah 56.03 FPS rata-ratanya. Ini berarti tidak ada masalah performa rendering.
Update: WebPageTest
Profiler online webpagetest.org digunakan untuk mengukur performa aplikasi web seolah-olah dari end user.
Kesimpulan
Alat profiling yang disediakan oleh web browser sudah sangat baik dalam pengukuran performa frontend. Akan tetapi, untuk kasus backend masih kurang, karena kita tidak dapat mensimulasikan request yang banyak — stress test. Namun sebenarnya ini sudah sangat cukup sebagai gambaran kasar terkait performa backend. Apabila ada kesalahan fatal dari backend, alat profiling yang disediakan oleh web browser sudah sangat cukup untuk mendeteksinya.
Bonus: Post-Refactor Performance
Pada blog post lain, dibahas tentang hal apa saja yang dapat direfactor dan bagaimana caranya. Tentunya dilakukan pengujian apakah refactoring tersebut memberi pengaruh baik atau buruk terhadap performance. Rangkuman perubahan performance dijelaskan pada tabel berikut.
Pada frontend, yang direfactor hanyalah mekanisme pemuatan gambar. Setidaknya, waktu yang dibutuhkan untuk memuat gambar menjadi lebih cepat. Walau begitu, secara keseluruhan tidak terlalu berpengaruh.
Pada backend, refactoring hanya mengubah bagian kode yang repetitif menjadi tidak repetitif. Dengan kata lain, untuk menerapkan prinsip DRY. Tentunya ini tidak berpengaruh terhadap performa backend sama sekali.
