Melakukan Simple Profiling Sebuah Website

Profiling adalah proses analisis sebuah program untuk mengukur beberapa parameter seperti memory atau kompleksitas.

Dalam kesempatan kali ini penulis akan mencoba untuk melakukan profiling pada projek https://hqo-frontend.netlify.app/ dimana akan lebih difoukuskan dari sudut pandang front-end

Tools yang digunakan adalah Firefox Profiler yang dapat dilihat disini profiler.firefox.com dan untuk guide dan dokumentasinya dapat diakses di profiler.firefox.com/docs/

Profiling

Akses hasil capture profile disini: https://perfht.ml/2Y95v5h

Call Tree Panel

Mari kita lihat apa informasi yang bisa didapat dari capture profile diatas. Pertama ada graph timeline yang menunjukkan apa yang terjadi dalam suatu proses.

Lalu ada panel-panel yang menjelaskan beberapa hal, seperti gambar diatas yang menunjukkan panel Call Tree dimana kita bisa mendapat informasi proses-proses root dan banyak child proses yang dipanggil

Flame Graph Panel

Di panel ini kita dapat melihat flame graph. Flame graph adalah visualisasi stack trace sehingga dapat dengan mudah mengidentifikasi

Stack Chart Panel

Marker Chart Panel

Marker Table Panel

Network Panel

Semoga artikel ini dapat membantu memberikan gambaran untuk profiling,

Selamat Jumpa